Vue Black Dashboard Laravel

Vue Black Dashboard Laravel is a free, MIT-licensed full-stack admin dashboard template that combines a Vue 2 single-page application with a Laravel REST API built on the JSON:API specification, created by Creative Tim in partnership with UPDIVISION.

What is Vue Black Dashboard Laravel?

Vue Black Dashboard Laravel is a starter kit that ships as two project folders: a Vue frontend based on Vue Black Dashboard v1.1.1 and a Laravel JSON:API backend based on Black Dashboard v1.0.1. It gives you working authentication, profile editing, and a set of dashboard pages that communicate over a real API. The frontend runs in a Vue CLI environment with Node 8.9 or above, and the backend requires PHP, Composer, MySQL, and a multi-threaded web server such as Apache or Nginx.

Key Features

• Working auth flow — Login and registration are fully implemented in src/pages/Login.vue and src/pages/Register.vue, backed by a Vuex auth store at src/store/modules/auth.js; the demo account is admin@jsonapi.com with password secret.
• Laravel JSON:API backend — The API follows the JSON:API spec for fetching and modifying resources, with Laravel Passport handling token authentication; setup steps include composer install, php artisan migrate --seed, and php artisan passport:install.
• Profile and password editing — Users can update name, email, profile picture, and password via src/pages/Examples/UserProfile, which contains EditProfileCard.vue and EditPasswordCard.vue.
• Prebuilt dashboard pages — Includes Dashboard, User Management (ListUserPage.vue), Table List, Maps, Icons, Notifications, Typography, and a starter layout, all wired in src/router/index.js.
• Vue 2 tech stack — Uses Vue Router, Vuex, vee-validate for form validation, Sass for styling, and the tim-icons icon set, with global components like BaseButton, BaseInput, and Card registered in src/plugins/blackDashboard.js.
• Environment-driven configuration — The Vue app reads VUE_APP_BASE_URL and VUE_APP_API_BASE_URL from .env; the Laravel app reads database credentials, Passport client ID/secret, and Mailtrap credentials from its .env.
• MIT license — The free version is open source; a paid Vue Black Dashboard PRO Laravel version adds more features.

Who is it for?

• Developers building admin dashboards — Clone the repo to get a running Vue SPA plus Laravel API with auth and profile management already implemented.
• Laravel developers learning API-driven SPAs — The JSON:API backend serves as a reference implementation for structuring resources, using Passport, and connecting to a Vue frontend.
• Full-stack beginners — The two-folder structure and step-by-step README (Composer, npm, migrations, Passport) make it a practical tutorial for wiring Vue and Laravel together.
• Teams that want the Black Dashboard look — The template delivers the well-known Black Dashboard design as a Vue SPA with working backend integration.

What can you do with Vue Black Dashboard Laravel?

• Set up an authenticated dashboard in minutes: Register a new user or log in with the demo admin credentials to reach the dashboard, profile editing, and user management pages.
• Customize the auth flow: Modify the Vue login and registration components or the auth Vuex store to add extra fields, validation rules, or new authentication behaviors.
• Extend the API: Add new JSON:API resources on the Laravel side and connect them to new Vue pages using the existing services and stores in src/store/services.

How does Vue Black Dashboard Laravel work?

The repository provides two projects that you run separately. For the Laravel API, install dependencies with Composer, create your .env file, set database credentials, then run migrations, key generation, and Passport installation before adding the client credentials to .env. For the Vue frontend, install dependencies with npm, set the two VUE_APP_* URL variables to point at your frontend and API, then start it with npm run dev or build with npm run build. The Vue app authenticates via Laravel Passport and stores the session in Vuex.

Pros and cons

• Pros: Free and MIT-licensed; ships with working login, registration, profile, and dashboard pages; clear setup instructions for both Vue and Laravel sides; includes a user management page and starter layout.
• Cons: The Laravel backend requires a multi-threaded web server — the README explicitly warns not to use php artisan serve because it stalls requests; the Vue frontend needs Node 8.9 or above, with 8.11.0+ recommended.

Pricing

Vue Black Dashboard Laravel is free to download and use under an MIT license. Creative Tim also sells a PRO version, Vue Black Dashboard PRO Laravel, which adds more components and features.

FAQ

Is Vue Black Dashboard Laravel free?

Yes, the free version is MIT-licensed, so you can use it without paying license fees. A separate paid PRO version is available if you need more components and features.

What are the demo login credentials?

You can register a new user through the registration page or log in with the seeded admin account using admin@jsonapi.com and password secret. After login you can access the dashboard, profile, and user management pages.

Why can't I just run php artisan serve?

The README warns that PHP's built-in web server is single-threaded, which causes stalled API requests in this project. It recommends a multi-threaded environment like Apache/Nginx, with Laradock for Linux/Mac or Laragon for Windows.

What pages are included?

The template includes Dashboard, User Profile with edit profile and change password cards, User Management list, Table List, Maps, Icons, Notifications, Typography, and a starter layout, plus Login, Register, Password Email, and Password Reset pages.

Which frontend and backend versions does it use?

The Vue frontend is based on Vue Black Dashboard v1.1.1, and the design layer is Black Dashboard v1.0.1. The backend is a Laravel JSON:API project that uses Laravel Passport for authentication.