Laravel10でVue3を利用する環境構築 #Laravel

はじめに

Laravel10でVue3を使用し、Vueで表示させるところまでをためした。
何回かにわけて続けていく予定。
以下追加記事

・ルーティング追加

・バックエンドよりデータ表示

前提

・php、npm、composerのパスが通っていること
・MAMPのインストール(任意)
・nodeのバージョンはv18.16.0

手順

プロジェクト作成

composer create-project laravel/laravel laravel_vite-example

Viteの設定

プロジェクトのルーテディレクトリに移動し、viteのプラグインVue3をインストール

npm install @vitejs/plugin-vue --save-dev

@vitejs/plugin-vueのインストールが完了したらvite.config.jsにvueを利用するための追加設定を行う。

vite.config.js

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";←追加

export default defineConfig({
    plugins: [
        vue(), ←追加
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
    ],
});

app.js修正

vueを追加し読み込む

app.js


import './bootstrap';
import '../css/app.css';
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")

app.jsファイルを読み込ませる

初期のweb.php(routes/web.php)

web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

初期は、welcome.blade.phpを/で読み込んでいる。
今回はそれを使用する、その場合、Vue.jsを利用するためにwelcome.blade.phpファイルでJavaScriptを読み込む必要がある。
またVue.jsを利用するためにはマウントポイントが必要となる。
JavaScriptの読み込みは@vite Directiveを利用する。
マウントポイントはdiv要素のid属性にappを設定する。
設定後のwelcome.blade.phpファイルは以下のように書き換える。

welcome.blade.html


<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel Vite Vue</title>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

npm run devとphp artisan serveを実行する。
現時点で、画面には何も表示されないが、laravelで、vueを読み込んでいるようになる。
(何も表示されないのはまだコンポーネントを定義していないから)

npm run dev

php artisan serve

ブラウザ上には何も表示されないが、ブラウザのデベロッパーツールの要素を確認すると、app.cssとapp.jsファイルにアクセスしていることがわかる。

画面作成(Vue作成)

App.vueを作成する。
welcome.bladeのid="app"にマウントされる。

resources/js/App.vue

<template>
  <div class="page">
    <p>{{ counter }}</p>
    <button @click="counter += 1">
      click!
    </button>
  </div>
 </template>

 <script>
 export default {
  data () {
    return {
      counter: 0,
    }
  },
 }
 </script>

以下が表示される。

メモ

プロジェクト作成初期のファイル状況

package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.5",
        "vite": "^4.0.0"
    }
}

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

resources/js/app.js

import './bootstrap';

Laravel10でVue3を利用する 環境構築