Using Bootstrap 5 with NUXT 3

Nuxt js is an amazing addition to the vuejs ecosystem in a couple of ways. One of them is it's usefulness in handling SEO related issues while giving you the privilege of creating a full-stack web application in regular vue with robust server side rendering support.

In this tutorial, we are going to be looking at a straight forward demonstration of how to use boostrap 5 with nuxt.

Create a Nuxt App

npx nuxi@latest init <project-name>

Install Bootstrap and other dependencies

As of the time of writing this article, latest version of bootstrap is bootstrap 5.3.3

npm i bootstrap@5.3.3 

npm i sass -D

npm i sass-loader -D

Setting up

In your newly created nuxt app, at the file root, create a plugins folder. We are creating the plugins folder because we are going to be installing boostrap 5 as a nuxt plugin.

Next, inside the plugins folder, create a useBootstrap.client.ts and register the boostrap as a nuxt plugin:

import bootstrap from 'bootstrap';

export default defineNuxtPlugin(nuxtApp => {
  return {
    provide: {
      bootstrap: bootstrap
    }
  }
})

After that, we create a assets folder. This folder is where bundlers like vite look at to bundle assets. In this folder, create a main.scss file then import bootstrap's scss.

// main.scss
@import 'bootstrap/scss/bootstrap';

Finally, to include bootstrap styling in all of your pages, we will be referencing its path and Nuxt will include it to all the pages of your application.

Open nuxt.config.ts that is located at the root folder and add the following:

// https://nuxt.com/docs/api/configuration/nuxt-config 

export default defineNuxtConfig({
  devtools: { enabled: true },

  css: ['~/assets/main.scss']
})

Testing

To see bootstrap styling in action, lets create a typical button element and apply bootstrap class. Edit your app.vue :

<template>
  <div>
//app.vue

<h1> Using  boostrap 5 with Nuxt  </h1>
<button class="btn btn-primary"> share  </button>
  </div>
</template>

Result:

Thanks for reading. Let me know if you have any feedback or comment in the comment section.

Find me on X(Formerly Twitter ) : jovial_core

Linkedin: Chidiebere Chukwudi

Cover image credits: Photo by Marina M: