MDB Vue & Nuxt.js - Quick start guide


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

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!

Write
Please insert min. 20 characters.
Details of the article
  • Category: Vue
  • Specification: MDB Vue 5.1.1 + Nuxt 2.4.0
Tags