Laravel 11, Vue 3 & Inertia (2024) - Build APIs and SPAs
Loại khoá học: Web Development
The ultimate guide to build APIs and Single Page Applications (SPAs) with Laravel 10 & Vue.js 3, build 3 projects
Mô tả
Welcome to Fullstack Laravel 10 + Vue.js 3 (2023) - Build APIs and SPAs course. This course will teach you how to combine the most popular PHP Framework, Laravel, with Vue.js to build APIs and SPAs from scratch.
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.
All of my courses are project-driven learning, in this course, we will build 3 real-world projects, that will make you proud of yourself and make you confident to build full-stack web applications that you can imagine.
Here's exactly what you will learn:
Basic Laravel features: database migration, database seeds, model factories, accessor & mutators, form validation, authentication and authorization.
Advanced Eloquent Relationship: Many to many and Many to Many polymorphic relationships.
Integrating Fontawesome 5 via Laravel mix.
Integrating Bootstrap 4/5 for UI Styling.
Implementing DRY principle.
Using Git for version control and Github as a code repository.
Introduction to Vue js: Directive, list rendering, conditional rendering, class binding, style binding, components, mixins and much more.
Integrating Vue js & Ajax to make our application more interactive.
RESTfull API Development
Deploy Laravel applications in Heroku and Digital Ocean Virtual Private Server.
Upgrade the Laravel application to the newer version to make our app up to date.
And much more
In addition to the lectures, I also provide the complete source code on GitHub where you can see all changes that I made for each lecture so that you can always have access to the full codebase for the application.
Bạn sẽ học được gì
Build real world Vue js & Laravel applications
Build RESTful API
Build Single Page Application (SPA) from scratch
Deploy Laravel application both in Heroku and Digital Ocean Virtual Private Server
Understand how Vue js works and how it interacts with Laravel Backend API
Yêu cầu
- You should have a basic understanding of HTML, PHP, OOP, CSS & Javascript
- A Mac, Windows, or Linux computer
Nội dung khoá học
35 sections
Welcome to the course
01:25
Section Introduction (DON'T SKIP unless you have dev environment setup)
04:55
Setting up Local Development on Windows - Installing XAMPP
06:31
Setting up Local Development on Windows - Install Composer & Laravel Installer
03:28
Setting up Local Development on MacOs (v12+) - Installing Herd
07:58
Setting up Local Development on Mac - Install Homebrew, PHP, MySQL and Composer
08:40
Setting up Local Development on Mac - Installing Valet
04:50
Alternative Local Development Environment - Installing Laravel Sail
08:32
Other Tools to install
04:22
REST Client Tools to install
00:10
My Visual Studio Code Editor extensions & settings
01:00
Introduction to Part 1
00:46
Creating new Laravel project
03:13
Model, Migration, Factories, and Seeders
05:42
Creating our first API Endpoint
05:55
Working with Eloquent API Resource
04:57
Validating and Inserting Data
04:18
Updating Data
07:08
Deleting Data
02:13
Setting up Sanctum
06:25
SPA Authentication - Signing users in
10:12
SPA Authentication - Signing users out
02:13
SPA Authentication - Registering users
05:32
Protecting routes
06:17
Using Sanctum for API Token Authentication
09:21
Linking users to other resources
09:54
Creating our first Policy
03:53
Authorizing actions
06:51
Setup Vue 3 project
05:48
Single File Component
09:38
Directives and Attribute bindings
08:43
Handling events
06:50
Two way bindings with v-model
04:07
Working with methods
07:32
Style and Class bindings
06:23
Computed Properties
03:45
Watchers
03:56
Styling the Tags Input component
03:05
Component Communication with Props
08:43
Component Communication with emitting events
06:38
Composition API Introduction
02:42
Composition API Setup
01:48
Creating reactive reference with the ref function
04:53
Creating reactive object with the reactive function
04:13
Creating reactive reference from reactive object
06:04
Computed properties
05:07
Working with watch and watchEffect
07:18
Working with props
06:13
Emitting events
04:52
Lifecycle hooks
04:27
Composable functions
05:44
Using Composition API script setup
05:54
Creating new Vue.js 3 project
08:06
Setting up Axios for HTTP call
08:34
Displaying data in Vue js components
07:01
Using computed properties for displaying completed and uncompleted tasks
08:24
Toggling the completed tasks
08:19
Adding new component to insert data
06:45
Creating an Inline editing feature
07:41
Adding new feature in our Vue js app to update data
06:19
Populating input element when editing data
02:58
Adding new feature to mark the task as completed
05:58
Adding new feature to remove tasks
05:14
Setting up Pinia
01:30
Defining Stores
07:37
Defining Getters
06:03
Defining Actions
04:13
Refactoring our Stores (Using Setup stores)
05:25
Refactoring our components
09:22
Setting up Vue Router
08:43
Route Navigation
03:23
Programmatic navigations
04:09
Styling the current active link
05:43
Handling 404 error
04:15
Navigation Guards
05:57
Route meta fields
02:22
Transitions
08:06
Storing Axios Base URL in environment variables
04:37
Setting up Client Authentication
04:31
Creating a Pinia store for authentication
08:31
Building Login form
07:19
Authentication redirection
03:33
Logging users out
04:34
Replacing the login button with a Dropdown
05:59
Handling validation error messages
08:28
Adding a Register form
07:06
Setting up our Server
05:07
Creating a new user in our server
02:38
Upgrading PHP Version
02:32
Setting up Nginx
11:21
Setting up MySQL Database
08:44
Setting up SSH
07:17
Deploying Laravel app
07:46
Pushing new changes
03:46
Adding Domain and SSL to our Server
07:37
Final Steps
05:44
Setting up our Server
06:22
Setting up Node.js
02:40
Setting up Nginx with SSL
07:42
Deploying Vue js app
06:00
Adding Summaries endpoint
08:51
Filtering Task summaries
07:41
Refactoring Database Seeder & Testing
09:17
Consuming summaries endpoint in Vue js app
13:31
Creating base Summary filter component
06:31
Adding additional options to the SummaryFilter component
06:48
Highlighting active filter item
11:24
Reacting to Summary filter change
09:18
Introduction to Part 2
01:14
Setting up new Laravel Project
02:39
Working with Models and Migrations
07:04
Working with Model Facotires
07:00
Creating first Vue js component
10:00
Working with Eloquent API Resource
11:19
Creating a Form component to insert data
10:47
Saving data
07:00
Validating the incoming requests
08:58
Working with Accessors and Muttators
03:20
Showing the detail of a resource
08:14
Editing existing resources
08:07
Refactoring our components
07:08
Deleting resources
06:38
Creating Toast component
09:45
Iintroduction to pagination in Laravel
06:55
Creating Pagination component
10:49
Adding Searching functionality
10:33
Creating Sortable component
10:22
Dynamic navigation
08:51
Handling the sorting process in the backend
05:55
Adding checkboxes in our table
06:07
Adding ability to check or uncheck all checboxes
09:00
Handling bulk deletion
10:26
Adding a Form modal for bulk update
09:41
Loading selected products and displaying categories
09:09
Handling the bulk update on the backend
09:41
Project Overview
01:14
Creating basic sorting functionality
07:35
Styling the sortable columns
05:30
Refactoring
04:53
Implementing sortable column to product name & category
06:26
Fixing sortable column indicator issue
03:13
Adding basic searching functionality
06:08
Realtime searching
09:26
Another approach in presenting search results
08:43
Adding Pagination
11:05
Adding Form Modal
08:37
Getting list of categories
05:00
Updating existing data
13:41
Deleting data
02:43
Section Introduction
00:18
Routing
08:05
Request & Response
05:12
Views
09:16
Working with Artisan CLI & Tinker
06:58
Setting up our Database connection
03:56
Database Migration
10:04
Working with Foreign key column
13:00
Populating database table with Seeder
10:21
Working with Faker Library
05:51
Eloquent
14:28
Eloquent Relationship
08:38
Eloquent Relationship - Inserting Related Models
05:41
Model Factories
10:43
API Resources
10:40
Controllers
14:29
Validation
08:08
Finishing touch
01:47
Upgrading our Laravel app to the newest version (v8)
15:05
Section Introduction
00:12
Fetching all products
09:20
Fetching categories
03:57
Saving new product
10:51
Updating product
00:23
Deleting product
01:12
Implementing HTML 5 history API
11:51
Introduction to Part 3
00:31
Project Repository
00:41
Download this New Laravel Versions Reference Guide (Important!)
00:51
Project Setup
12:34
Designing Question Schema - Part 1 of 2
08:33
Designing Question Schema - Part 2 of 2
08:27
Generating Fake data via Model Factories - Part 1 of 2
09:51
Generating Fake data via Model Factories - Part 2 of 2
09:04
Displaying all questions
15:46
Adding Author info and Question creation date on Question item - Part 1 of 2
10:31
Adding Author info and Question creation date on Question item - Part 2 of 2
09:13
Adding votes, answers and views counter on Question item - Part 1 of 2
12:39
Adding votes, answers and views counter on Question item - Part 2 of 2
12:14
Buiding Question Form - Part 1 of 2
12:51
Buiding Question Form - Part 2 of 2
06:18
Validating and Saving the Question - Part 1 of 2
10:54
Validating and Saving the Question - Part 2 of 2
12:01
Updating The Question - Part 1 of 2
09:44
Updating The Question - Part 2 of 2
09:48
Deleting The Question
09:38
Showing The Question detail
13:19
Authorizing The Question - Using Gates
12:37
Authorizing The Question - Using Policies
15:51
Designing Answer Schema
15:19
Generating Fake Answers - Part 1 of 2
09:23
Generating Fake Answers - Part 2 of 2
08:25
Displaying answers for question
17:54
Adding Vote Controls on Question and Answer - Part 1 of 3
08:09
Adding Vote Controls on Question and Answer - Part 2 of 3
11:57
Adding Vote Controls on Question and Answer - Part 3 of 3
13:40
Saving The Answer - Part 1 of 3
04:10
Saving The Answer - Part 2 of 3
10:31
Saving The Answer - Part 3 of 3
05:55
Updating The Answer - Part 1 of 2
10:41
Updating The Answer - Part 2 of 2
05:00
Deleting The Answer - Part 1 of 3
04:11
Deleting The Answer - Part 2 of 3
09:26
Deleting The Answer - Part 3 of 3
09:35
Accepting the answer as best answer - Part 1 of 2
12:02
Accepting the answer as best answer - Part 2 of 2
08:23
Favoriting The Question - Part 1 of 4
10:55
Favoriting The Question - Part 2 of 4
10:46
Favoriting The Question - Part 3 of 4
10:47
Favoriting The Question - Part 4 of 4
10:44
Voting The Question & Answer - Part 1 of 6
09:40
Voting The Question & Answer - Part 2 of 6
10:52
Voting The Question & Answer - Part 3 of 6
08:06
Voting The Question & Answer - Part 4 of 6
06:44
Voting The Question & Answer - Part 5 of 6
10:19
Voting The Question & Answer - Part 6 of 6
12:43
Refactoring The Models
09:57
Refactoring The Views - Part 1 of 2
06:29
Refactoring The Views - Part 2 of 2
14:46
Preventing The Application from XSS Attack - Part 1 of 2
13:39
Preventing The Application from XSS Attack - Part 2 of 2
10:30
Miscellaneous
13:36
Tidying up our views
12:19
Creating our first Vue.js Component - Part 1 of 2 (Building The Component)
14:04
Creating our first Vue.js Component - Part 2 of 2 (Using The Component)
13:20
Creating Vue Answer Component - Part 1 of 5 (Using Vue.js Inline Template)
05:11
Creating Vue Answer Component - Part 2 of 5 (Ajaxifying The Edit button)
07:24
Creating Vue Answer Component - Part 3 of 5 (Build Answer Inline Form)
16:57
Creating Vue Answer Component - Part 4 of 5 (Undoing changes)
06:40
Creating Vue Answer Component - Part 5 of 5 (Validation)
08:19
Ajaxifying the Delete answer button
06:36
Beautifying The Flash & Confirm messages
10:33
Creating Favorite Component - Part 1 of 3 (From button to Vue.js Component)
07:46
Creating Favorite Component - Part 2 of 3 (Event Handler)
09:56
Creating Favorite Component - Part 3 of 3 (Authenticating the button)
08:23
Creating Accept Answer Component - Part 1 of 2 (from button into Vue component)
10:31
Creating Accept Answer Component - Part 2 of 2 (event handler)
09:05
Rewriting The Authorization Logic - Part 1 of 2 (Core authorization)
08:32
Rewriting The Authorization Logic - Part 2 of 2 (Refactoring)
06:47
Creating Vote Component - Part 1 of 3 (From blade to Vue Component)
13:23
Creating Vote Component - Part 2 of 3 (Event Handling)
08:51
Creating Vote Component - Part 3 of 3 (Fixing issues)
07:38
Creating Vue Answers Component
12:47
Building Load more answers Feature - Part 1 of 2
11:08
Building Load more answers Feature - Part 2 of 2
08:56
Implementing Vue.js Custom Events
09:11
Implementing Global Event Bus
09:01
Creating New Answer Component - Part 1 of 2 (From blade to Vue.js component)
07:55
Creating New Answer Component - Part 2 of 2 (Event Handling)
12:37
Creating Question Component - Part 1 of 3 (from blade to vue.js component)
06:40
Creating Question Component - Part 2 of 3 (Build inline Form)
17:24
Creating Question Component - Part 3 of 3 (Misc)
11:15
Working With Vue.js Mixins
17:18
Section Intro
01:50
Composing Editor Component
13:36
Enable Markdown Preview
05:43
Autosizing The Editor
07:37
Syntax Highlight Integration
07:33
Fixing Syntax Highlight issue on the first load
03:59
Fixing Syntax Highlight issue when cancel editing
10:13
Creating Highlight Mixin
07:15
Integrating Markdown Editor in Answer Component
12:10
Integrating Markdown Editor in New Answer Component
05:44
Fixing Syntax Highlight issue after new answer added
06:34
Fixing Syntax Highlight in Answers Component
05:30
Installing Laravel Passport
06:38
Requesting a Passport Token
12:30
Creating API Endpoint for displaying all questions
06:36
Transforming Data using Eloquent API Resources
08:11
Creating API Endpoint for adding new question
03:13
Creating API Endpoints for Updating & Deleting existing question
03:26
Creating API Endpoint for showing question details
05:00
Creating Answer Endpoints
13:42
Creating Vote Question & Answer Endpoints
02:27
Creating Favourite Question & Accept Answer Endpoints
02:54
Current User's Posts Endpoint
17:51
The Authentication API
03:56
Updating npm packages
10:36
Getting started with SPA - Setting up Backend Route Fallback
03:34
Getting started with SPA - Installing and configuring Vue Router
13:55
Getting started with SPA - Using Vue router RouterLink component
09:01
Getting started with SPA - Vue Router Navigation Guards
05:58
Getting started with SPA - Handling 404 error page
06:34
The QuestionsPage Component - Setting up API baseURL
05:08
The QuestionsPage Component - Building User Interface
13:07
The QuestionsPage Component - Consuming API Endpoint
02:29
The QuestionsPage Component - Fixing Authorization issue
02:32
Creating Pagination Component
07:44
Creating Question Form Component - From Blade file to Vue.js component
13:17
Creating Question Form Component - Handling Form Data
10:55
Creating Edit Question Component
03:48
Ajaxifying the Delete question button
03:32
The Question Page Component - Showing question details
09:42
The Question Page Component - Displaying related answers
06:26
The Question Page Component - Fixing the Delete question button
01:51
The Question Page Component - Fixing the Load more answers button
01:49
The Question Page Component - Fixing The Favourite button
00:59
Displaying current user's post - Building User Interface
10:51
Displaying current user's post - Consuming Backend API
10:16
Polishing up our app - Adding Transition effect
03:39
Polishing up our app - Adding AJAX Spinner on All questions page
10:02
Polishing up our app - Using Axios interceptor to control the Spinner globally
08:34
Polishing up our app - Adding AJAX Spinner when submitting the form
03:18
Final Bug fixing
05:36
Introduction
03:16
Upgrading to Laravel 5.7 - Update Dependencies & Core Application
23:31
Upgrading to Laravel 5.7 - Syncing Application's structure
15:52
Upgrading to Laravel 5.7 - Testing
13:32
Upgrading to Laravel 5.8 - Update Dependencies & Core Application
12:51
Upgrading to Laravel 5.8 - Syncing Application's structure
16:25
Upgrading to Laravel 5.8 - Testing
06:42
Fixing The Verified Email Error
00:30
Upgrading to Laravel 6.0
12:06
Introducing Heroku
03:04
Creating Heroku App
04:38
Creating a Database
02:55
Setting Heroku Config Variables
06:49
Fixing Insecure Assets Error
05:34
Introduction
00:17
Setting up Server
02:30
Installing Nginx, MySql & PHP
01:13
Setting up Firewall
01:22
Creating a new user for our deployment
01:20
Setting up Nginx
03:38
Setting up MySQL
03:17
Setting up SSH Keys
03:26
Deploying Laravel App in our Production Server
01:47
Deploying new changes
01:09
Adding domain to our Server
01:11
Setting up SSL on our server
03:00
Intro to Vue.js
07:12
Setup Vue.js locally
05:30
List Rendering - Part 1 of 3
03:54
List Rendering - Part 2 of 3
05:00
List Rendering - Part 3 of 3
04:58
Conditional Rendering - Part 1 of 3
04:40
Conditional Rendering - Part 2 of 3
04:22
Conditional Rendering - Part 3 of 3
03:56
Event Handling - Part 1 of 4
04:11
Event Handling - Part 2 of 4
02:48
Event Handling - Part 3 of 4
04:08
Event Handling - Part 4 of 4
04:48
Class Binding - Part 1 of 2
04:11
Class Binding - Part 2 of 2
08:28
Style Binding - Part 1 of 2
03:10
Style Binding - Part 2 of 2
06:23
Computed Property - Part 1 of 3
03:00
Computed Property - Part 2 of 3
06:31
Computed Property - Part 3 of 3
13:13
Viết Bình Luận
Khoá học liên quan
![Flutter BLoC TDD & Clean Architecture | Project Based [2024]](/uploads/courses/udemy/5495156_a418.jpg)
Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!
Get khoá học giá rẻ ngay trước khi bị fix.
Đánh giá của học viên
Bình luận khách hàng