MDB Vue & Laravel - Quick start guide

Topic: MDB Vue & Laravel - Quick start guide

Published 03.07.2019 Updated 03.12.2019

Mikołaj Smoleński posted 7 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/build/css/mdb.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!

Sort comments: Best Worst Newest Oldest

qyako pro commented 1 months ago