MDB Vue & Laravel - Quick start guide

Topic: MDB Vue & Laravel - Quick start guide
Published 20.08.2020 Updated 19.08.2020

Mikołaj Smoleński staff posted 2 years ago


Laravel is the PHP framework which can be easily synchronized with frontend frameworks. In this tutorial I will show how simple is working with Laravel and Vue along with MDB Vue library. 

Laravel installation

The easiest way to start is to use composer.
To download it please visit this page.

After installation, You can easily type

composer global require "laravel/installer"

Then You can create your own laravel project

laravel new <laravel-with-mdb>

And finally, inside your project's directory type

npm install


Integration with MDB Vue

To install MDB in your Laravel App easily type:

npm install mdbvue

Make sure that bootstrap is one of Your dependencies. If not please install it in the same way as above.

Next step is to add all necessary styles inside app.js file, which is located in resources/js directory:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'mdbvue/lib/css/mdb.min.css';

Now it's time to prepare first Vue component within Laravel app.

Let's replace ExampleComponent.vue file (resources/js/components) with the following content:

    <div class="container mt-5">
        <div class="row justify-content-center">
            <mdb-btn color="primary">Button</mdb-btn>

    import { mdbBtn } from 'mdbvue';

    export default {
        components: {
        mounted() {
            console.log('Component mounted.')
Finally, we're ready to import the component, so please open welcome.blade.php file in the resources/views directory and paste this code:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <div id="app">
            <example-component />
        <script type="text/javascript" src="js/app.js"></script>

Great, Your app is ready! Wish You successful coding!

TerrenceBerg commented 2 years ago

This no longer works for Laravel 8, can you update this please, Thank you

qyako pro commented 3 years ago

Thank you for information

VonSNAKE commented 2 years ago

Which path will be correct instead of: "import 'mdbvue / build / css / mdb.css';" 'mdbvu / lib / mdbvue.css' or 'mdbvu / lib / css / mdb.min.css'? On laravel-mix error: "ERROR in ./resources/js/app.js

Module not found: Error: Can't resolve 'mdbvue / build / css / mdb.css' in '... \ resources \ js'

Mikołaj Smoleński staff commented 2 years ago

In the latest version of Vue (6.7.1) it should be:
import 'mdbvue/lib/css/mdb.min.css';

I just updated the article.

Best regards

Innovar_2019 commented 3 years ago

Thank you for your help!

Please insert min. 20 characters.