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.
PurgeCSS
PurgeCSS is great tool which analyzes content of your html/javascript files and reduces CSS by deleting unused selectors.
Adding it to a project is very simple and can be divided into three steps.
Step 1
Open MDB VUE .zip package downloaded from the orders or install it from NPM.
Step 2
Install @fullhuman/postcss-purgecss using NPM.
npm i -D @fullhuman/postcss-purgecss
Step 3
Configure your package.json file by adding a postbuild script.
"postbuild": "purgecss --css node-modules/mdb-vue-ui-kit/css/*.css --content dist/index.html dist/assets/*.js --output dist/assets",
Step 4
Add postcss.config.cjs file to your root directory with mandatory safelist.
const purgecss = require("@fullhuman/postcss-purgecss");
module.exports = () => ({
plugins:
process.env.NODE_ENV === "production"
? [
purgecss({
content: ["dist/index.html", "dist/assets/*.js"],
css: ["dist/assets/*.css"],
safelist: [
/-(leave|enter|appear)(|-(to|from|active))$/,
/^col-/,
/^offset-/,
/^btn-/,
/^badge-/,
/^border-/,
/^bg-/,
/^shadow-/,
/^border/,
/^text/,
/^list-group-/,
/^input-group-/,
/^flag-/,
/^fa-/,
/^table-/,
/^form-control-/,
/^row-cols-/,
/^container-/,
/^fade-height/,
/^alert-/,
/^toast-/,
/^chip-/,
/^sidenav-/,
],
output: "dist/assets",
}),
]
: [],
});
That's all! Now you can run npm run build to create the
production build with significantly less weight on .js and .css files.
Modules
Note: Since migration to Vite and Typescript in MDB Vue version 3.0.0 and higher the package is already optimized and there is no need to create separate 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
Note: MDB Vue version 3.0.0 and higher supports Typescript. This means intellisense is working out-of-the-box, and the latest Typescript-integrated editors do not need additional plugins.
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.