1. MDB Home Page
  2. Support Main Page
  3. MDB Vue
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
 

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 6 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!

GADstudio pro answered 6 years ago

npm -v mdbvue
5.8.0

but when I installed with npm install command it was:

+ mdbvue@4.8.2

 

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

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:

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

 

 

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

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • 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
Tags
import-modules
About author
GADstudio
Pro User 64Support score
2Questions 5Answers 0Snippets