Nuxt
MDB integration with nuxt for vue
This article will teach you how to integrate nuxt with MDB Vue. You can start using directional classes with the latest Bootstrap 5.
Lets see how to integrate nuxt with MDB 5 across our layout, components, and utilities.
Prerequisites
Before starting the project make sure to install the following utilities:
Creating a new project
Vue.js is a framework that is used to build client-side applications. However, it is possible to create an application that renders its element server-side and then shows the static data client-side.
SSR has many advantages over CSR. One of the most important is being SEO friendly. SSR apps allow search engines crawlers to see the fully rendered page and thanks to that, our app is rated better.Besides, SSR is characterized by faster time-to-content and unified mental model.
Step 1
We are going to use nuxt3 framework, which will allow us to use everything that Vue 3 offers. Let's create our app by typing the code below into the terminal.
npx nuxi init nuxt-app
Step 2
Navigate to app's directory and install dependencies.
cd nuxt-app
npm install
Step 3
We are going to need sass so let's install necessary packages as devDependencies.
npm install -D sass sass-loader
Installing MDB Vue
Step 1
We have to install mdb-vue-ui-kit.
npm install mdb-vue-ui-kit
Step 2
Since we are going to use scss from MDB Vue package, let's create a directory where we will store index.scss file. In the root of our app, create folders: assets => scss. Inside the scss directory, put index.scss and import styles from the ui kit.
@use "mdb-vue-ui-kit/css/mdb.min.css";
Step 3
Modify the nuxt.config.ts file, so we can use the MDB Vue ui kit. In the meta we are adding Roboto font and font-awesome. We have to add css and build aswell.
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
meta: {
link: [
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap",
},
{
rel: "stylesheet",
href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css",
},
],
},
css: ["~/assets/scss/index.scss"],
build: {
transpile: ["mdb-vue-ui-kit"],
},
});
Adding new content
Let's use some new features of nuxt 3 in our app.
First, create the directory pages, move the app.vue file there and rename it to index.vue. That will allow us to use routing for the app and index.vue will be the first website view.
Next, create directory components in the root folder. Any component added to this directory will be available without the need of importing it first.
Step 1
Create Carousel.vue inside the components directory. We are going to use carousel component in the app. For everything to work corectly, we will have to use a built-in nuxt ClientOnly component, because MDBCarousel uses a window object that does not exist on the server. ClientOnly allows you to register the component in a clinet-side only plugin. Additionaly we are going to create a fallback that will show a MDBSpinner while loading the carousel.
Instead of refs, we are going to use provided by nuxt useState composable to create reactive and SSR-friendly state that will be available to all components.
You can copy the code below to your project.
<template>
<section
class="w-50 vh-30 m-auto d-flex align-items-center justify-content-center"
>
<ClientOnly fallbackTag="div">
<MDBCarousel v-model="carousel" :items="items1" fade />
<template #fallback>
<MDBSpinner />
</template>
</ClientOnly>
</section>
</template>
<script setup lang="ts">
import { MDBCarousel, MDBSpinner } from "mdb-vue-ui-kit";
const items1 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "...",
label: "First slide label",
caption: "Nulla vitae elit libero, a pharetra augue mollis interdum.",
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "...",
label: "Second slide label",
caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "...",
label: "Third slide label",
caption: "Praesent commodo cursus magna, vel scelerisque nisl consectetur.",
},
];
const carousel = useState("carousel", () => 0);
</script>
Step 2
Add Carousel component to main view at pages/index.vue. As you can see, we are not importing the component and we can still use it in the template.
The MDBCarousel component should work correctly.
<template>
<div>
<Carousel />
</div>
</template>
Step 3
Start the app
npm run dev
About ClientOnly
Many MDB Vue components use the window object. This object is necessary for many functions, but is not available while developing SSR apps.
Components such as MDBCarousel must be wrapped in a ClientOnly component in order to be rendered client-side. You can also create a fallback that will show some content server side.
If the whole component is going to be rendered only client-side, you can add the .client suffix to your component (only if they are placed inside components directory).
More about nuxt3
For more information, see nuxt3 documentation page. You can learn there more about working with views, routing, seo, state and many more.
Frontend features
MDB UI KIT:
To create the project we used our ui kit, with which we can build basic views very quickly.
Views and Layouts:
Nuxt3 have a lot of great possibilities to work with the lastest vue versions. We have successfully integrated nuxt3 with MDB Vue package and can start developing new SSR app.