MDB 5 Vue Optimization

Introduction

This guide describes in detail how to use the individual modules provided as part of the MDB VUE UI KIT to improve project performance and reduce the size of imported files. We also provide additional autocomplete helpers for popular IDE editors.

Modules

MDB VUE UI KIT PRO includes most components as compiled modules. Instead of importing the entire library, which translates into a reduction in efficiency, we can choose only the modules that are used in the project. Thanks to this, we significantly reduce the amount of KB downloaded by the application. It can be reduced even several times!

However, separated modules often use MDB styles such as spacing, position, or grid, so we recommend importing lightweight MDB VUE UI KIT FREE as a core. It is contained in a package inside the free directory.

Here's a short instruction for importing a single module on the example of a Datepicker component:

Step 1

Download the package from orders

Step 2

Unzip downloaded package and open it in the code editor

Step 3

Install the dependencies

        
            
        npm install
    
        
    

Step 4

Add code of the basic example.

        
            
        <template>
          <div class="container my-5" style="width: 200px">
            <MDBDatepicker label="Set date" />
          </div>
        </template>
    
        
    

Step 5

Import MDBDatepicker from modules istead of directly from mdb-vue-ui-kit.

        
            
        <script>
          import MDBDatepicker from "mdb-vue-ui-kit/modules/MDBDatepicker";

          export default {
            name: 'App',
            components: {
              MDBDatepicker
            }
          };
        </script>
    
        
    

Step 6

Replace mdb.min.css import with the lightweight free version and import Datepicker css file. Not every module needs its own css file to work. All available and necessary files for modules can be found in /modules dir inside the package.

        
            
        import "mdb-vue-ui-kit/css/free/mdb.min.css";
        import "mdb-vue-ui-kit/modules/MDBDatepicker/index.min.css";
    
        
    

Step 7

Run the application

        
            
        npm start
    
        
    

Tooling support

MDB provides additional helper files for auto completion in popular IDE editors.

VS Code + Vetur

If you are using VS Code as your text editor, MDB has intellisense autocompletion for component tags and props. Take into account that for this to work properly, you need to open the project from the level of the application.

JetBrains WebStorm (and compatible)

For WebStorm editor (or web-types compatible), MDB provides the intellisense for component tags and props auto-completion.