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, runnpm install
after you create your first laravel app
Top comments (0)