また備忘録になります
今回はLaravel9にログイン認証周りをインストールするときの手順になります
▼手順
1. laravel/uiのインストール
composer require laravel/ui --dev
2. php artisan の実行
php artisan ui vue --auth
→Vue scaffolding installed successfully が表示されることを確認する
3. npm のインストール
dnf install nodejs npm -y
→nodejs と npm がインストールされることを確認する
4. npm の実行
npm install && npm run dev
→おそらく下記エラーが出るので、以下手順を実施する
ERROR in ./resources/js/components/ExampleComponent.vue 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > <template> | <div class="container"> | <div class="row justify-content-center"> webpack compiled with 1 error
5. vue が読み込めるようにする
webpack.mix.js を下記へ修正する
・修正前
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
↓
・修正後
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
→ .vue() を追記
6. 再度 npm の実行
npm install && npm run dev
→下記のように表示されることを確認する
✔ Compiled Successfully in 17691ms ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐ │ File │ Size │ ├───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤ │ /js/app.js │ 1.03 MiB │ │ css/app.css │ 1 bytes │ └───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘ webpack compiled successfully
★おまけ
1. npm run dev でエラーが出力される
▼エラー内容
Vite manifest not found at...... public/build
→ build ディレクトリ配下に manifest.json ファイルが存在しない
・buildオプションをつけてnpmを実行する
npm run build
→おそらくbuildが実行できないエラーが出る
・package.json に下記を追記する
"production": "mix --production", "build": "vite build" ←追記する
→このまま実行するとviteのエラーが出るので、以降の手順を実行する
・npmプラグインをインストールする
npm install --save-dev @vitejs/plugin-vu --force
npm install --save-dev vite laravel-vite-plugin --force
→vueのバージョンを無視して入れているので注意
・buildオプションをつけて再度npmを実行する
npm run build
→node.jsのバージョン違いでエラーが出る可能性が高いので、node.jsをバージョンアップする
・nvmのインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
・シェルの読み込み
source ~/.nvm/nvm.sh
・バージョン確認
nvm --version
→0.35.3 が表示されることを確認する
・node.jsのバージョン確認
nvm ls-remote
・node.jsのインストール
nvm install [バージョン]
・バージョン切り替え
nvm use [バージョン]
・ビルドの実行
npm run build
→下記のように表示されればok
✓ 102 modules transformed. public/build/manifest.json 0.32 kB │ gzip: 0.17 kB public/build/assets/app-BCqQedR8.css 226.93 kB │ gzip: 30.89 kB public/build/assets/app-BR3MyxPW.js 271.14 kB │ gzip: 95.07 kB ✓ built in 48.72s
・ブラウザから確認
▼まとめ
おそらくこれで Laravel9 でログイン認証周りのひな型が作成されたと思います