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?