Laravel creates a Vue admin panel from scratch - Part 1- Installation and Authentication
Tags: opensource, php, laravel, vue
Published: 2022-07-20 18:42:05

---
title: Laravel creates a Vue admin panel from scratch - Part 1- Installation and Authentication
published: true
date: 2022-07-12 20:18:51 UTC
tags: opensource,php,laravel,vuejs
canonical_url: https://blog.devgenius.io/laravel-creates-a-vue-admin-panel-from-scratch-part-1-installation-and-authentication-56c451d4d697
---

#### Installation and Steps for adding a Laravel Breeze and Spatie Laravel-permission packages

I have created a [Basic Laravel Admin Panel](https://github.com/balajidharma/basic-laravel-admin-panel) using Blade templates. This admin comes with basic authentication, user, role, and permission management. You can also [click here](https://blog.devgenius.io/laravel-create-an-admin-panel-from-scratch-part-1-installation-8c11dae7e684) and start the Balde template-based admin panel.

### Laravel Vue admin panel

We going to build the single-page admin panel by using Vue and styled with [Tailwind CSS](https://tailwindcss.com/). In this part 1, we going to do installation and Authentication.

1. Installation
2. Authentication
3. User roles and permissions

### 1. Installation

You can complete the installation by following [Install Laravel on Docker](https://blog.devgenius.io/laravel-create-an-admin-panel-from-scratch-part-1-installation-8c11dae7e684) blog post. [Sail](https://laravel.com/docs/8.x/sail) is a built-in solution for running your Laravel project using [Docker](https://www.docker.com/).

I assume you completed the below command in part of the installation.

```
curl -s https://laravel.build/vue-admin | bash

cd my-app

./vendor/bin/sail up
```

Once the application’s Docker containers have been started, you can access the application in your web browser at [http://localhost](http://localhost/).

![image](https://cdn-images-1.medium.com/max/1024/1*Vxky0qn9Rc5wRkRz9Tq9vw.png)

### 2. Authentication

We going to use the [Laravel Breeze](https://laravel.com/docs/starter-kits#laravel-breeze) starter kit for authentication. This starter kit comes with login, registration, password reset, email verification, and password confirmation.

> Laravel Breeze also offers React and Vue scaffolding via an [Inertia](https://inertiajs.com/) frontend implementation

We going to set up Vue scaffolding for our Admin panel. The following steps are involved to set up authentication to our Laravel Vue Admin panel.

- 1. Install Laravel Breeze
- 2. Compile assets
- 3. Running Migration

#### 1. Install Laravel Breeze

We need to install Laravel Breeze using Composer.

```
./vendor/bin/sail composer require laravel/breeze --dev
```

After the Laravel Breeze package installation, we need to run the breeze:install Artisan command. This command will publish the authentication views, routes, controllers, and other resources to our application.

```
./vendor/bin/sail artisan breeze:install vue
```

#### 2. Compile assets

After Breeze is installed, run the npm to compile the assets. The [Vite](https://vitejs.dev/) is now the default frontend asset bundler.

```
./vendor/bin/sail npm install

./vendor/bin/sail npm run dev
```

![image](https://cdn-images-1.medium.com/max/717/1*tOaTjKRS8nWOsY-SzOE_5w.png)

#### 3. Running Migration

Run your database migrations using artisan migrate

```
./vendor/bin/sail artisan migrate
```

![image](https://cdn-images-1.medium.com/max/751/1*f5dOSQC4ocozBbvakK2XKg.png)

Now you navigate to application’s /login or /register URLs in your web browser.

![image](https://cdn-images-1.medium.com/max/945/0*qkFovvj1jogatLS-.png)

Users will be redirected to the dashboard after successful registration or login.

![image](https://cdn-images-1.medium.com/max/862/0*_qIFhIhoDpUlOJy-.png)

### 3. User roles and permissions

The Spatie [Laravel-permission](https://github.com/spatie/laravel-permission) is the best package to manage user permissions and roles in a database. In this part, we install and use this package for our admin panel.

The following steps are involved to set up roles and permission for our Laravel Admin panel.

- 1. Install Spatie Laravel-permission package
- 2. Publish the configuration and migration file
- 3. Running Migration

#### 1. Install Spatie Laravel-permission package

Install the package using the composer command

```
./vendor/bin/sail composer require spatie/laravel-permission
```

#### 2. Publish the configuration and migration file

The vendor:publish artisan command is used to publish the package configuration to the config folder. Also, copy the migration files to the migration folder.

```
./vendor/bin/sail artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"
```

![image](https://cdn-images-1.medium.com/max/997/0*5IvjoULo-36hQSrx.png)
_Laravel artisan vendor:publish_

#### 3. Running Migration

Run the migrations using artisan migrate

```
./vendor/bin/sail artisan migrate
```

Now we successfully installed the Spatie Laravel-permission package to our admin panel. The package doesn’t come with UI.

In so next part we going to create our first Vue CRUD in Laravel.

#### GitHub repository

I have created a GitHub repository for our “Laravel Vue Admin Panel”. [https://github.com/balajidharma/laravel-vue-admin-panel](https://github.com/balajidharma/laravel-vue-admin-panel)

Thank you for reading.

Stay tuned for more!

_Follow me at_ [**_balajidharma.medium.com_**](https://balajidharma.medium.com/).

* * *

Next part — Part 2: [Create Laravel CRUD using Inertia and Vue 3 — list page with search and pagination](https://blog.devgenius.io/create-laravel-crud-using-inertia-and-vue-3-list-page-with-search-and-pagination-c4a52b6501c3)

* * *