I have the same issue. Is there any solution for this?

Hi there guys,

Thanks to this thread the topic got pushed forth a bit and now I'd love to share some thoughts I, a total PHP newbie, had while trying to implement mdbvue "as is" into a fresh, basic Laravel 5.7.17 build. I would like to use it as a starting point for people with actual PHP skill to gather and shed some light onto the pains and pleasures of implementation of UI libraries.

NOTE: The guide below assumes there is PHP, Composer (& others) present on the machine. If not, I found this Laracast Laravel series a great intro smoothly guiding through the installation process.

MDBVUE LARAVEL HOW-TO:
1. $ laravel new yourappname
2. $ yarn add mdbvue
3. $ yarn add -D babel-preset-stage-2
4. in yourappname/resources/js/app.js add - this might seem v. tricky & weird* -
import 'mdbvue/build/css/mdb.css';
5. enhance a chosen blade template (default: "yourappname/resources/views/welcome.blade.php") with 
    a) id="app"
       this is where our Vue instance will be mounted
    b) <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" >
       in the head so that the default BS styles can get attached
    c) <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
       in, say, lower part of the body so that our js goodies actually get there
6. $ yarn dev
    it will compile both css and vue code into the output files we attached above
7. $ php artisan serve
    now we should have a php server running (by default at localhost: 8000)

*From what I checked adding styles through Sass's @import statement will concatenate BS and MDB styles the wrong order and so MDBootstrap styles will be getting overwritten by pure BS.

We should end up in an environment ready to test & implement mdbvue.
Few things to note here: Apparently everyone knew it except me, but Laravel comes in with a default support for Vue single-file-components (you can easily convert it into a React build btw). The "stub" they provide, the "yourappname/resources/js/components/ExampleComponent.vue" is a great place to start! It is the easiest place to import components from mdbvue to.

I must admit the road up to this point wasn't so straight-forward as I thought it would, but once you're here it is fairly easy to estimate what works and what does not. It MOSTLY WORKS!

@GM This is the setup I was checking mdbvue components in. I have not tested them all, but of the all I did they were all prefixed and worked. Could you please try to follow the guide and let me know whether the problems are still there? Or maybe without going through it all you already see a difference in what we did that might've contributed to the issue you described?

@Pisarev Thanks again for the instruction. I discovered there is no difference in implementation, as far as I checked, between a free and pro versions of mdbvue. What is important, though, is that I did not use Laravel Mix explicitly anywhere, nor did I fiddle with original codebase, and yet I did not encounter the registration / "recursiveness" problem (checked both mdbInput and mdbSelect). Do you think I might have missed something? Do not hesitate to share your thoughts, I am also ready to send the project to you so you can have a look. 

EVERYONE considering laravel + mdbvue stack, please get involved and follow the instructions above, get yourself a running project, fiddle with it by importing mdbvue components and share your experience - together with suggestions and bugs / inconsistencies you've experienced! That way we will end up with full laravel support in no time! I am sure the guide is universal and can help anyone struggling with implementing a Vue UI library into a Laravel project.

With Best Regards,
Kuba

Hi there @GM ,

Thanks for these details - writing a Laravel webpack build task out of this thread as we speak. The Vue team is returning from hiatus with full force next week and many issues will be tackled. Not sure about prioritization of their task list, but perhaps this one will be tested as well (no promises, though). There is a number of steps that must be undertaken to have this one figured out - first, in-house tests with Laravel Mix. Let us know of any details you might still have to help us!

Anyway, thanks to you the issue will not get lost! Abandoning the effort of components name prefix standardization could not be an officially supported, but thanks for the hot-fix solution, it has a potential of saving someone a lot of frustration.

With Best Regards,
Kuba

I can confirm that I face the same problem on Laravel.
Almost all components with the prefix "mdb-" do not work, of the workers I only got "mdb-navbar-brand".
I use components without the "mdb-" prefix and import them without "mdb" too.
Also ran into a non-working component "Dropdown". It is declared in index.js as "let Dropdown = require ('./components/Dropdown'). Default;". It helps to replace this line with "import Dropdown from './components/Dropdown';"

1. Add dependencies : {"mdbvue":"git+https://oauth2:<TOKEN_HERE>@git.mdbootstrap.com/mdb/vue/vu-pro.git"}

2. in app.js I put the following code:

   import Vue from 'vue';
   
   import 'bootstrap-css-only/css/bootstrap.min.css';
   
   import 'mdbvue/build/css/mdb.css';
   
   import router from 'mdbvue/src/router';

   import AppExample from 'mdbvue/src/App.vue';
   
   import AlertPlug from 'mdbvue/src/components/pro/AlertPlug.js';
   
   Vue.use(AlertPlug);

   const app = new Vue({
   
   el: '#app',
   
   router,
   
   store,
   
   template: '<AppExample/>',
   
   components: { AppExample }
   
   });

   And I get an error: https://cloud.mail.ru/public/7jwM/WFpAV2cmT