Configure MDBootstrap for Vue correctly.

Topic: Configure MDBootstrap for Vue correctly.

Niek Jonkman asked 3 years ago

Hello, I am trying to get MDBootstrap for Vue to work with, Vue. I followed the "Getting Started" page but when I use MDBV components I get an error.

I created a Vue app by using the following command:

vue init webpack md-bootstrap-vue

I installed MDBV by using this command found at the "Getting Started" page:

npm install --save mdbvue

I added the imports to my main.js file:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import 'bootstrap-css-only/css/bootstrap.min.css'; 
import 'mdbvue/build/css/mdb.css';
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'

I went to the MDBV components page, picked a button and placed it in my App.vue file, just to test:

  <div id="app">
    <mdb-btn color="primary">Primary</mdb-btn>



MDBV does not apply to the button, it is just text and the console gives me the following output:

[Vue warn]: Unknown custom element: <mdb-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/App.vue

Now, I assume that I am missing some basic configuration for MDBV to work, but I cannot find it on the "Getting Started" page, or anywhere else.

What part of the setup am I missing?

Kind regards.

Mikołaj Smoleński staff answered 3 years ago

Hi Niek,

You need to import and register the component.

It should look like this:

import { mdbBtn } from 'mdbvue';
export default {
  name: 'ButtonPage',
  components: {

Best regards

Abdellah Ramadan commented 3 years ago

Should same be done with Grid layouts? I can't implement anything and the doc does not specify/listing the components. Thanks.

Mikołaj Smoleński staff commented 3 years ago

Today we're going to publish documentation update with all needed imports inside snippets. According to Your question - Yes, all components have to be imported and registered as component before use. Best regards

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.1.0
  • Device: Web
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No