Laravel 11, Vue 3 & Inertia (2024) - Build APIs and SPAs

The ultimate guide to build APIs and Single Page Applications with Laravel 11, Vue 3, and Inertia Js, build 3 projects

4.55 (992 reviews)
Udemy
platform
English
language
Web Development
category
6,960
students
44 hours
content
Mar 2024
last update
$79.99
regular price

What you will learn

Building APIs with Laravel

Building SPA with Vue, Vue router and Pinia that consume Backend API

Building monolith SPA with Laravel, Vue, and Inertia

Creating Dynamic User Interfaces

Deploy Laravel application both in Heroku and Digital Ocean Virtual Private Server

Managing Application State with Pinia

Implementing Vue Router

Description

Unlock the potential of Laravel 11, Vue 3, and Inertia to craft powerful, efficient, and scalable web applications in this comprehensive project-based course.

In today's digital landscape, mastering the art of modern web development is essential. Join us on an immersive journey as we delve into the intricacies of building single-page applications with Laravel 11, Vue 3, and Inertia.

Throughout this course, you'll learn how to architect robust APIs with Laravel, empowering you to seamlessly connect your frontend and backend. Dive into Vue 3, harnessing its reactivity and component-based architecture to create dynamic user interfaces that engage and delight your users.

But that's not all. We'll go beyond the basics, exploring how to leverage Vue Router and Pinia to craft seamless navigation and manage application state effectively. By the end, you'll have the skills and confidence to tackle real-world challenges head-on, whether it's building a personal project or launching a startup.

But it doesn't stop there. We'll guide you through the process of deploying your Laravel application to a Virtual Private Server (VPS), ensuring your masterpiece reaches its audience securely and reliably.

Whether you're a seasoned developer looking to expand your toolkit or a newcomer eager to dive into the world of modern web development, this course is your gateway to success.


What You'll Learn:

  1. Building APIs with Laravel: Learn how to architect and implement robust APIs using Laravel's powerful features.

  2. Introduction to Vue 3: Dive into Vue 3, exploring its reactivity system, component-based architecture, and advanced features.

  3. Creating Dynamic User Interfaces: Harness the power of Vue 3 to design and develop dynamic user interfaces that engage and delight users.

  4. Managing Application State with Pinia: Explore Pinia, a modern Vue state management library, to effectively manage application state and ensure consistency across your application.

  5. Implementing Vue Router: Master Vue Router to enable seamless navigation within your single-page application, enhancing user experience and usability.

  6. Building Monolith SPAs with Inertia: Discover how to integrate Inertia.js into your Laravel application to build modern single-page applications without sacrificing the simplicity of traditional server-side routing.

  7. Deploying Laravel Applications: Learn the step-by-step process of deploying your Laravel application to a Virtual Private Server (VPS), ensuring your masterpiece reaches its audience securely and reliably.

Here are what students are saying about this course:

-- Excellent course, full of powerful tools and useful information for Laravel and Vue.js development.

-- The author explains everything in detail and where possible, provides multiple solutions for a specific task. He also delves into areas not usually covered in other courses (e.g, removing redundant code).

-- This course is Great very detailed and easy to follow

The Instructor knows what his doing and very knowledgeable in the topic

+points for git repository per lesson if you are lose you can look up into it to compare codes

minor trouble of typo errors but not a big deal.


By the end of this course, you'll have the skills and confidence to tackle real-world challenges head-on, whether it's building a personal project or launching a startup.

Enroll now and embark on a journey to mastering Laravel, Vue 3, and Inertia – the keys to building and deploying cutting-edge web applications.

Content

Introduction

Welcome to the course
Project Repository
Setting up our Tools
New Laravel Versions Reference Guide

Building Questions Resources

Project Setup
Designing Question Schema - Part 1 of 2
Designing Question Schema - Part 2 of 2
Generating Fake data via Model Factories - Part 1 of 2
Generating Fake data via Model Factories - Part 2 of 2
Displaying all questions
Adding Author info and Question creation date on Question item - Part 1 of 2
Adding Author info and Question creation date on Question item - Part 2 of 2
Adding votes, answers and views counter on Question item - Part 1 of 2
Adding votes, answers and views counter on Question item - Part 2 of 2
Buiding Question Form - Part 1 of 2
Buiding Question Form - Part 2 of 2
Validating and Saving the Question - Part 1 of 2
Validating and Saving the Question - Part 2 of 2
Updating The Question - Part 1 of 2
Updating The Question - Part 2 of 2
Deleting The Question
Showing The Question detail
Authorizing The Question - Using Gates
Authorizing The Question - Using Policies

Building Answers Resource

Designing Answer Schema
Generating Fake Answers - Part 1 of 2
Generating Fake Answers - Part 2 of 2
Displaying answers for question
Adding Vote Controls on Question and Answer - Part 1 of 3
Adding Vote Controls on Question and Answer - Part 2 of 3
Adding Vote Controls on Question and Answer - Part 3 of 3
Saving The Answer - Part 1 of 3
Saving The Answer - Part 2 of 3
Saving The Answer - Part 3 of 3
Updating The Answer - Part 1 of 2
Updating The Answer - Part 2 of 2
Deleting The Answer - Part 1 of 3
Deleting The Answer - Part 2 of 3
Deleting The Answer - Part 3 of 3

Building Vote Control System

Accepting the answer as best answer - Part 1 of 2
Accepting the answer as best answer - Part 2 of 2
Favoriting The Question - Part 1 of 4
Favoriting The Question - Part 2 of 4
Favoriting The Question - Part 3 of 4
Favoriting The Question - Part 4 of 4
Voting The Question & Answer - Part 1 of 6
Voting The Question & Answer - Part 2 of 6
Voting The Question & Answer - Part 3 of 6
Voting The Question & Answer - Part 4 of 6
Voting The Question & Answer - Part 5 of 6
Voting The Question & Answer - Part 6 of 6

Code Refactoring & Misc

Refactoring The Models
Refactoring The Views - Part 1 of 2
Refactoring The Views - Part 2 of 2
Preventing The Application from XSS Attack - Part 1 of 2
Preventing The Application from XSS Attack - Part 2 of 2
Miscellaneous
Tidying up our views

Integrating Vue.js to our Application

Creating our first Vue.js Component - Part 1 of 2 (Building The Component)
Creating our first Vue.js Component - Part 2 of 2 (Using The Component)
Creating Vue Answer Component - Part 1 of 5 (Using Vue.js Inline Template)
Creating Vue Answer Component - Part 2 of 5 (Ajaxifying The Edit button)
Creating Vue Answer Component - Part 3 of 5 (Build Answer Inline Form)
Creating Vue Answer Component - Part 4 of 5 (Undoing changes)
Creating Vue Answer Component - Part 5 of 5 (Validation)
Ajaxifying the Delete answer button
Beautifying The Flash & Confirm messages
Creating Favorite Component - Part 1 of 3 (From button to Vue.js Component)
Creating Favorite Component - Part 2 of 3 (Event Handler)
Creating Favorite Component - Part 3 of 3 (Authenticating the button)
Creating Accept Answer Component - Part 1 of 2 (from button into Vue component)
Creating Accept Answer Component - Part 2 of 2 (event handler)
Rewriting The Authorization Logic - Part 1 of 2 (Core authorization)
Rewriting The Authorization Logic - Part 2 of 2 (Refactoring)
Creating Vote Component - Part 1 of 3 (From blade to Vue Component)
Creating Vote Component - Part 2 of 3 (Event Handling)
Creating Vote Component - Part 3 of 3 (Fixing issues)
Creating Vue Answers Component
Building Load more answers Feature - Part 1 of 2
Building Load more answers Feature - Part 2 of 2
Implementing Vue.js Custom Events
Implementing Global Event Bus
Creating New Answer Component - Part 1 of 2 (From blade to Vue.js component)
Creating New Answer Component - Part 2 of 2 (Event Handling)
Creating Question Component - Part 1 of 3 (from blade to vue.js component)
Creating Question Component - Part 2 of 3 (Build inline Form)
Creating Question Component - Part 3 of 3 (Misc)
Working With Vue.js Mixins

Building Markdown Editor Component with Syntax Highlight Support

Section Intro
Composing Editor Component
Enable Markdown Preview
Autosizing The Editor
Syntax Highlight Integration
Fixing Syntax Highlight issue on the first load
Fixing Syntax Highlight issue when cancel editing
Creating Highlight Mixin
Integrating Markdown Editor in Answer Component
Integrating Markdown Editor in New Answer Component
Fixing Syntax Highlight issue after new answer added
Fixing Syntax Highlight in Answers Component

RESTful API Development

Installing Laravel Passport
Requesting a Passport Token
Creating API Endpoint for displaying all questions
Transforming Data using Eloquent API Resources
Creating API Endpoint for adding new question
Creating API Endpoints for Updating & Deleting existing question
Creating API Endpoint for showing question details
Creating Answer Endpoints
Creating Vote Question & Answer Endpoints
Creating Favourite Question & Accept Answer Endpoints
Current User's Posts Endpoint
The Authentication API

Building Single Page Application

Updating npm packages
Getting started with SPA - Setting up Backend Route Fallback
Getting started with SPA - Installing and configuring Vue Router
Getting started with SPA - Using Vue router RouterLink component
Getting started with SPA - Vue Router Navigation Guards
Getting started with SPA - Handling 404 error page
The QuestionsPage Component - Setting up API baseURL
The QuestionsPage Component - Building User Interface
The QuestionsPage Component - Consuming API Endpoint
The QuestionsPage Component - Fixing Authorization issue
Creating Pagination Component
Creating Question Form Component - From Blade file to Vue.js component
Creating Question Form Component - Handling Form Data
Creating Edit Question Component
Ajaxifying the Delete question button
The Question Page Component - Showing question details
The Question Page Component - Displaying related answers
The Question Page Component - Fixing the Delete question button
The Question Page Component - Fixing the Load more answers button
The Question Page Component - Fixing The Favourite button
Displaying current user's post - Building User Interface
Displaying current user's post - Consuming Backend API
Polishing up our app - Adding Transition effect
Polishing up our app - Adding AJAX Spinner on All questions page
Polishing up our app - Using Axios interceptor to control the Spinner globally
Polishing up our app - Adding AJAX Spinner when submitting the form
Final Bug fixing

Appendix I - Vue.js Fundamental

Getting Started With Vue.js
Setup Vue Locally
List Rendering - Part 1 of 3
List Rendering - Part 2 of 3
List Rendering - Part 3 of 3
Conditional Rendering - Part 1 of 3
Conditional Rendering - Part 2 of 3
Conditional Rendering - Part 3 of 3
Event Handling - Part 1 of 4
Event Handling - Part 2 of 4
Event Handling - Part 3 of 4
Event Handling - Part 4 of 4
Class Binding - Part 1 of 2
Class Binding - Part 2 of 2
Style Binding - Part 1 of 2
Style Binding - Part 2 of 2
Computed Property - Part 1 of 3
Computed Property - Part 2 of 3
Computed Property - Part 3 of 3

Appendix II - Upgrading Laravel App

Introduction
Upgrading to Laravel 5.7 - Update Dependencies & Core Application
Upgrading to Laravel 5.7 - Syncing Application's structure
Upgrading to Laravel 5.7 - Testing
Upgrading to Laravel 5.8 - Update Dependencies & Core Application
Upgrading to Laravel 5.8 - Syncing Application's structure
Upgrading to Laravel 5.8 - Testing
Fixing The Verified Email Error
Upgrading to Laravel 6.0

Appendix III - Deployment Laravel App in Heroku

Introducing Heroku
Creating Heroku App
Creating a Database
Setting Heroku Config Variables
Fixing Insecure Assets Error

Appendix IV - Deploy Laravel App in Virtual Private Server (Digital Ocean)

Introduction
Setting up Server
Installing Nginx, MySql & PHP
Setting up Firewall
Creating a new user for our deployment
Setting up Nginx
Setting up MySQL
Setting up SSH Keys
Deploying Laravel App in our Production Server
Deploying new changes
Adding domain to our Server
Setting up SSL on our server

Screenshots

Laravel 11, Vue 3 & Inertia (2024) - Build APIs and SPAs - Screenshot_01Laravel 11, Vue 3 & Inertia (2024) - Build APIs and SPAs - Screenshot_02Laravel 11, Vue 3 & Inertia (2024) - Build APIs and SPAs - Screenshot_03Laravel 11, Vue 3 & Inertia (2024) - Build APIs and SPAs - Screenshot_04

Reviews

Yurii
October 25, 2023
Level is too low, code is incompleted. 1. Database seeding - you should use TaskSeeder for Task model, not DatabaseSeeder. And in DatabaseSeeder you can call it like this - $this->call([ TaskSeeder::class ]); 2. You should use Requests for all api methods (here it is not used for "complete" method).
Adam
September 19, 2023
glad there is a robotic voice that can translate the captions easier while also allowing people of different cultures to teach awesome subjects.
Gregg
September 14, 2023
Does a wonderful job of stepping through the steps and started off with a basic To-do app that is easier to grasp. Covers all the details and has updated the course to the latest versions.
Iqbal
August 16, 2023
I am quite dissapointed, this more towards "watch me how to do it" without any explanation, like why use guest() middleware for login endpoint and etc. I was hoping you explain more on how laravel actually works behind the scene, quite dissapointed
Richard
July 14, 2023
I suppose it gets the job done, but this is very much a series of "watch me type" videos. There's little/no explanation as why things are done, or how Laravel works.
Felix
July 9, 2023
The direction is clear, concise, and straight to the point, no time wasted at all!! If you're thinking about upping your skill or learning Laravel + Vue, THIS IS IT
Kassi
June 16, 2023
Great content and coverage, but not everything is explained well and sometimes that costs *hours* of troubleshooting before finding a missing step from the tutorial. Also not easy to find resources. They should be individually linked to the lessons in the corresponding "Resources" rather than supplying a general link to the repo. That's not helpful and can cause more issues since the code snippets are complete rather than lined up with the lessons. It makes it more challenging to troubleshoot.
Karl
June 14, 2023
Are you kidding with this? Your "spa" example uses a separate vue application and not an inertia supported embedded app? I just assumed this is what this course must have meant... very misleading.
John
October 18, 2022
The course is outdated. The Laravel version is 5 or 7. It means you can commit lots of mistakes and not knowing how to solve it. Some important lectures are just a guide on txt. The first Vue app is just a html index with a vue cdn instead of a CLI vue project. I mean it's ok but not ok at all. just ok to learn some basics not for a real project.
Gene
June 2, 2022
He's very thorough and helps to visualize what you are learning. I wish he could update more often to reflect the latest versions but things change so quickly therefore I understand.
Bill
November 13, 2021
This course inst a great match for me. I don't feel like it explains the core concepts well. However, the demonstrations are great.
Smruthi
September 20, 2021
Your teaching methods are great. Very clear and concise.You explained all concepts very clear and in a simple manner.
Andras
August 15, 2021
I was looking for the perfect Laravel + Vue course here on udemy, and after plenty of hours of research, I have found this miracle! This course covers lots of fields, not only Laravel+Vue. Love it
Akash
July 14, 2021
this is the best laravel course with vuejs and after completing this course i was able to get freelance orders
Ahmed
April 28, 2021
Infact, i am really getting loaded. So far so good. Great job. I am taking time converting the tutorial to Laravel 8. Keep great job!

Charts

Price

Laravel 11, Vue 3 & Inertia (2024) - Build APIs and SPAs - Price chart

Rating

Laravel 11, Vue 3 & Inertia (2024) - Build APIs and SPAs - Ratings chart

Enrollment distribution

Laravel 11, Vue 3 & Inertia (2024) - Build APIs and SPAs - Distribution chart

Related Topics

1608944
udemy ID
3/21/2018
course created date
9/7/2019
course indexed date
Bot
course submited by