Topic: MDB Vue & Laravel - Quick start guide
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>
<!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!
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
- Category: Vue
- Specification: MDB Vue 6.7.1 + Laravel 5.8
This no longer works for Laravel 8, can you update this please, Thank you