MDB 5 Vue Pro installation guide

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!

Advanced installation

Keep in mind that the Single Use license does not allow installation via vue-cli-plugin. The only option for this type of package is manual installation.

Prerequisites

Before starting the project make sure to install Vue CLI (4.x.x or higher), Node LTS (12.x.x or higher) and 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

NPM

Keep in mind that the Single Use license does not allow installation via gitlab link. The only option for this type of package is manual installation.

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;
        }

Vite

Vite (French word for "fast", pronounced /vit/) is a build tool that aims to provide a faster and leaner development experience for modern web projects. Our UI KIT can be imported in Vite applications according to the following procedure:

Prerequisites

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

Step 1

Init the project. Select a vue framework during installation.


        npm init vite@latest

Step 2

Navigate to app's directory. Replace <vite-project> with your project name.


        cd <vite-project>

Step 3

Install dependencies.


        npm install

Step 4

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

Step 5

Import CSS. Add the following line at the beginning of your main.js file:


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

Step 6

Import 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" />

Step 7

Import 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,900&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;
        }

Step 8

Import MDB components. You can use an experimental <script setup> proposal. In the example below we showed how to import an exemplary MDBBtn component.


        <template>
          <h1>{{ msg }}</h1>
        
          <p>
            <a href="https://vitejs.dev/guide/features.html" target="_blank">
              Vite Documentation
            </a>
            |
            <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
          </p>
        
          <MDBBtn color="primary" class="mb-3" @click="state.count++">
            count is: {{ state.count }}
          </MDBBtn>

          <p>
            Edit components/HelloWorld.vue to test hot module replacement.
          </p>

        </template>

        <script setup>
          import { defineProps, reactive } from "vue";
          import { MDBBtn } from "mdb-vue-ui-kit";

          defineProps({
            msg: String,
          });

          const state = reactive({ count: 0 });
        </script>

        <style scoped>
          a {
            color: #42b983;
          }
        </style>

Step 9

Launch the application.


        npm run dev

Install specific version

When you install MDB from our GitLab server, the latest version of the library will be downloaded by default. You can add #version_number at the end of the installation command in order to install specific MDB version. 


        npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/vue/mdb5/prd/mdb5-vue-ui-kit-pro-essential#1.2.0