Installation guide

Manual installation (zip package)

Step 1

Download the package

MDB VUE UI KIT 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!

Note: Manual installation with a .zip package is the easiest way, but many useful features are not available there.
To use the full potential of MDB and all available options, we recommend installation through MDB CLI.

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


    MDB CLI

    CLI installation is the most efficient way to use MDB. It enables options such as:

    • Free hosting (supports custom domains, SSL, FTP access)
    • Install any MDB package with a single command
    • Easy updates with a single command
    • Backend starter templates (Laravel, plain PHP, node.js & more)
    • WordPress setup in 3 minutes (blog, ecommerce or blank project)
    • Git repository for you and your team
    Install MDB CLI

    Advanced installation

    Prerequisites

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

    Step 1

    Create Vue App. Choose Vue 3.x.x. version.

            
                
          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
        
            
        

    GitHub

    You can also download MDB VUE UI KIT directly from our GitHub.

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

    MDB VUE UI KIT 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,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;
          }
        
            
        

    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,900&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>
        
            
        

    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:

    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

    Setup MDB.

            
                
            npm install mdb-vue-ui-kit
        
            
        

    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