MDB Vue tags not working


Topic: MDB Vue tags not working

kyubix asked 5 years ago

Hello, I'm creating an app with vue cli. I have created project with axios (routing) and I want to add MDB Vue to this project but I have problems. I have installed MDB Vue to existing project via:

npm install --save mdbvue

I have added to my src/main.js file:

import 'bootstrap-css-only/css/bootstrap.min.css'; 
import 'mdbvue/build/css/mdb.css';

Normal MD Bootstrap is working, eg. I can add button with class from MDB but if I want to use tag it won't work. It will be working only when I import { mdbBtn } from 'mdbvue':

<template>
<div>
  <button class="btn peach-gradient">Peach</button>
  <mdb-btn color="primary">Primary</mdb-btn>
</div>
</template>

<script>
import { mdbBtn } from 'mdbvue';

export default {
  name: "login",
  components: {
    "mdb-btn": mdbBtn
  }
}
</script>

But I don't want to import components all time in script tag. Should I add something to my project? Vue.use() in src/main.js or something like that?

Edit: The same problem appears when I choose direct download package. I do every step same as in tutorial video and it doesn't work - I can't use mdb tags.


Magdalena Dembna staff premium answered 5 years ago

To register component globally, you need to import it in main.js as in the following example:

 import { mdbBtn } from 'mdbvue';

 Vue.component('mdb-btn', mdbBtn);

kyubix answered 5 years ago

@Magdalena Dembna, is there any way to import and register all mdbvue components? Adding many lines to my main.js file would be very burdensome. For example in BootstrapVue I can register all components by this way:

import BootstrapVue from 'bootstrap-vue';
Vue.use(BootstrapVue);

Magdalena Dembna staff premium commented 5 years ago

Vue.use() works for plugins - I believe we don't have that option in our package. There is also no export default statement in our main.js which would allow looping through our components. But thank you for your insight - we will consider this idea. Kind regards, Magdalena


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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