How to use bootstrap in laravel with vite

Rajib Bin Alam

12 Aug 2024

9 mins to read

549 words

What is the use of Vite?

Vite is a build tool that enhances the front-end development experience. It lets you configure a development environment for Vue, React and bootstrap with laravel frameworks. Also, with the usage of Vite JS, you can develop a super-fast Single-page Application and integrate it with other back-ends. In Laravel vite use for asset bundling and vite is 2x faster then webpack laravel-mix.

Let's follow up the steps:

Install Laravel 11 (or any other version)
Install Laravel ui package and auth scaffolding for bootstrap 5
Install npm
Import bootstrap 5 path to vite.config.js
Update app.js with assets
Migrate mix() to @vite if use Laravel-mix before
Run npm for development
Run npm for Production server
Run Laravel Appcilation

Step-1: Install Laravel 11

composer create-project laravel/laravel project_name

composer global require laravel/installer
 
laravel new example-app

and Open the Laravel Application

cd project_name

code .  # open vs code

Step-2: Install Laravel ui with bootstrap scaffolding

composer require laravel/ui

php artisan ui bootstrap

if you want to install Bootstrap with auth, then

php artisan ui bootstrap --auth

Step-3: Install NPM

npm install

Step-4: Import bootstrap 5 path to vite.config.js

open vite.config.js and add path and resolve. it's located in root of the Laravel Project

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

After that, if laravel version of your project is < 9.8 or Check the 'resources/js/bootstrap.js'. if use require bootstrap than

use import instead of require.

import loadash from 'lodash'
window._ = loadash


import * as Popper from '@popperjs/core'
window.Popper = Popper

import 'bootstrap'


/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

import axios from 'axios'
window.axios = axios

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     forceTLS: true
// });

Step-5: Update app.js with assets

Move custom assets files to the resources folder from the public folder. Then

import './bootstrap';
import '../sass/app.scss'

// Custom CSS
import '../assets/css/bootstrap.min.css';
import '../assets/css/select2.min.css';
import '../assets/css/tabler.css';
import '../assets/css/style.css';
import '../assets/css/responsive.css';
import '../assets/css/variable.css';

// Custom JS
import '../assets/js/jquery-3.7.1.min';
import '../assets/js/popper.min';
import '../assets/js/bootstrap.min';
import '../assets/js/select2.min';
import '../assets/js/script';

Step-6: Migrate mix() to @vite if use Laravel-mix before

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="assets/image/favicon.png" type="assets/image/x-icon">
    @vite(['/resources/css/app.css', 'resources/js/app.js'])
    <title>Dashboard - DevzCart</title>
</head>

if you have those, those was for Laravel-mix. But we are use @vite instead of webpack, so remove those line

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>

Step-7: Run npm for development

npm run dev

Step-8: Run npm for Production Server

npm run build

Step-7: Run Laravel Appcilation

php artisan serve

Or, Do not need to serve for valet users.

Thanks