今回はVue3でHeadタグ内のtitleやmetaタグなどの要素をページごとに動的に変更したいという記事です。

動機：SPAでもheadタグを動的に変更したい

VueでSPAを作る場合、Vueが動的に仮想DOMを生成するのはbodyタグ内のみなので、それより外の部分であるheadタグはVueの影響範囲外となり、カスタマイズできません。

この結果、全てのページでHeadタグの中身が同一となってしまい、ページごとに変わる筈のtitleやdescriptionと言った要素が不変となりユーザビリティが低下してしまいます。またSEO的にもheadのmetaタグの内容は動的に変更したいものです。

Vue2で使えたプラグインが使えない

ネットで調べるとVue.jsのheadタグのtitleやmetaタグを書き換える方法としてはvue-headというプラグインの記事がよく出てくるのですが、このプラグインはVue2.xまでしかサポートしていないようです（githubにVue3の情報が見当たらない）。そこで何とかならないかと探したところunheadというhead管理用のプラグインを見つけました。

@unhead/vueのインストール

では@unhead/vueをインストールしましょう。Vue3とともにunheadを使用する方法はセットアップガイドを一読することをおすすめします。

npmの場合は以下のコマンドでインストールします。

npm -i @unhead/vue

yarn派の方は以下です。

yarn add @unhead/vue

@unhead/vueを使うための準備

まずプラグインをVueアプリに登録します。以下のように

import { createApp } from 'vue'
import { createHead } from '@unhead/vue'

const app = createApp()

const head = createHead()
app.use(head)

app.mount('#app')

もしCompsition APIのスタイルで書いていく場合はこれで準備完了です。Option APIスタイルの場合は後述のmixinの登録を行って下さい。

Vue3のOption APIではmixinの登録が必要

unheadはVue3ではCompositon APIで書かれることが想定されており、Option API向けの機能はVue2用しか提供されていません。そこでVue3のOption APIでunheadを使用する場合には以下のようにmixinを導入する必要があります。

import { createApp } from 'vue'
import { VueHeadMixin, createHead } from '@unhead/vue'

const app = createApp()
const head = createHead()
app.mixin(VueHeadMixin)
// ...

使い方

Composition API

Compsition APIではuseHead関数を使います。useHead関数の第一引数に変更したいheadタグの中身をオブジェクトとして入れます。第２引数には第一引数で渡した全てのタグにオプションを適用する場合に使います。以下にheadタグを書き換えるサンプルを示します。

<script setup lang=ts>
import { useHead } from '@unhead/vue'

useHead({
  title: 'KURO DIGITAL LOG',
  meta: [
    {
      name: "discription",
      content: "WEB制作やプログラミングについて語るブログです",
    },
  ],
  script: [
    {
      src: '/hoge/hoge.js',
      tagPosition: 'bodyClose'
    },
  ],
})
</script>

ここではuseHead関数に第１引数のみ渡しています。scriptの部分でtagPositionというオプションでbodyCloseを渡しています。これはheadタグ内ではなくbodyタグの終わりにscriptタグを付与するという意味です。このようにオプションをつけることで単純にhead内のタグを書き換えるだけでない挙動をさせることができます。オプションについては公式ページが役に立ちます。

Option API

Option APIの場合はheadメソッドで定義していきます。前述のmixinの登録を忘れないようにして下さい。以下がサンプルコードになります。

<script>
export default {
  head() {
    return {
      title: 'KURO DIGITAL LOG',
      meta: [
        {
          name: "discription",
          content: "WEB制作やプログラミングについて語るブログです",
        },
      ],
      script: [
        {
          src: '/hoge/hoge.js',
          tagPosition: 'bodyClose'
        },
      ],
    }
  }
  ...
}
</script>

<template>
...
</template>

まとめ

VueでHeadタグを内容を変更する方法はVue2の情報は出てくるのですが、Vue3ではなかなか見当たらず時間を割いてしまいました。この記事が何かのお役に立てば幸いです。