MDB Vue & Nuxt.js - Quick start guide


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

Mikołaj Smoleński posted 6 months 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/build/css/mdb.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'
    ]
  }

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 pro commented 6 months 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 commented 6 months 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 4 months 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 commented 3 months 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 5 days 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


Write
Please insert min. 20 characters.