\btn\ element not working from docs

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

Titanium free asked 6 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';

Add comment

Jakub Strebeyko staff answered 6 years ago

1 0 Best answer

To answer your first question: depending on the size of your project, this might not be apparent at first, but the <a href="https://vuejs.org/v2/guide/single-file-components.html" rel="nofollow">single file components</a> 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 <a href="https://mdbootstrap.com/vue/5-min-quick-start/" >the necessary instructions are here</a>. 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

Please insert min. 20 characters.

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

Add comment

Titanium free answered 6 years ago

0 0 Best answer

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 ?

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

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

Add comment

Spanners pro answered 6 years ago

1 0 Best answer

Are you putting the btn in a .vue template and importing the btn component? This works ok for me:

<template>
  <btn color="primary">Primary</btn>
</template>
import {
  Btn,
}
export default {
  name: "myTemplateName"
  components: {
    Btn,
  }
}

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

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

Titanium

90Support score
10Questions 4Answers 0Snippets