Set up Bootstrap in Laravel 9 using Vite

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.