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

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

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

MDB installation

Step 1:  Setup MDB.
vue add mdb5

  • choose Free version
  • 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

MDB 5 Vue download

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!

Don't miss MDB Vue updates! Join our mailing list & receive information whenever a new update is released.

    By subscribing you agree to receive the newsletter & commercial information from the data administrator StartupFlow s.c. Kijowska 7, Warsaw. Policy


    GitHub

    You can also download MDB 5 directly from our GitHub.

    If you like - please do not forget to support us with your star :)

    MDB 5 Vue GitHub

    NPM

    Installation

    To install MDB VUE UI KIT in your project easily type the following command in the terminal:
    npm i mdb-vue-ui-kit

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


    CDN

    You can easily test MDB Vue components by adding CDN scripts to your classic HTML template without the need for installing any packages. All components will be accessible from the global variable mdb. In this case, however, you must not use PascalCase when creating component names. We recommend adopting a naming convention as in the example below:

    
            <!DOCTYPE html>
            <html lang="en">
    
            <head>
              <title>MDB Vue App</title>
              <meta charset="utf-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width,initial-scale=1.0">
              <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
              <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
              <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdb-vue-ui-kit/css/mdb.min.css">
            </head>
    
            <body>
              <div id="app">
                <mdb-btn color="primary">Button</mdb-btn>
              </div>
    
              <script src="https://unpkg.com/vue@next"></script>
              <script src="https://cdn.jsdelivr.net/npm/mdb-vue-ui-kit/js/mdb.umd.min.js"></script>
              <script>
                const App = {
                  components: {
                    mdbBtn: mdb.MDBBtn
                  }
                }
    
                Vue.createApp(App).mount('#app')
              </script>
            </body>
    
            </html>