Nuxt.js titleタグを各ページごとに「サイト名 + 任意の文字列」に設定

2020.01.01
nuxt.js
nuxt.js, title

共通のタイトルを設定して、各ページごとに動的にタイトル設定したかったので、手順を記載します。

1. 環境
2. nuxt.config.js編集
3. ページ編集

環境

OS ubuntu19.10
node v12.13.0
npm 6.12.1
Nuxt.js v2.10.2

nuxt.config.js編集

nuxt.config.jsのheadを編集すれば、動的にtitleの内容を変更することが可能になります。

head: {
    //title: process.env.npm_package_name || '',
    titleTemplate:  'サイト名 mebee | %s',

head: {

//title: process.env.npm_package_name || '',

titleTemplate: 'サイト名 mebee | %s',

ページ編集

今回は、pages配下にtitle.vueというファイルを下記のコード作成します。

<template>
  <div>
    <p>title test</p>
  </div>
</template>

<script>
export default {
  head() {
    return {
      // nuxt.config.jsの%sに反映される内容
      title: 'タイトルタグのテストページ'
    }
  }
}
</script>

<div>

<p>title test</p>

</div>

</template>

export default {

head() {

return {

// nuxt.config.jsの%sに反映される内容

title: 'タイトルタグのテストページ'

}

</script>

ブラウザから http://プライベートIP:3000/title にアクセスして、titleタグを確認すると「サイト名 mebee」＋「コード内で指定したtitle:の文字列」が表示されます。

また、titleTemplateが必要でないページの場合は、下記のようにコード内でtitleTemplateを上書きしてやれば表示されなくなります。

<script>
export default {
  head() {
    return {
      title: 'タイトルタグのテストページ',
      titleTemplate: ''
    }
  }
}
</script>

export default {

head() {

return {

title: 'タイトルタグのテストページ',

titleTemplate: ''

}

</script>

表示されなくなる。

Nuxt.js titleタグを各ページごとに「サイト名 + 任意の文字列」に設定

環境

nuxt.config.js編集

ページ編集

Ubuntu19.10にGatsby.jsをインストールして利用してみる 2019.12.31

CentOs8にphp7.3をインストールする 2020.01.02