Guide on integrating bootstrap.css into your nuxt project:

1 .Start by installing bootstrap-vue

 npm i bootstrap-vue

2.Create a new file named plugins/bootstrap-vue.js and add the following code:

/* 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.Include the newly created plugin in nuxt.config.js:

 plugins: [
    '@/plugins/bootstrap-vue',
  ],

Once these steps are completed, you should be able to utilize bootstrap in your project.

Here is a straightforward method I have discovered for incorporating the traditional Bootstrap version (not Bootstrap-Vue) into your Nuxt.js project. To begin, install Bootstrap from within your Nuxt.js project directory (I am utilizing version 5.0.0-beta2):

npm install bootstrap

Next, within your nuxt.config.js file, insert Bootstrap's CSS and Javascript in the following manner:

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

Pay attention to the mode: "client" flag, which signifies that the Javascript should only execute on the client side. This helps prevent a

ReferenceError: document is not defined

error that may arise due to Bootstrap's incompatibility with server-side rendering.

If you're working with SCSS, here's the best approach that works for me

Firstly, I always create a separate sass directory within the assets folder in my Nuxt project.

Inside this newly created sass directory, I make sure to include an app.scss file.

Within the app.scss file, I import the necessary files like so:

@import "bootstrap-variable-override";
@import "~bootstrap/scss/bootstrap.scss";

Next step is to run the command

yarn add node-sass sass-loader --save

in your terminal.

Afterwards, don't forget to modify the css array in your nuxt.config.js file to include the path to your app.scss file:

  css: [
    '@/assets/sass/app.scss'
  ],

This setup will compile any SCSS code you write and import in the app.scss file, providing it as compiled CSS output.

However, if you are using Bootstrap Vue, simply adding the following module should be sufficient:

  modules: ['bootstrap-vue/nuxt']

How to Easily Incorporate Bootstrap 5 into Your Nuxt.js Project

If you're looking for a quick and hassle-free way to add Bootstrap 5 to your Nuxt.js project, simply clone my bootstrap 5 with Nuxt boilerplate repository by visiting this link.

Quick Installation Steps

npm install bootstrap@next

Please note that the command may vary as Bootstrap 5 is currently in beta version.

After installing Bootstrap, make sure you install necessary loaders to compile it properly.

npm install --save-dev sass sass-loader fibers postcss postcss-loader autoprefixer 

Although fibers installation is not mentioned in Bootstrap documentation, it enables synchronous compilation with Sass automatically (resulting in a 2x speed increase).

Integrating Bootstrap's CSS and Custom Styles

To customize Bootstrap styles, create a 'mystyle.scss' file in a folder named 'bootstrap' within your Nuxt project's 'assets' directory. Don't forget to import Bootstrap styles at the end of this file using:

@import "~bootstrap/scss/bootstrap";

Ensure you import this line as the last statement in your .scss file.

Next, update the nuxt.config.js file as follows:

export default {
 css: [ { src: '~/assets/bootstrap/mystyle.scss', lang: 'sass'} ],
 }

This will apply the customized Bootstrap styles throughout your Nuxt project.

Incorporating Bootstrap's Javascript Functionality

Download Bootstrap and copy the 'bootstrap.bundle.min.js' file from its 'js' folder to your Nuxt project's 'static' folder. Modify your nuxt.config.js to include it:

export default {
  script: [
    {
      src: '/bootstrap.bundle.min.js',
    }
  ]
}

That's all - you're good to go!

For a more detailed explanation, check out my Medium article here.

For those seeking to streamline their CSS imports, particularly bootstrap from node_modules, into a unified file for Nuxt generation, one option is to add an at-rule import to your 'assets/main.css' (it is recommended to update it to '~/assets/main.css') as specified in your configuration.

@import '../node_modules/bootstrap/dist/css/bootstrap.css'

A quick note: while running Nuxt in dev mode will inject the CSS through JS, when generated, Nuxt will produce a single, hashed, CSS file in the document root directory.

To ensure my bootstrap.css file was properly linked, I stored it in the "static" folder and then added it to the nuxt.config.js like this:

head: {
title: "Nuxt",
meta: [
  { charset: "utf-8" },
  { name: "viewport", content: "width=device-width, initial-scale=1" },
  {
    hid: "description",
    name: "description",
    content: "Nuxt"
  }
],
link: [
  { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
  { rel: "stylesheet", href: "/css/bootstrap.css" } //Make sure to register your static asset 
]

},

When I needed to include it in my project, I simply added it as an object entry in the link array within the nuxt.config.js file.

link: [     
    {rel: 'stylesheet', type: 'text/css', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'}
]

If you're someone who loves to personalize the default style of Bootstrap, here's how I set up my customization:

Within my assets/styles/_bootstrap.scss file, I've imported the necessary styles:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
//@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/utilities";

In case you wish to tweak the default Bootstrap style, I've also created a file named

assets/styles/_bootstrap-variables.scss

:

You can find numerous variables in the

node-modules/bootstrap/scss/variables.scss

file, but I've made changes to just a few.

@import url('https://fonts.googleapis.com/css?family=Cabin:400,500,700');

$font-family-cabin: 'Cabin', sans-serif;
$font-family-base:  $font-family-cabin;

$primary:       #b62f20;
$secondary:     #e8e8e9;
$success:       #87b4a6;
$info:          #f0f6fc;
//$warning:       #faeecf;
//$danger:        $red !default;
//$light:         $gray-100 !default;
//$dark:          $gray-800 !default;

All of my other styles and plugins are imported in a single file called assets/styles/main.scss:

@import "bootstrap-variables"; // remember, this should always go first
@import "bootstrap";
@import "my-other-style";

Finally, I import the stylesheet into layouts/default.vue:

<template lang="pug">
  div
    nuxt
</template>

<style lang="scss">
  @import '../assets/styles/main';
</style>

To add bootstrap-vue to your project, follow these steps:

yarn add bootstrap-vue

Next, modify the nuxt.config.js file by including a module and configuration for importing icons:

modules: ['bootstrap-vue/nuxt'],
 bootstrapVue: {
   icons: true // Enable IconsPlugin alongside BootStrapVue plugin
 }

That's all there is to it! For further customization options, refer to the documentation available at . Check out the section on integrating with nuxt for more details.

I implemented Bootstrap v5 in my project using the nuxt.config.js file.

Here is a snippet from the configuration:

  css: [
    '~/assets/scss/main.scss',
  ],
  styleResources: {
    scss: [
      '~/node_modules/bootstrap/scss/_functions.scss',
      '~/node_modules/bootstrap/scss/_variables.scss',
      '~/node_modules/bootstrap/scss/_mixins.scss',
      '~/node_modules/bootstrap/scss/_containers.scss',
      '~/node_modules/bootstrap/scss/_grid.scss'
    ]
  },
  modules: [
    '@nuxtjs/style-resources',
  ],

I used @nuxtjs/style-resources to make mixins, variables, and grid available inside components. Check out this link for more information: https://www.npmjs.com/package/@nuxtjs/style-resources

In the main.scss file, I imported various bootstrap configurations and optional styles according to my requirements:

@import "bootstrap-configuration";
@import "bootstrap-optional";
@import "@/node_modules/bootstrap/scss/helpers";
@import "@/node_modules/bootstrap/scss/utilities/api";
@import "custom";

The custom.scss file contains overrides for Bootstrap variables and custom CSS for specific components, such as colors and typography:

$theme-colors: (
  ...
);

@import
'mixins/mixins';

@import
'_base/colors',
'_base/typography',
'_base/headings';

@import
  'components/_page-header',
  'components/text-editor',
  ...

You can find more optimization tips on customizing Bootstrap v5 at