Topic: \"btn\" element not working from docs

Titanium free asked 5 years ago

After I have imported vue and mdb to my index.js, when I create HTML elements and follow the procedure according to docs, following doesn't work:
<btn color="primary">Primary</btn>
But this one works fine:
<button type="button" class="btn btn-primary">Primary</button>
I am confused, is this an error with me or the docs haven't been updated ? This is my index.js file:
import Vue from 'vue/dist/vue.js'
window.Vue = Vue;

import 'bootstrap/dist/css/bootstrap.min.css';
import 'mdbvue/build/css/mdb.css';

Jakub Strebeyko staff answered 5 years ago

Hi there Titanium, I feels there is something I must be missing here. Do I understand correctly that you are inserting custom Vue components into html? Has it ever worked? What do you mean exactly when you say you have "mdb and vue bundled via webpack"? To answer your first question: depending on the size of your project, this might not be apparent at first, but the single file components have many advantages for any middle to big sizes projects. Some say SFC is the way Vue is to be used "properly" - well, I do not know about that, but certainly it is preferred, probably because of the hassle of string templates, no CSS support and these ugly global variables when using pure html/vue.js. So, a project full of .vue files is actually what you are getting when using the official vue-cli 3 for scaffolding a project from scratch and also is what we are using (for all the sweet features, including but not limited to IDE support, scoped CSS, preprocessors, build step) for developing and throughout the docs, too. It just resolves the stride for encapsulation and, well, gives you more control and less mess. To answer your second question: In general, all the necessary instructions are here. If it is indeed a vue project, there is 99% chance that running 'yarn add mdbvue' or 'npm install --save mdbvue' (meaning: adding it to dependencies in package.json) and importing one of our free components into a vue  file (on top of the <script> tag contents, and mentioning it in "components" vue instance property) will make it available in within the template tag. I have a feeling that is not the case, though. In what way is it a Vue project? With Best Regards, Kuba

Titanium free answered 5 years ago

As a matter of fact, no I haven't used this code in any .vue file. I was using it directly in .html file with mdbootstrap and vue bundled via webpack. But why do I need to create .vue files ? EDIT: Is there any other guidance/doc for integrating mdbvue with an existing vue project ?

Jakub Strebeyko staff answered 5 years ago

Hi there Titanium, It looks like an import problem. So, could you share a snippet where you import the Btn to your .vue view/component? An exempt from the console containing the error message would've been helpful, too. Best, Kuba    

Spanners pro answered 5 years ago

Are you putting the btn in a .vue template and importing the btn component? This works ok for me:
  <btn color="primary">Primary</btn>
import {
export default {
  name: "myTemplateName"
  components: {

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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 4.6.0
  • Device: HP Z600
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No