Vue Meta Plugin を使って title 要素を制御する

Vue + Vue Router を使用した一般的なアプリケーションにおいて、各画面毎に <title> 要素を設定する場合、 mounted() などに document.title を設定しても良いのですが、手続き的ではなく宣言的に設定出来ないかと思い 調査したところ、Vue Meta という Vue プラグインが見つかりましたので、使ってみました。

Nuxt.js の一部として組み込まれているもののようなので、安定性や保守性にも期待出来るところです。

使用方法

ドキュメント通りですが、以下のようにパッケージインストールして、

$ npm i vue-meta

Vue のプラグインとして組み込みます。 例えば、以下の内容を反映させる形で main.js を修正します。

https://github.com/teknocat/veevalidate-test/blob/master/src/main.js

import Vue from 'vue'
import VueMeta from 'vue-meta'

Vue.use(VueMeta)

あとは .vue ファイルに metaInfo プロパティを設定するだけです。

いつものプロジェクトの App.vue に組み込む場合、こんな感じになります。

https://github.com/teknocat/veevalidate-test/blob/master/src/App.vue

<template>
    :
</template>
<script>
    :
export default {
  name: 'App',
  metaInfo: {
    title: 'Vue Meta Test App',
  },
    :
}
</script>

ブラウザのタブなどに設定したタイトルが表示されれば OK です。

title の他にも様々なプロパティが存在します。

titleTemplate は、Vue Router を使ったプロジェクトにおいて、どの画面でも共通的に表示させるアプリケーション名と、各画面の名称を組み合わせるために使用しています。

下記の例だと、Foo Bar が画面固有で、その後ろの - Baz が共通で表示される部分となるため、結果 Foo Bar - Baz がタイトルとして表示されます。

{
  metaInfo: {
    title: 'Foo Bar',
    titleTemplate: '%s - Baz'
  }
}

Vue I18n を組み合わせた動作も確認していますので、多言語化対応もシームレスに行うことが出来ます。

Vue Class Component 使用時の対応

pure な Vue であれば上記で対応出来るのですが、Vue Class Component を使用しているプロジェクトの場合、 上記対応だとうまくいきません。

上記情報の通り、Additional Hooks を設定した上で metaInfo フックを記述する必要があります。

最後に

動いてみればそんなものか、という感じですが Vue 単体だとタイトルの設定に DOM プロパティを直接触ることになるため、やりたいことに対して仰々しいな、という思いがありました。 その辺りを解決してくれるプラグインが存在していて良かったです。

例によって、上記確認出来るソースを以下リポジトリに置いています。