Topic: Problem using mdbvue with laravel
GADstudio pro asked 6 years ago
Hi,
I'm trying to use mdbvue pro (version 5.8.0) with laravel.
My App.js file is:
Jack Lyons free answered 5 years ago
I'm having a similar issue. I added 'mdbvue' via npm, imported the CSS just fine. But when I try to show a component it says Unknown custom element: <mdbCard>
. I have it registered in a demo component like so:
<template><br> <mdb-card>Card demo</mdb-card><br></template><br>
And in the components object like socomponents: { 'mdb-card': mdbCard, // have also tried just mdbCard}
Not sure what is wrong? Can you please help? I have copied the code snippet from the docs (https://mdbootstrap.com/docs/vue/components/cards/)
Jack Lyons free commented 5 years ago
mdb-vue version 6.5.0
Mikołaj Smoleński staff commented 5 years ago
Hi Jack,
Did You try to import just 'Card' from 'mdbvue' (without 'mdb' prefix)?
Best regards
Jack Lyons free commented 5 years ago
Hi there, thanks for the reply. I am importing things exactly as the documentation shows (https://mdbootstrap.com/docs/vue/components/cards/) However, I still get the error :(
Mikołaj Smoleński staff commented 5 years ago
We had some issues with components with 'mdb' prefix in Laravel environment. Our components work also without prefixes (in most cases). So that's why I'm asking if the other kind of import is working ok? According to cards it should look like this:
import { Card } from 'mdbvue'
Best regards
Jack Lyons free commented 5 years ago
Hi again, thanks that worked for the Card component ... but what about all the other components then? If I use mdbCardImage
or CardImage
or cardImage
they all break. Is there a pattern to follow for laravel?
Mikołaj Smoleński staff commented 5 years ago
Hi again,
There is a problem while working with MDB and Laravel. In this environment only the default export is correct for our components. In most cases You just need to remove 'mdb' prefix. Sometimes (like in CardImage) the name of component is different - e.x. in this case it is CardImg.
Here You can find all free components names (without 'mdb' prefix) https://github.com/mdbootstrap/Vue-Bootstrap-with-Material-Design/blob/master/src/index.js
Best regards
Jack Lyons free commented 5 years ago
Thank you! That's really helpful.
GADstudio pro answered 6 years ago
Hi,
it doesn't work in this way.
Buti it works if I used
import {Carousel, CarouselItem, CarouselCaption} from 'mdbvue'
and then I export components with
components: {
'mdb-carousel' : Carousel,
'mdb-carousel-item': CarouselItem'
...
I saw the index.js file in node_modules/mdbvue directory ... I'm not an expert but I found a lot of duplicated declarations, with and without 'mdb' prefix .... is it correct?
Thanks
Davide
Mikołaj Smoleński staff commented 5 years ago
That is correct, because there are two different names for each component.
Outside Laravel it is working with no problems.
Mikołaj Smoleński staff answered 6 years ago
Hi there,
It's the latest verion. You could also try to change mdb-carousel syntax to mdbCarousel in Your template. However it's very weird that it's not working.
Best!
Mikołaj Smoleński staff answered 6 years ago
Ok, great! So I think the problem is the version of mdbvue. In older versions there is no syntax with mdb- prefix. Can You write which version of our package have You installed?
Best Regards
GADstudio pro answered 6 years ago
I follow your instruction using:
npm install git+https://oauth2:***mytoken***@git.mdbootstrap.com/mdb/vue/vu-pro.git --save
and the node_module mdbvue seems to be correctly installed in my laravel project
im my App.js I added import of mdb.css:
in my bootstrap.js I added import of mdbvue:
I saw that if I use
import {Carousel, CarouselItem } from 'mdbvue';
export default {
name: 'ExampleComponent',
mounted: function(){
console.log('ok' );
},
components: {
'mdb-carousel': Carousel,
'mdb-carousel-item': CarouselItem
It works correctly.
It seem not to recognise mdbCarousel component
Mikołaj Smoleński staff answered 6 years ago
Hi there,
It seems like You haven't install MDB Vue properly. That's why You can import components directly, but not usting mdbvue statement. What was Your steps to install MDB Vue package in Your project?
Best Regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Vue
- MDB Version: 4.6.0
- Device: MAC
- Browser: Chrome
- OS: MAC OS
- Provided sample code: No
- Provided link: No