MDB 5 Vue Pro plugins installation guide

Manual installation (zip package)

Step 1

Download the package from orders.

Step 2

Unzip the downloaded package and open it in the code editor. Inside package.json file you will find plugins added as dependencies. The stylesheets for all plugins have been imported into the main.js file.

Step 3

We recommend that you remove unnecessary plugins from the project (package.json and main.js) in order not to increase the weight of the application.

Step 4

After selecting the necessary plugins, proceed with the installation.

        
            
      npm install
    
        
    

Step 5

Explore our documentation (plugins section in the menu on the left). Choose plugin you like, copy it to your project and compose your website. And yes, it's that simple!

NPM - new project

Prerequisites

Before starting a project make sure to install Node LTS (12.x.x recommended) and generate gitlab access token.

Installation

Note: For this instruction, we will use the Calendar plugin as an example. If you want to use a different plugin remember to change the plugin names and paths.

To install the MDB VUE UI KIT in your project easily type the following command in the terminal. Remember to swap the access token before starting the installation.

        
            
      npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/vue/mdb5/prd/mdb5-vue-ui-kit-pro-advanced
    
        
    

Then install the plugins you want to use:

        
            
      npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/vue/mdb5/plugins/prd/calendar
    
        
    

Importing JS modules

        
            
      import { MDBCalendar } from 'mdb-vue-calendar';
    
        
    

Importing CSS files

To import plugin stylesheet please use the following syntax:

        
            
        import 'mdb-vue-ui-kit/css/mdb.min.css'; // lib
        import 'mdb-vue-calendar/css/mdb-vue-calendar.min.css'; // plugin
    
        
    

NPM - existing project

Prerequisites

Before starting a project make sure to install Node LTS (12.x.x recommended) and generate gitlab access token.

Installation

Note: For this instruction, we will use the Calendar plugin as an example. If you want to use a different plugin remember to change the plugin names and paths.

To install plugin in your project easily type the following command in the terminal. Remember to swap the access token before starting the installation.

        
            
      npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/vue/mdb5/plugins/prd/calendar
    
        
    

Importing JS modules

        
            
        import { MDBCalendar } from 'mdb-vue-calendar';
    
        
    

Importing CSS file

To import the plugin stylesheet please use the following syntax:

        
            
        import 'mdb-vue-calendar/css/mdb-vue-calendar.min.css';