5 min Quick Start:

Prerequisites:

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

To install Create Vue App, in Your command line type:

npm install -g @vue/cli

New project:

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 install
    

        $ yarn

*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 after you've downloaded everything it's time to write the second command which let us serve our app on localhost using:


        $ npm start
    

        $ yarn start

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

Step 6: 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!

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


        $ npm run demo
    

        $ yarn demo

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


        $ npm run remove-demo
    

        $ yarn remove-demo

Existing project:

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

vue create my-project

Step 2:  cd my-project

Step 3:  Install MDB Vue

npm install --save mdbvue
// OR
yarn 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';

so the top of the file 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 start
// OR
yarn serve

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

vue create my-project

Step 2:  cd my-project

Step 3:  GitLab installation

  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
  2. From top right corner click at your avatar and choose "Setting → Access Tokens"
  3. Provide a Name for your token and choose "api" from scopes. Then click "Create personal access token"
    add token
  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
  5. Navigate to given repository, switch GIT to HTTP and copy it's URL i.e.: https://git.mdbootstrap.com/mdb/vue/vu-pro.git
    repo
  6. 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
  7. 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 or npm install to install the dependencies

Step 5:  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 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 start
// OR
yarn serve