Nuxtでheadタグ内の設定をしたい場合は、nuxt.config.jsの中に記述します。
1
2
3
|
head: {
title: 'polidog.jp'
}
|
あと、titleTemplateってのがあって
1
2
3
|
head: {
titleTemplate: ' | polidog.jp'
}
|
とかテンプレート設定をすることができる。
じゃあどこで、動的にtitleタグを設定するかというとpageで設定できる。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 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メソッド無理やり上書きしてしまえば良い。
1
2
3
4
5
6
7
8
9
10
11
|
// pages/index.js
<script>
export default {
head() {
return {
title: 'index',
titleTemplate: ''
}
}
}
</script>
|
これでtitleタグは「index」とだけ表示される。
参考
重複したメタタグ - Nuxt.js
