Configure MDBootstrap for Vue correctly.


Topic: Configure MDBootstrap for Vue correctly.

Niek Jonkman asked a year 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',
  router,
  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:

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

<script>
</script>

<style>
</style>

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
       <Root>

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.


Hi Niek,

You need to import and register the component.

It should look like this:

<script>
import { mdbBtn } from 'mdbvue';
export default {
  name: 'ButtonPage',
  components: {
    mdbBtn
  }
}
</script>

Best regards


Abdellah Ramadan commented a year 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 a year 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.
Status

Answered

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