Asset bundling with vite
Bootstrap
Asset bundling for Bootstrap in Laravel 10 combines essential Bootstrap files with your application’s assets into optimized bundles.
This reduces HTTP requests, speeds up page loading, and streamlines resource management, ensuring an efficient and modern development workflow.
Install Bootstrap as follows:
Run the following command in the terminal:
composer require laravel/ui
php artisan ui bootstrap
php artisan ui bootstrap
Install dependencies:
npm install
Add the following to vite.config.js:
resolve: {
alias: {
'~bootstrap': 'node_modules/bootstrap'
}
}
alias: {
'~bootstrap': 'node_modules/bootstrap'
}
}
The complete configuration should look like this:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig ({
plugins: [
laravel([
'resources/js/app.js',
] )],
resolve: {
alias: {
'~bootstrap': 'node_modules/bootstrap'
}
}
import laravel from 'laravel-vite-plugin';
export default defineConfig ({
plugins: [
laravel([
'resources/js/app.js',
] )],
resolve: {
alias: {
'~bootstrap': 'node_modules/bootstrap'
}
}
Check if the import in resources/js/app.js is correct and Bootstrap is included:
import './bootstrap';
import '../sass/app.scss'
import '../sass/app.scss'
Add Bootstrap to the HTML head file:
@vite(['resources/js/app.js'])
Run the following command in the terminal:
npm run build