Install Boostrap 5 to Nuxt

We will install boostrap directly to boostrap without Vue UI Library. Its allow you to make uptodate and make more flexible.

Install Nuxt (if you’re not installed before)

npm init nuxt-app <project-name>

Install Boostrap

npm install bootstrap

Install SASS dependency

Because we use sass for boostrap styling, we need to install sass dependency. Because we use node 12, we need to install with compatible library.

npm install node-sass@4 sass-loader@10  --save-dev

Import boostrap file

// assets/scss/app.scss
@import "~bootstrap/scss/bootstrap";

please create your own folder, because nuxt didnt provide it.

Set Config

You can inject app.scss that you already create before, to nuxt config.

// nuxt.config.js // line 20
css: [
  '~/assets/scss/app.scss',
],