How to Install Bootstrap in Laravel 11 Using Vite

By:
On:
In: Laravel
Tagged: , , ,
With: 0 Comments

To install Bootstrap in Laravel 11 using Vite, you can leverage Laravel Mix, which is a wrapper around Webpack, allowing you to compile assets easily. Vite is a next-generation frontend build tool that provides a fast development experience. Here’s a guide on how to set up Bootstrap with Vite in Laravel 11.

  1. Install Laravel 11: If you haven’t already, start by setting up a new Laravel project or use an existing one.
laravel new project-name
  1. Install Vite: Install Vite in your Laravel project using npm or yarn.
npm install --save-dev vite @vitejs/plugin-vue
  1. Create Vite Configuration: Create a vite.config.js file in the root directory of your Laravel project. This file will contain the Vite configuration.
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
});
  1. Install Bootstrap: Install Bootstrap and its dependencies using npm or yarn.
npm install bootstrap
  1. Import Bootstrap in your app: Import Bootstrap CSS into your main stylesheet file. Create a resources/css/app.css file if it doesn’t exist already, and import Bootstrap styles.
/* resources/css/app.css */
@import "~bootstrap/dist/css/bootstrap.min.css";
  1. Configure Vite to Process CSS: Update the vite.config.js to process CSS files.
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {},
  },
});
  1. Reference CSS in Laravel Layout: Include the compiled CSS file in your Laravel layout. Typically, you’d include it in your resources/views/layouts/app.blade.php file.
<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    @yield('content')
</body>
</html>
  1. Compile Assets: Run the Laravel Mix build command to compile your assets.
npm run dev

With these steps, you’ll have Bootstrap installed in your Laravel 11 project using Vite for faster development and efficient asset bundling. You can now start building responsive and stylish web applications with Bootstrap within Laravel.

Leave a Reply