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 months ago

Introduction

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:

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

<script>
    import { mdbBtn } from 'mdbvue';

    export default {
        components: {
            mdbBtn
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>
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()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
    </head>
    <body>
        <div id="app">
            <example-component />
        </div>
        <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

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

qyako pro commented 11 months ago

Thank you for information


VonSNAKE commented 2 months 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 months 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 a year ago

Thank you for your help!


Write
Please insert min. 20 characters.