Laravel creates a Vue admin panel from scratch - Part 1- Installation and Authentication

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

I have created a Basic Laravel Admin Panel using Blade templates. This admin comes with basic authentication, user, role, and permission management. You can also click here 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. 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 blog post. Sail is a built-in solution for running your Laravel project using Docker.

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.

2. Authentication

We going to use the 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 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 is now the default frontend asset bundler.

./vendor/bin/sail npm install

./vendor/bin/sail npm run dev

3. Running Migration

Run your database migrations using artisan migrate

./vendor/bin/sail artisan migrate

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

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

3. User roles and permissions

The 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"

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

Thank you for reading.

Stay tuned for more!

Follow me at balajidharma.medium.com.

Next part — Part 2: Create Laravel CRUD using Inertia and Vue 3 — list page with search and pagination