\u0421\u0442\u0430\u0432\u0438\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a<\/p>\n
composer create-project laravel\/laravel<\/pre>\n\n\n\n\u0421\u0442\u0430\u0432\u0438\u043c \u043f\u0430\u043a\u0435\u0442 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430<\/p>\n\n\n\n
composer require laravel\/ui<\/pre>\n\n\n\n\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c bootstrap 5<\/p>\n\n\n\n
php artisan ui bootstrap --auth\n<\/pre>\n\n\n\n\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c<\/p>\n\n\n\n
npm install <\/pre>\n\n\n\n\u0421\u0442\u0430\u0432\u0438\u043c bootstrap-icons<\/p>\n\n\n\n
npm install bootstrap-icons <\/pre>\n\n\n\nInside your project, open the file resources\\sass\\app.scss<\/strong> and add :<\/p>\n\n\n\n
@import 'bootstrap-icons\/font\/bootstrap-icons.css';<\/pre>\n\n\n\n\/\/ Fonts
<\/em>@import url('https:\/\/fonts.bunny.net\/css?family=Nunito');
\/\/ Variables
<\/em>@import 'variables';
\/\/ Bootstrap
<\/em>@import 'bootstrap\/scss\/bootstrap';
@import 'bootstrap-icons\/font\/bootstrap-icons.css';<\/pre>\n\n\n\n<\/p>\n\n\n\n
Import vite.config.js Bootstrap 5 Path<\/strong><\/p>\n\n\n\n
import { defineConfig <\/em>} from 'vite';
import laravel <\/em>from 'laravel-vite-plugin';
import path from 'path'
export default defineConfig<\/em>({
plugins: [
laravel<\/em>({
input: [
'resources\/sass\/app.scss',
'resources\/js\/app.js',
],
refresh: true,
}),
],
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules\/bootstrap'),
}
},
});<\/pre>\n\n\n\nUpdate bootstrap.js<\/strong><\/p>\n\n\n\n
npm install lodash<\/pre>\n\n\n\nimport loadash from 'lodash';\nwindow._ = loadash;\n\n\/\/ UPDATE THIS LINES OF bootstrap.js FILE\nimport $ from 'jquery';\nwindow.$ = $;\n\nimport * as Popper from '@popperjs\/core'\nwindow.Popper = Popper\n\nimport 'bootstrap';\n\n\/**\n * We'll load the axios HTTP library which allows us to easily issue requests\n * to our Laravel back-end. This library automatically handles sending the\n * CSRF token as a header based on the value of the \"XSRF\" token cookie.\n *\/\n\nimport axios from 'axios';\nwindow.axios = axios;\n\nwindow.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\n\n\/**\n * Echo exposes an expressive API for subscribing to channels and listening\n * for events that are broadcast by Laravel. Echo and event broadcasting\n * allows your team to easily build robust real-time web applications.\n *\/\n\n\/\/ import Echo from 'laravel-echo';\n\n\/\/ import Pusher from 'pusher-js';\n\/\/ window.Pusher = Pusher;\n\n\/\/ window.Echo = new Echo({\n\/\/ broadcaster: 'pusher',\n\/\/ key: import.meta.env.VITE_PUSHER_APP_KEY,\n\/\/ wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,\n\/\/ wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,\n\/\/ wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,\n\/\/ forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',\n\/\/ enabledTransports: ['ws', 'wss'],\n\/\/ });\n<\/pre>\n\n\n\nNow we need to import bootstrap 5 SCSS path in
resources\/js\/app.js<\/code> file:<\/p>\n\n\n\nimport '.\/bootstrap';
import '..\/sass\/app.scss'<\/pre>\n\n\n\nuse @vite<\/strong> directive<\/p>\n
@vite(['resources\/js\/app.js'])<\/code><\/pre>\n\n\n\nviews\/layouts\/app.blade<\/em><\/p>\n
<!doctype html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n <!-- CSRF Token -->\n <meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n\n <title>{{ config('app.name', 'Install Bootstrap 5 in Laravel 10 With Vite') }}<\/title>\n\n <!-- Fonts -->\n <link rel=\"dns-prefetch\" href=\"\/\/fonts.gstatic.com\">\n <link href=\"https:\/\/fonts.googleapis.com\/css?family=Nunito\" rel=\"stylesheet\">\n\n @vite(['resources\/js\/app.js'])<\/strong>\n\n<\/head>\n<body>\n <div id=\"app\">\n <nav >\n <div >\n <a href=\"{{ url('\/') }}\">\n {{ config('app.name', 'Laravel') }}\n <\/a>\n <button type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"{{ __('Toggle navigation') }}\">\n <span ><\/span>\n <\/button>\n\n <div id=\"navbarSupportedContent\">\n <!-- Left Side Of Navbar -->\n <ul >\n\n <\/ul>\n\n <!-- Right Side Of Navbar -->\n <ul >\n <!-- Authentication Links -->\n @guest\n @if (Route::has('login'))\n <li >\n <a href=\"{{ route('login') }}\">{{ __('Login') }}<\/a>\n <\/li>\n @endif\n\n @if (Route::has('register'))\n <li >\n <a href=\"{{ route('register') }}\">{{ __('Register') }}<\/a>\n <\/li>\n @endif\n @else\n <li >\n <a id=\"navbarDropdown\" href=\"#\" role=\"button\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" v-pre>\n {{ Auth::user()->name }}\n <\/a>\n\n <div aria-labelledby=\"navbarDropdown\">\n <a href=\"{{ route('logout') }}\"\n onclick=\"event.preventDefault();\n document.getElementById('logout-form').submit();\">\n {{ __('Logout') }}\n <\/a>\n\n <form id=\"logout-form\" action=\"{{ route('logout') }}\" method=\"POST\" >\n @csrf\n <\/form>\n <\/div>\n <\/li>\n @endguest\n <\/ul>\n <\/div>\n <\/div>\n <\/nav>\n\n <main >\n @yield('content')\n <\/main>\n <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nInstalling jQuery in Laravel with Vite<\/a><\/h3>\n\n\n\n