Ставим фреймворк
composer create-project laravel/laravel
Ставим пакет для интерфейса
composer require laravel/ui
Устанавливаем bootstrap 5
php artisan ui bootstrap --auth
Выполняем
npm install
Ставим bootstrap-icons
npm install bootstrap-icons
Inside your project, open the file resources\sass\app.scss and add :
@import 'bootstrap-icons/font/bootstrap-icons.css';
// Fonts
@import url('https://fonts.bunny.net/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons.css';
Import vite.config.js Bootstrap 5 Path
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'
export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
},
});
Update bootstrap.js
npm install lodash
import loadash from 'lodash';
window._ = loadash;
// UPDATE THIS LINES OF bootstrap.js FILE
import $ from 'jquery';
window.$ = $;
import * as Popper from '@popperjs/core'
window.Popper = Popper
import 'bootstrap';
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
import axios from 'axios';
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo';
// import Pusher from 'pusher-js';
// window.Pusher = Pusher;
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: import.meta.env.VITE_PUSHER_APP_KEY,
// wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
// wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
// wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
// forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
// enabledTransports: ['ws', 'wss'],
// });
Now we need to import bootstrap 5 SCSS path in resources/js/app.js file:
import './bootstrap';
import '../sass/app.scss'
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', 'Install Bootstrap 5 in Laravel 10 With Vite') }}</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 >
<div >
<a href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span ></span>
</button>
<div id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul >
</ul>
<!-- Right Side Of Navbar -->
<ul >
<!-- Authentication Links -->
@guest
@if (Route::has('login'))
<li >
<a href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@endif
@if (Route::has('register'))
<li >
<a href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li >
<a id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<div aria-labelledby="navbarDropdown">
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" >
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main >
@yield('content')
</main>
</div>
</body>
</html>Installing jQuery in Laravel with Vite
jQuery is installed using a node package manager, with a single command from the terminal. I will use npm.
At the root folder of your Laravel application run the following command.
npm install jquery --save-dev
You need to npm run build command to create asset bootstrap 5.
npm run build
Importing Select2 & Laravel Vite
To get it working without alias, follow these steps:
- Install jquery and select2:
npm i jquery select2 --save-dev
- Edit bootstrap.js for referencing jquery and select2
// import jquery and select2
import $ from "jquery";
import select2 from 'select2';
window.$ = $; // <-- jquery must be set
select2(); // <-- select2 must be called
- Import select2 CSS in app.js
//-- Select2
import "/node_modules/select2/dist/css/select2.css";
//--
import '../css/app.css';
// ...
Now you can use it in your components:
$('.js-example-basic-single').select2();