DEV Community

Tanzim Ibthesam
Tanzim Ibthesam

Posted on • Edited on

1

Install boostrap in Laravel 9 with Vite

As we as of latest version Laravel switched from webpack to Vite so I am going to mention how you can install bootstrap with Vite.
Instead of webpack.mixin.js now we see vite.config.js.Now you can see vite config file.
If we look at project directory from the top we can see vite.config.js
topprojectdirectory

ViteConfigfile

So there are two ways to install Bootstrap
The first simple way is via CDN
If we go to welcome.blade.php we can just put in a CDN link and it will work exactly like you want.
welcomebladecdn

We include it like regular css and javascript.
Second is via NPM here we will take help of the ui package.
First type composer require laravel/ui
Then php artisan ui bootstrap
Now we see there is webpack.mixin.js we can delete it
bootstrap
We need to go to vite.config.js and write ![vitepathdefined]
viteconfig
in bootstrap.js
Here we need to import app.scss
importappcsss
Then write import * as bootstrap from bootstrap
Then go to welcome.blade.php and write this as per documentation in head section of html
@vite(['resources/css/app.css', 'resources/js/app.js'])
viteinawelcomeblade
In CLI now run npm install and npm run dev
If we run we see the same output
outputofbootstrap

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more