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:
Top comments (0)