Vue JS Auth Scaffolding with Vite Using LARAVEL 10

Spread the love

Hello Guys,

In this article, I will guide you through the process of setting up Vue JS Auth Scaffolding with Vite while using Laravel 10. We’ll explore the steps to create a Laravel 10 Vue authentication scaffolding. Additionally, I will demonstrate how to integrate Vue.js into Laravel 10. This tutorial provides a straightforward example of Laravel 10 authentication scaffolding with a focus on Vue JS.

To facilitate this authentication scaffolding, we’ll leverage the Laravel UI package, which simplifies the process. Laravel UI includes essential authentication features like login, registration, password reset, email verification, and password confirmation, all powered by Bootstrap, React, and Vue.

In the accompanying video, I’ll provide a step-by-step walkthrough on installing Vue JS and applying it to construct an authentication scaffolding for your Laravel 10 applications.

Let’s get started with the following actions for Vue JS Auth Scaffolding with Vite:
  1. Install Laravel 10
  2. Install Laravel UI
  3. Run Laravel App

Step1: Install Laravel 10

To begin, access your terminal or command prompt and enter the following command to initiate the setup of a fresh Laravel 10 application:

Also Read: How to Create Custom Helper Functions in LARAVEL 10

composer create-project laravel/laravel example-app

Step2: Install Laravel UI

Follow these steps to install the Laravel UI package using the following command:

composer require laravel/ui

To enable the creation of authentication scaffolding using Vue in Laravel, it’s essential to install the Laravel UI package command. Let’s proceed by executing the following command:

Also Read: How to Add Foreign Key in MIGRATION using Laravel?

php artisan ui vue
  
OR
  
php artisan ui vue --auth

To ensure smooth installation, follow these steps to install npm promptly:

npm install && npm run dev

Next, execute the migration command to generate CSS and JavaScript minified files.

php artisan migrate

Step3: Run Laravel App:

Once you’ve completed all the essential steps, it’s time to initiate the Laravel application. Simply execute the following command and hit Enter to launch it:

Also Read: how to Create Custom Artisan Command in LARAVEL

php artisan serve

To access the application’s results, simply input the provided URL into your web browser.

http://localhost:8000/

Your quest for the best Laravel blog ends here, where expert knowledge meets curated excellence.

Leave a Comment