Nuxt.jsでtitleタグを動的に設定する

Nuxt.jsで構築した動的Webアプリでページごとにtitleタグを可変にする方法。
nuxt.config.jsにtitleTemplate設定 + 対象のページにtitle文言設定で対応できます。

// nuxt.config.js
export default {
mode: 'universal',
/*
  ** Headers of the page
  */
head: {
titleTemplate: '%s | kubou.net',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},

// 対象ページ.vue
export default {
head() {
return {
title: 'markdown変換'
}
},

これで「markdown変換 | kubou.net」という文字列がtitleタグに出力されます。
適用したWebアプリはこれです。
https://tools.kubou.net/change-md/