nuxtでtitleタグを動的に設定する

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