How to add and customize Bootstrap in Nuxt.js

Learn how to improve the look and feel of a Nuxt project by configuring the default Bootstrap behavior.

Installing Bootstrap

npm install --save bootstrap bootstrap-vue
npm install --save-dev sass-loader node-sass

Creating a Custom SCSS

$theme-colors: (
'primary': #145bea,
'secondary': #833bec,
'success': #1ce1ac,
'info': #ff7d50,
'warning': #ffbe0b,
'danger': #ff007f,
'light': #c0ccda,
'dark': #001738,
);

@import '~/node_modules/bootstrap/scss/bootstrap.scss';

Importing Bootstrap Vue

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

Configuring Nuxt Config

export default {

...

// add your custom sass file
css: ['@/assets/scss/custom.scss', ...],

// add your plugin
plugins: ['~/plugins/bootstrap.js', ...],

// add bootstrap-vue module for nuxt
modules: ['bootstrap-vue/nuxt', ...],

// specify module rules for css and scss
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
],
},

// use these settings to use custom css
bootstrapVue: {
bootstrapCSS: false,
icons: true,
},

...
}

About RavSam Web Solutions

You might also enjoy reading

Full Stack Developer — React, Vue, Flutter, Laravel, Node, Strapi, Python and Technical Content Writer • Visit ravgeet.in