MDB Vue & Nuxt.js - Quick start guide

web
mobile

Topic: MDB Vue & Nuxt.js - Quick start guide
Published 06.03.2019 Updated 03.12.2019

Mikołaj Smoleński staff posted a year ago

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-project
or 
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!

Jethzabell Medina commented a year ago

Hello, 

Im trying instead of testing with 
<mdb-btn color="primary">MDB Button</mdb-btn>
I'm using basic example
<mdb-card>
copy/paste from https://mdbootstrap.com/docs/vue/components/cards/

But could not get it working

Mikołaj Smoleński staff commented a year 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


Maxime DE PACHTERE commented a year ago

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: '/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 a year 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


janie commented 10 months ago

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 8 months 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


Devinec propremium commented 7 months ago

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 7 months ago

To be sure, MDB skin works fine but your custom skin doesn't?


Devinec propremium commented 7 months 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 6 months ago

We're currently working on Nuxt installation module. It will be available soon and should be helpful also in Your case.


Devinec propremium commented 6 months 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 6 months ago

Thanks for your remarks.


Tenarius propremium commented 2 months ago

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 propremium commented 2 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/


Write
Please insert min. 20 characters.