Laravel 13 – Vue Authentication Made Easy.
Laravel 13 – Vue Authentication Made Easy.
In this tutorial, we will learn how to use Vue with Laravel 13 to build a dashboard and handle user authentication, including registration and login.
Quick Overview
This guide walks you through setting up a fresh Laravel 13 project with Vue and Laravel’s built-in authentication. You’ll install Laravel globally, create a new project, and select key setup options like the Vue starter kit, authentication scaffolding, and frontend asset compilation. After setup, you’ll navigate to the project directory, start the Laravel development server, and run the Vite dev server to enable hot reloading for your Vue components. The guide also covers exploring Laravel’s interactive registration and login system and enhancing the default dashboard by replacing placeholder blocks with meaningful stats such as Users, Active Projects, Open Tickets, and Revenue, along with a Recent Activity and Quick Actions section. By the end, you’ll have a fully functional Laravel 13 project with a live updating Vue powered dashboard, ready for further development and customization.
Step # 1 : Create a Fresh Laravel 13 Project with Vue.
Before starting, make sure Composer is installed on your system, as it’s required to install and manage Laravel. Also ensure Laravel is available globally. If it isn’t, you can install it using Composer with the following command.
composer global require laravel/installer
With that in place, spin up a new Laravel 13 project by running.
laravel new laravelVue
As Laravel sets things up, it will walk you through a few prompts. Select the following options.
- Which starter kit would you like to install? → Type Vue to use the Vue starter kit for building interactive frontends.
- Which authentication provider do you prefer? → Choose Laravel to enable the default authentication scaffolding.
- Which testing framework do you prefer? → Select Pest for a modern, streamlined testing experience.
- Do you want to install Laravel Boost to improve AI-assisted coding? → Select No unless you specifically want AI code suggestions.
- Would you like to run npm install and npm run build? → Select Yes to automatically compile your frontend assets.
In Laravel 13, migrations are automatically executed during the project creation process, so you don’t need to run php artisan migrate manually afterward. Additionally, if you chose to run npm install and npm run build during setup, your frontend dependencies will be installed and your assets will be compiled automatically as well. This means your project ends up being fully configured and ready for development right from the start, allowing you to focus on building your application instead of spending extra time on initial setup.
Step # 2 : Access Your Laravel Project Directory.
Open your terminal, Git Bash, Command Prompt, or any terminal you prefer and navigate to the root folder of your new Laravel project.
cd c:/xampp/htdocs/laravelVue
Once you’re inside the project directory, you’re ready to start running Laravel commands. From here, you can launch the development server, manage dependencies, or configure your environment, giving you full control to begin building and customizing your application right away.
Step # 3 : Launch Your Laravel Project.
To see your new Laravel 13 project in action, start the development server by running.
php artisan serve
Open another instance of Git Bash (or whichever terminal you’re using) and run.
npx vite
You need to run the Vite development server in a separate terminal because it keeps your Vue components live in the browser. With Vite running, any changes you make to your dashboard from layout adjustments to styling tweaks appear instantly without requiring a manual page refresh. Once both servers are running, open your browser and visit: http://127.0.0.1:8000.
Creating an Account :
To try out Laravel’s built-in authentication, head to: http://127.0.0.1:8000/register. You’ll see a sleek, interactive registration form. Fill in your name, email, password, and confirm the password to create an account. Once you submit the form, Laravel takes care of everything behind the scenes, your account is created, you’re authenticated, and you’re redirected to the dashboard or home page automatically. No extra setup is needed. This makes signing up quick, simple, and secure, so you can focus on building your app instead of worrying about authentication.
To try out Laravel’s built-in authentication, head to: http://127.0.0.1:8000/register. You’ll see a sleek, interactive registration form. Fill in your name, email, password, and confirm the password to create an account. Once you submit the form, Laravel takes care of everything behind the scenes, your account is created, you’re authenticated, and you’re redirected to the dashboard or home page automatically. No extra setup is needed. This makes signing up quick, simple, and secure, so you can focus on building your app instead of worrying about authentication.
Navigating the Dashboard :
After registering, you’ll be taken to the dashboard, which serves as your central control panel for your account and Laravel 13’s features. The layout is clean and easy to use, letting you update your name, email, or even delete your account if needed all in a few clicks.
After registering, you’ll be taken to the dashboard, which serves as your central control panel for your account and Laravel 13’s features. The layout is clean and easy to use, letting you update your name, email, or even delete your account if needed all in a few clicks.
For stronger security, you can change your password from the Security tab. Click it, verify your current password, and you’ll see the form to update your password. Enter your current password again, set a new password, confirm it, and save. This ensures that only you can make sensitive changes, keeping your account protected.
You can also adjust the dashboard’s look through the Appearance tab. Here, you can switch between light mode, dark mode, or follow your system’s theme. This lets you personalize your workspace for comfort and extended use, whether you like a bright interface during the day or a dark theme for longer coding sessions.
Customizing Dashboard :
The dashboard works out of the box, but right now it feels empty and doesn’t give much insight into what’s happening in your app. Let’s make it more engaging by adding meaningful stats, a Recent Activity section, and Quick Action buttons. For now, we’ll use static data to show the layout, and later you can connect it to your Laravel backend to make everything update in real time as your project grows. To apply these changes, open resources/js/pages/Dashboard.vue and replace the content inside the <template> section with the dashboard template below.
The dashboard works out of the box, but right now it feels empty and doesn’t give much insight into what’s happening in your app. Let’s make it more engaging by adding meaningful stats, a Recent Activity section, and Quick Action buttons. For now, we’ll use static data to show the layout, and later you can connect it to your Laravel backend to make everything update in real time as your project grows. To apply these changes, open resources/js/pages/Dashboard.vue and replace the content inside the <template> section with the dashboard template below.
<template>
<div class="flex flex-col gap-6 p-6">
<!-- Top Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
<p class="text-sm text-gray-500 dark:text-gray-400">Users</p>
<h2 class="mt-2 text-2xl font-bold text-gray-900 dark:text-gray-100">215</h2>
<p class="mt-1 text-xs text-green-500">+18 this week</p>
</div>
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
<p class="text-sm text-gray-500 dark:text-gray-400">Active Projects</p>
<h2 class="mt-2 text-2xl font-bold text-gray-900 dark:text-gray-100">42</h2>
<p class="mt-1 text-xs text-green-500">+3 today</p>
</div>
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
<p class="text-sm text-gray-500 dark:text-gray-400">Open Tickets</p>
<h2 class="mt-2 text-2xl font-bold text-gray-900 dark:text-gray-100">7</h2>
<p class="mt-1 text-xs text-red-500">-2 from yesterday</p>
</div>
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
<p class="text-sm text-gray-500 dark:text-gray-400">Revenue</p>
<h2 class="mt-2 text-2xl font-bold text-gray-900 dark:text-gray-100">$5,230</h2>
<p class="mt-1 text-xs text-green-500">+12% this month</p>
</div>
</div>
<!-- Recent Activity & Quick Actions -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Recent Activity -->
<div class="col-span-2 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold mb-3 text-gray-900 dark:text-gray-100">Recent Activity</h3>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li>Maria created a new project <span class="float-right text-xs text-gray-400">10 min ago</span></li>
<li>John closed a ticket <span class="float-right text-xs text-gray-400">30 min ago</span></li>
<li>You updated your profile <span class="float-right text-xs text-gray-400">1 hour ago</span></li>
<li>New user signed up <span class="float-right text-xs text-gray-400">2 hours ago</span></li>
</ul>
</div>
<!-- Quick Actions -->
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold mb-3 text-gray-900 dark:text-gray-100">Quick Actions</h3>
<button class="w-full mb-2 py-2 px-3 bg-blue-600 hover:bg-blue-700 text-white rounded">Add Project</button>
<button class="w-full mb-2 py-2 px-3 bg-green-600 hover:bg-green-700 text-white rounded">Create Ticket</button>
<button class="w-full py-2 px-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded">Invite User</button>
</div>
</div>
</div>
</template>
With Vite running, your dashboard updates automatically, so any changes you make show up instantly no page refresh required. Even with placeholder data, the layout now clearly demonstrates how a functional dashboard can be structured and presented.
Conclusion
By following this guide, you have successfully set up a fresh Laravel 13 project, explored its interactive registration and login system, and built a Vue powered dashboard with meaningful statistics, Recent Activity, and Quick Actions. Laravel 13 streamlines the development workflow with built-in Vue support, optional authentication scaffolding, automatic migrations, and compiled frontend assets via Vite, allowing you to focus on building features rather than setup. With these foundations in place, you can now expand your project by connecting the dashboard to real backend data, customizing UI components, or adding new functionality to fit your application’s needs. Whether you are building a small project or a complex web application, Laravel 13 combined with Vue and Vite provides the flexibility and tools to bring your ideas to life efficiently.
For more details, refer to the official documentation.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments