MDB 5 Vue Pro installation guide

Prerequisites

Before starting the project make sure to install Vue CLI (4.x.x or higher) and Node LTS (12.x.x or higher).


Basic installation

Prerequisites

Before starting the project make sure to generate gitlab access token.

Step 1:  Create Vue App. Remember to choose Vue 3.x.x.
vue create my-app

Our Navbar and Sidenav components use router-link so for their proper work please choose Manually select features and then Router during the installation.

Step 2:  Navigate to App's directory.
cd my-app

MDB installation

Step 1:  Setup MDB.
vue add mdb5

  • choose Pro version
  • enter your private gitlab access token
  • decide whether to install Roboto font
  • decide whether to install Font Awesome 5
  • choose one of the styling options
    • compiled in the package (CSS)
    • editable in your project (SCSS)
  • decide whether to add MDB welcome page

Step 2:  Launch Your App
npm start


Manual installation (zip package)

Step 1

Download the package from orders.

Step 2

Unzip downloaded package and open it in the code editor.

Step 3

Install dependencies.
npm install

Step 4

Run the application.
npm start

Step 5

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


NPM

Prerequisites

Before starting the project make sure to generate gitlab access token.

Installation

To install MDB 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-essential

CSS import

Add the following line at the beginning of your main.js file:
import 'mdb-vue-ui-kit/css/mdb.min.css'

Font Awesome

Add the following line in public/index.html file inside head section:
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />

Roboto font

Add the following line in public/index.html file inside head section:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />

Set font family in src/App.vue inside style section as in the example:
#app { font-family: Roboto, Helvetica, Arial, sans-serif; }