Topic: MDB Vue not working with Laravel 8.8

kingcalf free asked 4 years ago


I'm trying to use MDB Vue with Laravel 8.8. I followed the instructions for the "Laravel - Existing Project" instructions using the .tgz file in the root directory of my project. I added "mdbvue": "mdbvue-6.7.1.tgz" to the package.json file and then I ran "npm i".

I also added :

require("bootstrap-css-only/css/bootstrap.min.css");

require("mdbvue/lib/css/mdb.min.css");

require("@fortawesome/fontawesome-free/css/all.min.css");

to my /resources/js/app.js file.

I see the mdbvue folder in the node_modules directory, but when I create a new view in my laravel project and insert the test code for a simple button from the MDBootstrap website, I just get the text of the button displayed on screen.

For example: This code doesn't display anything on screen

<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">

<template>
    <mdb-btn>MDB Button</mdb-btn>
</template>
<script>
    import {
        mdbBtn
    } from 'mdbvue';
    export default {
        components: {
            mdbBtn
        }
    }
</script>

But when i wrap the tags in between then I just get the text of the button on screen but no button.

<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">


<div id="app">
<template>
    <mdb-btn>MDB Button</mdb-btn>
</template>
</div>
<script>
    import {
        mdbBtn
    } from 'mdbvue';
    export default {
        components: {
            mdbBtn
        }
    }
</script>

Can someone help me get this working?


Mikołaj Smoleński staff commented 4 years ago

In the first step I would like to check if the error is related to JavaScript or not. Please inspect the button element in your devtools (ctrl + shift + c) and let me know if the native button with class btn exists in the Elements view.

Best regards


kingcalf free commented 4 years ago

I was able to get the components working by creating them in the /resources/js/components folder and then registering the component in the /resources/js/app.js file and then finally using the custom component in my blade.php file. However, I did find that some of the components that come with 6.7.1 are broken with the version of vue that comes with Laravel. For example, I'm not able to fully use the sideNav2 componenet, but the original sideNav1 works perfect.


Mikołaj Smoleński staff commented 4 years ago

Ok, but still it's not an answer to my question...

Best regards


Boopathy free commented 3 years ago

Hi please use like this i.e You need to put "/" beforeyour path to tell that it is in public path



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.7.1
  • Device: Laravel
  • Browser: any
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No