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

2025年10月4日Laravel,PHP,Vue,Vue2

laravel_vue

kamiです。
TwitterとYoutubeもやってます。

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

ローカルホストにアクセス

http://localhost/

スポンサードサーチ

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>

Laravel,PHP,Vue,Vue2

Posted by kami