In this post we have explained a useful method to install Laravel 9 BootStrap 5 using Vite. Before going into it for the new users we have also explained BootStrap 5 basics, Laravel 9.19 and also the use of Vite toolkit. We also appreciate if we help solve queries which might come in the way, so do let us know we will definitely answer them to help you grasp it.
What is BootStrap 5?
Bootstrap is an open-source and free CSS mobile-first framework. Bootstrap 5 is its latest update version to help devs build responsive mobile-first sites using jsDelivr with a template started page as it provides ease to design your own hyper responsive templates with a variety of syntaxes. It has a bit of HTML, CSS and JavaScript that you can use for multiple purposes and it has been updated to Bootstrap 5.1 and BootStrap v5.2 as well.
Features of BootStrap 5
Check out some of the BootStrap 5 basics and features below:
1 – Very Easy to Access and Execute
One of the biggest advantages of BootStrap 5 is it’s very easy to access, use and execute. You can master it by just watching a few YouTube videos.
2 – Has LESS and CSS Files
BootStrap 5 also comes with old CSS files and also LESS as its core which is a dynamic preprocessor stylesheet language that can be compiled into CSS built by Alexis Sellier.
3 – Customization of BootStrap 5
What makes BootStrap 5 a favorable framework is its highly customizable and responsive even though it has been designed on 12-column layouts, components and grids. Just add a few tweaks here and there to customize the grid, it’s customized. You can also do nesting and offsetting columns for the mobile and PC browsers.
4. Responsive Utility Classes
BootStrap 5 comes with very responsive utility classes. To serve users with different screens and gadgets, BootStrap 5 utility classes can be used to show/hide content types. This is serving best to the web devs working on mobile-first sites, they can easily control components and sizes.
5 – Components of BootStrap 5
There are few pre-styled components in BootStrap 5 which make it very desirable just like its previous versions:
- Navigation
- Button
- Drop-down options
- Badges
- Alerts
- Progress Bar
6 – Drop-Down Component Menu
In today’s world of web technologies, unresponsive websites are failing miserably and there’s much that goes into the backdrop of it as they are devoid of mobile or tablet-friendliness. BootStrap 5 provides dev with drop-down tools to customize it in a split second.
7 – BootStrap 5 Templates
BootStrap 5 comes with pre-built templates that the devs can use, they prove much more helpful for the new users than the pro ones. So if you are a new developer you can still watch a few demo of BootStrap 5 and customize the templates.
What is Vite?
Vite provides next generation tooling for frontend development to build faster web apps to meet the demands of modern web providing tons of features and utilities.
Features of Vite
- Lightning Fast HMR (Hot Module Replacement)
- CSS, TypeScript and JSX, support.
- Optimization
- Quick Server Start
- Universal Plugins and Support
- Fully Typed APIs
Laravel 9.19 introduces us with vite.config.js instead of webpack.mix.js in its root. It is a major change and step up from webpack.mix.js which is making a huge difference.
Installing BootStrap 5 in Laravel 9.19 With Vite
Now we will install BootStrap 5 in Laravel 9 with the Vite tool. Here is how to install Laravel 9.19 with Laravel UI.
Follow these steps to install Bootstrap 5 in the laravel 9 with Vite.
1 – Installing The Laravel Project
2 – Install Laravel UI For Bootstrap 5
3 – Setup Auth Scaffolding with Bootstrap 5
4 – Install NPM Dependencies
5 – Import vite.config.js Bootstrap 5 Path
6 – Update bootstrap.js
7 – Import Bootstrap 5 SCSS in JS Folder
8 – Replace mix() with @vite Blade directive
9 – Running Vite Command to build Asset File
10 – Start the Local server
1 – Installing The Laravel Project
We need to install a new laravel app. Let’s go to the terminal and create a new app by typing its command to install it with the global dependency.
composer create-project --prefer-dist laravel/laravel:^9.0 laravel9-bootstrap5-vite
If you have already installed the global dependency. You can just type this in the terminal:
laravel new laravel9-bootstrap5-vite2 – Install Laravel UI For Bootstrap 5
Now we are going to install Laravel UI for BootStrap 5 using this command in our terminal
composer require laravel/ui3 – Setup Auth Scaffolding with Bootstrap 5
Let’s type the command for setting up Auth Scaffolding
php artisan ui bootstrap --auth4 – Install NPM Dependencies
Having installed the primary pre-requisites, now we are going to install NPM frontend dependencies by using this command:
npm install5 – Import vite.config.js Bootstrap 5 Path
First, you need to change vite.config.js and add the bootstrap 5 path and also remove resources/css/app.css
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'),
}
},
});6 – Update bootstrap.js
Once done with dependencies and all, the next we need to use import instead of require.
import loadash from 'lodash'
window._ = loadash
import * as Popper from '@popperjs/core'
window.Popper = Popper
import 'bootstrap'
/**
* To issue requests to our Laravel back-end we will load axios HTTP library.
* It will send CSRF tokens
* 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 uses APIs to express events such as subscriptions and other notifications
* which are broadcast by Laravel. The developers can build real-time web apps based
* on these events.
// 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
// });7 – Import Bootstrap 5 SCSS in JS Folder
Next we have to import bootstrap 5 SCSS path in our resources/js/app.js or resources/js/bootstrap.js resources/js/app.js
import './bootstrap';
import '../sass/app.scss'8 – Replace mix() with @vite Blade directive
There’s one thing important to note here. For using Vite, we need to use the @vite Blade directive instead of the mix() helper. So need to remove mix helper and add @vite directive.
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>Now 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', 'Laramatic') }}</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>
<!-- xxxxxxxxxxxxRight Side Of Navbarxxxxxxxxxxxxxxx -->
<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>9 – Running Vite Command to build Asset File
Now finally we are about to run npm build command for creating asset bootstrap 5 file.
npm run build10 – Start the Local server
Finally we need to start the local server. So open a new terminal window and execute this command
php artisan serveNow go to this link http://localhost:8000/
So this is how we can install Laravel 9 BootStrap 5 using Vite for our cutting edge web development projects. You also need to follow all the steps, you may avoid any dependencies which you already have or just reinstall them.
