Vue 3 & Bootstrap 5 & Material Design 2.0 UI KIT

  • By MDBootstrap
  • Last update: Dec 30, 2022
  • Comments: 11

MDB Logo

MDB 5 Vue

Vue 3 & Bootstrap 5 & Material Design 2.0 UI KIT

>> Get Started in 4 steps

>> MDBVue 5 Demo

Downloads License YouTube Video Views

  • 500+ material UI components
  • Super simple, 1 minute installation
  • Detailed docs & multiple practical examples
  • Vue 3
  • Huge and active community
  • MIT license - free for personal & commercial use

Trusted by 2 000 000+ developers & designers. Used by companies like

Tutorial for the latest Bootstrap v.5 Alpha. In this video we'll learn about the changes implemented into v.5.

>> Click here for a written tutorial

Start to Code

Learn Bootstrap 5 | Crash Course for Beginners in 1.5H


Simplicity and ease of use are key features of MDB 5 Vue UI Kit. You need only one minute to install and run it.


Use MDB custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.


Indicate the loading state of a component or page with MDB spinners, built entirely with HTML, CSS, and no JavaScript.


A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.


A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.


MDB hover effect appears when the user positions the computer cursor over an element without activating it. Hover effects make a website more interactive.


Notes are small components very helpful in inserting an additional piece of information.

and more.



  • 1

    Consider Packaging

    Any chance this will be migrated into a package ?

    As in be able to include a collection of Vue components that use mdboostrap as a dependency enabling us to stay up to date on the latest components ?

    Right now you are advertising this as a UI Kit but, really its just a vue template with prebuilt mdboostrap Vue components. This doesn't help us if we just want to utilize the components in our own Vue Template

    I would suggest to pull out all of the UI Components and mixins etc ... (basically everything outside of the vue template) and package that up into something like mdboostrap-vue.

    Then in this template, you simply add that mdbootstrap-vue to your dependencies.

    This will allow users to either use your template (which can still get package updates) or use their preferred template and can simply npm install mdboostrap-vue --save. Which would also install all the dependencies that is needed for that package (mdboostrap, boostrap-4.0, etc ...)

  • 2

    Facing Application error while deploy your package in Heroku


    When I try to deploy your package to Herkoku, I'm facing the application error. The build has been succeed while Deploy the package. But It throws application error while view the site.

    What is the configuration that I'm missig? Because When I try to run in local, I can see that deafult page.

    Can you help me out Plzzz?

  • 3

    Adding to existing project does not work

    I've followed the Vue 5 min quick start at and I was no able to add to an existing Vue project. Followed the steps but after adding a "mdb-btn" it does not render properly.

    Thanks in advance.

  • 4

    I can't install the dependency into Vue.js

    Although the dependancy is said to be installed on the web console/ dependencies section, the file cannot be found in Node_Modules of Vue.js (am using Visual Studio Code)

    thus, I can't do the importing or anything, e.g. : this code section.

    import { animateOnScroll } from "mdbvue";
      export default {
        name: "AnimationsPage",
        directives: {

    since I can't do the importing, due to mdbvue cannot be found. then that's mean there is a problem.

    will be great if I can receive some guidance, am a newbie.

  • 5

    Navbar can not auto close when using in mobile

    using navbar in mobile like below image show when tap the hamburger icon, the navbar menu open, then tap the menu(may be the 'css') the page navigate the right page, but the navbar menu can not auto close. you should tap the hamburger icon again.

    qq 20181104135423

  • 6

    The color-adjust shorthand is currently deprecated

    I'm getting a console warning from AutoPrefixer. autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

    It looks like it's currently used here and here.

    It looks like this is an upstream issue in Bootstrap which should be fixed soon.

  • 7

    Idea not resolve dependencies

    image my package.json

      "name": "vite-electron-builder",
      "private": true,
      "engines": {
        "node": ">=v16.13",
        "npm": ">=8.1"
      "main": "packages/main/dist/index.cjs",
      "scripts": {
        "build": "npm run build:main && npm run build:preload && npm run build:renderer",
        "build:main": "cd ./packages/main && vite build",
        "build:preload": "cd ./packages/preload && vite build",
        "build:preload:types": "dts-cb -i \"packages/preload/tsconfig.json\" -o \"packages/preload/exposedInMainWorld.d.ts\"",
        "build:renderer": "cd ./packages/renderer && vite build",
        "compile": "cross-env MODE=production npm run build && electron-builder build --config .electron-builder.config.js --dir --config.asar=false",
        "test": "npm run test:main && npm run test:preload && npm run test:renderer && npm run test:e2e",
        "test:e2e": "npm run build && vitest run",
        "test:main": "vitest run -r packages/main --passWithNoTests",
        "test:preload": "vitest run -r packages/preload --passWithNoTests",
        "test:renderer": "vitest run -r packages/renderer --passWithNoTests",
        "watch": "node scripts/watch.js",
        "lint": "eslint . --ext js,ts,vue",
        "typecheck:main": "tsc --noEmit -p packages/main/tsconfig.json",
        "typecheck:preload": "tsc --noEmit -p packages/preload/tsconfig.json",
        "typecheck:renderer": "npm run build:preload:types && vue-tsc --noEmit -p packages/renderer/tsconfig.json",
        "typecheck": "npm run typecheck:main && npm run typecheck:preload && npm run typecheck:renderer"
      "devDependencies": {
        "@typescript-eslint/eslint-plugin": "5.10.1",
        "@typescript-eslint/parser": "^5.10.1",
        "@vitejs/plugin-vue": "2.1.0",
        "@vue/test-utils": "2.0.0-rc.18",
        "cross-env": "7.0.3",
        "dts-for-context-bridge": "0.7.1",
        "electron": "16.0.8",
        "electron-builder": "22.14.5",
        "electron-devtools-installer": "3.2.0",
        "eslint": "8.8.0",
        "eslint-plugin-vue": "8.4.0",
        "happy-dom": "2.30.1",
        "nano-staged": "0.5.0",
        "playwright": "1.18.1",
        "simple-git-hooks": "2.7.0",
        "typescript": "^4.5.5",
        "vite": "2.7.13",
        "vitest": "0.2.5",
        "vue-tsc": "0.31.1"
      "dependencies": {
        "electron-updater": "4.6.5",
        "mdb-vue-ui-kit": "^1.9.0",
        "vue": "3.2.29"

    I noticed that if you write the full path, it disappears. But it's inconvenient to write the full path to each item. Help // import { MDBBtn } from 'mdb-vue-ui-kit/src/components/free/components/MDBBtn';

  • 8

    mdb-input value is not updated if model changes

    Hello there,

    <mdb-input type="text" v-model="" /> If I change the programatically the input never updates itself.

    Is there a workaround?


  • 9

    No NavbarItemDropdown Component

    As stated in the docs there should clearly be a NavbarItemDropdown Component.

    <navbar class="indigo" name="Navbar" href="#"> 
          <navbar-item href="#" :active="true">Home</navbar-item> 
          <navbar-item href="#">Features</navbar-item> 
          <navbar-item href="#">Pricing</navbar-item> 
          <navbar-item-dropdown label="Dropdown"> 
            <a class="dropdown-item" href="#">Action</a> 
            <a class="dropdown-item" href="#">Another action</a> 
            <a class="dropdown-item" href="#">Something else here</a> 
        <form class="form-inline"> 
          <input class="form-control mr-auto p-2" type="text" placeholder="Search" aria-label="Search"> 

    Official stable release NOR master contains this component.

    This dependency was not found:
    * @/components/NavbarItemDropdown in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/App.vue

    And another good example why its important to package this up properly Referencing Issue #1

  • 10

    [Bug] npm package missing source map

    I've recently started working with the npm version of mdb-vue (free). When trying to embed into an app I couldn't get it to work. After some debugging it seems like the is missing from the npm package. Contradictory it's provided by the featured/ recommended CDNs such as

    The file seems also not to be defined in the /lib folder of this repository.

    Have I missed some building step? I added the mdb package with vue add mdb. Help is really appreciated. Thanks in advance

  • 11

    Using Nuxt popovers and tooltips don't work

    Using the steps from this post: all work except popovers and tooltips.

    <mdb-tooltip trigger="hover" :options="{placement: 'top'}">
            <span slot="tip">This will totally remove all your orders </span>
             <mdb-btn v-if="!isCartEmpty" @click.native="emptyCart">
    Empty cart</mdb-btn>

    I get this happening n the browser: Selection_494

    The browser console shows this: error TypeError: Cannot read property '0' of undefined
        at VueComponent.mounted (
        at invokeWithErrorHandling (
        at callHook (
        at Object.insert (
        at invokeInsertHook (
        at VueComponent.patch [as __patch__] (
        at VueComponent.Vue._update (
        at VueComponent.updateComponent (
        at Watcher.get (
        at (
    value @

    is there a dependency that I'm missing. Modals work fine BTW. Thanks in advance.