【環境構築】Laravel Breeze+Inertia/Vue.js3 (CompositionAPI)

# 作っていく環境

Laravel9
Breeze 1.9
Inertia 1.0
PHP8.0以上
apache
MySQL(mariaDB)
Vue.js3 CompositionAPI
XAMPP 3.3.0
windows11
composer 2.5.2

# CompositionAPI

VueJS3から搭載。Vue2に比べてscript あたりの書き方がかなり変化があったようです。

Vue2は基本的なことだけをざっくりとしか触ったことがないので、あまり詳細が分からないのですが、Vue2は今年の12月でサポート終了するので、わざわざ触らなくてもいいかなーと。

公式のも書いてあります。

https://ja.vuejs.org/guide/introduction.html

調べただけですが書き出し↓
Vue2のメリット
・慣れなくても見やすく、書きやすい
・ロジックをまとめて書ける
・コードが散らない

# Lravel

公式マニュアル

https://readouble.com/laravel/9.x/ja/installation.html

task_teskは好みのプロジェクト名に置き換えてください。
※Laravel9はPHP8.0以上にしか対応していません。
```
composer create-project "laravel/laravel=9.*" task_test --prefer-dist
```
インストールが完了したら、作成したプロジェクトフォルダに移動して、簡易サーバーを立ち上げて動作確認をします。
```
php artisan serve
```

Laravelの画面が表示されればOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/f33b39c7-6737-e623-845b-f36529a889b4.png)

# Laravel初期設定

# DB

XAMPPを起動し、MySQLのAdminを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/a727d9d5-0c91-fc94-e9ad-0c98f9631f10.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/b36adaeb-8ea8-67c0-66d7-9c7ed069c30d.png)

新規作成より新しいデータベースを生成し、このデータベースを操作できるユーザーも新規追加します。

権限を開こうとしたらエラーがでました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/d1697d34-d804-e2f8-6294-9b889476317f.png)

雑ですが過去にこのエラーの解決方法を記載しました。

https://qiita.com/LB16B/items/21177ed412d40e09f9b0

解決できたらユーザーアカウントを追加するを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/2185f270-9135-0302-0cc7-5d4e64b3a921.png)

ログイン情報に好みで以下2点を記入します。
・ユーザ名
・パスワード

ユーザアカウント専用データベースで、全ての権限を与えるに✓。
最後に実行を押し、完了です。

次に.envファイルをいじります。

↓この部分を作成したユーザアカウントと全く同じ情報に書き換えてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/d35fffcc-63ad-5d89-6719-9a94e2efd53c.png)

コマンドを実行します。

```
php artisan migrate
```
テーブルが自動生成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/19b468e1-b823-77f9-21a3-61f50b96062d.png)

Adminからも確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/8ab0aca7-408c-a2d3-8592-baf1006ada93.png)


# デバックバー

インストールコマンド
```
composer require barryvdh/laravel-debugbar
```
composer.jsonに追記されているか確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/b14786b8-e978-940d-ced0-bbf07dedabae.png)

画面からも確認。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/6ea018ce-a9be-59e5-abb1-2b55d0db1168.png)

これで問題ないです。

# Breeze/Inertia

Inertiaとは
サーバー側のフレームワークの機能を活かしながら、SPAを作るためのライブラリ。
Reactにも対応。

公式

https://inertiajs.com/

公式(Breezeのインストールについて)

https://readouble.com/laravel/9.x/ja/starter-kits.html

インストールコマンド

```
composer require laravel/breeze --dev
```
エラーがた場合はcomposerのupdateを行って再度コマンドを実行してください。
```
composer update
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/b63d93f5-8824-f569-238e-7c59eea5ddd7.png)

無事に実行できたようです。

次に下記コマンドを実行。

```
php artisan breeze:install vue
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/0e0d7126-1799-97aa-1544-048141710ad1.png)

成功しました。

npmをインストールし、コンパイルするためのコマンドを実行。

```
npm install
npm run dev
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/bad01aa8-8680-ee8c-ba40-1a1907727085.png)


Viteですが以前はwebpackが使われていたそうです。
処理が速いのでiteに変更になりました。
webpackの詳しいことはわかりません。

composer.jsonとpackege.jsonにinertiaとbreegzeが追記されているか確認。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/339e3a99-d251-0716-c9a2-a225325d0b04.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/a0ebd58d-f2e9-4d9f-cf7d-7d50cbff0f21.png)

2023年1月以降、Inertia ver1.0に伴い、以前とインストールされるライブラリが変更になったようなので、package.jsonに下記を追記(個人の自由)。

```
"@inertiajs/inertia":"^0.11.0"
"@inertiajs/inertia-vue3":"^0.6.0"
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/288a9013-cdd2-c70b-8d3f-93abc30c2f01.png)

app.jsファイルも変更
変更前
```js:resources/js/app.js
import{ createInertiaApp ) form '@inertiajs/vue3';
```
↓
変更後
```js:resources/js/app.js
import{ createInertiaApp ) form '@inertiajs/inertia-vue3';
```

追加のライブラリのインストール
```
npm install
```

簡易サーバーが立ち上がればOKです。

# 便利な拡張機能の紹介

### GoogleChrome 

Vue.js devtools 6.5.0

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/285a1206-ebd2-2a12-3808-f4f7b412682d.png)

### VSCode

Volar

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/b24f61ff-be07-06fc-a559-0bf6d09c8d2f.png)

・Dracula
・aravel Extra Intelisense
・Tailwind CSS IntelliSense