😊
[Nuxt.js] layouts/default.vueでheadのtitleをpathごとに動的に設定する
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