Laravel Vue コマンドメモ

### ベースのアプリケーション作成

#### Composerでプロジェクトを作成

##### コマンド
```composer create-project laravel/laravel アプリケーション名```
バージョン指定するときは
```composer create-project laravel/laravel:"9.0" アプリケーション名```
<details><summary>>composer create-project laravel/laravel TestApp</summary>

```console
>composer create-project laravel/laravel TestApp
Creating a "laravel/laravel" project at "./TestApp"
Info from https://repo.packagist.org: #StandWithUkraine
Installing laravel/laravel (v10.0.3)
  - Installing laravel/laravel (v10.0.3): Extracting archive
Created project in C:\xampp\htdocs\laravel\TestApp
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information
Info from https://repo.packagist.org: #StandWithUkraine
Updating dependencies
Lock file operations: 106 installs, 0 updates, 0 removals
  - Locking brick/math (0.10.2)
  - Locking dflydev/dot-access-data (v3.0.2)
  - Locking doctrine/inflector (2.0.6)
  - Locking doctrine/lexer (3.0.0)
  - Locking dragonmantank/cron-expression (v3.3.2)
  - Locking egulias/email-validator (4.0.1)
  - Locking fakerphp/faker (v1.21.0)
  - Locking filp/whoops (2.14.6)
  - Locking fruitcake/php-cors (v1.2.0)
  - Locking graham-campbell/result-type (v1.1.1)
  - Locking guzzlehttp/guzzle (7.5.0)
  - Locking guzzlehttp/promises (1.5.2)
  - Locking guzzlehttp/psr7 (2.4.3)
  - Locking guzzlehttp/uri-template (v1.0.1)
  - Locking hamcrest/hamcrest-php (v2.0.1)
  - Locking laravel/framework (v10.1.5)
  - Locking laravel/pint (v1.6.0)
  - Locking laravel/sail (v1.21.0)
  - Locking laravel/sanctum (v3.2.1)
  - Locking laravel/serializable-closure (v1.3.0)
  - Locking laravel/tinker (v2.8.1)
  - Locking league/commonmark (2.3.9)
  - Locking league/config (v1.2.0)
  - Locking league/flysystem (3.12.3)
  - Locking league/mime-type-detection (1.11.0)
  - Locking mockery/mockery (1.5.1)
  - Locking monolog/monolog (3.3.1)
  - Locking myclabs/deep-copy (1.11.0)
  - Locking nesbot/carbon (2.66.0)
  - Locking nette/schema (v1.2.3)
  - Locking nette/utils (v4.0.0)
  - Locking nikic/php-parser (v4.15.3)
  - Locking nunomaduro/collision (v7.0.5)
  - Locking nunomaduro/termwind (v1.15.1)
  - Locking phar-io/manifest (2.0.3)
  - Locking phar-io/version (3.2.1)
  - Locking phpoption/phpoption (1.9.1)
  - Locking phpunit/php-code-coverage (10.0.1)
  - Locking phpunit/php-file-iterator (4.0.1)
  - Locking phpunit/php-invoker (4.0.0)
  - Locking phpunit/php-text-template (3.0.0)
  - Locking phpunit/php-timer (6.0.0)
  - Locking phpunit/phpunit (10.0.14)
  - Locking psr/container (2.0.2)
  - Locking psr/event-dispatcher (1.0.0)
  - Locking psr/http-client (1.0.1)
  - Locking psr/http-factory (1.0.1)
  - Locking psr/http-message (1.0.1)
  - Locking psr/log (3.0.0)
  - Locking psr/simple-cache (3.0.0)
  - Locking psy/psysh (v0.11.12)
  - Locking ralouphie/getallheaders (3.0.3)
  - Locking ramsey/collection (2.0.0)
  - Locking ramsey/uuid (4.7.3)
  - Locking sebastian/cli-parser (2.0.0)
  - Locking sebastian/code-unit (2.0.0)
  - Locking sebastian/code-unit-reverse-lookup (3.0.0)
  - Locking sebastian/comparator (5.0.0)
  - Locking sebastian/complexity (3.0.0)
  - Locking sebastian/diff (5.0.0)
  - Locking sebastian/environment (6.0.0)
  - Locking sebastian/exporter (5.0.0)
  - Locking sebastian/global-state (6.0.0)
  - Locking sebastian/lines-of-code (2.0.0)
  - Locking sebastian/object-enumerator (5.0.0)
  - Locking sebastian/object-reflector (3.0.0)
  - Locking sebastian/recursion-context (5.0.0)
  - Locking sebastian/type (4.0.0)
  - Locking sebastian/version (4.0.1)
  - Locking spatie/backtrace (1.2.2)
  - Locking spatie/flare-client-php (1.3.5)
  - Locking spatie/ignition (1.4.5)
  - Locking spatie/laravel-ignition (2.0.0)
  - Locking symfony/console (v6.2.7)
  - Locking symfony/css-selector (v6.2.7)
  - Locking symfony/deprecation-contracts (v3.2.1)
  - Locking symfony/error-handler (v6.2.7)
  - Locking symfony/event-dispatcher (v6.2.7)
  - Locking symfony/event-dispatcher-contracts (v3.2.1)
  - Locking symfony/finder (v6.2.7)
  - Locking symfony/http-foundation (v6.2.7)
  - Locking symfony/http-kernel (v6.2.7)
  - Locking symfony/mailer (v6.2.7)
  - Locking symfony/mime (v6.2.7)
  - Locking symfony/polyfill-ctype (v1.27.0)
  - Locking symfony/polyfill-intl-grapheme (v1.27.0)
  - Locking symfony/polyfill-intl-idn (v1.27.0)
  - Locking symfony/polyfill-intl-normalizer (v1.27.0)
  - Locking symfony/polyfill-mbstring (v1.27.0)
  - Locking symfony/polyfill-php72 (v1.27.0)
  - Locking symfony/polyfill-php80 (v1.27.0)
  - Locking symfony/polyfill-uuid (v1.27.0)
  - Locking symfony/process (v6.2.7)
  - Locking symfony/routing (v6.2.7)
  - Locking symfony/service-contracts (v3.2.1)
  - Locking symfony/string (v6.2.7)
  - Locking symfony/translation (v6.2.7)
  - Locking symfony/translation-contracts (v3.2.1)
  - Locking symfony/uid (v6.2.7)
  - Locking symfony/var-dumper (v6.2.7)
  - Locking symfony/yaml (v6.2.7)
  - Locking theseer/tokenizer (1.2.1)
  - Locking tijsverkoyen/css-to-inline-styles (2.2.6)
  - Locking vlucas/phpdotenv (v5.5.0)
  - Locking voku/portable-ascii (2.0.1)
  - Locking webmozart/assert (1.11.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 106 installs, 0 updates, 0 removals
  - Downloading phpunit/phpunit (10.0.14)
  - Installing doctrine/inflector (2.0.6): Extracting archive
  - Installing doctrine/lexer (3.0.0): Extracting archive
  - Installing symfony/polyfill-ctype (v1.27.0): Extracting archive
  - Installing webmozart/assert (1.11.0): Extracting archive
  - Installing dragonmantank/cron-expression (v3.3.2): Extracting archive
  - Installing symfony/deprecation-contracts (v3.2.1): Extracting archive
  - Installing psr/container (2.0.2): Extracting archive
  - Installing fakerphp/faker (v1.21.0): Extracting archive
  - Installing symfony/polyfill-mbstring (v1.27.0): Extracting archive
  - Installing symfony/http-foundation (v6.2.7): Extracting archive
  - Installing fruitcake/php-cors (v1.2.0): Extracting archive
  - Installing psr/http-message (1.0.1): Extracting archive
  - Installing psr/http-client (1.0.1): Extracting archive
  - Installing ralouphie/getallheaders (3.0.3): Extracting archive
  - Installing psr/http-factory (1.0.1): Extracting archive
  - Installing guzzlehttp/psr7 (2.4.3): Extracting archive
  - Installing guzzlehttp/promises (1.5.2): Extracting archive
  - Installing guzzlehttp/guzzle (7.5.0): Extracting archive
  - Installing symfony/polyfill-php80 (v1.27.0): Extracting archive
  - Installing guzzlehttp/uri-template (v1.0.1): Extracting archive
  - Installing laravel/pint (v1.6.0): Extracting archive
  - Installing symfony/yaml (v6.2.7): Extracting archive
  - Installing voku/portable-ascii (2.0.1): Extracting archive
  - Installing phpoption/phpoption (1.9.1): Extracting archive
  - Installing graham-campbell/result-type (v1.1.1): Extracting archive
  - Installing vlucas/phpdotenv (v5.5.0): Extracting archive
  - Installing symfony/css-selector (v6.2.7): Extracting archive
  - Installing tijsverkoyen/css-to-inline-styles (2.2.6): Extracting archive
  - Installing symfony/var-dumper (v6.2.7): Extracting archive
  - Installing symfony/polyfill-uuid (v1.27.0): Extracting archive
  - Installing symfony/uid (v6.2.7): Extracting archive
  - Installing symfony/routing (v6.2.7): Extracting archive
  - Installing symfony/process (v6.2.7): Extracting archive
  - Installing symfony/polyfill-php72 (v1.27.0): Extracting archive
  - Installing symfony/polyfill-intl-normalizer (v1.27.0): Extracting archive
  - Installing symfony/polyfill-intl-idn (v1.27.0): Extracting archive
  - Installing symfony/mime (v6.2.7): Extracting archive
  - Installing symfony/service-contracts (v3.2.1): Extracting archive
  - Installing psr/event-dispatcher (1.0.0): Extracting archive
  - Installing symfony/event-dispatcher-contracts (v3.2.1): Extracting archive
  - Installing symfony/event-dispatcher (v6.2.7): Extracting archive
  - Installing psr/log (3.0.0): Extracting archive
  - Installing egulias/email-validator (4.0.1): Extracting archive
  - Installing symfony/mailer (v6.2.7): Extracting archive
  - Installing symfony/error-handler (v6.2.7): Extracting archive
  - Installing symfony/http-kernel (v6.2.7): Extracting archive
  - Installing symfony/finder (v6.2.7): Extracting archive
  - Installing symfony/polyfill-intl-grapheme (v1.27.0): Extracting archive
  - Installing symfony/string (v6.2.7): Extracting archive
  - Installing symfony/console (v6.2.7): Extracting archive
  - Installing ramsey/collection (2.0.0): Extracting archive
  - Installing brick/math (0.10.2): Extracting archive
  - Installing ramsey/uuid (4.7.3): Extracting archive
  - Installing psr/simple-cache (3.0.0): Extracting archive
  - Installing nunomaduro/termwind (v1.15.1): Extracting archive
  - Installing symfony/translation-contracts (v3.2.1): Extracting archive
  - Installing symfony/translation (v6.2.7): Extracting archive
  - Installing nesbot/carbon (2.66.0): Extracting archive
  - Installing monolog/monolog (3.3.1): Extracting archive
  - Installing league/mime-type-detection (1.11.0): Extracting archive
  - Installing league/flysystem (3.12.3): Extracting archive
  - Installing nette/utils (v4.0.0): Extracting archive
  - Installing nette/schema (v1.2.3): Extracting archive
  - Installing dflydev/dot-access-data (v3.0.2): Extracting archive
  - Installing league/config (v1.2.0): Extracting archive
  - Installing league/commonmark (2.3.9): Extracting archive
  - Installing laravel/serializable-closure (v1.3.0): Extracting archive
  - Installing laravel/framework (v10.1.5): Extracting archive
  - Installing laravel/sail (v1.21.0): Extracting archive
  - Installing laravel/sanctum (v3.2.1): Extracting archive
  - Installing nikic/php-parser (v4.15.3): Extracting archive
  - Installing psy/psysh (v0.11.12): Extracting archive
  - Installing laravel/tinker (v2.8.1): Extracting archive
  - Installing hamcrest/hamcrest-php (v2.0.1): Extracting archive
  - Installing mockery/mockery (1.5.1): Extracting archive
  - Installing filp/whoops (2.14.6): Extracting archive
  - Installing nunomaduro/collision (v7.0.5): Extracting archive
  - Installing sebastian/version (4.0.1): Extracting archive
  - Installing sebastian/type (4.0.0): Extracting archive
  - Installing sebastian/recursion-context (5.0.0): Extracting archive
  - Installing sebastian/object-reflector (3.0.0): Extracting archive
  - Installing sebastian/object-enumerator (5.0.0): Extracting archive
  - Installing sebastian/global-state (6.0.0): Extracting archive
  - Installing sebastian/exporter (5.0.0): Extracting archive
  - Installing sebastian/environment (6.0.0): Extracting archive
  - Installing sebastian/diff (5.0.0): Extracting archive
  - Installing sebastian/comparator (5.0.0): Extracting archive
  - Installing sebastian/code-unit (2.0.0): Extracting archive
  - Installing sebastian/cli-parser (2.0.0): Extracting archive
  - Installing phpunit/php-timer (6.0.0): Extracting archive
  - Installing phpunit/php-text-template (3.0.0): Extracting archive
  - Installing phpunit/php-invoker (4.0.0): Extracting archive
  - Installing phpunit/php-file-iterator (4.0.1): Extracting archive
  - Installing theseer/tokenizer (1.2.1): Extracting archive
  - Installing sebastian/lines-of-code (2.0.0): Extracting archive
  - Installing sebastian/complexity (3.0.0): Extracting archive
  - Installing sebastian/code-unit-reverse-lookup (3.0.0): Extracting archive
  - Installing phpunit/php-code-coverage (10.0.1): Extracting archive
  - Installing phar-io/version (3.2.1): Extracting archive
  - Installing phar-io/manifest (2.0.3): Extracting archive
  - Installing myclabs/deep-copy (1.11.0): Extracting archive
  - Installing phpunit/phpunit (10.0.14): Extracting archive
  - Installing spatie/backtrace (1.2.2): Extracting archive
  - Installing spatie/flare-client-php (1.3.5): Extracting archive
  - Installing spatie/ignition (1.4.5): Extracting archive
  - Installing spatie/laravel-ignition (2.0.0): Extracting archive
68 package suggestions were added by new dependencies, use `composer suggest` to see details.
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi

   INFO  Discovering packages.

  laravel/sail .................................................................................................. DONE
  laravel/sanctum ............................................................................................... DONE
  laravel/tinker ................................................................................................ DONE
  nesbot/carbon ................................................................................................. DONE
  nunomaduro/collision .......................................................................................... DONE
  nunomaduro/termwind ........................................................................................... DONE
  spatie/laravel-ignition ....................................................................................... DONE

80 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force

   INFO  No publishable resources for tag [laravel-assets].

No security vulnerability advisories found
> @php artisan key:generate --ansi

   INFO  Application key set successfully.

```
</details>

#### Laravel UIパッケージをインストール
composerで設定します。
```composer require laravel/ui```
```console
>cd TestApp
TestApp>composer require laravel/ui
Using version ^4.2 for laravel/ui
./composer.json has been updated
Running composer update laravel/ui
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
  - Locking laravel/ui (v4.2.1)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing laravel/ui (v4.2.1): Extracting archive
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi

   INFO  Discovering packages.

  laravel/sail .................................................................................................. DONE
  laravel/sanctum ............................................................................................... DONE
  laravel/tinker ................................................................................................ DONE
  laravel/ui .................................................................................................... DONE
  nesbot/carbon ................................................................................................. DONE
  nunomaduro/collision .......................................................................................... DONE
  nunomaduro/termwind ........................................................................................... DONE
  spatie/laravel-ignition ....................................................................................... DONE

80 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force

   INFO  No publishable resources for tag [laravel-assets].

No security vulnerability advisories found

```

#### 認証のスカフォールド構築

参考にした[アールエフェクト様の記事](https://reffect.co.jp/laravel/laravel9-laravel-ui#Vue)では```Laravel mix```を使用してコンパイルしてますが、私が作成したバージョンではデフォルトで```vite```を使用していました。
```json:package.json
{
    "private": true,
    "scripts": {
        "dev": "vite",    ←ここ
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "@vitejs/plugin-vue": "^4.0.0",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.3",
        "laravel-vite-plugin": "^0.7.2",
        "sass": "^1.56.1",
        "vite": "^4.0.0",
        "vue": "^3.2.37"
    }
}

```
```artisan```コマンドでスカフォールド構築したときに「```npm install && npm run dev```を実行してください」と警告が出ますが、```npm run dev```だとviteのHMRが起動するだけです。
```:コンソール
  VITE v4.1.1  ready in 1460 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
```
このコンソールは「q」で抜けられます。
```artisan serve```コマンドでローカルサーバを起動する場合は```npm run build```でコンパイルしたパッケージを配置します。

```console
TestApp>php artisan ui vue --auth

   INFO  Authentication scaffolding generated successfully.

   INFO  Vue scaffolding installed successfully.

   WARN  Please run [npm install && npm run dev] to compile your fresh scaffolding.


TestApp>npm install
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

added 61 packages, and audited 62 packages in 26s

9 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

TestApp>npm run build

> build
> vite build

vite v4.1.4 building for production...
✓ 116 modules transformed.
public/build/manifest.json              0.26 kB
public/build/assets/app-67dcdfd2.css  192.28 kB │ gzip: 27.26 kB
public/build/assets/app-c4335dab.js   247.41 kB │ gzip: 88.09 kB

```
:::note info
追記
都度ビルドせずとも、```npm run dev```でviteを起動した状態で別のターミナルを開き、```php artisan serve```でlocalhostサーバを起動することで、js, css周りのフロントサイド開発を効率よくできます。(勉強不足でした…)
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846175/9b0ab8a5-d591-3364-6067-3bb79a206bff.png)
VSCodeを使用している場合は上記の画像のようにターミナル(ここではコマンドプロンプト)を複数開き、viteの開発サーバとWebサーバを同時に実行します。
:::

#### データベース作成
```console
TestApp>php artisan migrate

   INFO  Preparing database.

  Creating migration table ................................................................................ 479ms DONE

   INFO  Running migrations.

  2014_10_12_000000_create_users_table .................................................................... 406ms DONE
  2014_10_12_100000_create_password_reset_tokens_table .................................................... 251ms DONE
  2014_10_12_100000_create_password_resets_table ........................................................... 84ms DONE
  2019_08_19_000000_create_failed_jobs_table .............................................................. 116ms DONE
  2019_12_14_000001_create_personal_access_tokens_table .................................................... 80ms DONE


TestApp>
```

#### サーバを立ち上げて確認
![welcome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846175/4083ca60-e718-413d-333b-8e3071d8776b.png)

Registerから適当なユーザ情報を入力して登録します。
![register.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846175/1037c026-1c93-6890-50df-6caf4a7d858c.png)

ダッシュボード画面が表示されます。
![dashboard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846175/4d35f820-2f59-bfce-6743-8f4e85281ea8.png)


アプリケーションの情報
```
TestApp>php artisan about

  Environment ........................................................................................................
  Application Name ........................................................................................... Laravel
  Laravel Version ............................................................................................. 10.1.5
  PHP Version ................................................................................................. 8.1.10
  Composer Version ............................................................................................. 2.4.4
  Environment .................................................................................................. local
  Debug Mode ................................................................................................. ENABLED
  URL ...................................................................................................... localhost
  Maintenance Mode ............................................................................................... OFF

  Cache ..............................................................................................................
  Config .................................................................................................. NOT CACHED
  Events .................................................................................................. NOT CACHED
  Routes .................................................................................................. NOT CACHED
  Views ....................................................................................................... CACHED

  Drivers ............................................................................................................
  Broadcasting ................................................................................................... log
  Cache ......................................................................................................... file
  Database ..................................................................................................... mysql
  Logs ................................................................................................ stack / single
  Mail .......................................................................................................... smtp
  Queue ......................................................................................................... sync
  Session ....................................................................................................... file


TestApp>
```


### 改造

#### vueファイルを自動的に読み込むように設定
```\resources\js\app.js```内の以下の部分のコメントアウトを外します。
```javascript:app.js
Object.entries(import.meta.glob('./**/*.vue', { eager: true })).forEach(([path, definition]) => {
    app.component(path.split('/').pop().replace(/\.\w+$/, ''), definition.default);
});
```
この部分で```\resources\js\```以下にあるVueファイルを自動的に登録してくれるようです。

#### ヘッダーコンポーネントを追加
:::note info
参考
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：Vueフロントエンド編#ヘッダーコンポーネント実装](https://qiita.com/minato-naka/items/9241d9c7a7433985056d#%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E5%AE%9F%E8%A3%85)
:::
```\resources\js\components\```に```HeaderComponent.vue```を追加します。
```vue:HeaderComponent.vue
<template>
     <div class="container-fluid bg-dark mb-3">
         <div class="container">
             <nav class="navbar navbar-dark">
                 <span class="navbar-brand mb-0 h1">Test App</span>
                 <div>
                     <button class="btn btn-success">登録</button>
                     <button class="btn btn-success">検索</button>
                 </div>
             </nav>
         </div>
     </div>
 </template>
 
 <script>
     export default {}
 </script>
```

丸パクリです(´ε｀；)
spanタグとbuttonタグのインナーテキストだけ変えてます。
このコンポーネントを```home.blade.php```で使ってみます。
```php:\resources\views\home.blade.php
@extends('layouts.app')

@section('content')
<div class="container">
    <header-component></header-component>
</div>
@endsection

```
ビルドしてみましょう。
```console
TestApp>npm run build

> build
> vite build

vite v4.1.4 building for production...
✓ 117 modules transformed.
public/build/manifest.json              0.26 kB
public/build/assets/app-67dcdfd2.css  192.28 kB │ gzip: 27.26 kB
public/build/assets/app-8c506e23.js   248.19 kB │ gzip: 88.57 kB

TestApp>php artisan serve

   INFO  Server running on [http://127.0.0.1:8000].

  Press Ctrl+C to stop the server
```
こんな感じの画面になりました。
![HeaderComponent.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846175/a5b9e67a-9251-7e06-5b49-534d3791c40e.png)