Laravelにvuetifyを導入する方法

注意

vuetifyをalpha版で行うとうまくvuetifyコンポーネントを読み込めない問題が発生したため、vuetifyそのものを断念しました。
今回の記事ではvue3で行いましたが、vue2でインストールを行えば問題が解決するかと思います。

経緯

laravelにvuetifyを導入しようとしたとき、
vuetifyの公式からインストール行おうとすると途中でよくわからなくなってしまったのでまとめておきます。

バージョンの確認

2021/08/24現在ですが、laravelのjetstreamから導入したvue.jsがversion3で
vuetifyの公式リリースがversion3に対応していません。
そのため、jetstreamのバージョンを落としてvue.jsのversion2を導入しなおすか、
vuetifyのalpha版をインストールするかの2つを迫られました。
すでにlaravelで環境などベースは作っていたので再インストールは嫌だと思い、
vuetifyのalpha版をインストールしました。
現在開発中のものも時間かかるので、そのうち正式リリースされるだろうと思い...

以下、alpha版のインストールで手順開設いたします。
laravelとの連携部分は同じかと思います。

バージョン

"laravel-mix": "^6.0.3"
"vue": "^3.2.8"
"vuetify": "^3.0.0-alpha.11"

vuetifyのインストール

vuetifyのalpha版はvue-cliからのインストールなので、まずはvue-cliのインストールを行います。
https://cli.vuejs.org/guide/installation.html

コマンド一発なので楽勝です。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

こちらもコマンド一発です。
あとは、vuetifyをインストールするのですが、package.jsonのあるディレクトリで行うよう注意してください。Laravelの場合はプロジェクトルートですね。

vue add vuetify

laravelとの連携

laravelの場合はlaravel-mixを用いてvueのコンパイルを行うので、vuetify公式に記述してあるwebpack.config.jsの変更だったり、src/plugins/vuetify.jsの作成だったりは適応できません。
laravel-mixの中にうまくvuetifyをコンパイルするように組み込まないといけません。

といっても手順は簡単でして、vuetify向けのlaravel-mix拡張ライブラリを入れるだけです。
https://laravel-mix.com/extensions/vuetifyjs

もうちょっと手順があって、若干複雑なステップになってしまいました...

まずはlaravel-mixの拡張機能のインストール

npm i vuetifyjs-mix-extension

そのあとlaravelのプロジェクトルートにあるwebpack.mix.jsに追記します。

const mix = require('laravel-mix');

require('vuetifyjs-mix-extension') //これを追加

そのあとすぐ下のメソッドチェーンの中に**vuetify()**を挟みます。

mix.js('resources/js/app.js', 'public/js').vuetify().vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ])
    .webpackConfig(require('./webpack.config'));

また同ファイルの下にオプションの設定をしてください。
詳しくは以下を参照
https://github.com/laravel-mix/laravel-mix/issues/2737

mix.options({
    legacyNodePolyfills: false
});

上はコンパイルの設定なので、laravelのjsローディングファイルにて、Vuetifyを組み込まないといけません。
laravelではresources/js以下のapp.jsになります。

require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { createVuetify } from 'vuetify'; //ここを追加

const el = document.getElementById('app');
const vuetify = createVuetify(); //ここを追加

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .use(vuetify) //ここを追加
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

3行追加箇所があります。

これでOKです！

npm run dev

上記コマンドで正しくコンパイルされることを確認してください。

お付き合いいただきありがとうございました！