LaravelにVue系のテンプレートを導入する

Laravelに以下のようなVue系のデザインテンプレートを
導入する方法を紹介します。

https://www.creative-tim.com/templates/vuejs

Laravelは導入済みで、デザインテンプレートは
購入済みということで、話を進めていきたいと思います。

1.デザインテンプレートの設置

上記URLのデザインテンプレートを例にすると、
以下のようなディレクトリ構成になっていることがわかります。
(node_modulesをインストールしていない場合は、
このディレクトリにてnpm installしておいてください)

このデザインテンプレートをLaravelのルートディレクトリに設置します。
adminという名前で設置してみました。名前は何でも良いです。

しかし、このままではデザインテンプレートは使えません。
Laravelからこれらを読み込めるようにしなければなりません。

2.Vueのビルド・出力設定

基本的にVueで作られたデザインテンプレートは、
ファイルをビルドしてそれを読み込むことで利用します。
ですので、ビルドしたファイルをLaravelから
読み込めるようVue側で設定をしていきます。

まずはアクセスの起点となるファイルである、
public/index.htmlを別の場所に移動します。
adminディレクトリ直下にtemplatesディレクトリを作成し、
その中にindex.htmlをbase.htmlとして移動させます。
(移動しなくても導入に支障は出ませんが、
デフォルトとは別の使い方をしていることを認識できた方が管理しやすいです)

ファイルを移動できたら、デザインテンプレート内にある
vue.config.jsを以下のように設定します。

このようにすることで、ビルドしたファイルがLaravelのファイル群の
中に作られるようになり、Laravelから利用できるようになります。

なお、Githubなどを利用している場合は、
Laravelの.gitignoreに以下の設定を追加しても良いでしょう。

3.LaravelにControllerとルーティングを作成

次はLaravelにアクセスしてきた時に、
これらのビルドしたファイルにアクセスできるようにしましょう。
以下のコマンドでControllerを作成します。

そして、SpaControllerの設定を以下のようにします。

あとは、Laravelのルーティング(routes/web.php)

デザインテンプレートには複数のURLが存在するため、{any}を設定。
ポイントは、vue.config.jsに設定した
publicPathとは別の名前にすることです。
同じ名前にすると、デザインテンプレートから
画像やJSなどのリソースにアクセスできなくなってしまいます。
(Laravelのルーティングと干渉してしまうため)

最後にadminディレクトリ直下から以下のコマンドで
デザインテンプレートをビルドします。

これで設定したURLにアクセスすれば、
デザインテンプレートにアクセスできると思います。
もちろん、Laravel側にもアクセス可能です。

ぜひ試してみてください。

ABOUTこの記事をかいた人

フリーランスとして働く、フルスタックエンジニア 初崎 匠のサイト。仕事のことから趣味のアニメーション制作、英語学習など、様々なことを通じて、少しでも多くの人が幸せになれるような価値を提供できるよう挑戦し続けます。