How to import boostrap v5 (js + css) into nuxt.js v2.14 with vue v3 project?

Question

As of today, bootstrap-vue does not support vue v3 and bootstrap v5.

I would like to just import bootstrap files into nuxt v2.14 project. Could anyone give me a specific example how to accomplish this?

Since I just started vue/nuxt a week ago I would appreciate help at this point.

P.S. Emphasis on CSS and JS.

Answer 1

As I installed bootstrap 5 with npm, I didn't want to do it the same way as the accepted answer so maybe this will be helpfull for someone esle:

-About css: I am used to work with scss so I installed sass loader:

npm install --save-dev sass sass-loader@10 fibers

Next in the assets folder I created a scss folder with a main.scss file inside. In this file you can import bootstrap css (like that you can even override bootstrap variables, don't forget to import them if you want to do that):

@import "~bootstrap";

Then in the nuxt.config.js I added this:

css: [
    '~/assets/scss/main.scss'
],

-The js part was the most tricky but finally it works perfectly:

In the plugins folder, just create a file named bootstrap.js Just add an import inside:

import bootstrap from 'bootstrap'

Then in your nuxt.config.js:

plugins: [
    {src: '~/plugins/bootstrap.js', mode: 'client'}
],

Dont't forget the mode:'client', if not you will get 'document is not defined' error because of server side renderning.

Enjoy :)

Edit: the nuxt js version when I write this: 2.15.3 with bootstrap 5 as well :)

Answer 2

Add bootstrap 5 css and js files in assets directory under the folder bootstrap after downloading them then configure your nuxt.config.js :

export default {
   ...
     css: ['~/assets/bootstrap/bootstrap.min.css'],
     script: [
      {
        src: "~/assets/bootstrap/bootstrap.bundle.min.js",
        type: "text/javascript"
      }
     ]
    ...
}