[Nuxt.js] layouts/default.vueでheadのtitleをpathごとに動的に設定する

設定方法

headのタイトルをパスごとに切り替えたいけど、pages/**/*.vueのすべてに書いていくのはつらいケースがあると思います。そんなときはlayouts/default.vueで一発で切り替えちゃいましょう。

layouts/default.vue

<template>
  <nuxt />
</template>

<script>
export default {
  methods: {
    pageTitle () {
      if (this.$route.path.match(/^\/$/)) {
        return 'Dashboard'
      } else if (this.$route.path.match(/^\/setting.*/)) {
        return 'Setting'
      }
      return ''
    }
  },
  head () {
    return {
      title: this.pageTitle(),
      titleTemplate: '%s - App Name'
    }
  }
}
</script>

備忘ですが、参考になれば幸いです。