Topic: Is MDB Vue usable within Laravel Spark?
Goodnight!
I use Vue.component to register some components. Some work, some don't: mdb-dropdown-item is ok, mdb-dropdown is not. I understand mdb-card works and mdb-card-image not as it's pro, but I'd expect the dropdown to function. On the console it says the component is not registered and tells to use the 'name' which it probably does.
I import them without mdb as stated somewhere on a forum - but it's so strange parts work and parts don't
If it should function - I'll buy the pro. If it doesn't I need to look further.
Thanks in advance for taking the time to help me out...
Here's the list of all components names used in our library: https://github.com/mdbootstrap/Vue-Bootstrap-with-Material-Design/blob/master/src/index.js
For mdbCol it should be Column.
Have you tried another syntax while importing components? For example MdbCol?
Best regards
janvolkert free commented 4 years ago
Thanks, it's working like this. Using MdbCol doesn't function, but Column does. I can check the sources to see the exports. Thanks. I will test more and if it's succesful I will buy a license. The fact you are responding to quesitons and helping out is exactly why I will buy the license.
janvolkert free commented 4 years ago
Sorry to bother you again. The mdb-input is tricky... there is an Input and an mdbInput, i cannot use Vue.component('mdbInput', mdbInput); or Vue.component('mdbInput', Input); or any combination. What do I need to get the material design mdb-input component into my template.
Mikołaj Smoleński staff commented 4 years ago
For this moment I can't find the solution or any workaround for thath issue. In fact we didn't have any issues connected with MDB prefix, also in Laravel applications. The problem could be placed somewhere inside the Laravel app configuration.
Best regards
janvolkert free commented 4 years ago
I think I found it. In index.js the Input and Dropdown are handled differently. If I replace it the same way the other elements are dealt with it looks like this:
//let Input = require('./components/Forms/Input').default; //let mdbInput = require('./components/Forms/Input').default; import Input, { mdbInput } from './components/Forms/Input';
After that the Input works with mdb-input.
Perhaps you can enlighten me why it shouldn't be done it like that?
Mikołaj Smoleński staff commented 4 years ago
It's because Input or Dropdown have free and pro versions. That's why we had to change import syntax, to have the ability to overwrite the component variable if there is a need to make the second import.
That's the guide i used. I cannot use the mdbBtn names, somehow they don't work. I can however use the components when not using the mdb prefixes. For most components that it.
When I use:
import { Btn, Card, CardBody, CardText, CardTitle, Col, Container, Footer, Row, } from 'mdbvue';
Vue.component('mdbBtn', Btn); Vue.component('mdbCard', Card); Vue.component('mdbCardBody', CardBody); Vue.component('mdbCardTitle', CardTitle); Vue.component('mdbCardText', CardText); Vue.component('mdbCardText', CardText); Vue.component('mdbCol', Col); Vue.component('mdbContainer', Container); Vue.component('mdbFooter', Footer); Vue.component('mdbRow', Row);
All work but the Col. It's not exported it seems. I will have to check all other too.
Hi there,
Some time ago we've made an article showing the way of integration MDB Vue with Laavel. Please check it carefully, maybe you'll find there an answer for your issue.
https://mdbootstrap.com/articles/vue/mdb-vue-laravel-quick-start-guide/
Best regards
janvolkert free commented 4 years ago
That's the guide i used. I cannot use the mdbBtn names, somehow they don't work. I can however use the components when not using the mdb prefixes. For most components that it.
When I use:
import { Btn, Card, CardBody, CardText, CardTitle, Col, Container, Footer, Row, } from 'mdbvue';
Vue.component('mdbBtn', Btn); Vue.component('mdbCard', Card); Vue.component('mdbCardBody', CardBody); Vue.component('mdbCardTitle', CardTitle); Vue.component('mdbCardText', CardText); Vue.component('mdbCardText', CardText); Vue.component('mdbCol', Col); Vue.component('mdbContainer', Container); Vue.component('mdbFooter', Footer); Vue.component('mdbRow', Row);
All work but the Col. It's not exported it seems. I will have to check all other too. The mdbInput doesn't work like this too.
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.1
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: No