Problem using mdbvue with laravel

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:

require('./bootstrap');
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbvue/build/css/mdb.css';

window.Vue = require('vue');

Vue.component('mdb-btn', require('mdbvue/src/components/Button.vue'));
Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
 el: '#app',
});

My bootstrap.js file is:

...
 
try {
 window.Popper = require('popper.js').default;
 window.$ = window.jQuery = require('jquery');

require('bootstrap');
require('mdbvue');
} catch (e) {}
...
 

My ExampleComponents.vue file is:

<template>

 <mdb-carousel :interval="8000">
 <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide" />
 <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide" />
 <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide" />
 </mdb-carousel>
</template>

<script>
//Vue.component('mdb-carousel', require('mdbvue/src/components/Carousel.vue')); <-- if I import components in this way it works
//Vue.component('mdb-carousel-item', require('mdbvue/src/components/CarouselItem.vue'));
import {mdbCarousel, mdbCarouselItem } from 'mdbvue'; // importing components in this way doesn't work

export default {
 name: 'ExampleComponent',
mounted: function(){
console.log('ok' ); 
 },
 components: {
mdbCarousel, 
mdbCarouselItem
 }
};

</script>

If I use the commented component registration it works, if I used the import command and the 'components' declaration it doesn't work.

My Html page is:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="csrf-token" content="{{ csrf_token() }}">
 <title>Laravel</title>

<!-- Fonts -->
 <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">

<!-- Styles -->
 <style>
 </style>
 </head>
 <body>
 <div id="app">
 <mdb-btn>bottone</mdb-btn>
 <example-component />
 </div>
 <script src={{asset("js/app.js")}}></script>
 </body>
</html>

the mdb-btn component works correctly

the example-component component doesn't appear.

In my console I see it has been correctly mounted because the 'ok' message appear but for mdb-carousel and mdb-carousel-item component it says :

[Vue warn]: Unknown custom element: <mdb-carousel> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <ExampleComponent> at resources/js/components/ExampleComponent.vue
       <Root>

can you please help me?

Thanks

Davide

Add comment

GADstudio pro answered 6 years ago

1 0 Best answer

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 6 years ago

That is correct, because there are two different names for each component.

Outside Laravel it is working with no problems.

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 0 Best answer

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

Add comment

GADstudio pro answered 6 years ago

0 0 Best answer

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:

require('./bootstrap');
import 'bootstrap/dist/css/bootstrap.css'
import 'mdbvue/build/css/mdb.css'
 

in my bootstrap.js I added import of mdbvue:

try {
 window.Popper = require('popper.js').default;
 window.$ = window.jQuery = require('jquery');

require('bootstrap');
require('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

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 0 Best answer

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 commented 6 years ago

npm -v mdbvue
5.8.0

GADstudio pro commented 6 years ago

but when I installed with npm install command it was:

+ mdbvue@4.8.2

Add comment

GADstudio pro answered 6 years ago

0 0 Best answer

npm -v mdbvue
5.8.0

but when I installed with npm install command it was:

+ mdbvue@4.8.2

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 0 Best answer

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!

Add comment

Jack Lyons answered 6 years ago

0 0 Best answer

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 commented 6 years ago

mdb-vue version 6.5.0

Mikołaj Smoleński staff commented 6 years ago

Hi Jack,

Did You try to import just 'Card' from 'mdbvue' (without 'mdb' prefix)?

Best regards

Jack Lyons commented 6 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 6 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 commented 6 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 6 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 commented 6 years ago

Thank you! That's really helpful.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

User: 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

GADstudio

Pro User

64Support score
2Questions 5Answers

0Snippets likes 0Snippets