Laravel Backends for Vue.js 3
Course description
Vue has held a special place in the front-end for Laravel developers since 2015. It started when the Laravel creator Taylor Otwell tweeted: "Learning @vuejs because it looks easy and has pretty website." Since then, many companies have paired the two technologies to create powerful and flexible web applications.
Over time, there have been many approaches to pairing the 2. It's possible to sprinkle in Vue.js just on the front-end with the bulk of the work done in blade templates. Inertia.js enables creating modern single-page Vue apps using classic server-side routing (dubbed "the modern monolith"). It's also common to use Laravel to power a REST API that a completely seperate Vue.js application can utilze as the backend.
In this course, we'll take the last approach. We'll provide a fully functional Laravel backend for you to startup locally and then together we'll build out a front-end to interact with it. Along the way, you'll learn not only how to interact with the REST API from Vue but we'll also peak behind the curtain of how the server side Laravel application assembles it's responses.
They'll be plenty of tips and tricks throughout the course, specific to working with Vue.js with a Laravel backend. Things like: setting up auth, handling form validation errors, efficiently and elegantly fetching data, handling with pagination, and more!
This course is perfect for:
- the full stack dev who wants to pair Vue.js 3 with Laravel
- the front end dev who works with a Laravel backend maintained by his/her colleagues
- even for someone who is relatively new to Laravel and wants a high level overview of how it can power a REST API
Watch Online
| # | Title | Duration |
|---|---|---|
| 1 | Laravel Backends for Vue.js Frontends Course Introduction | 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 |
Comments
0 commentsSimilar courses
DevOps Project: CICD with Git GitLab Jenkins and Laravel
Want to join the conversation?
Sign in to comment