Topic: MDB Vue & Nuxt.js - Quick start guide
Introduction
Nuxt.js framework was created to make your development of a server-rendered Vue.js Application more enjoyable. The main features of Nuxt are writing Vue files (*.vue), automatic code splitting, server-side rendering, powerful routing system or es6/es7 transpilation. While initializing the first App you can choose between Universal, Static Generated or Single Page application. Under the hood it uses webpack, vue-loader and babel-loader - the same technologies in which MDB Vue is based on. So why not use them both in your App?
Nuxt.js installation
The easiest way to start is to use npx or yarn. Make sure You have installed one of them and type:
npx create-nuxt-app my-projector
yarn create nuxt-app my-project
You'll be asked some questions, but for basic installation you can choose the defaults.
Just after installation you're ready to launch your app:
cd my-project npm run dev
or
cd my-project yarn dev
The application is now running on http://localhost:3000.
Integration with MDB Vue
To install MDB in your Nuxt App easily type:
npm install mdbvue bootstrap-css-only
or
yarn add mdbvue bootstrap-css-only
For the PRO version I recommend to follow the steps from our guide.
Now, You need to update Nuxt configuration, so please open nuxt.config.js file in the root directory. To apply css globally update the css array by the following code
css: [ 'bootstrap-css-only/css/bootstrap.min.css', 'mdbvue/lib/css/mdb.min.css' ],
and, in order to transpile ES6 code inside our library, please update build object as in the example:
build: {
extend(config, ctx) {},
transpile: [
'mdbvue/lib/components'
]
}
Now you're ready to import your first component from mdbvue library.
Importing components
To import any component from our mdbvue package You can use the same statements as in our documentation.
The main file is index.vue. You can import Your components inside it or create new files inside pages directory.
Nuxt.js automatically generates the vue-router configuration based on your file tree of Vue files inside the pages directory, which is a fantastic feature. You can read more about it here.
The basic component registration will look like this:
<template>
<section class="container">
<mdb-btn color="primary">MDB Button</mdb-btn>
</section>
</template>
<script>
import { mdbBtn } from 'mdbvue'
export default {
components: {
mdbBtn
}
}
</script>
It's the well known Vue syntax, which proves that developing Nuxt App with MDB could be really easy and enjoyable!
Hello and first of all, thank you for this quickstart :)
I'm for now totally stuck with a window is not define error because of the usage of the mdb-navbar component.
My NavBar.vue file
<template>
<mdb-navbar>
test
</mdb-navbar>
</template>
<script>
import { mdbNavbar } from 'mdbvue';
export default {
name: 'NavBar',
components: {
mdbNavbar
}
};
</script>
My nuxt.config.js file:
module.exports = {
head: {
title: 'nuxt_raven_project',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: 'https://mdbcdn.b-cdn.net/favicon.ico' }
],
css: [
'bootstrap-css-only/css/bootstrap.min.css',
'mdbvue/build/css/mdb.css'
]
},
loading: { color: '#3B8070' },
build: {
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
},
transpile: [
'mdbvue'
]
}
}
Thank you for your help !
Mikołaj Smoleński staff commented 2 years ago
Hi there!
We've fixed that issue in the latest release (moved listener to the mounted hook). It should work now without problems.
Best regards
Hi, follow the guide, it works for me, however whenever I change something in the template (Nuxt project), it automatically rebuild with error:
"Error: Conflict: Multiple assets emit to the same filename 1debded57fadef5ec63a.hot-update.json"
Please help me! Thanks in advance
Mikołaj Smoleński staff commented a year ago
I think it's connected directly with the code in your template. I just updated an article text to work with the latest mdbvue version. You can try to update and check if it's working ok now.
Best regards
So I can get my NUXT and MDBv to work. However Im stuck trying to get custom skins to work. How do I get to work in NUXT so I can use body class="darkskin-skin"?
Using things such as body class="white-skin" works as its a core mdbv skin
Mikołaj Smoleński staff commented a year ago
To be sure, MDB skin works fine but your custom skin doesn't?
Devinec premium commented a year ago
I can use white-skin black-skin etc. I just cant figure out how to do the skins: map-merge with the _custom-skins.scss. I have tried copying that file in to assets/scss folder and added '@/assets/scss/_custom-skin.scss' to the nuxt.config.js file. It sees the file but it does nothing.
Mikołaj Smoleński staff commented a year ago
We're currently working on Nuxt installation module. It will be available soon and should be helpful also in Your case.
Devinec premium commented a year ago
So I found a way to make it recognize the custom_skins
in the nuxt.config.js I add the mdb-pro.scss from the mdbvue folder
css: [
'mdbvue/lib/scss/mdb-pro.scss'
],
The I added '@nuxtjs/style-resources', to the modules section
Then I added the following to load my own files I saved in the assets folder
styleResources: {
scss: [
'@/assets/scss/_custom-skin.scss',
'@/assets/scss/_custom-colors.scss'
]
},
Mikołaj Smoleński staff commented a year ago
Thanks for your remarks.
I did everything as it was shown here. Unfortunately, Notify doesn't work. I get this error: `this.$notify is undefined`.
Is there a way to include Notify like this:
```
import Notify from '../../node_modules/mdbvue/src/components/pro/Advanced/Notify.js';
Vue.use(Notify);
```
Tenarius commented 11 months ago
Solution: I had to install the Notify JS file manually. In this case I followed the instructions at: https://nuxtjs.org/guide/plugins/
should we use the MDB in .vue files in pages folder only ?
what about those file in components folder?
Mikołaj Smoleński staff commented 4 months ago
The pages directory is for views and components for custom components. Best regards
Mikołaj Smoleński staff commented 4 months ago
Did you import the component from mdbvue package? Best regards
- Category: Vue
- Specification: MDB Vue 6.0.1 + Nuxt 2.10.2
Hello,
Im trying instead of testing withBut could not get it working
Mikołaj Smoleński staff commented 2 years ago
Hi there,
I've just copied the code from the first example to the nuxt-app and it works ok (https://mdbootstrap.com/docs/vue/components/cards/#basic-example).
Could You share more details about Your issue?
Best regards