Set up Bootstrap in Laravel 9  using Vite

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: [





    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.




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. 



Leave a comment

Your email address will not be published. Required fields are marked *