Laravel9系でViteが公式プラグインとして使えるようになったということでVue.js3系の環境をサクッと構築したいと思います。
Contents
環境
- Laravel 9x
- Vue.js 3x
- Vite 3x
Laravelをインストール
Dockerがデスクトップにインストールされていることを前提に進めます。
以下のコマンドを順に叩いていきます。
curl -s https://laravel.build/laravel_react_app | bash
cd laravel_react_app
alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'
sail up -dhttp://localhostにアクセスすると初期画面が表示されるようになるかと思います。
Vue.jsをインストール
各種Vue.js3系のパッケージをインストールします。
今回使用するVue.jsのバージョンが3系のため、VuexとVue Routerのバージョンは4系になります。
# コンテナ内で bashの起動方法
sail shell
npm install vue@next
npm install vue-loader@next -D
npm install vue-router@next
npm install vuex@next
npm install @vitejs/plugin-vueApp.vueファイルを作成
resources/js/App.vueファイルを作成します。
<template>
<div>Laravel 9 Vite with Vue.js3 !!</div>
</template>app.jsファイルを作成
resources/js/app.jsファイルを作成します。
createApp関数をimportしその引数にApp.vueコンポーネントを設定します。
import "./bootstrap";
import "../css/app.css";
import { createApp } from "vue";
import App from "./App.vue";
// Vue Routerを使用する場合はrouter.jsを作成しインポートする
// import router from "./router";
// Vuexをを使用する場合はstoreフォルダ以下にファイルを作成しインポートする
// import store from "./store";
const buildApp = async () => {
const app = createApp(App);
// Vue Routerを使用する場合
// app.use(router);
// Vuexをを使用する場合
// app.use(store);
app.mount("#app");
};
buildApp();
ビューファイル編集
resources/views/welcome.blade.phpを編集します。
<!doctype html>
<html data-theme="light" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name') }}</title>
<!-- Scripts -->
@vite('resources/js/app.js')
<!-- Styles -->
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
</body>
</html>vite.config.jsを修正
aliasを設定しておくとimportの際にパスがわかりやすくなるので設定しておくと便利です。
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
server: {
hmr: {
host: "localhost",
},
},
plugins: [
laravel(["resources/css/app.css", "resources/js/app.js"]),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
"@": "/resources/js",
},
extensions: [".vue", ".js"],
},
});
詰まったところ
公式のドキュメントや他の方の記事を参考にしながら今回、環境を構築させていただいたのですが、
ビルドした際、以下のエラーが出て真っ白になってしまいました。
http://0.0.0.0:5173/@vite/client net::ERR_ADDRESS_INVALID解決策は以下のURLに書いていました。
https://laracasts.com/discuss/channels/vite/laravel-vite-issue?page=1&replyId=807406
どうやら以下のコードをvite.config.jsに追記してやる必要があるようです。
server: {
hmr: {
host: 'localhost',
},
},
動作確認
ビルドして動作確認します。
sail shell
npm run devhttp://localhostにアクセスしてLaravel 9 Vite with Vue.js3 !!と表示されれば成功です。
関連記事
