Laravel Backends for Vue.js 3

3h 44m
English
Paid

Vue.js has held a special place in the frontend development landscape for Laravel developers since 2015. It all started when Laravel's creator, Taylor Otwell, tweeted: "Learning @vuejs because it looks easy and has pretty website." Since then, many companies have paired these two technologies to create powerful and flexible web applications.

The Evolution of Pairing Vue.js with Laravel

Over time, there have been various approaches to integrating Vue.js and Laravel. One approach is to integrate Vue.js components directly into Blade templates, primarily using Laravel's frontend capabilities. Another popular option is Inertia.js, which allows developers to create modern single-page applications (SPAs) while maintaining traditional server-side routing, effectively creating a "modern monolith". Additionally, Laravel is often used to power REST APIs that are consumed by standalone Vue.js applications.

Course Overview: Building Vue.js Applications with a Laravel Backend

In this course, we focus on the last approach by providing a fully functional Laravel backend that you can set up locally. Together, we will build a frontend that interacts with this backend. Throughout the course, you will learn how to connect to the REST API from Vue.js, while gaining insights into the server-side assembly of responses by the Laravel application.

Key Learning Points

Throughout this course, you will encounter numerous tips and tricks specific to integrating Vue.js with a Laravel backend, including:

  • Setting up authentication
  • Handling form validation errors
  • Efficiently and elegantly fetching data
  • Dealing with pagination
  • And much more!

Who Should Enroll?

This course is ideal for:

  • Full-stack developers looking to pair Vue.js 3 with Laravel
  • Frontend developers working with Laravel backends maintained by their colleagues
  • Individuals who are relatively new to Laravel and seek a high-level overview of how it can power a REST API

About the Author: vueschool.io

vueschool.io thumbnail
Learning about new web technologies and staying-up-to-date is an ongoing process. That’s why we offer affordable subscription plans for individuals and teams.

Watch Online 34 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 34 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Laravel Backends for Vue.js Frontends Course Introduction
All Course Lessons (34)
#Lesson TitleDurationAccess
1
Laravel Backends for Vue.js Frontends Course Introduction Demo
10:18
2
Setup Development Environment for Backend
09:51
3
Setup Development Environment for the Frontend
08:36
4
Laravel Sanctum and Fortify for a Vue.js SPA
12:29
5
Register Users with Laravel Fortify for a Vue.js SPA
12:37
6
Tweak the Axios Base URL for Best Dev Experience
05:07
7
Login and Logout Users with Laravel Fortify for a Vue.js SPA
09:47
8
Cleanup the User Flow with Better Redirects
03:11
9
Protect Pages with Middleware
08:36
10
Create a Custom useAuth Composable
10:02
11
Format the User Data Once
06:58
12
Cache the User in Memory
07:41
13
Update the Guest Middleware to use the Cached User
01:09
14
Use Axios Intereptors to Redirect to Login Page on 401 Unauthorized Response
09:21
15
Take This Composable
01:31
16
Add Some Application-Wide TS Interfaces
03:10
17
Manually Handle Form Validation Errors with Laravel and Vue
08:21
18
Simplify Form Validation with FormKit
08:12
19
Create a handleInvalidForm Utility
04:01
20
Intro to CRUD with Laravel and Vue
04:55
21
Create New Resources with Laravel and Vue
06:55
22
Fetch Resource Lists from Laravel and Handle Pagination in Vue (Part 1)
05:58
23
Handle Pagination in Vue Part 2
07:13
24
Support a Page Query Param in the App URL
03:17
25
Filter Data on a Vue Frontend with Laravel Query Builder from Spatie
09:37
26
Debounce the Search Input
06:02
27
Sort Data on a Vue Frontend with Laravel Query Builder from Spatie
03:17
28
Build a Refresh Table Button
02:04
29
Create a useLinks Composable
09:40
30
Use the useLinks Compsable
06:12
31
Update a Resource with Vue and Laravel
04:45
32
Delete a Resource with Vue and Laravel
03:34
33
Server Render a Vue Page with Data from a Laravel API Endpoint
06:37
34
Course Conclusion
02:56
Unlock unlimited learning

Get instant access to all 33 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription