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

Add and Customize Bootstrap in Nuxt.js

Ravgeet Dhillon

Ravgeet Dhillon

Written on Dec 20, 2020 in Design

⏱ 4 min read

Blog banner for Add and Customize Bootstrap in Nuxt.js

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

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 --save bootstrap bootstrap-vue
npm install --save-dev sass-loader node-sass

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.

📫

Loved this post? Join our Newsletter.

We write about React, Vue, Flutter, Strapi, Python and Automation. We don't spam.

Please add a valid email.
By clicking submit button, you agree to our privacy policy.
Thanks for subscribing to our newsletter.
There was some problem while registering your newsletter subscription. Please try again after some time or notify the owners at info@ravsam.in

ABOUT AUTHOR

Ravgeet Dhillon

Ravgeet is a Co-Founder and Developer at RavSam. He helps startups, businesses, open-source organizations with Digital Product Development and Technical Content Writing. He is a fan of Jamstack and likes to work with React, Vue, Flutter, Strapi, Node, Laravel and Python. He loves to play outdoor sports and cycles every day.

TAGGED WITH

Got a project or partnership in mind?

Let's Talk

Contact Us ->