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:

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay