laravel sailを使ってlaravel10 + vue3.js + postgresSQL環境を作る

## このページについて
laravel sailを使ってlaravel10 + vue3.js + postgresSQL環境を作る方法を記載します。

## 環境
- WSL2
- DockerDesktop

## laravelのインストール
DockerDesctopを起動し、コマンド操作でlaravelをインストールします。
ここで設定したいサービスをwithというクエリ文字列変数を使って、新しいアプリケーションのdocker-compose.ymlファイルで設定するサービスを選択できます。
- [Laravel 10.x インストール LaravelとDocker  Sailサービスの選択](https://readouble.com/laravel/10.x/ja/installation.html#getting-started-on-windows)

今回は、pgsql（postgresSQL）、mailpitを指定します。
```bash
curl -s "https://laravel.build/example-app?with=pgsql,mailpit" | bash
```
※example-appは任意の名前に変更可能。

## シェルエイリアスの設定
- [Laravel Sailを起動するコマンドのエイリアスを登録する](https://qiita.com/riiiii/items/66f371fee96b510eaade#laravel-sail%E3%82%92%E8%B5%B7%E5%8B%95%E3%81%99%E3%82%8B%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%AE%E3%82%A8%E3%82%A4%E3%83%AA%E3%82%A2%E3%82%B9%E3%82%92%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B)

以後、Sailを起動するコマンドのエイリアスが登録されている前提で記述します。

## Viteの設定
- [Laravel9のVite環境でVue.js 3を利用する方法](https://reffect.co.jp/laravel/laravel9_vite)

ViteでVue.jsを利用するために@vitejs/plugin-vueのインストールを行います。

```bash
sail npm install @vitejs/plugin-vue --save-dev
```
@vitejs/plugin-vueのインストールが完了したらvite.config.jsにvueを利用するための追加設定を行います。

```diff
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,
        }),
    ],
});
```

npm installコマンドを実行してJavaScriptのパッケージのインストールを行います。

```bash
sail npm install
```

npm run devコマンドを実行し、viteの開発サーバを起動します。

```bash
sail npm run dev
```

## app.jsファイルの読み込み

app.jsファイルを読み込むapp.blade.phpを作成してみます。

パスを指定します。
```routes/web.php
// デフォルトをコメントアウト
// Route::get('/', function () {
//     return view('welcome');
// });
Route::get('/', function () {
    return view('app');
});
```

`resources/views/app.blade.php`を作成します。
```resources/views/app.blade.php
<!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</title>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
    </head>
    <body>
      <div id="app"></div>
    </body>
</html>
```

※headタグ内はデフォルトの`resources/views/welcome.blade.php`に以下を追記したのみです。
```php
@vite(['resources/css/app.css', 'resources/js/app.js'])
```
※styleタグは一旦無しで良いと思います。

Laravelの開発サーバを起動します。

```bash
sail artisan serve
```

`http://localhost/`を確認します。
ブラウザは何も表示されていませんが、
ブラウザのデベロッパーツールを見ると、app.cssとapp.jsファイルにアクセスしていることを確認できました。

![スクリーンショット 2023-04-26 212916.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1868789/bf4b8957-1625-313a-1c64-9858a2e54d71.png)

## vueファイルを表示する
試しに`resources/js/App.vue`を以下のように作成します。

```App.vue
<template>
    <h1>Hello World</h1>
</template>
```

`resources/js/app.js`にて、作成した`App.vue`をimportしてcreareAppの引数に設定します。

::: note info
createApp 関数で新しいアプリケーションのインスタンス を作成することができます。
- https://ja.vuejs.org/guide/essentials/application.html
:::

```app.js
// 略

+ import { createApp } from "vue";
+ import App from "./App.vue";

+ const app = createApp(App);

+ app.mount("#app");

```

`http://localhost/`を確認すると、`App.vue`で記述した内容が表示されました！

![スクリーンショット 2023-05-06 101146.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1868789/83262f6b-4f5f-847f-47db-5a6c09b789a7.png)


::: note warn
下記のコンソールエラーが出る場合があります。
- 0.0.0.0:5173/@vite/client net::ERR_ADDRESS_INVALID
- 0.0.0.0:5173/resources/css/app.css net::ERR_ADDRESS_INVALID
- 0.0.0.0:5173/resources/js/app.js net::ERR_ADDRESS_INVALID
その場合、`public/hot`を以下のように書き換えてください。
```diff
+ http://localhost:5173
- http://0.0.0.0:5173
```
- https://qiita.com/Mi_tsu_ya/items/90129f44a3ee07b8ea57
- https://github.com/laravel/vite-plugin/pull/42
:::