Installation guide

5 min Quick Start

Prerequisites

Before you use MDB Vue make sure You have installed Vue CLI package. This package contains development environment that will speed up the development process. Node 6 or higher is required.

To install Vue CLI, in Your command line type:

npm install -g @vue/clioryarn global add @vue/cli

Step 1: Create Vue App

vue create app

Step 2: Navigate to App's directory

cd app

Step 3: Add MDB

vue add mdb

choose New app, Existing app or Demo template from the list
select Free version

Step 4: Launch Your App

npm start or yarn start

Step 1: Create Vue App

vue create app

Step 2: Navigate to App's directory

cd app

Step 3: Add MDB

vue add mdb

choose New app, Existing app or Demo template from the list
select Pro version
enter your gitlab access token - see token generation

Step 4: Launch Your App

npm start or yarn start

New project (zipped package)

Step 1: If you haven't downloaded MDB Vue package yet, go to Getting Started page and download it now.

Step 2: Unzip downloaded package and open Your unpacked directory.

Step 3: Install the dependencies. Depending on Your node module manager, run:*

npm installoryarn

*if You want to install dependency from our GitLab repository, please open package.json file and copy the link to our repo from the commented line ("//": "git+https://oauth2:..."). Then replace the direct path to mdbvue.tgz in dependencies by the copied link. Finally paste Your GitLab Access Token instead REPLACE_WITH_YOUR_TOKEN and run installation as exlained above.

Step 4: Now it's time to write the second command which let us serve our app on localhost using:

npm startoryarn start

Step 5: When you check what is served at Your port 8080 you should see app default screen.

Step 6: Explore our documentation. Choose components you like, copy it to your project and compose your website. And yes, it's that simple!

Step 7 (optional): You can also launch our Demonstration Page. The files with the code are placed in the demo directory.

npm run demooryarn demo

Step 8 (optional): If You want to remove our demo from Your App, easily type:

npm run remove-demooryarn remove-demo

Existing project (manual installation)

Free
Pro

Step 1: Create a new Vue project using the official CLI:

vue create my-project

Step 2: Access project's directory

cd my-project

Step 3: Install MDB Vue

npm install --save mdbvueoryarn add mdbvue

Step 4: Import style files in Your src/main.js before the App.vue file import:

import 'bootstrap-css-only/css/bootstrap.min.css'; 

          import 'mdbvue/build/css/mdb.css';

Step 5: Run your app

npm run serveoryarn serve

Step 1: Create a new Vue project using the official CLI:

vue create my-project

Step 2: Access project's directory

cd my-project

Step 3: GitLab installation

Generate token - see Token generation
Navigate to given repository, switch GIT to HTTP and copy it's URL i.e.: https://git.mdbootstrap.com/mdb/vue/vu-pro.git

Adjust the following link as per below
"git+https://oauth2: + access_token + @ + repo address"
i.e.
git+https://oauth2:jFzMYzqSBUmGm3Z1ZA9s@git.mdbootstrap.com/mdb/vue/vu-pro.git

Within existing vue project run:
npm install git+https://oauth2:jFzMYzqSBUmGm3Z1ZA9s@git.mdbootstrap.com/mdb/vue/vu-pro.git --save // OR
yarn add git+https://oauth2:jFzMYzqSBUmGm3Z1ZA9s@git.mdbootstrap.com/mdb/vue/vu-pro.git

if you don't have existing npm project you should create it first (npm init)

alternatively, you can update your dependencies in package.json like below:
"dependencies": { "mdbvue": "git+https://oauth2:jFzMYzqSBUmGm3Z1ZA9s@git.mdbootstrap.com/mdb/vue/vu-pro.git" }

Then run npm install or yarn to install the dependencies

Step 4: Import style files into Your src/main.js before the App.vue file import:

import 'bootstrap-css-only/css/bootstrap.min.css'; 

          import 'mdbvue/build/css/mdb.css';

so the top of the file should be similar to this:

 import Vue from 'vue'; 

            import 'bootstrap-css-only/css/bootstrap.min.css'; 

            import 'mdbvue/build/css/mdb.css';

            import App from './App.vue'

Step 5: Run your app

npm serveoryarn serve

CDN installation

You can easily test MDB Vue FREE components by adding CDN scripts to Your classic HTML template without the need for installing any packages!

HTML


        <!DOCTYPE html>
        <html>
          <head>
            <title>MDB Vue Test App</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdbvue/build/css/mdb.css">
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdbvue/lib/mdbvue.css">
          </head>
          <body>

            <div id="app">
              <mdb-btn color="primary">Button</mdb-btn>
            </div>

            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/mdbvue/lib/mdbvue.umd.min.js"></script>
            <script>
              new Vue({
                el: '#app',
                components: {
                  mdbBtn: mdbvue.mdbBtn
                }
              })
            </script>
          </body>
        </html>

Token generation

Step 1: Visit https://git.mdbootstrap.com and log in. If you are PRO user and do not have an account yet, please request one contacting us: contact@mdbootstrap.com

Step 2: From top right corner click at your avatar and choose "Setting → Access Tokens"

Step 3: Provide a Name for your token and choose "api" from scopes. Then click "Create personal access token"
add token

Step 4: Once your token will be generated make sure to copy it and store in safe place. You won't be able to access it again. In case of lose, you will have to generate new token again.
token