DEV Community

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

Posted on

2

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:

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay