Configuring a framework is always tricky especially when you are just starting. Today, you’ll learn to add and customize Bootstrap in your Nuxt.js project. Once you have gone through this guide, you’ll get an overall idea of how to make things work in Nuxt.js. By learning how to set up Bootstrap, you can install Popper.js and JQuery as well which are peer dependencies for Bootstrap.

Contents

• Installing Bootstrap
• Creating a Custom SCSS
• Importing Bootstrap Vue
• Configuring Nuxt.js Config

Installing Bootstrap

Before starting, you need to install the required NPM packages. You’ll need to install bootstrap and optionally bootstrap-vue if you want to use Bootstrap Vue components.

Also, you need to customize the Bootstrap by adding custom SCSS files, you need to install some dev dependencies as well. In this case, you’ll need to install sass-loader and node-sass.

Visit your project directory, open your terminal and execute the following commands:

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

Creating a Custom SCSS

Next, create a custom.scss file in the assets/scss directory. In this file, you need to import Bootstrap’s bootstrap.scss. Add the following styling to change the default color system of Bootstrap.

$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';

Instead of importing the entire bootstrap.scss, you can import individual scss files but as the project grows you may need to use all the modules. It is of course a good idea to only import what is needed. So instead of worrying about increased module size, you can use PurgeCSS plugin for Nuxt.js to remove unused CSS from your project when you build it for production.

Importing Bootstrap Vue

Next, you need to configure Bootstrap-Vue in your project. You need to create a plugin and install it via Vue.use() to access Vue components globally in your project.

Create a bootstrap.js file in the plugins directory and add the following code to it:

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

Importing IconsPlugin is optional. You can skip it in case you prefer to use FontAwesome icons or any other icon library.

Configuring Nuxt.js Config

The final step is to configure some settings in nuxt.config.js. Change your config to look like this:

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,
  },

  ...
}

That’s it. You have set up your Nuxt.js project to use customized Bootstrap settings. You can override any Bootstrap defaults and customize the look and feel of your project to your advantage.