creativetimofficialcreativetimofficial
14

Vue Paper Dashboard Laravel

screenshot of Vue Paper Dashboard Laravel

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

Github

Overview

Vue Paper Dashboard Laravel is a frontend and backend development framework that offers reusable components and a flexible architecture for building apps across various devices and operating systems. It combines the power of Vue.js and Laravel, providing a seamless integration between the frontend and backend.

Features

  • Reusable components for easy and efficient frontend development
  • API-driven development for minimizing requests and reducing data transmission
  • Flexible architecture for building apps that work on multiple devices and operating systems

Laravel API Setup

  1. Ensure you have a multi-threaded web server environment such as Apache/Nginx with PHP, Composer, and MySQL installed.
  2. Avoid using php artisan serve as it is a single-threaded server and may cause stalled requests.
  3. It is recommended to use Laradock for Linux and Mac, or Laragon for Windows.
  4. Alternatively, you can set up a local environment with WAMP on Windows or Lamp on Linux & Mac.
  5. Install Composer by following the instructions at https://getcomposer.org/doc/00-intro.md.

Vue Paper Frontend

  1. Set up a local environment with Node.js (version 8.9 or above), npm, and Vue CLI installed.
  2. Install Node.js from https://nodejs.org/ (version 8.11.0+ recommended).
  3. Install npm by following the instructions at https://www.npmjs.com/get-npm.
  4. Install Vue CLI by following the installation guide at https://cli.vuejs.org/guide/installation.html.

Laravel JSON:API Project Installation

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

Vue Paper Dashboard Project Installation

  1. Navigate to your Vue Paper Dashboard project folder: cd your-vue-paper-dashboard-project.