Step 1: Install Laravel Project Installing a fresh new laravel application, so head over to the terminal, type the command, and create a new laravel app. or, if you have installed the Laravel Installer as a global composer dependency: Step 2: Install Laravel UI For Bootstrap 5 Next, you need to run the below command in your terminal Step 3: Setup Auth Scaffolding with Bootstrap 5 Step 4: Install NPM Dependencies Run the following command to install frontend dependencies: Step 5: Import vite.config.js Bootstrap 5 Path First, you need to change vite.config.js and add the bootstrap 5 path & remove resources/css/app.css Step 6: Update bootstrap.js We need to use import instead of require. Step 7: Import Bootstrap 5 SCSS in JS Folder Now you need to import bootstrap 5 SCSS path in you resources/js/app.js or resources/js/bootstrap.js Step 8: Replace mix() with @vite Blade directive When using Vite, you will need to use the @vite Blade directive instead of the mix() helper. remove mix helper and add @vite directive. Step 9: Running Vite Command to build Asset File You need to npm run build command to create asset bootstrap 5. Step 10: Start the Local server Now open a new terminal and execute the following command from your terminal to run the development server. and navigate to the following link http://localhost:8000/ Thank you for reading this blog.
کد:
composer create-project --prefer-dist laravel/laravel:^9.0 laravel9-bootstrap5-vite PHP:
laravel new laravel9-bootstrap5-vite PHP:
composer require laravel/ui PHP:
php artisan ui bootstrap --auth کد:
npm install PHP:
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'), } }, }); PHP:
import loadash from 'lodash' window._ = loadash import axios from 'axios' window.axios = axios window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; // import Echo from 'laravel-echo'; // window.Pusher = require('pusher-js'); // window.Echo = new Echo({ // broadcaster: 'pusher', // key: process.env.MIX_PUSHER_APP_KEY, // cluster: process.env.MIX_PUSHER_APP_CLUSTER, // forceTLS: true // }); PHP:
resources/js/app.js import './bootstrap'; import '../sass/app.scss' import * as bootstrap from 'bootstrap' PHP:
<link rel="stylesheet" href="{{ mix('css/app.css') }}"> <script src="{{ mix('js/app.js') }}" defer></script> use @vite directive @vite(['resources/js/app.js']) views/layouts/app.blade <!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title> <!-- Fonts --> <link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> @vite(['resources/js/app.js']) </head>
<body> <div id="app"> <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container"> <a class="navbar-brand" href="{{ url('/') }}"> {{ config('app.name', 'Laravel') }} </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- Left Side Of Navbar --> <ul class="navbar-nav me-auto"> </ul> <!-- Right Side Of Navbar --> <ul class="navbar-nav ms-auto"> <!-- Authentication Links --> @guest @if (Route::has('login')) <li class="nav-item"> <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a> </li> @endif @if (Route::has('register')) <li class="nav-item"> <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a> </li> @endif @else <li class="nav-item dropdown"> <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> {{ Auth::user()->name }} </a> <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> {{ __('Logout') }} </a> <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none"> @csrf </form> </div> </li> @endguest </ul> </div> </div> </nav> <main class="py-4"> @yield('content') </main> </div> </body> </html> PHP:
npm run build PHP:
php artisan serve آخرین ویرایش:
