😊

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

2021/09/22に公開

headのタイトルをパスごとに切り替えたいけど、pages/**/*.vueのすべてに書いていくのはつらいケースがあると思います。そんなときはlayouts/default.vueで一発で切り替えちゃいましょう。
pageTitleで正規表現でマッチしたページごとのページ名を取得できるようにして、headでtitleとtitleTemplateを定義して返すようにするとページ名+アプリ名で切り替えて表示できるようになります。

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>

Discussion