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 を使用しているプロジェクトの場合、 上記対応だとうまくいきません。