Bootstrap5-Auth With Vite

Laravel 9.19からLaravel MixがViteへと置き換わった、webpack.mix.jsの代わりにvite.config.jsが導入され、webpack.mix.jsが無くなった。
Viteとは高速な開発環境を作りコードを本番用に構築する最新のフロントエンド・ビルド・ツール。
Laravel9ではUIのスタータはBreezeとJetstreamが主となっている、従来のlaravel/uiは隠れているが、使うことはできる。
Bootstrap5をlaravel/uiに bootstrap –authとしてインストールする。
vite-bootstrap5プロジェクト作成
composer create-project –prefer-dist laravel/laravel vite-bootstrap5
Bootstrapのインストール
composer require laravel/ui
php artisan ui bootstrap –auth
node js packageのインストール
npm install
vite.config.jsの編集でBootstrap5のパスを記述

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'

export default defineConfig({
plugins: [
　　laravel([
　　'resources/js/app.js',
　　]),
　],
　resolve: {
　　alias: {
　　'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
　　}
　},
});

resources/js/bootstrap.jsの編集

import loadash from ‘lodash’
window._ = loadash

import * as Popper from ‘@popperjs/core’
window.Popper = Popper

import ‘bootstrap’

import axios from ‘axios’
window.axios = axios

window.axios.defaults.headers.common[‘X-Requested-With’] = ‘XMLHttpRequest’;

resources/js/app.jsの編集

import ‘./bootstrap’;

import ‘../sass/app.scss’

resources/views/layouts/app.blade.phpでは、従来mix() を使っていたときは
<link rel=”stylesheet” href=”{{ mix(‘css/app.css’) }}”>
<script src=”{{ mix(‘js/app.js’) }}” defer></script>
だったが、laravel9でviteに書き換わっている
<!– Scripts –>
@vite([‘resources/sass/app.scss’, ‘resources/js/app.js’])

npmでviteを起動するが
npm run dev ではコンソールにそのまま継続しているので。別ターミナルが必要
npm run build で書き込んでターミナルを終了させておく。

データベースを作成
php artisan migrate
php artisan serve でwebアクセス。

登録

ダッシュボード