What is best way for including bootstrap.css to nuxt project?

Question

This is a part of my nuxt.config.js file:

 head: {

 link: [
     { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
       // load bootsttrap.css from CDN      
       //{ type: 'text/css', rel: 'stylesheet', href: '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' },
     ]
   },
   css: [
     // this line include bootstrap.css in each html file on generate 
     'bootstrap/dist/css/bootstrap.css',
     'assets/main.css'
   ],

In this case bootstrap.css included in each html file on nuxt generate. For resolve it I comment line 'bootstrap/dist/css/bootstrap.css' in css section and uncomment rel stylesheet line in link section.

After this bootstrap.css file loaded from CDN and not included in html files. So, I think it not is very well idea.

How copy bootstrap.css from 'node_modules/bootstrap/dist/...' to '~/assets' on build, and after this, load it from here?

Answer 1

This is the simplest way I have found to include the regular Bootstrap version (not Bootstrap-Vue) in your Nuxt.js project. First, install Bootstrap from your Nuxt.js project directory (I'm using version 5.0.0-beta2):

npm install bootstrap

Then, in nuxt.config.js file, include Bootstrap's CSS and Javascript like this:

css: [
    "~/node_modules/bootstrap/dist/css/bootstrap.min.css"
],
plugins: [
    { src: "~/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js", mode: "client" }
],

Note the mode: "client" flag which indicates that the Javascript should only be run on the client. This prevents a ReferenceError: document is not defined error that happens because Bootstrap is not compatible with server side rendering.