creativetimofficialcreativetimofficial
64

Vue Material Dashboard Laravel Bs4

screenshot of Vue Material Dashboard Laravel Bs4

Vue SPA Material template connected to working Laravel REST API with the help of json:api standard

Github

Overview

Vue Material Dashboard Laravel is a frontend framework that comes with a reusable backend for API-driven development. Developed in partnership with UPDIVISION, this framework allows you to build apps with a flexible architecture across different devices and operating systems.

Features

  • Reusable components for frontend development
  • Reusable backend for API-driven development
  • Flexible architecture for building apps
  • Compatible with a variety of devices and operating systems

Laravel API Setup

Before setting up the Laravel API project, make sure you have the following prerequisites:

  • Proper multi-threaded web server (e.g., Apache/Nginx) with PHP, Composer, and MySQL.
  • Do not use php artisan serve as it may result in stalled requests due to the single-threaded nature of the built-in PHP web server.

We recommend using Laradock for Linux and Mac or Laragon for Windows for your local environment. Alternatively, you can follow the instructions for installing WAMP on Windows or LAMP on Linux and Mac.

Additionally, you will need to install Composer 2. Instructions can be found at https://getcomposer.org/doc/00-intro.md.

Vue Material Frontend Setup

To set up the Vue Material frontend project, ensure that you have the following prerequisites in your local environment:

  • NodeJS version 8.9 or above (8.11.0+ recommended)
  • npm
  • VueCLI

Install Node from https://nodejs.org/. It is recommended to install version 8.11.0 or above.

Install npm by following the instructions at https://www.npmjs.com/get-npm.

Install VueCLI using the guide at https://cli.vuejs.org/guide/installation.html.

Laravel JSON:API Project Installation

Follow these steps to install the Laravel API project:

  1. Navigate to your Laravel API project folder: cd your-laravel-json-api-project.
  2. Install project dependencies: composer install.
  3. Create a new .env file: cp .env.example .env.
  4. Add your own database credentials in the .env file in DB_DATABASE, DB_USERNAME, DB_PASSWORD.
  5. Create users table: php artisan migrate --seed.
  6. Generate application key: php artisan key:generate.
  7. Install Laravel Passport: php artisan passport:install and set the CLIENT_ID and CLIENT_SECRET in the .env file.
  8. Add your own mailtrap.io credentials in MAIL_USERNAME and MAIL_PASSWORD in the .env file.

Summary

Vue Material Dashboard Laravel is a powerful frontend framework that provides reusable components and a reusable backend for API-driven development. With a flexible architecture and compatibility with various devices and operating systems, it offers a versatile solution for building awesome-looking apps. The installation process requires setting up the Laravel API project and the Vue Material frontend, ensuring all necessary prerequisites are met.