2020-03-27
laravel-mix + vuetify-loader で Laravel に Vue + Vuetify の環境を作る
vuetify-loader とは
webpack で vuetify のコンポーネントセットをロードするためのモジュールです。
環境
- Laravel 7系を想定していますが、6系でも
laravel-mixのバージョンが新しいものであれば問題なく動くと思います。 - Vue は既に入っている前提です。（Laravel なら
npm install叩くだけです）
1. 必要なモジュールを入れる
bash
npm install -D vuetify vuetify-loader sass sass-loader fibers deepmerge
# material design icons を利用する場合
npm install -D @mdi/font
2. 以下の内容で webpack.config.js をプロジェクトルートに置く
本記事ではプロジェクトルートは ./ としています
./webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
plugins: [new VuetifyLoaderPlugin()],
};
3. webpack.mix.js を書き換える
./webpack.mix.js
const mix = require('laravel-mix');
const webpack = require('./webpack.config');
mix
.webpackConfig(Object.assign(webpack))
.js('resources/js/app.js', 'public/js');
// 必要に応じて CSS も
// .css('resources/css/app.css', 'public/css')
4. Vuetify の読み込み設定ファイルを書く
./resources/js/vuetify/index.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import colors from 'vuetify/lib/util/colors';
// mdiを利用する場合
// import '@mdi/font/css/materialdesignicons.css';
Vue.use(Vuetify);
const opts = {
// mdiを利用する場合
// icons: {
// iconfont: 'mdi',
// },
};
export default new Vuetify(opts);
5. app.js で上述した Vuetify を import
./resources/js/app.js
import Vue from 'vue';
import vuetify from './vuetify';
import App from './App.vue';
export default new Vue({
el: '#app',
vuetify,
components: { App },
template: '<App />',
});
6. ビルド
bash
npm run dev
これで正しくコンパイルされれば完了です。
vuetify-loader のおかげで、いままで煩雑だった webpack の設定が不要になってます。ありがて～～