Set up the Bootstrap in Laravel 9 using Vite.

 

Vite is a front-end tooling that bundles the code for production. It updates and removes the code changes without reloading whole pages. In this article, we explain set up the bootstrap via vite

 

Step 1  =>  Create a laravel project

composer create-project --prefer-dist laravel/laravel:^9.0 example-vite-project   

 

Step 2=> install laravel UI package.

 

composer require laravel/ui 

 

Step 3=> run a below npm command

Npm install

 

Step 4=> Remove all codes from vite.config.js of laravel app folder and paste the below given codes

 

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'),

        }

    },

});

We import path because to access the bootstrap folder installed in  node_modules  directory.

Step 5 => change the bootstrap.js file available directory  resources\js\bootstrap.js with below given codes.
 

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';

 

Step 6 =>  Import scss file to the directory of resources\js\app.js to use scss file.

 

import '../sass/app.scss

 

Step 7=> now you can use the bootstrap placing code in the head tage of blade.

 

@vite(['resources/js/app.js'])

 

Step 8 => finally . run npm run dev and php artisan serve respectively in terminal.

 

Npm run dev 

php artisan serve

 

Now you can use the bootstrap features in Laravel application.