Laravel with Vue.js - Fullstack Web Development (2020)

Learn how to combine Laravel PHP Framework & Vue.js to build powerful API and Single Page Application (SPA) from scratch

  • Eding Muhamad Saprudin
  • 4.01
  • (746 reviews)
  • 29 hrs
  • 227 lectures
  • Udemy
Laravel with Vue.js - Fullstack Web Development (2020)

What you will learn?

  • 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
  • Use Laravel Mix for asset compilation

Your trainer

Eding Muhamad Saprudin

Eding Muhamad is a full-stack developer with more than 10 years experience on web development. He mainly works with PHP and builds web apps with PHP frameworks like Codeigniter, Yii and Laravel. He also has excellent knowledge in Frontend Library or framework such as jQuery, Bootstrap and Vue.js.

Eding is also love teaching. He has more than 5 years experience on onsite teaching includes: object oriented programming, java, data structure, Algorithm, C++ and PHP. And he has more than 3 years experience on online teaching especially in Laravel PHP Framework.

227 lessons

Easy to follow lectures and videos covering subject details.

29 hours

This course includes hours of video material. Watch on-demand, anytime, anywhere.

Certificate of Completion

You will earn a Certificate of Completion at the end of this course.

Course curriculum

Introduction05:44

  • Welcome to the course05:44

  • Introduction05:32
  • Installing Local Development on Windows15:18
  • Installing Local Development on Mac15:56
  • My Visual Studio Code Editor extensions & settings01:00

  • Intro to Vue.js07:12
  • Setup Vue.js locally05:30
  • List Rendering - Part 1 of 303:54
  • List Rendering - Part 2 of 305:00
  • List Rendering - Part 3 of 304:58
  • Conditional Rendering - Part 1 of 304:40
  • Conditional Rendering - Part 2 of 304:22
  • Conditional Rendering - Part 3 of 303:56
  • Event Handling - Part 1 of 404:11
  • Event Handling - Part 2 of 402:48
  • Event Handling - Part 3 of 404:08
  • Event Handling - Part 4 of 404:48
  • Class Binding - Part 1 of 204:11
  • Class Binding - Part 2 of 208:28
  • Style Binding - Part 1 of 203:10
  • Style Binding - Part 2 of 206:23
  • Computed Property - Part 1 of 303:00
  • Computed Property - Part 2 of 306:31
  • Computed Property - Part 3 of 313:13

  • Project Overview01:14
  • Creating basic sorting functionality07:35
  • Styling the sortable columns05:30
  • Refactoring04:53
  • Implementing sortable column to product name & category06:26
  • Fixing sortable column indicator issue03:13
  • Adding basic searching functionality06:08
  • Realtime searching09:26
  • Another approach in presenting search results08:43
  • Adding Pagination11:05
  • Adding Form Modal08:37
  • Getting list of categories05:00
  • Updating existing data13:41
  • Deleting data02:43

  • Section Introduction00:25
  • Routing08:05
  • Request & Response05:12
  • Views09:16
  • Working with Artisan CLI & Tinker06:58
  • Setting up our Database connection03:56
  • Database Migration10:04
  • Working with Foreign key column13:00
  • Populating database table with Seeder10:21
  • Working with Faker Library05:51
  • Eloquent14:28
  • Eloquent Relationship08:38
  • Eloquent Relationship - Inserting Related Models05:41
  • Model Factories10:43
  • API Resources10:40
  • Controllers14:29
  • Validation08:08
  • Finishing touch01:47
  • Upgrading our Laravel app to the newest version (v8)15:05

  • Section Introduction00:12
  • Fetching all products09:20
  • Fetching categories03:57
  • Saving new product10:51
  • Updating product00:23
  • Deleting product01:12
  • Implementing HTML 5 history API11:51

  • Project Repository00:41
  • Download this New Laravel Versions Reference Guide (Important!)00:51
  • Project Setup12:34
  • Designing Question Schema - Part 1 of 208:33
  • Designing Question Schema - Part 2 of 208:27
  • Generating Fake data via Model Factories - Part 1 of 209:51
  • Generating Fake data via Model Factories - Part 2 of 209:04
  • Displaying all questions15:46
  • Adding Author info and Question creation date on Question item - Part 1 of 210:31
  • Adding Author info and Question creation date on Question item - Part 2 of 209:13
  • Adding votes, answers and views counter on Question item - Part 1 of 212:39
  • Adding votes, answers and views counter on Question item - Part 2 of 212:14
  • Buiding Question Form - Part 1 of 212:51
  • Buiding Question Form - Part 2 of 206:18
  • Validating and Saving the Question - Part 1 of 210:54
  • Validating and Saving the Question - Part 2 of 212:01
  • Updating The Question - Part 1 of 209:44
  • Updating The Question - Part 2 of 209:48
  • Deleting The Question09:38
  • Showing The Question detail13:19
  • Authorizing The Question - Using Gates12:37
  • Authorizing The Question - Using Policies15:51

  • Designing Answer Schema15:19
  • Generating Fake Answers - Part 1 of 209:23
  • Generating Fake Answers - Part 2 of 208:25
  • Displaying answers for question17:54
  • Adding Vote Controls on Question and Answer - Part 1 of 308:09
  • Adding Vote Controls on Question and Answer - Part 2 of 311:57
  • Adding Vote Controls on Question and Answer - Part 3 of 313:40
  • Saving The Answer - Part 1 of 304:10
  • Saving The Answer - Part 2 of 310:31
  • Saving The Answer - Part 3 of 305:55
  • Updating The Answer - Part 1 of 210:41
  • Updating The Answer - Part 2 of 205:00
  • Deleting The Answer - Part 1 of 304:11
  • Deleting The Answer - Part 2 of 309:26
  • Deleting The Answer - Part 3 of 309:35

  • Accepting the answer as best answer - Part 1 of 212:02
  • Accepting the answer as best answer - Part 2 of 208:23
  • Favoriting The Question - Part 1 of 410:55
  • Favoriting The Question - Part 2 of 410:46
  • Favoriting The Question - Part 3 of 410:47
  • Favoriting The Question - Part 4 of 410:44
  • Voting The Question & Answer - Part 1 of 609:40
  • Voting The Question & Answer - Part 2 of 610:52
  • Voting The Question & Answer - Part 3 of 608:06
  • Voting The Question & Answer - Part 4 of 606:44
  • Voting The Question & Answer - Part 5 of 610:19
  • Voting The Question & Answer - Part 6 of 612:43

  • Refactoring The Models09:57
  • Refactoring The Views - Part 1 of 206:29
  • Refactoring The Views - Part 2 of 214:46
  • Preventing The Application from XSS Attack - Part 1 of 213:39
  • Preventing The Application from XSS Attack - Part 2 of 210:30
  • Miscellaneous13:36
  • Tidying up our views12: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 button06:36
  • Beautifying The Flash & Confirm messages10: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 Component12:47
  • Building Load more answers Feature - Part 1 of 211:08
  • Building Load more answers Feature - Part 2 of 208:56
  • Implementing Vue.js Custom Events09:11
  • Implementing Global Event Bus09: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 Mixins17:18

  • Section Intro01:50
  • Composing Editor Component13:36
  • Enable Markdown Preview05:43
  • Autosizing The Editor07:37
  • Syntax Highlight Integration07:33
  • Fixing Syntax Highlight issue on the first load03:59
  • Fixing Syntax Highlight issue when cancel editing10:13
  • Creating Highlight Mixin07:15
  • Integrating Markdown Editor in Answer Component12:10
  • Integrating Markdown Editor in New Answer Component05:44
  • Fixing Syntax Highlight issue after new answer added06:34
  • Fixing Syntax Highlight in Answers Component05:30

  • Installing Laravel Passport06:38
  • Requesting a Passport Token12:30
  • Creating API Endpoint for displaying all questions06:36
  • Transforming Data using Eloquent API Resources08:11
  • Creating API Endpoint for adding new question03:13
  • Creating API Endpoints for Updating & Deleting existing question03:26
  • Creating API Endpoint for showing question details05:00
  • Creating Answer Endpoints13:42
  • Creating Vote Question & Answer Endpoints02:27
  • Creating Favourite Question & Accept Answer Endpoints02:54
  • Current User's Posts Endpoint17:51
  • The Authentication API03:56

  • Updating npm packages10:36
  • Getting started with SPA - Setting up Backend Route Fallback03:34
  • Getting started with SPA - Installing and configuring Vue Router13:55
  • Getting started with SPA - Using Vue router RouterLink component09:01
  • Getting started with SPA - Vue Router Navigation Guards05:58
  • Getting started with SPA - Handling 404 error page06:34
  • The QuestionsPage Component - Setting up API baseURL05:08
  • The QuestionsPage Component - Building User Interface13:07
  • The QuestionsPage Component - Consuming API Endpoint02:29
  • The QuestionsPage Component - Fixing Authorization issue02:32
  • Creating Pagination Component07:44
  • Creating Question Form Component - From Blade file to Vue.js component13:17
  • Creating Question Form Component - Handling Form Data10:55
  • Creating Edit Question Component03:48
  • Ajaxifying the Delete question button03:32
  • The Question Page Component - Showing question details09:42
  • The Question Page Component - Displaying related answers06:26
  • The Question Page Component - Fixing the Delete question button01:51
  • The Question Page Component - Fixing the Load more answers button01:49
  • The Question Page Component - Fixing The Favourite button00:59
  • Displaying current user's post - Building User Interface10:51
  • Displaying current user's post - Consuming Backend API10:16
  • Polishing up our app - Adding Transition effect03:39
  • Polishing up our app - Adding AJAX Spinner on All questions page10:02
  • Polishing up our app - Using Axios interceptor to control the Spinner globally08:34
  • Polishing up our app - Adding AJAX Spinner when submitting the form03:18
  • Final Bug fixing05:36

  • Introduction03:16
  • Upgrading to Laravel 5.7 - Update Dependencies & Core Application23:31
  • Upgrading to Laravel 5.7 - Syncing Application's structure15:52
  • Upgrading to Laravel 5.7 - Testing13:32
  • Upgrading to Laravel 5.8 - Update Dependencies & Core Application12:51
  • Upgrading to Laravel 5.8 - Syncing Application's structure16:25
  • Upgrading to Laravel 5.8 - Testing06:42
  • Fixing The Verified Email Error00:30
  • Upgrading to Laravel 6.012:06

  • Introducing Heroku03:04
  • Creating Heroku App04:38
  • Creating a Database02:55
  • Setting Heroku Config Variables06:49
  • Fixing Insecure Assets Error05:34

  • Introduction00:17
  • Setting up Server02:30
  • Installing Nginx, MySql & PHP01:13
  • Setting up Firewall01:22
  • Creating a new user for our deployment01:20
  • Setting up Nginx03:38
  • Setting up MySQL03:17
  • Setting up SSH Keys03:26
  • Deploying Laravel App in our Production Server01:47
  • Deploying new changes01:09
  • Adding domain to our Server01:11
  • Setting up SSL on our server03:00
Enroll now
Online Courses

Learning Laravel doesn't have to be hard. Here is our curated list of recommended online courses that will guide you step-by-step in the learning process.

Learn more
Books

Are you an avid book reader? Do you prefer paperback, or maybe Kindle version? Take a look at our curated list of Laravel related books and take yourskills to the next level.

Learn more
YouTube videos

The number of high-quality and free Laravel video tutorials is growing fast. Check this curated list of recommended videos - there is no excuse to stop learning.

Learn more