Vue Paper Dashboard Laravel

Vue Paper Dashboard Laravel is a free, MIT-licensed full-stack admin dashboard template that combines a Vue.js single-page frontend with a Laravel backend implementing the JSON:API specification.

What is Vue Paper Dashboard Laravel?

Vue Paper Dashboard Laravel is a full-stack starter kit built by Creative Tim with UPDIVISION. It combines the Vue.js frontend of Paper Dashboard v2.0.1 with a Laravel API backend that follows the JSON:API specification, delivering a login-ready admin panel with real server-side data. The template runs as two separate projects: a Vue CLI single-page app and a Laravel API, connected via HTTP endpoints defined in environment variables. It is version 1.0.0 and available under the MIT license.

Key Features

• Reusable frontend components — The Vue project includes a large set of Paper Dashboard components: cards (Card, ChartCard, CircleChartCard, StatsCard), charts (bar, line, pie, doughnut via Chart.js), collapse, dropdown, modal, pagination, progress, tabs, timeline, and a wizard. All are wired through plugins in src/plugins/globalComponents.js.
• Laravel API with JSON:API — The backend exposes resources using the JSON:API standard, minimizing the number of requests and data transferred. It uses Laravel Passport for OAuth token authentication, with CLIENT_ID and CLIENT_SECRET set from passport:install.
• Ready-to-use authentication — Login, register, and password reset pages are fully implemented in Vue components (Login.vue, Register.vue, Email.vue, Reset.vue). Login accepts demo users admin@jsonapi.com, creator@jsonapi.com, and member@jsonapi.com, all with the password "secret".
• Profile management — The user profile page has separate EditProfileCard.vue and EditPasswordCard.vue components that update name, email, profile picture, and password through Vuex actions dispatching to Laravel endpoints.
• User list page — A user-management module (ListUserPage.vue) reads and displays users from the API with pagination, demonstrating how to handle resource collections.
• Vuex store modules — State management is organized into modules for auth, profile, users, and password reset (src/store/modules/auth.js, profile-module.js, users-module.js, reset.js).
• Pre-configured routing — All routes for dashboard, examples, pages, and authentication are added in src/router/index.js and routes.js; the sidebar links work out of the box.
• Vue CLI and build tooling — The frontend requires Node.js 8.9+ (8.11.0+ recommended), npm, and VueCLI; run npm run dev for development or npm run build for production bundles.

Who is it for?

• Full-stack developers who want a working starting point for a Vue + Laravel admin panel without wiring auth and API plumbing themselves.
• Laravel backend developers who need a demo JSON:API implementation with Passport auth to reuse in their projects.
• Frontend developers who want to practice building SPAs against a real HTTP API, using the dashboard's existing forms and API calls as reference.
• Startup teams building internal tools or MVPs with an admin dashboard, who can replace the provided pages and API resources with their own.

What can you do with it?

• Rapidly prototype an admin dashboard — After installing both projects, register a user or log in with the demo credentials, then customize the dashboard widgets, tables, and sidebar for your product.
• Build user management features — The free version includes a user list page; the PRO version adds CRUDs for managing users, roles, items, categories, and tags, per the login screen text.
• Learn the JSON:API pattern — The Laravel backend and the Vue API calls demonstrate how JSON:API requests and responses are structured, useful as a teaching reference.

How does it work?

Setting up the template involves two project folders: the Laravel API and the Vue frontend. For the backend, navigate to the Laravel folder, run composer install, copy .env.example to .env, add database credentials, then run php artisan migrate --seed, php artisan key:generate, and php artisan passport:install. For the frontend, run npm install (use npx npm@6.14.16 install if it fails), set VUE_APP_BASE_URL and VUE_APP_API_BASE_URL in .env, then npm run dev.

Pricing

Vue Paper Dashboard Laravel is a free download from Creative Tim under an MIT license. A paid PRO version, Vue Paper Dashboard PRO Laravel, adds more components and ready-made CRUD pages.

FAQ

Is Vue Paper Dashboard Laravel free?

Yes, the template is free to download and use under the MIT license. Creative Tim also sells a PRO version with additional features, but the free version includes auth, profile editing, a user list, and all the dashboard pages.

What are the demo login credentials?

You can log in with admin@jsonapi.com, creator@jsonapi.com, or member@jsonapi.com, all using the password "secret". The credentials work on the live demo and after you set up the project locally.

Do I need both Laravel and Vue installed?

Yes, the project ships as two separate folders: one for the Laravel JSON:API backend and one for the Vue Paper frontend. Both must run concurrently — the Vue SPA reads API URLs from environment variables pointing to the Laravel server.

How do I set up the Laravel API?

After downloading, run composer install in the Laravel folder, create a .env file, set your MySQL database credentials, and run php artisan migrate --seed. Then complete php artisan key:generate and php artisan passport:install, adding the generated client ID and secret to .env. Use a multi-threaded web server like Apache/Nginx; php artisan serve is not recommended.

What browser versions are supported?

Creative Tim officially supports the last two versions of Chrome, Firefox, Edge, Safari, and Opera for this template.