
九保すこひです(フリーランスのITコンサルタント、エンジニア)
さてさて、Vue 3
がリリースされてから少し経ちましたが、これまで、私の場合、npm
を使ってLaravel 8.x
と連携をしてきませんでした。
というのも、「いちいちビルドすると開発のテンポが悪くなり、保守もしたくなくなるから」というのが一番の理由なんですが、実際はそれ以外にも連携できない理由がありました。
それが・・・・・・
Laravel Mix が Vue 3 に完全対応してなかった
からです。
私はLaravel
とVue
の大ファンなので、バージョン3
が出てすぐにnpm
で連携させようとしましたが、なんと「.vue」ファイルをうまくコンパイルすることができないことが分かりました。
いろいろ調べた結果、Laravel Mix
の作者が「それは、次期バージョン6で対応するよ」と書いていたので、現在まで待ちに待っていました。
そして、数日前ついにLaravel Mix
が新バージョン6
になったので、この記事も再度加筆を加えて公開することにしました。
ぜひ皆さんのお役にたてると嬉しいです
「久しぶりに、ドキドキ待つ状態でした(笑)」
目次 [非表示]
Vue 3 をインストールする
まずはVue 3
本体をインストールします。
以下のコマンドを実行してください。
npm install vue@next --save-dev
インストールが完了するとpackage.json
は以下のようになります。
ビルドする前に確認しておくべきこと
このままビルドできればいいのですが、実はLaravel 8.x
がリリースされてすぐの頃は、ビルド・パッケージLaravel Mix
のバージョンが5
でした。
しかし、バージョン5
のままではVue 3
の「シングル・ファイル・コンポーネント」(いわゆる.vue
ファイル)をビルドすると以下のようなエラーが発生していました。
Vue packages version mismatch:
そのため、まずはpackage.json
を開いて、laravel-mix
の項目を探し、バージョンが6
になっているかを確認してください。
"devDependencies": {
"@tailwindcss/ui": "^0.5.0",
"axios": "^0.19",
"cross-env": "^7.0",
"font-awesome": "^4.7.0",
"laravel-mix": "^5.0.1", //
ここのバージョンを確認してください
"lodash": "^4.17.19",
"postcss-font-awesome": "^0.4.0",
"postcss-import": "^12.0.1",
"resolve-url-loader": "^3.1.0",
"sass": "^1.27.0",
"sass-loader": "^8.0.2",
"tailwindcss": "^1.3.0",
"vue": "^3.0.4",
"vue-template-compiler": "^2.6.12"
},
もし、5
の場合だとLaravel Mix
をバージョン6
にアップグレードする必要があります。手順は以下のとおりです。(もしバージョンが6
の場合は問題ありませんので、次の項目へ移動してください)
Laravel Mix を 5 → 6へアップグレードする
【追記:2021.05.18】
パッケージを削除しないとバージョン6がインストールできなかったため、先に以下のコマンドを実行しておいてください。
npm uninstall laravel-mix
そして、以下のコマンドで新パッケージをインストールします。
npm install laravel-mix --save-dev
インストールが完了したら、以下のコマンドを実行してビルドができるかをチェックしてみてください。
npm run dev
※ もしこれでもエラーが出る場合は、Laravel Mixをアップグレードしたのにビルドできない場合にいくつかまとめていますので、そちらを確認してみてください。( おそらくこのままでは、エラーが出ると思います
)
Vue 3をビルドしてひとつのファイルにまとめる
npm
でインストールしただけではVue 3
がLaravel
で使えるようにはなっていません。
そのため、Laravel Mix
(Webpack
)でJavaScript
パッケージをビルドして、ひとつのファイルにまとめる作業をします。
では、「どのパッケージをひとまとめにするか?」が書かれているファイルにVue
を登録してください。
resources/js/app.js
import { createApp } from 'vue/dist/vue.esm-bundler.js';
window.createApp = createApp;
では、設定が完了しましたので、実際にビルドしましょう!
以下のコマンドを実行してください。
npm run dev
なお、このコマンドはビルドスピードが早い、「開発向け」のコマンドです。
そのため、以下の警告がでると思います。
You are running the esm-bundler build of Vue. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle. See http://link.vuejs.org/feature-flags for more details.
この場合は、本番環境向けのビルドにすれば警告は消えてくれます。
npm run prod
シングル・ファイル・コンポーネントをつくってみる
Vue 3
のインストールが完了したので、以下を1つのファイルで作成することができる「シングル・ファイル・コンポーネント」を作ってみましょう。(いわゆる、拡張子が.vue
のファイルです)
- HTML
- JavaScript
- CSS
今回はテストとして、シンプルに「あいさつ」を表示するコンポーネント「Hello.vue」を作ってみましょう
.vueファイルをつくる
以下のファイルを作成してください。
resources/js/components/Hello.vue
<template>
<div id="greeting_box">{{ greeting }}、みなさん!</div>
</template>
<script>
module.exports = {
data() {
return {
greeting: ''
}
},
mounted() {
const dt = new Date();
const hours = dt.getHours();
if(hours <= 4 || hours >= 18) {
this.greeting = 'こんばんは';
} else if(hours >= 12) {
this.greeting = 'こんにちは';
} else {
this.greeting = 'おはようございます';
}
}
}
</script>
<style scoped>
#greeting_box {
background-color: #ffeeee;
}
</style>
※ なお、シングル・ファイル・コンポーネントの詳しい内容は、Laravel でシングルファイル・Vueコンポーネントをつくる方法をご覧ください。
.vueファイルのビルドを有効にする
続いて「Hello.vue」がビルドできるようにします。
以下のコードを記述してください。
resources/js/app.js
require('./bootstrap');
import { createApp } from 'vue/dist/vue.esm-bundler.js';
window.createApp = createApp;
window.HelloComponent = require('./components/Hello.vue').default; //
ここを追加しました
コンポーネントをVueにセットする
この状態で「npm run dev」を実行するとビルドできますので、最後にVue
にセットしてコンポーネントを使えるようにします。
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<!-- Hello コンポーネント -->
<v-hello></v-hello>
</div>
<!--
この中にVue本体からコンポーネントまで全て入っています -->
<script src="{{ mix('js/app.js') }}"></script>
<script>
createApp({
// 省略
})
.component('v-hello', HelloComponent) //
ここでセットしています
.mount('#app');
</script>
</body>
</html>
うまくいくと以下のように表示されます。
Laravel Mixをアップグレードしたのにビルドできない場合
scripts の中身を変更する
まず以下のエラーが出る場合です。
[webpack-cli] Unknown argument: --hide-modules
これはLaravel Mix
のバージョンが上がったことで発生しています。
そのため、package.json
内にあるscripts
項目を変更してください。
(変更前)
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
↓ ↓ ↓
(変更後)
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
}
※新バージョンでは、mix
コマンドができたようですね
パッケージが揃っていない場合
もし以下のような表示が出たなら、それは「必要なパッケージが揃っていないからインストールしてます」という表示なので、そのコマンドが終わってから再度「npm run dev」を実行してください。
Additional dependencies must be installed. This will only take a moment.
...(省略)
Finished. Please run Mix again.
Tailwindが何か言ってくる
もし以下のような表示が出た場合は、「Tailwindをアップグレードしたほうがいいよ」と言っています。
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
これは、ビルドには関係ありません。
しかし、気になる場合は、以下のコマンドを実行してアップグレードできます。
npm install tailwindcss
半分だけ成功する
ビルドのコマンドを実行すると、
[webpack-cli] Compilation finished
と表示されるのに、ポップアップ通知には、
SyntaxError: Unexpected token ( 1:0 )
というエラーが表示されている場合は、webpack.mix.js
に.vue()
を追加する必要があります。
mix.js('resources/js/app.js', 'public/js').vue() //
ここです
// 以降はお好みで変更してください
.sass('resources/sass/app.scss', 'public/css')
.options({
postCss: [
require('postcss-import')
]
})
.webpackConfig(require('./webpack.config'))
.sourceMaps();
なお、バージョン2を使う場合はこうなります。
mix.js('resources/js/app.js', 'public/js').vue({ version: 2 });
おまけ: .mapに関する警告が出たら
ブラウザのコンソールに以下のような警告が表示された場合の対処法です。
DevTools failed to load SourceMap: Could not load content for http://******/js/index.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
この場合は、以下のようにsourceMaps()
を追加してビルドしなおしてください。
webpack.mix.js
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
]).sourceMaps(); //
ここ
おわりに
ということで、初めてこの記事を書き始めてから約3ヵ月を経て完成させることができました。
こんなブログなんて見てらっしゃらないでしょうが、Laravel Mix
開発者のJeffrey Way
さん、どうもありがとうございます。m(_ _)m
ちなみに、ビルドが成功したときは以下のような表示になり、テンションが上がりました
ぜひ皆さんもやってみてくださいね。
ではでは〜
「年末に向けて食料を多めに買うと、
買った分だけ多めに食べて、
すぐまた買いにいくという・・・」