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

javascript vue.js nuxt.js
tolyan picture tolyan · Dec 25, 2017 · Viewed 9k times · Source

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

Armin picture Armin · Jul 23, 2019

I use this solution, works like a charm and is the best one in my opinion, fast and easy, follow these steps:

1 .Install bootstrap-vue

 npm i bootstrap-vue

2.Create the file plugins/bootstrap-vue.js and in it type:

/* eslint-disable import/first */
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

3.Add created plugin to nuxt.config.js ... plugins: [ '@/plugins/bootstrap-vue', ], ...

After these steps it should work and you can use bootstrap.

Related questions

Nuxt.JS: How to get route url params in a page

I am using Nuxt.js, and have a dymanic page which is defined under pages/post/_slug.vue So, when I visit the page url, say, http://localhost:3000/post/hello-world, how can I read this slug parameter value inside my …

Read More
Why Prettier does not format code in VSCODE?

In my Nuxt application where ESlint and Prettier are installed and enabled, I switched to Visual Studio Code editor. When I open a .vue file and press CMD+ Shift + P and choose Format Document, my file does not get formatted …

Read More
"document is not defined" in Nuxt.js

I am trying to use Choices.js within a Vue component. The component compiles successfully, but then an error is triggered: [vue-router] Failed to resolve async component default: ReferenceError: document is not defined In the browser I see: ReferenceError document …

Read More