Nuxt.js初心者がtitleタグをページ毎に設定できるようになる物語

何も知らない超初心者が脱WordPressしたくてNuxt.jsでサイト構築していくシリーズです。

今回はhead内のtitleタグをページ毎に自由に設定できるようになりたいと思います。

WordPressの上でな！

※ このブログはWordPress製です

あ、僕はVue.jsはもちろんJavaScriptすら分かってないポンコツです。

結果的に思った動作をさせることはできましたが、おかしなこといっぱい書いていると思うのであしからず…。

このページの目次

head内を操作するのは「vue-meta」というモジュール

Nuxt.jsにはhead内をいじくるモジュール「vue-meta」というのがあり、これはデフォルトでインストールされているようでした。

「node_modules」フォルダ内に「vue-meta」フォルダを確認できます。

titleタグに限らずhead内をいじくりまわせるので、このシリーズでは何度も登場します。

Nuxt.js公式マニュアルによると「nuxt.config.js」内にサンプルがあるそうなのでさっそく確認。


export default {
  (略)
  head: {
    title: process. env. npm_package_name || '',
    (略)
  },
  (略)
}

headのtitleに「process. env. npm_package_name」という変数を代入。「npm_package_name」が未定義なら空の文字列を代入。

で、合ってるでしょうか。

「process. env. npm_package_name」が何なのかはまだ分かっていませんが、雰囲気的に「package. json」内の「name」のことかな？

現在は「name」の値がtitleタグに設定されています。

「package.json」の「name」を「nuxt-test」から「package.json」へ変更して保存…。

あれ、更新が検知されない…。

サイトの方を確認してみてもtitleタグは「nuxt-test」のままです。

ターミナルをCtrl+Cで待機画面に戻し、再度「npm run dev」。

すると無事にtitleタグが「package.json」へと変更されました。

ここから分かることは…

僕にとって未知の変数があったせいでちょっとややこしかったですが、要はこう↓です。


export default {
  head: {
    title: (文字列),
  },
}

なので任意のページのvueファイル(index.vueとか)のscriptタグ内に上記のコードを追加します。


<script>

export default {
  head: {
    title: 'タイトル設定のテスト',
  },
}

</script>

結果はこう↓。


<title>タイトル設定のテスト</title>

package. jsonの場合と違い、ちゃんとファイル更新を検知してくれて、自動で反映されました。

ハードコードはトラブルの元なので、タイトル名だけ先に定義してしまうならこう↓。


<script>

const title_name = 'タイトル設定のテスト'

export default {
  head: {
    title: title_name,
  },
}

</script>

JavaScriptもろくすっぽ分からんくせにTypeScriptでやっていこうとしているのでTypeScript版のtitle変更の書き方のお勉強。


<script lang="ts";>

import Vue from 'vue'

export default Vue.extend({
  head: {
    title: 'タイトル設定のテスト',
  },
})

</script>

違っているのは3箇所。

「lang="ts&quot」。
これは「JavaScriptじゃなくてTypeScriptで書いてますよー」という宣言でしょう。

「import Vue from 'vue'」
これは…次の型指定のための型のインポート？
削除するとこんな↓エラーが出ました。


'Vue' refers to a UMD global, but the current file is a module. Consider adding an import instead.

よく分かりませんがインポートしてくださいと言っているのでインポートしないといけないんでしょう。とりあえず書かないといけないんだと理解しておきます。

最後に「Vue.extend」
これが噂のTypeScriptの型指定なのかな。 Vueというクラス…？の継承クラス…？でこの関数の戻り値を返すよ…？

このあたりもどこかでしっかり勉強しないといけないですね…。

各ページのvueファイル(index.vueとか)内でtitleタグを書き換える方法はscriptタグに以下のコードを追加する！


export default {
  head: {
    title: (タイトル名),
  },
}

実はこの書き方はNuxt.js公式マニュアルによると「headプロパティ」という書き方らしくて、もうひとつ「headメソッド」という書き方があります。

これを知らなかったせいで僕は血反吐を吐くことになるのですが、それはもうちょっと先のお話。

以上、WordPressからお届けしました！

Nuxt.js HEADタグ操作編の目次