Vue.jsでtitleタグやヘッダータイトルをGlobal MixInで設定する方法【SPA(シングルページアプリケーション)】

SPA(シングルページアプリケーション)を簡単に制作できるVue.js

Vue.jsによるSPA制作のネックとなる「titleタグ」の変更の方法をご紹介します。(各ページ毎でタイトルを変更する方法)

Mixinを使用する

Vue.jsのSPA制作でタイトルタグをページ(route)によって変更するオススメの方法は「Mixin」を使用した方法です。

まず、手始めに、Vue.jsのミックスインを簡単に説明しておくと、Vue Componentで使用する「methods」や「created」を登録しておき、再利用可能な形で呼び出す機能です。(詳しくは本家のサイトを参照)

この例の場合、「mixIn」に「createdの際にrara world!とログを表示する機能」を登録して、各Componentの「new Vue」でインスタンス化する際にそのmixInを渡すと、そのComponentが

createdされたときにログが表示されます。

つまり、createdやmethods,destroyedなどのVueの機能を色々なComponentで使いまわす機能ですね。

Global Mixinを使用する

本題の「タイトルタグを変更する方法」は、1度登録したMixinがすべてのComponentに影響を与える「Global Mixin」という機能を使います。

Vue CLIで制作したときのメインファイル「main.js」などの一番大本のjsファイルに、

というかたちで、GlobalのVueにMixinを登録します。(Vue.mixin(globalMixIn))

こうすることで、SPAの各Componentが呼び出される度に、globalMixInのcreatedが実行されます。そして、各Componentのoptionsに

  • titleがある場合は、document.titleで直接titleタグのDOMを変更
  • headerTitleがある場合は、VuexのstoreのheaderTitleを変更するdispatchを実行(共通のヘッダーComponentにgettersでheaderTitleを取得する記載をしておく)

という処理になります。

各Coponentでは

という形で、titleとheaderTitleに値を記載して、Global MixInに値を渡します。

Global MixInは色々な使い道がある

今回紹介した「titleタグ」や「headerTitle等のVuexで管理している値」をComponent毎に変更するだけでなく、ページ遷移する度に行いたい処理をGlobal MixInに記述しておけば、各Componentのファイルサイズを小さくすることが出来ます。

SPA(シングルページアプリケーション)では状態管理や、ページ遷移が非常にやっかいな問題になることが多く、Global MixInやfilterをうまく利用して、シンプルで修正のしやすい綺麗なwebアプリケーションを作るようにしましょう!

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。