Laravel 12 & Vue 3 fullstack Mastery: Build 2 portfolio apps

Name: Laravel 12 & Vue 3 fullstack Mastery: Build 2 portfolio apps
Rating: 4.6 (1322 reviews)

From zero to job-ready: build two stunning full-stack single page applications that will get you hired

Created byEding Muhamad Saprudin, TutsPrime Online Education

Last updated 12/2025

English

What you'll learn

Build and test a scalable RESTful API using Laravel 12 from scratch
Create a modern Single Page Application (SPA) using Vue 3, Vue Router, Pinia & Bootstrap 5
Implement authentication, authorization, and form validation for your API
Use Postman and PHPUnit to test your backend like a pro
Structure a fullstack app with clear separation of frontend and backend
Build a complete monolith SPA using Laravel 12 + Inertia.js — no API needed!
Style your app with Tailwind CSS for a clean and responsive UI
Learn how Inertia bridges Laravel and Vue for seamless page transitions
Master the differences between API-first vs Monolith SPA architecture
Deploy both your backend API and frontend app to a production VPS
Understand best practices for real-world Laravel + Vue projects
Gain confidence to build and launch apps that are portfolio-ready and client-worthy

Course content

33 sections • 323 lectures • 37h 38m total length

Welcome to the course1:17

Section Introduction (DON'T SKIP unless you have dev environment setup)4:55
Setting up Local Development on Windows - Installing XAMPP6:31
Setting up Local Development on Windows - Install Composer & Laravel Installer3:28
Setting up Local Development on MacOs (v12+) - Installing Herd7:58
Setting up Local Development on Mac - Install Homebrew, PHP, MySQL and Composer8:40
Set up macOS local development with Homebrew, install PHP, MySQL, Composer, Laravel installer, and run a local server to bootstrap a Laravel project.
Setting up Local Development on Mac - Installing Valet4:50
Alternative Local Development Environment - Installing Laravel Sail8:32
Other Tools to install4:22
REST Client Tools to install0:10
My Visual Studio Code Editor extensions & settings1:00

What Is an API and How Laravel handles It1:39
Setting Up Your Laravel Project for API Development2:43
Creating Models, Migrations, and Factories6:11
Understanding HTTP Methods and Status Codes5:17
API Versioning in Laravel3:17
Creating the First API Endpoint (GET All Resources)5:24
Formatting API Responses with Laravel API Resource5:26
Writing Automated Tests for GET Endpoint using PHPUnit10:37
Testing GET Endpoint with Postman4:41
Validating and Storing New Data4:40
Updating a Resource (PUT/PATCH Endpoint)9:10
Deleting a Resource (DELETE Endpoint)1:59
Writing Automated Tests for POST, PUT, and DELETE Endpoints with PHPUnit9:03
Testing POST, PUT, and DELETE Endpoints with Postman7:14
Wrap Up: What We’ve Built3:11

Introduction to Sanctum3:59
Setting up Sanctum for API token Authentication3:31
Creating login endpoint with Token response7:44
Testing the login endpoint with PHPUnit and Postman8:11
Creating register endpoint5:00
Testing the register endpoint with PHPUnit and Postman6:33
Adding logout endpoint2:50
Testing the logout endpoint with PHPUnit and Postman7:09
Test the logout endpoint with phpunit by creating a user and token. Return 204, then verify protected routes yield 401 after logout using postman.
Automated and manual testing the protected route5:34

Setup Vue 3 project5:48
Single File Component9:38
Directives and Attribute bindings8:43
Handling events6:50
Two way bindings with v-model4:07
Working with methods7:32
Style and Class bindings6:23
Computed Properties3:45
Watchers3:56
Styling the Tags Input component3:05
Style the tags input in Vue by adding a unique key for v-for, wrapping the list, and applying tag item and tag input classes; copy styles and test adding tags.
Component Communication with Props8:43
Component Communication with emitting events6:38

Composition API Introduction2:42
Composition API Setup1:48
Creating reactive reference with the ref function4:53
Creating reactive object with the reactive function4:13
Creating reactive reference from reactive object6:04
Computed properties5:07
Working with watch and watchEffect7:18
Working with props6:13
Emitting events4:52
Lifecycle hooks4:27
Composable functions5:44
Using Composition API script setup5:54

Creating new Vue.js 3 project8:06
Setting up Axios for HTTP call8:34
Displaying data in Vue js components7:01
Using computed properties for displaying completed and uncompleted tasks8:24
Toggling the completed tasks8:19
Adding new component to insert data6:45
Creating an Inline editing feature7:41
Adding new feature in our Vue js app to update data6:19
Populating input element when editing data2:58
Adding new feature to mark the task as completed5:58
Adding new feature to remove tasks5:14

Requirements

You should have a basic understanding of HTML, PHP, OOP, CSS & Javascript
A Mac, Windows, or Linux computer

Description

[Course updated in December 2025]

Unlock Your Career as a Full-Stack Developer: The Ultimate Laravel 12 & Vue 3 Bootcamp

This is your fast track to becoming a professional developer. Forget confusing theories and outdated practices. In this hands-on course, you’ll build three stunning, job-ready web applications from scratch using the most powerful stack today: Laravel, Vue, and Inertia.

What You'll Achieve:

Build Your Portfolio: Create two complete projects that you can confidently showcase to employers and clients.
Master Two Architectures: Learn both the modern API-based approach and the efficient Monolith SPA style. This makes you versatile and valuable in any team.
Go Beyond the Code: Don't just build. Learn to test, debug, and deploy your apps to a real server, giving you the skills needed for a real-world developer role.
Boost Your Confidence: Gain practical experience with essential tools like Vue 3, Pinia, Tailwind CSS, and PHPUnit, turning you from a beginner into a skilled pro.

Projects You Will Build:

A Complete API-Based App: Master building a separate backend with Laravel that handles data, authentication, and validation, then connect it to a dynamic Vue 3 frontend.
A Seamless Monolith Apps: Discover the magic of Inertia.js to create fast, single-page applications without the complexity of a separate API. You'll build a project to solidify your skills.

This Course Is For You If:

You're a beginner who wants to land your first developer job. You're ready to stop watching tutorials and start building real-world applications.

Who this course is for:

Anyone who wants to learn how to combine Laravel with Vue js and other web technologies to build full stack web application
This course is meant for students already familiar with the basics of Laravel and wants to level up their development skills by building real life project

Laravel 12 & Vue 3 fullstack Mastery: Build 2 portfolio apps

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 1min

Setting up our Laravel Development Environment10 lectures • 50min

PART 1: Build and Deploy API with Laravel 12, SPA with Vue 3, Vue router & Pinia1 lecture • 1min

Build RESTful API with Laravel 12 and PHPUnit15 lectures • 1hr 21min

Sanctum for API Token Authentication9 lectures • 51min

Sanctum for Single Page Application (SPA) Authentication7 lectures • 58min

Authorization6 lectures • 9min

Getting started with Vue 3 (optional)12 lectures • 1hr 15min

Vue 3 Composition API Fundamental (optional)12 lectures • 59min

Consuming REST API in our Vue.js 3 Application11 lectures • 1hr 15min

Requirements

Description

Who this course is for: