課題
SPAでもページごとにタイトルやメタタグを設定したい。
SPAだし、メタタグはいらないけど、ページタイトルは変更したいかなぁって感じ。
Nuxt.jsは、title設定があるけど、同じような感じでVueでも設定したい。
TL;DR
vue-head
Headプロパティでタイトルを含めて、Headに設定できることを操作できる感じ。
934スターあるし、プロジェクトにスポンサーもついているし鉄板ぽい
vue-page-title
タイトル変更に特化した感じ。
Nuxt.jsのように、titleプロパティを設定して使えたり、Vue-routerのメタタグにTitleを設定することで反映される。
107スターなので、少しマニアックっぽい。
追記
githubで検索していたら、vue-headfulというのもあった。
vue-headと機能は同じだけど、記述の仕方がコンポーネントとして記述するので、少し違和感が。。。。
ただし、219スターなので、それなりに人気があるのかな？
参考文献
-
vue.jsでheadの要素を設定する時はvue-headが便利！
- Vue-headの紹介記事
-
【Vue.js】titleタグやmetaタグ(description)を書き換える方法【vue-rouetr】
- 手法をまとめてくださっている。
-
vue.js router を 使い 動的に title や meta タグを変更
- vue-page-titleで実装されている方法と似ている。アイデア元が一緒かも？
-
Vue + vue-router で動的にページタイトルを変更する方法
- vue-page-titleで実装されている方法と似ている。アイデア元が一緒かも？
-
Updating Page Title & Metadata with Vue.js & vue-router
- Vue-routerのナビゲーションのフックを使って操作する方法