April 10, 2021

How to use NuxtJS with Bootstrap 5

Customisable integration of Bootstrap 5 using Sass with NuxtJS.

On this page

Updated on April 14, 2021

I am using NuxtJS 2 and Bootstrap 5 beta version, so some steps might vary when these get an update.

Installing NuxtJS

First of Install NuxtJS using any method you like, I prefer the npm. Make sure to choose none when asked for UI Framework because we will add Bootstrap 5 ourselves.

$ npm init nuxt-app <project-name>

Install Bootstrap 5

The command to install bootstrap will change after the stable release. You will also need to install other packages(sass, sass-loader, fibers) for compiling sass files. Version 11 of sass-loader doesn't work with NuxtJS 2, so make sure to install version 10.

$ npm i bootstrap@next
$ npm i --save-dev sass sass-loader@10 fibers

Creating Sass files

In your assets directory create a folder named sass. In the sass folder create three files, the _custom.scss and _app.scss have an underscore at beginning of name because we will import these in main.scss.

main.scss (importing bootstrap)
_custom.scss (customising bootstrap variables)
_app.scss (extra styles, separate from bootstrap)

Importing Bootstrap

In your main.scss file write the following code. Here some parts of bootstrap are commented because I am not using those to reduce the size for performance.

assets/scss/main.scss

@import "bootstrap/scss/functions"; // Required

@import "custom";

@import "bootstrap/scss/variables"; // Required
@import "bootstrap/scss/mixins"; // Required
@import "bootstrap/scss/utilities"; // Required

// Layouts & Components
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot"; // Required
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
// @import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
// @import "bootstrap/scss/button-group";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar"; // Requires nav
@import "bootstrap/scss/card";
@import "bootstrap/scss/accordion";
// @import "bootstrap/scss/breadcrumb";
// @import "bootstrap/scss/pagination";
// @import "bootstrap/scss/badge";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
// @import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal"; // Requires transitions
// @import "bootstrap/scss/tooltip";
// @import "bootstrap/scss/popover";
// @import "bootstrap/scss/carousel";
// @import "bootstrap/scss/spinners";
// @import "bootstrap/scss/offcanvas";

// Helpers
@import "bootstrap/scss/helpers";

// Utilities
@import "bootstrap/scss/utilities/api";

// My Extra GLOBAL Styles separate from Bootstrap
@import "app";

Custom Bootstrap Variables

Now in your _custom.scss you can modify bootstrap variables easily. Here are some variables as example.

assets/scss/_custom.scss

$primary: #1565c0;
$secondary: #455a64;

// Body
$font-family-sans-serif: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$body-bg: rgba(250, 245, 255, 0.5);
$body-color:#272c33;

// Buttons
$btn-font-weight: 700;

// Headings
$headings-color: $primary;
$headings-font-weight: 700;

// Links
$link-decoration: underline dotted;
$link-hover-decoration: underline;

Extra Customisation in separate file

You might need some extra styles for your project, you can add those styles in _app.scss file. Here's what I use it for.

assets/scss/_app.scss

// pushing footer to bottom
#_layout, #_nuxt {
    height: 100%; 
}

// Nuxt Content
.nuxt-content h2{
    margin-top: 1.5em;
}
.nuxt-content pre{
    border-radius: .25rem;
}

Connecting Bootstrap to NuxtJS

Now it's time to finally connect the css part to Nuxt. In your nuxt.config.js file add the following code to css property.

nuxt.config.js

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

Connecting JavaScript of Bootstrap

Copy the bootstrap.bundle.min.js from node_modules to static folder. Now it's complete. Then connect it as a plugin in your nuxt.config.js

// Copy from
node_modules/bootstrap/dist/js/bootstrap.bundle.min.js

// Paste to
static/js/bootstrap.bundle.min.js

nuxt.config.js

 plugins: [
    {src:'~/static/js/bootstrap.bundle.min.js', mode:'client'},
  ],

Conclusion

Congratulations, you connected Bootstrap 5 with NuxtJS. If you have any problem at any step, feel free leave a message on twitter with a screenshot of your error.

Go Back