Topic: MDB Vue tags not working
                  
                  kyubix
                  free
                  asked 6 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.
                      
                      kyubix
                      free
                        answered 6 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 commented 6 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
                      
                      Magdalena Dembna
                      staff
                        answered 6 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);
                    
                      FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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