CF

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

Additional

https://github.com/vueschool/laravel-backends-for-vuejs-3

About the Author: Vue School

Vue School thumbnail

Vue School (vueschool.io) is a Greece-based Vue.js training platform founded by Alex Kyriakidis, an early Vue community member and one of the longest-running independent Vue educators. Vue School operates as both an on-demand course platform and a Vue / Nuxt consulting business, with course material that often emerges from real client engagements.

Course material covers the full Vue ecosystem: Vue 3 fundamentals through advanced Composition API patterns, Nuxt 3 production deployment, Pinia state management, Vue Router, the testing track with Vitest, TypeScript with Vue, real-time features with Pusher / WebSockets, and the broader full-stack Vue work. Vue School also publishes the popular Mastering Pinia course in collaboration with Pinia's author Eduardo San Martín Morote.

The CourseFlix listing under this source carries over 30 Vue School courses spanning that range. Material is paid; Vue School runs on per-course or membership pricing on the original platform. Courses are aimed at Vue developers from beginner through senior level building production Vue applications.

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

Related courses

Frequently asked questions

What prerequisites are necessary before taking this course?
Before enrolling in this course, students should have basic knowledge of both Vue.js and Laravel. Familiarity with JavaScript and PHP is recommended, as the course will cover the integration of Vue.js components with a Laravel backend. Prior experience with REST APIs and understanding of web development concepts such as authentication and CRUD operations will be beneficial.
What will I build during the course?
During the course, you will build a Vue.js application that interacts with a Laravel-powered REST API. The project involves setting up user authentication with Laravel Sanctum and Fortify, managing user flows, protecting pages with middleware, and performing CRUD operations. The application will also include features such as data filtering, pagination, and sorting using the Laravel Query Builder from Spatie.
Who is the target audience for this course?
This course is designed for developers who are interested in integrating Vue.js with Laravel to build modern web applications. It is particularly suited for those who want to learn how to set up a Laravel backend for a Vue.js frontend and gain insights into handling authentication, data management, and API integration in a web application context.
How does this course compare to other courses on Vue.js and Laravel?
Unlike other courses that might focus solely on either Vue.js or Laravel, this course specifically targets the integration of a Vue.js frontend with a Laravel backend. It provides practical insights into setting up a development environment, user authentication, and connecting to a REST API, offering a comprehensive approach to building full-stack applications with these technologies.
What specific tools or platforms will be covered?
The course covers several tools and platforms, including Laravel Sanctum and Fortify for user authentication in a Vue.js SPA. It also includes lessons on using Axios for HTTP requests, FormKit for simplifying form validation, and the Laravel Query Builder from Spatie for data manipulation. These tools are crucial for building and managing a full-stack application with Vue.js and Laravel.
What topics are not covered in this course?
The course does not cover integrating Vue.js components directly into Blade templates or using Inertia.js for building SPAs. Additionally, it does not focus on other frontend frameworks or backend languages outside of Vue.js and Laravel. The course is concentrated on creating a standalone Vue.js application that interacts with a Laravel REST API backend.
What is the estimated time commitment for completing the course?
The course consists of 34 lessons and, while the total runtime is not specified, students can expect to dedicate several hours to complete the course. The time commitment includes watching lessons, setting up development environments, and working through hands-on exercises. It is advisable to allocate time for practice and review to fully grasp the integration techniques covered.