2018年06月16日
nuxtでtitleタグを動的に設定する
Nuxtでheadタグ内の設定をしたい場合は、nuxt.config.jsの中に記述します。
head: {
title: 'polidog.jp'
}
あと、titleTemplateってのがあって
head: {
titleTemplate: ' | polidog.jp'
}
とかテンプレート設定をすることができる。
じゃあどこで、動的にtitleタグを設定するかというとpageで設定できる。
// pages/index.js
<template>
<div>
<p>Hello, nuxt</p>
</div>
</template>
<script>
export default {
head() {
return {
title: 'index'
}
}
}
</script>
Titleタグに「index | polidog.jp」みたいな感じで表示されるようになる。
titleTemplateが邪魔になる場合の対処法
headメソッド無理やり上書きしてしまえば良い。
// pages/index.js
<script>
export default {
head() {
return {
title: 'index',
titleTemplate: ''
}
}
}
</script>
これでtitleタグは「index」とだけ表示される。