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

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

・ルーティング追加

https://qiita.com/kenji123/items/56e36278098453884a20

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

https://qiita.com/kenji123/items/f96b0c59313c69bdb37f

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

## 手順
### プロジェクト作成
```bash
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を読み込んでいるようになる。
(何も表示されないのはまだコンポーネントを定義していないから)

```bash
npm run dev
```
![スクリーンショット 2023-06-11 14.16.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176603/e53ecf23-f28c-ba78-d858-d633446df5e0.png)


```bash
php artisan serve
```
![スクリーンショット 2023-06-11 14.17.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176603/91dfea95-1e4d-6868-bbdd-9d2d0fe0803d.png)


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

![スクリーンショット 2023-06-11 14.07.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176603/d879a7ea-9418-653e-5cb8-b70dce604dfb.png)


### 画面作成(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>
```


以下が表示される。
![スクリーンショット 2023-06-11 15.52.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176603/dab4beb0-0e60-e272-a9b3-a0ceb5517468.png)


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

```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';
```


## 参考サイト

https://qiita.com/YumaInaura/items/8f7eb6ab7af2250c58b0

https://reffect.co.jp/laravel/laravel9_vite

https://qiita.com/ddtwn/items/b899d80c93ca34caf0f1

https://ja.vitejs.dev/plugins/

https://readouble.com/laravel/10.x/ja/vite.html