DEV Community

Cover image for Using Bootstrap 5 with NUXT 3
Chidiebere Chukwudi
Chidiebere Chukwudi

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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
    }
  }
})
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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']
})
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Result:

bootstrap with nuxt

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:

Top comments (0)