Lumen8にLeravel Mixを使ってVue3の開発環境を作成する(その2)

Table of Content

はじめに

前回の続きで、Lumen8にLaravel MixをインストールしてVue3の開発環境を構築していきます。

Laravel Mixの構築までできましたので、今回はVue3の環境を構築していきます。

Vue3環境の構築

Vue3のインストール

npmコマンドでVue3をインストールします。

npm install vue@next --save-dev

「./webpack.mix.js」でVue3がコンパイルできるようにvue()を追加します。

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

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .vue();

npxコマンドでデプロイします。

npx mix

次の様なメッセージが表示されnpmの追加を促されます。

Additional dependencies must be installed. This will only take a moment.
Running: npm install @vue/compiler-sfc vue-loader@^16.1.0 --save-dev --legacy-peer-deps

メッセージに従って、インストールします。

npm install @vue/compiler-sfc vue-loader@^16.1.0 --save-dev --legacy-peer-deps

ここまでのpackage.jsonは次の通りとなります。

"devDependencies": {
  "@vue/compiler-sfc": "^3.0.5",
  "laravel-mix": "^6.0.11",
  "postcss": "^8.2.6",
  "resolve-url-loader": "^3.1.2",
  "sass": "^1.32.8",
  "sass-loader": "^8.0.2",
  "vue": "^3.0.5",
  "vue-loader": "^16.1.2"
}

Vue3の動作確認

「./resources/js/components/ExampleComponent.vue」を次のように作成します。

<template>
    <div>Hello Vue3</div>
</template>

<script>
export default {
    mounted() {
        console.log('Component mounted.');
    }
}
</script>

「./resources/js/app.js」を次の様に書き換えます。

import { createApp } from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';

createApp({
    components: {
        ExampleComponent
    }
}).mount('#app');

デプロイしてみます。

npx mix

次の様なメッセージが表示されればデプロイは終了です。

webpack compiled successfully

「./resources/views/welcome.blade.php」を次のように書き換えます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Lumen</title>
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
    <div id="app">
        <example-component></example-component>
    </div>
    <script src="js/app.js"></script>
</body>
</html>

ブラウザでアクセスし、Vue3のコンポーネントが表示されるのを確認して下さい。

スクリーンショット

最後に

LumenでLaravel Mixを使ってVue3の開発環境を作ることができました。

APIサーバの用途に適したマイクロフレームワークのLumenと、フロントエンド向けフレームワークのVue3が同一開発環境で構築できるので、個人開発には重宝するのでは無いでしょうか。