creativetimofficialcreativetimofficial
19

Vue White Dashboard Laravel

screenshot of Vue White Dashboard Laravel

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

Github

Overview:

Vue White Dashboard Laravel is a product that offers a reusable frontend and backend for building apps with a flexible architecture across various devices and operating systems. It is designed to support API-driven development and comes with features for efficient data transmission and client-server interactions.

Features:

  • Reusable components for frontend development
  • API-driven development using JSON:API specification
  • Support for multi-threaded web server environment (Apache/Nginx with PHP, Composer, and MySQL)
  • Compatibility with Laradock or Laragon for local environment setup
  • Compatibility with NodeJS, npm, and VueCLI for frontend development
  • Laravel Passport for authentication and security features

Laravel API Setup:

  1. Ensure you have a proper multi-threaded web server environment (such as Apache/Nginx with PHP, Composer, and MySQL) set up. Avoid using the built-in PHP web server (php artisan serve) as it may result in stalled requests.
  2. Install Laradock (for Linux and Mac) or Laragon (for Windows) for an optimal local environment setup. Alternatively, follow the instructions to install WAMP on Windows or LAMP on Linux & Mac.
  3. Install Composer 2 by following the instructions provided at https://getcomposer.org/doc/00-intro.md.
  4. Navigate to your Laravel API project folder (cd your-laravel-json-api-project)
  5. Install project dependencies by running composer install
  6. Create a new .env file by copying the .env.example file (cp .env.example .env).
  7. Update the .env file with your own database credentials (DB_DATABASE, DB_USERNAME, DB_PASSWORD).
  8. Create the users table by running php artisan migrate --seed
  9. Generate the application key by running php artisan key:generate
  10. Install Laravel Passport by running php artisan passport:install and update the .env file with the CLIENT_ID and CLIENT_SECRET received.
  11. Update the .env file with your mailtrap.io credentials (MAIL_USERNAME and MAIL_PASSWORD).

Vue White Dashboard Project Installation:

  1. Ensure you have a working local environment with NodeJS version 8.9 or above (8.11.0+ recommended), npm, and VueCLI.
  2. Install NodeJS by following the instructions provided at https://nodejs.org/ (version 8.11.0+ recommended).
  3. Install NPM through the command line using npm install.
  4. Install VueCLI by following the instructions provided at https://cli.vuejs.org/guide/installation.html.
  5. Navigate to your Vue White Dashboard project folder (cd your-white-dashbord-project).
  6. Install project dependencies by running npm install.

Summary:

Vue White Dashboard Laravel is a versatile product that offers reusable frontend and backend components for building apps. It leverages API-driven development using the JSON:API specification for efficient data transmission. The installation process involves setting up the Laravel API project with proper web server and database credentials, and the Vue White Dashboard project with NodeJS, NPM, and VueCLI. With its features and easy installation process, Vue White Dashboard Laravel provides a convenient solution for developing apps with a flexible architecture.