【Laravel】Sail Vite環境でVue+Laravel環境構築

Sail Vite環境でvue+laravel環境構築の紹介です。
目次
laravelプロジェクトを作成
curl -s https://laravel.build/vue-laravel | bash
kami@kami vue-laravel % curl -s https://laravel.build/vue-laravel | bash
latest: Pulling from laravelsail/php82-composer
Digest: sha256:37549f980be6146efcb16b0dc352644edfc5cca32b9862494631eb197ef89737
Status: Image is up to date for laravelsail/php82-composer:latest
_ _
| | | |
| | __ _ _ __ __ ___ _____| |
| | / _` | '__/ _` \ \ / / _ \ |
| |___| (_| | | | (_| |\ V / __/ |
|______\__,_|_| \__,_| \_/ \___|_|
Please provide your password so we can make some final adjustments to your application's permissions.
Password:
Thank you! We hope you build something incredible. Dive in with: cd vue-laravel && ./vendor/bin/sail up
Passwordを求められたら入力して下ください。
以下のテキストが表示されれば、プロジェクト作成が成功です。
Thank you! We hope you build something incredible. Dive in with: cd vue-laravel && ./vendor/bin/sail up
この時点でLaravelプロジェクトとしては作成されています。
cd vue-laravel
作成したLaravelプロジェクトに移動してSail環境でサーバーを立ち上げると表示することができます。
sail up -d
Sailの環境構築

Sailの環境構築はこちらを参考にしてください。
laravel/uiインストール
laravel/uiパッケージをcomposerでインストールします。
sail composer require --dev laravel/ui
スポンサードサーチ
vueの認証を追加(なくてもok)
sail artisan ui vue --auth
npmパッケージをインストール
sail npm install
スポンサードサーチ
viteを実行
sail npm run dev
ローカルホストにアクセス
スポンサードサーチ
vueファイルをlaravelで表示する
view
view側ではviteでjsファイルを読み込みます。
jsファイルの読み込み
@vite(['resources/js/app.js'])
余談ですが、CSSも読み込みたい場合は配列の最後尾に記述していけば読み込めます。
vite(['resources/js/app.js', 'resources/css/app.css'])
vueファイルの読み込み
「ExampleComponent.vue」ファイルの読み込みを行います。
記述は<xample-component></example-component>のようにタグとハイフンを使って読み込みます。
<xample-component></example-component>
jsファイルの記述
js
jsファイルは編集しなくてもそのまま使うことができます。
createAppでvueをインポートして、appを定義してcomponentでvueコンポーネントファイルを指定します。
app.mountで、id が appの DOM 要素にアプリケーションをマウントしています。
import './bootstrap';
import { createApp } from 'vue';
const app = createApp({});
import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);
app.mount('#app');
view全体のコード
jsファイルをlaravelに渡す
js
import './bootstrap';
import { createApp } from 'vue';
const app = createApp({
data() {
return {
message: 'Hello, Vue!',
};
}
});
import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);
app.mount('#app');
laravelのview
テンプレートエンジンでよく見かける{{変数名}}で表示することができません。
@を頭につけることで変数を使うことができます。
@{{変数名}}
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>vue-laravel</title>
// vueファイル, cssファイル読み込み
@vite(['resources/js/app.js', 'resources/css/app.css'])
</head>
<body>
<div id="app">
// 変数で読み込み
@{{message}}
</div>
</body>
</html>