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

Tweet

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」とだけ表示される。

参考

重複したメタタグ - Nuxt.js