VueLaravelAdmin dashboard

vue-black-dashboard-laravel — Vue Admin dashboard Template

By creativetimofficial

A backend template based on Vue and Laravel, with a Vue SPA frontend using Black Dashboard and a backend that provides REST endpoints via the JSON:API standard.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

1 previews
Author preview
Author-provided previewTop of page

Preview provided in the project README.

One original preview is available. Open the full image to inspect the design.

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-03View source

What stands out

A quick read of the recorded project description.

01

The frontend is a Vue SPA using Vue Black Dashboard, and the backend is a separate Laravel JSON:API project

02

The frontend and backend communicate via the JSON:API specification, with API definitions and response formats following that standard

03

Built-in login, registration, dashboard, and profile editing pages, with routing and authentication state already configured

04

Uses Laravel Passport for API authentication, requiring client credentials to be generated and configured during installation

05

The code is MIT licensed, allowing free use, modification, commercialization, and distribution

Template Details

The template consists of two separate projects: a Laravel JSON:API backend and a Vue Black Dashboard frontend. The backend follows the JSON:API specification, which defines how clients request and modify resources and how the server responds; the frontend is a Vue single-page application that interacts with the backend through the API.

Implemented features include login, registration, a dashboard, and editing the current logged-in user's profile (name, email, avatar) and password. The login and registration pages are handled by src/pages/Login.vue and src/pages/Register.vue respectively, and authentication state is stored in src/store/modules/auth.js. Routes are centralized in src/router/index.js; the dashboard is accessible via a sidebar link or /home, login is /login, registration is /register, and profile editing is /profile.

Before use, the backend and frontend must be installed and run separately. The backend requires a multi-threaded web server (such as Apache/Nginx) along with PHP, Composer 2, and MySQL. The README explicitly advises against using php artisan serve because its single-threaded nature causes requests to stall; Laravel Passport must also be installed and CLIENT_ID and CLIENT_SECRET configured. The frontend requires Node.js 8.9 or higher (8.11.0+ recommended), npm, and Vue CLI, and uses VUE_APP_BASE_URL and VUE_APP_API_BASE_URL in .env to point to the frontend itself and the backend API address.

This version is MIT licensed and can be used, modified, commercialized, and distributed for free, but third-party assets such as demo images, fonts, and icons require separate license verification, and external services such as domains, hosting, and databases may incur additional costs.

VueLaravelBackend

Is it right for your project?

Use Cases

  • When you need a Vue backend interface with a working Laravel REST backend
  • When you want to organize frontend-backend data interaction using the JSON:API standard
  • When you need basic backend pages such as login, registration, dashboard, and user profile editing
  • When you want to deploy and maintain the frontend SPA and backend API separately

Suitable For

  • Full-stack developers familiar with Vue and Laravel
  • Projects that need JSON:API-style interface conventions
  • Teams that want to build an admin prototype based on an existing backend interface

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    The backend requires a multi-threaded web server such as Apache/Nginx along with PHP, Composer 2, and MySQL; the README explicitly advises against using php artisan serve

  2. 2

    Backend installation requires running composer install, copying .env, configuring the database, running php artisan migrate --seed, generating an application key, and installing Laravel Passport

  3. 3

    The frontend requires Node.js 8.9 or higher (8.11.0+ recommended), npm, and Vue CLI; run npm install and configure VUE_APP_BASE_URL and VUE_APP_API_BASE_URL in .env

  4. 4

    You can log in with the sample account [email protected] / secret, or register your own user

  5. 5

    Third-party assets such as demo images, fonts, and icons require separate license verification under their respective licenses

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version in the public repository under the MIT license; the free scope applies to that version's code and does not imply that external services or third-party assets are free.

Must comply with when using

  • You are allowed to use, modify, commercialize, and distribute the code of this version for free.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • The backend must use a multi-threaded web server such as Apache/Nginx; PHP's built-in php artisan serve cannot be used, otherwise requests will stall due to its single-threaded nature.
  • Running the backend requires your own multi-threaded web server environment and external dependencies such as PHP, Composer, and MySQL.
  • API authentication relies on Laravel Passport; CLIENT_ID and CLIENT_SECRET must be generated and configured during installation.
  • Email functionality requires registering and configuring credentials for an external email service such as mailtrap.io.
  • More features belong to the paid PRO version; the free version does not include these additional features.
  • The frontend requires your own environment with Node.js 8.9 or higher (8.11.0+ recommended), npm, and Vue CLI.
  • Demo images, fonts, icons, and other third-party assets require license verification under their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional costs.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

Do not use `php artisan serve` as it will result in stalled requests due to the single-threaded nature of the built-in PHP web server.

Original README

The Laravel JSON:API backend project requires a proper multi-threaded web server such as Apache/Nginx environment with PHP, Composer and MySQL.

Original README

Install Laravel Passport: `php artisan passport:install` and set in the .env file the CLIENT_ID and CLIENT_SECRET that you receive

Original README

Add your own mailtrap.io credentials in MAIL_USERNAME and MAIL_PASSWORD in the .env file

Original README

If you want to get more features, go PRO with [Vue Black Dashboard PRO Laravel](https://www.creative-tim.com/product/vue-black-dashboard-pro-laravel)

Original README

The Vue Black frontend project requires a working local environment with NodeJS version 8.9 or above (8.11.0+ recommended), npm, VueCLI.

Original README
https://github.com/creativetimofficial/vue-black-dashboard-laravel/blob/master/LICENSE.mdhttps://github.com/creativetimofficial/vue-black-dashboard-laravel/blob/master/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-03. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
Partly documented · 65 / 100
Technologies
Vue · Laravel
Website type
Admin dashboard
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2024-05-27
Screenshot last checked
2026-10-03

No demo link is recorded. Use the repository instructions to evaluate the project locally; the screenshot alone cannot establish interactive behavior.

The catalog identifies Vue as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: bab0923a38a5343bb697f6f6d1f5f718dcb3b6d26d7a157d6a1af35863f2c6b7

2026-10-03T08:36:34.755Z

Source file / repository
# [Vue Black Dashboard Laravel](https://vue-black-dashboard-laravel.creative-tim.com/?ref=vbl-readme)

![version](https://img.shields.io/badge/version-1.0.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/vue-black-dashboard-laravel.svg?maxAge=2592000)](https://github.com/creativetimofficial/vue-black-dashboard-laravel/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/vue-black-dashboard-laravel/vue-black-dashboard.svg?maxAge=2592000)](https://github.com/creativetimofficial/vue-black-dashboard-laravel/issues?q=is%3Aissue+is%3Aclosed)

*Frontend version*: Black Dashboard v1.0.1. More info at https://www.creative-tim.com/product/black-dashboard

*Vue version*: Vue Black Dashboard v1.1.1. More info at https://www.creative-tim.com/product/vue-black-dashboard

![Product Image](https://s3.amazonaws.com/creativetim_bucket/products/402/original/opt_bd_vuelaravel_thumbnail.jpg)

What if your frontend came not only with reusable components, but also with a reusable backend? API-driven development is more than just a buzzword and we partnered with [UPDIVISION](https://updivision.com) to prove it. Build awesome-looking apps with a flexible architecture across a variety of devices and operating systems with Vue Black Dashboard Laravel. 

If you want to get more features, go PRO with [Vue Black Dashboard PRO Laravel](https://www.creative-tim.com/product/vue-black-dashboard-pro-laravel)

# Download

For the free version of the project you can either
- download the .zip file from the Creative Tim site and extract it or 
- make a clone from the Github repository

You will get two project folders: one for the Laravel API project and one for the Vue frontend.

# Laravel API Setup

## Introduction

JSON:API is a specification for how a client should request that resources be fetched or modified, and how a server should respond to those requests. It is designed to minimize both the number of requests and the amount of data transmitted between clients and servers. This efficiency is achieved without compromising readability, flexibility, or discoverability.

[Click here to go to the JSON:API docs](https://explore.postman.com/api/6357/laravel-jsonapi)

## Prerequisites

### JSON:API backend
The Laravel JSON:API backend project requires a proper multi-threaded web server such as Apache/Nginx environment with PHP, Composer and MySQL.

**Do not use `php artisan serve` as it will result in stalled requests due to the single-threaded nature of the built-in PHP web server.** 

We strongly recommend using [Laradock](https://laradock.io/) for Linux and Mac or [Laragon](https://laragon.org/download/) for Windows if possible.

Other options for your local environment:
- Windows: [How to install WAMP on Windows](https://updivision.com/blog/post/beginner-s-guide-to-setting-up-your-local-development-environment-on-windows)
- Linux & Mac: [How to install LAMP on Linux & Mac](https://updivision.com/blog/post/guide-what-is-lamp-and-how-to-install-it-on-ubuntu-and-macos)

You will also need to install Composer 2: [https://getcomposer.org/doc/00-intro.md](https://getcomposer.org/doc/00-intro.md)

### Vue Black frontend
The Vue Black frontend project requires a working local environment with NodeJS version 8.9 or above (8.11.0+ recommended), npm, VueCLI.

Install Node: https://nodejs.org/ (version 8.11.0+ recommended)

Install NPM: https://www.npmjs.com/get-npm

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

## Laravel JSON:API Project Installation

1. Navigate in 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`
3. 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 in the .env file the CLIENT_ID and CLIENT_SECRET that you receive
8. Add your own mailtrap.io credentials in MAIL_USERNAME and MAIL_PASSWORD in the .env file

## Vue Black Dashboard Project Installation

1. Navigate to your Vue Dashboard project folder:  `cd your-vue-black-dashbord-project`
2. Install project dependencies: `npm install`
3. Create a new .env file: `cp .env.example .env`
4. `VUE_APP_BASE_URL` should contain the URL of your Vue Black Dashboard Project (eg. http://localhost:8080/)
5. `VUE_APP_API_BASE_URL` should contain the URL of your Laravel JSON:API Project. (eg. http://localhost:3000/api/v1)
6. Run `npm run dev` to start the application in a local development environment or `npm run build`  to build release distributables.

## Usage

Register a user or login using [email protected] and secret and start testing the theme.

Besides the dashboard and the auth pages this theme also has an edit profile page. All the necessary files are installed out of the box and all the needed routes are added to `src\router\index.js`. Keep in mind that all the features can be viewed once you log in using the credentials provided above or by registering your own user.

### Dashboard

You can access the dashboard either by using the "**Dashboards/Dashboard**" link in the left sidebar or by adding **/home** in the URL.

### Login

The login functionality is fully implemented in our theme helping you to start your project in no time. To login into dashboard you just have to add **/login** in the URL and fill the login form with the credentials (user: **[email protected]** and password: **secret**).

The `src\pages\Login.vue` is the Vue component which handles the login functinality. You can easily adapt it to your needs.

It uses the auth store located in `src\store\modules\auth.js`.

#### Login card
```
<div class="col-lg-4 col-md-6 ml-auto mr-auto">
  <form @submit.prevent="handleSubmit()">
    <card class="card-login card-white">
      <template slot="header">
        <img src="/img/card-primary.png" alt="" />
        <h1 class="card-title">Log in</h1>
      </template>

      <div>
        <ValidationProvider
          name="email"
          rules="required|email"
          v-slot="{ passed, failed, errors }"
        >
        <base-input
          required
          v-model="email"
          type="email"
          placeholder="Email"
          addon-left-icon="tim-icons icon-email-85"
          :error="errors[0]"
          :class="[{ 'has-success': passed }, { 'has-danger': failed }]">
        </base-input>
        <validation-error :errors="apiValidationErrors.email" />
        </ValidationProvider>

        <ValidationProvider
          name="password"
          rules="required|min:5"
          v-slot="{ passed, failed, errors }"
        >
        <base-input
          required
          v-model="password"
          placeholder="Password"
          addon-left-icon="tim-icons icon-lock-circle"
          type="password"
          :error="errors[0]"
          :class="[{ 'has-success': passed }, { 'has-danger': failed }]">
        </base-input>
        <validation-error :errors="apiValidationErrors.password" />
      </ValidationProvider>
      </div>

      <div slot="footer">
        <base-button native-type="submit" type="primary" class="mb-3" size="lg" block>
          Get Started
        </base-button>
        <div class="pull-left">
          <h6>
            <router-link class="link footer-link" to="/register">
              Create Account
            </router-link>
          </h6>
        </div>

        <div class="pull-right">
          <h6><a href="#pablo" class="link footer-link">Need Help?</a></h6>
        </div>
      </div>
    </card>
  </form>
  <!-- </ValidationObserver> -->
</div>
```

### Register

The register functionality is fully implemented in our theme helping you to start your project in no time. To register a new user you just have to add **/register** in the URL or click on register link from login page and fill the register form with user details.

The `src\pages\Register.vue` is the Vue component which handles the login functinality. You can easily extend it to your needs.

It uses the auth store located in `src\store\modules\auth.js`.

#### Register card
```
<div class="col-md-7 mr-auto">
  <form @submit.prevent="handleSubmit()">
    <card class="card-register card-white">
      <template slot="header">
        <img class="card-img" src="/img/card-primary.png" alt="Card image"/>
        <h4 class="card-title">Register</h4>
      </template>

      <ValidationProvider name="name" rules="required" v-slot="{ passed, failed, errors }">
        <base-input
          required
          v-model="name"
          placeholder="Full Name"
          addon-left-icon="tim-icons icon-single-02"
          type="text"
          :error="errors[0]"
          :class="[{ 'has-success': passed }, { 'has-danger': failed }]">
        </base-input>
      </ValidationProvider>

      <ValidationProvider name="email" rules="required|email" v-slot="{ passed, failed, errors }">
        <base-input
          required
          v-model="email"
          placeholder="Email"
          addon-left-icon="tim-icons icon-email-85"
          type="email"
          :error="errors[0]"
          :class="[{ 'has-success': passed }, { 'has-danger': failed }]">
        </base-input>
      </ValidationProvider>

      <ValidationProvider name="password" rules="required" v-slot="{ passed, failed, errors }">
        <base-input
          required
          v-model="password"
          placeholder="Password"
          addon-left-icon="tim-icons icon-lock-circle"
          type="password"
          :error="errors[0]"
          :class="[{ 'has-success': passed }, { 'has-danger': failed }]">
        </base-input>
      </ValidationProvider>

      <ValidationProvider name="password" rules="required" v-slot="{ passed, failed, errors }">
        <base-input
          required
          placeholder="Confirm Password"
          type="password"
          name="Password confirmation"
          v-model="password_confirmation"
          addon-left-icon="tim-icons icon-lock-circle"
          :error="errors[0]"
          :class="[{ 'has-success': passed }, { 'has-danger': failed }]">
        </base-input>
      </ValidationProvider>

      <base-checkbox v-model="boolean" class="text-left">
        I agree to the <a href="#something">terms and conditions</a>.
      </base-checkbox>

      <base-button native-type="submit" slot="footer" type="primary" round block size="lg">
        Get Started
      </base-button>
    </card>
  </form>
</div>
```

### Profile edit

You have the option to edit the current logged in user's profile information (name, email, profile picture) and password. To access this page, just click the "**Examples/Profile**" link in the left sidebar or add **/profile** in the URL.

The `src\pages\Examples\UserProfile` is the folder with Vue components that handle the update of the user information and password.

#### Edit profile component
```
<template>
  <card class="stacked-form" title="Stacked Form">
    <h4 slot="header" class="card-title">Edit Profile</h4>
    <form @submit.prevent>
      <base-input v-model="user.email" label="Email" type="email" placeholder="Enter email"/>
      <validation-error :errors="apiValidationErrors.email" /> 
      <base-input v-model="user.name" label="Name" placeholder="Name"/>
      <validation-error :errors="apiValidationErrors.name" />
      <base-button @click="updateProfile()" class="mt-3" native-type="submit" type="primary">Submit</base-button>
    </form>
  </card>
</template>

<script>
import ValidationError from "@/components/ValidationError.vue";
import formMixin from "@/mixins/form-mixin";
export default {
  mixins: [formMixin],
  components: {
    ValidationError
  },
  props: {
      user: Object
    },
  methods: {
     async updateProfile() {
        try {
          await this.$store.dispatch("profile/update", this.user)
          this.resetApiValidation();
          this.$notify({
            type: 'success',
            message: 'Profile updated successfully.',
            icon: 'tim-icons icon-bell-55',
          })
          await this.$store.getters["profile/me"]
        } catch (e) {
          this.$notify({
            type: 'danger',
            message: 'Oops, something went wrong!',
            icon: 'tim-icons icon-bell-55',
          })
          this.setApiValidation(e.response.data.errors)
        }
    }
  }
}
</script>
```
#### Edit password component
```
<template>
  <card class="stacked-form" title="Change Password">
    <h4 slot="header" class="card-title">Change Password</h4>
    <form ref="password_form" @submit.prevent>
      <div>
        <base-input v-model="password" label="Password" type="password" placeholder="Password"/>
        <validation-error :errors="apiValidationErrors.password"/>
        <base-input v-model="password_confirmation" label="Password Confirmation" type="password" placeholder="Password Confirmation"/>
        <validation-error :errors="apiValidationErrors.password_confirmation"/>
        <base-button class="mt-3" native-type="submit" type="primary" @click="changePassword()"
          >Submit</base-button
        >
      </div>
    </form>
  </card>
</template>
<script>
  import ValidationError from "@/components/ValidationError.vue";
  import formMixin from "@/mixins/form-mixin";
  export default {
    name: "edit-password-card",

    props: {
      user: Object
    },

    components: {ValidationError},

    mixins: [formMixin],

    data: () => ({
      password: null,
      password_confirmation: null,
    }),

    methods: {
      async changePassword() {
        this.user.password = this.password;
        this.user.password_confirmation = this.password_confirmation;

        try {
          this.resetApiValidation();
          await this.$store.dispatch("users/update", this.user)
          this.$notify({
            type: 'success',
            message: 'Password changed successfully.',
            icon: 'tim-icons icon-bell-55',
          })
          this.user = await this.$store.getters["profile/me"]
          this.$refs["password_form"].reset();
        } catch (e) {
          this.$notify({
            type: 'danger',
            message: 'Oops, something went wrong!',
            icon: 'tim-icons icon-bell-55',
          })
          this.setApiValidation(e.response.data.errors)
        }
      }
    }
  };
</script>
```

## Table of Contents

* [Versions](#versions)
* [Demo](#demo)
* [Documentation](#documentation)
* [File Structure](#file-structure)
* [Browser Support](#browser-support)
* [Resources](#resources)
* [Reporting Issues](#reporting-issues)
* [Licensing](#licensing)
* [Useful Links](#useful-links)

## Versions

[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/html-logo.jpg" height="80" />](#)
[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/laravel_logo.png" height="80" />](#)
[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/vue.jpg" height="80" />](#)
[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/json-api.png" height="75" />](#)

| HTML                                                                                                                                                                                           | Laravel                                                                                                                                                                                                           |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [![Black Dashboard HTML](https://s3.amazonaws.com/creativetim_bucket/products/93/original/opt_bd_thumbnail.jpg)](https://www.creative-tim.com/product/black-dashboard?ref=vbdl-readme) | [![Black Dashboard Laravel](https://s3.amazonaws.com/creativetim_bucket/products/164/original/opt_blk_laravel_thumbnail.jpg)](https://www.creative-tim.com/product/black-dashboard-laravel?ref=vbdl-readme) |

| Vue                                                                                                                                                                                                        | Vue & Laravel                                                                                                                                                                                                                  |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [![Vue Black Dashboard Pro](https://s3.amazonaws.com/creativetim_bucket/products/99/original/opt_bd_vue_thumbnail.jpg)](https://www.creative-tim.com/product/vue-black-dashboard?ref=vbdl-readme) | [![Vue Black Dashboard Pro Laravel ](https://s3.amazonaws.com/creativetim_bucket/products/402/original/opt_bd_vuelaravel_thumbnail.jpg)](https://www.creative-tim.com/product/vue-black-dashboard-laravel?ref=vbdl-readme) |
## Demo

| Register | Login | Dashboard |
| --- | --- | ---  |
| [![Register](https://github.com/creativetimofficial/public-assets/raw/master/vue-black-dashboard-laravel/Register.png)](https://vue-black-dashboard-laravel.creative-tim.com/register?ref=vbdl-readme) | [![Login](https://github.com/creativetimofficial/public-assets/raw/master/vue-black-dashboard-laravel/Login.png)](https://vue-black-dashboard-laravel.creative-tim.com/login?ref=vbdl-readme)  | [![Dashboard](https://github.com/creativetimofficial/public-assets/raw/master/vue-black-dashboard-laravel/Dashboard.png)](https://vue-black-dashboard-laravel.creative-tim.com/?ref=vbdl-readme) |

| Profile Page | Users Page | Tables Page  |
| --- | --- | ---  |
| [![Profile Page](https://github.com/creativetimofficial/public-assets/raw/master/vue-black-dashboard-laravel/Profile.png)](https://vue-black-dashboard-laravel.creative-tim.com/examples/user-profile?ref=vbdl-readme) | [![Users Page](https://github.com/creativetimofficial/public-assets/raw/master/vue-black-dashboard-laravel/Users.png)](https://vue-black-dashboard-laravel.creative-tim.com/examples/user-management/list-users?ref=vbdl-readme) | [![Tables Page](https://github.com/creativetimofficial/public-assets/raw/master/vue-black-dashboard-laravel/Tables.png)](https://vue-black-dashboard-laravel.creative-tim.com/table-list?ref=vbdl-readme)
[View More](https://vue-black-dashboard-laravel.creative-tim.com/?ref=vbdl-readme)

## Documentation
The documentation for the Vue Black Dashboard Laravel is hosted at our [website](https://vue-black-dashboard-laravel.creative-tim.com/documentation?ref=vbdl-readme).

## File Structure
```
|   .browserslistrc
|   .eslintrc.js
|   .gitignore
|   .jshintrc
|   babel.config.js
|   CHANGELOG.md
|   package-lock.json
|   package.json
|   postcss.config.js
|   README.md
|   yarn.lock
|
+---public
|   |   .DS_Store
|   |   favicon.png
|   |   index.html
|   |
|   \---img
|       |   apple-icon.png
|       |   bg-pricing.jpg
|       |   bg3.jpg
|       |   default-avatar.png
|       |   favicon.png
|       |   image_placeholder.jpg
|       |   laravel-vue.svg
|       |   placeholder.jpg
|
|
|---src
    |   .DS_Store
    |   App.vue
    |   globalComponents.js
    |   globalDirectives.js
    |   main.js
    |
    |---assets
    |   |   .DS_Store
    |   |
    |   |---css
    |   |       demo.css
    |   |
    |   |
    |   └── sass
    │       ├── dashboard
    │       └── vendor
    │           └── bootstrap-rtl.scss
    ├── components
    │   ├── BaseAlert.vue
    │   ├── BaseButton.vue
    │   ├── BaseCheckbox.vue
    │   ├── BaseDropdown.vue
    │   ├── BaseNav.vue
    │   ├── BaseRadio.vue
    │   ├── BaseTable.vue
    │   ├── Cards
    │   │   ├── Card.vue
    │   │   └── StatsCard.vue
    │   ├── Charts
    │   │   ├── BarChart.js
    │   │   ├── config.js
    │   │   ├── LineChart.js
    │   │   └── utils.js
    │   ├── CloseButton.vue
    │   ├── index.js
    │   ├── Inputs
    │   │   └── BaseInput.vue
    │   ├── Modal.vue
    │   ├── NavbarToggleButton.vue
    │   ├── NotificationPlugin
    │   │   ├── index.js
    │   │   ├── Notifications.vue
    │   │   └── Notification.vue
    │   ├── SidebarPlugin
    │   │   ├── index.js
    │   │   ├── SidebarLink.vue
    │   │   └── SideBar.vue
    │   └── ValidationError.vue
    ├── layout
    │   ├── dashboard
    │   │   ├── AuthLayout.vue
    │   │   ├── ContentFooter.vue
    │   │   ├── Content.vue
    │   │   ├── DashboardLayout.vue
    │   │   ├── MobileMenu.vue
    │   │   └── TopNavbar.vue
    │   └── starter
    │       ├── Content.vue
    │       ├── MobileMenu.vue
    │       ├── SampleFooter.vue
    │       ├── SampleLayout.vue
    │       ├── SampleNavbar.vue
    │       └── SamplePage.vue
    ├── main.js
    ├── middleware
    │   ├── auth.js
    │   └── guest.js
    ├── mixins
    │   └── form-mixin.js
    ├── pages
    │   ├── Dashboard
    │   │   ├── TaskList.vue
    │   │   └── UserTable.vue
    │   ├── Dashboard.vue
    │   ├── Examples
    │   │   ├── UserManagement
    │   │   │   └── ListUserPage.vue
    │   │   ├── UserProfile
    │   │   │   ├── EditPasswordCard.vue
    │   │   │   └── EditProfileCard.vue
    │   │   └── UserProfile.vue
    │   ├── Icons.vue
    │   ├── Login.vue
    │   ├── Maps.vue
    │   ├── NotFoundPage.vue
    │   ├── Notifications
    │   │   └── NotificationTemplate.vue
    │   ├── Notifications.vue
    │   ├── Password
    │   │   ├── Email.vue
    │   │   └── Reset.vue
    │   ├── Profile
    │   │   ├── EditProfileForm.vue
    │   │   └── UserCard.vue
    │   ├── Profile.vue
    │   ├── Register.vue
    │   ├── TableList.vue
    │   └── Typography.vue
    ├── plugins
    │   ├── blackDashboard.js
    │   ├── globalComponents.js
    │   ├── globalDirectives.js
    │   ├── isDemo.js
    │   └── RTLPlugin.js
    ├── registerServiceWorker.js
    ├── router
    │   ├── index.js
    │   ├── routes.js
    │   └── starterRouter.js
    └── store
        ├── index.js
        ├── modules
        │   ├── alerts-module.js
        │   ├── auth.js
        │   ├── profile-module.js
        │   ├── reset.js
        │   └── users-module.js
        └── services
            ├── profile-service.js
            └── users-service.js
```

## Browser Support

At present, we officially aim to support the last two versions of the following browsers:

<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/chrome-logo.png?raw=true" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/firefox-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/edge-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/safari-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/opera-logo.png" width="64" height="64">

## Resources
- Demo: <https://vue-black-dashboard-laravel.creative-tim.com/?ref=vbdl-readme>
- Download Page: <https://www.creative-tim.com/product/vue-black-dashboard-laravel?ref=vbdl-readme>
- Documentation: <https://vue-black-dashboard-laravel.creative-tim.com/documentation?ref=vbdl-readme>
- License Agreement: <https://www.creative-tim.com/license>
- Support: <https://www.creative-tim.com/contact-us>
- Issues: [Github Issues Page](https://github.com/creativetimofficial/vue-black-dashboard-laravel/issues)
- **Dashboards:**

| HTML                                                                                                                                                                                           | Laravel                                                                                                                                                                                                           |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [![Black Dashboard HTML](https://s3.amazonaws.com/creativetim_bucket/products/93/original/opt_bd_thumbnail.jpg)](https://www.creative-tim.com/product/black-dashboard?ref=vbdl-readme) | [![Black Dashboard Laravel](https://s3.amazonaws.com/creativetim_bucket/products/164/original/opt_blk_laravel_thumbnail.jpg)](https://www.creative-tim.com/product/black-dashboard-laravel?ref=vbdl-readme) |

| Vue                                                                                                                                                                                                        | Vue & Laravel                                                                                                                                                                                                                  |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [![Vue Black Dashboard Pro](https://s3.amazonaws.com/creativetim_bucket/products/99/original/opt_bd_vue_thumbnail.jpg)](https://www.creative-tim.com/product/vue-black-dashboard?ref=vbdl-readme) | [![Vue Black Dashboard Pro Laravel ](https://s3.amazonaws.com/creativetim_bucket/products/402/original/opt_bd_vuelaravel_thumbnail.jpg)](https://www.creative-tim.com/product/vue-black-dashboard-laravel?ref=vbdl-readme) |

## Change log

Please see the [changelog](CHANGELOG.md) for more information on what has changed recently.

## Credits

- [Creative Tim](https://creative-tim.com/?ref=vbdl-readme)
- [UPDIVISION](https://updivision.com)

## Reporting Issues

We use GitHub Issues as the official bug tracker for the Black Dashboard Laravel. Here are some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of the Black Dashboard Laravel. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/?ref=vbdl-readme).
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

## Licensing

- Copyright Creative Tim (https://www.creative-tim.com/?ref=vbdl-readme)
- Licensed under MIT (https://github.com/creativetimofficial/vue-black-dashboard-laravel/blob/master/LICENSE.md)

## Useful Links

- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w)
- [Affiliate Program](https://www.creative-tim.com/affiliates/new) (earn money)
- [Blog Creative Tim](http://blog.creative-tim.com/)
- [Free Products](https://www.creative-tim.com/bootstrap-themes/free) from Creative Tim
- [Premium Products](https://www.creative-tim.com/bootstrap-themes/premium?ref=vbdl-readme) from Creative Tim
- [React Products](https://www.creative-tim.com/bootstrap-themes/react-themes?ref=vbdl-readme) from Creative Tim
- [Angular Products](https://www.creative-tim.com/bootstrap-themes/angular-themes?ref=vbdl-readme) from Creative Tim
- [VueJS Products](https://www.creative-tim.com/bootstrap-themes/vuejs-themes?ref=vbdl-readme) from Creative Tim
- [More products](https://www.creative-tim.com/bootstrap-themes?ref=vbdl-readme) from Creative Tim
- Check our Bundles [here](https://www.creative-tim.com/bundles??ref=vbdl-readme)

## Social Media

### Creative Tim:

Twitter: <https://twitter.com/CreativeTim?ref=vbdl-readme>

Facebook: <https://www.facebook.com/CreativeTim?ref=vbdl-readme>

Dribbble: <https://dribbble.com/creativetim?ref=vbdl-readme>

Instagram: <https://www.instagram.com/CreativeTimOfficial?ref=vbdl-readme>


### Updivision:

Twitter: <https://twitter.com/updivision?ref=vbdl-readme>

Facebook: <https://www.facebook.com/updivision?ref=vbdl-readme>

Linkedin: <https://www.linkedin.com/company/updivision?ref=vbdl-readme>

Updivision Blog: <https://updivision.com/blog/?ref=vbdl-readme>

## Credits

- [Creative Tim](https://creative-tim.com/?ref=vbdl-readme)
- [UPDIVISION](https://updivision.com)
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.