How to use Bootstrap5 with Vite and Nuxt3?

Question

Tailwind makes it easy to use its CSS in projects set up with Vite as you can see here.

However, Bootstrap 5 only has information available for using with Webpack.

I can not find anything about how to set Bootstrap 5 CSS with Vite. Does anyone have any tips on how to successfully and optimally set up Bootstrap 5 with Vite? I am using Nuxt3 but it should not matter which framework one uses.

Hi, what did you tried so far?

kissu
– kissu

2022-04-14 12:22:00 +00:00
Commented Apr 14, 2022 at 12:22 — kissu
– kissu, Commented Apr 14, 2022 at 12:22

bruha · Accepted Answer · 2022-06-09 22:37:02Z

6

Variant 1. Add it to nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', integrity: 'sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor', crossorigin: 'anonymous' }
      ],
      script: [
        { src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', integrity: 'sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2', crossorigin: 'anonymous' }
      ]
    }
  }
})

Downside: needs manual version control, you can't use SASS features.

Variant 2.

Install bootstrap alongside @popperjs/core

yarn add bootstrap @popperjs/core

Create plugins/useBootstrap.client.ts file

import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.provide('bootstrap', bootstrap)
})

No need to import it manually, since Nuxt3 will do it for you. Bootstrap JS should be available in your components/pages through

const { $bootstrap } = useNuxtApp()

Create assets/styles/main.scss file

@import 'bootstrap/scss/bootstrap';

Add it to nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  css: ['~/assets/styles/main.scss']
})

edited Jun 9, 2022 at 22:37

answered Jun 6, 2022 at 21:03

bruha

2,5451 gold badge22 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

redshift Over a year ago

Is it possible to just import a single plugin instead of ALL of bootstrap JS plugins? For example, just want to use the Dropdown component.

cyril Over a year ago

for me all solutions are note working, for CSS ok but for js , nothing happen even if js is present, for example menu toggle collapse

maestroosram Over a year ago

With variant 2 I always get "Document is not defined"

Feras Mohamed · Accepted Answer · 2023-02-06 07:02:50Z

2

Now you can find the official words from bootstrap v5.2 Document

https://getbootstrap.com/docs/5.2/getting-started/vite/

After install Nuxt3 this is official guide:

1- Install Vite. Unlike our Webpack guide, there’s only a single build tool dependency here. We use --save-dev to signal that this dependency is only for development use and not for production.

npm i --save-dev vite

2- Install Bootstrap. Now we can install Bootstrap. We’ll also install Popper since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Popper here.

npm i --save bootstrap @popperjs/core

3- Install additional dependency. In addition to Vite and Bootstrap, we need another dependency (Sass) to properly import and bundle Bootstrap’s CSS

npm i --save-dev sass

edited Feb 6, 2023 at 7:02

answered Jan 31, 2023 at 12:44

Feras Mohamed

311 silver badge2 bronze badges

2 Comments

tdy Over a year ago

While this link may answer the question, you should also include the essential parts into the answer itself. Link-only answers usually get deleted. - From Review

Feras Mohamed Over a year ago

sorry, I edit my answer to add new extra info thanks @tdy

Andreas Mueck · Accepted Answer · 2022-11-17 13:58:55Z

0

You can import JavaScript plugins individually as needed to keep bundle sizes down:

import Alert from 'bootstrap/js/dist/alert';

or, specify which plugins you need:

import { Tooltip, Toast, Popover } from 'bootstrap';

answered Nov 17, 2022 at 13:58

Andreas Mueck

11 bronze badge

1 Comment

redshift Over a year ago

Not sure this works becasue some of the jS components such as the modal and drop down will break on SSR, thus need to set it up as a plugin using the .client format extension.

Collectives™ on Stack Overflow

How to use Bootstrap5 with Vite and Nuxt3?

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related