Topic: MDB Vue not working with Laravel 8.8
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?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: 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
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
btnexists in the Elements view.Best regards
kingcalf 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 commented 4 years ago
Hi please use like this i.e You need to put "/" beforeyour path to tell that it is in public path