Laravel vite install bootstrap

Install package

Ensure you have install vite and laravel-vite-plugin

npm install --save-dev vite laravel-vite-plugin

No need to do this if you make a new app since its included when you create laravel app

and then install bootstrap

npm install --save-dev sass bootstrap @popperjs/core

Configure vite

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

this allow vite to use bootstrap as an alias so we can use it on js and scss file

Import package

Create a new file in your resource folder app.scss and import it

// app.scss
// Import Bootstrap css
@import "~bootstrap/scss/bootstrap";

and last, import it to the resources/js/app.js file or resources/js/bootstrap.js file, laravel create those 2 file on the first time

// app.js
// Import our CSS that included bootstrap css
import '../app.scss'

// Import bootstrap JS
import * as bootstrap from 'bootstrap'

and then load it in your blade template
@vite(['resources/js/app.js'])

to run it

npm run dev

and laravel server

php artisan serve

if you have error vite is not recognize as a command or vite not found ensure you already install it, run npm install after you create your first laravel app

Footnote

Laravel vite docs