Master Laravel with Vue.js Fullstack Development
4.6 (303 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,674 students enrolled

Master Laravel with Vue.js Fullstack Development

Learn how to build a Single Page Application with Laravel (6+) PHP Framework and Vue.js
Highest Rated
4.7 (301 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,673 students enrolled
Created by Piotr Jura
Last updated 5/2020
English
English [Auto-generated]
Current price: $70.99 Original price: $109.99 Discount: 35% off
1 day left at this price!
30-Day Money-Back Guarantee
This course includes
  • 17.5 hours on-demand video
  • 1 article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Using Vue to build a Single Page Application
  • Using Laravel to build a robust API backend for any application
  • Combining Laravel with Vue to create a powerful SPA
  • Vue/API SPA Authentication using Laravel Sanctum
Course content
Expand all 143 lectures 17:25:18
+ Introduction
6 lectures 27:43

What you will learn in this course, and what is not covered.

Preview 02:26

What software is essential, but also what you should install to have the best experience.

  • XAMPP (PHP/MySQL/Apache)

  • Node.js with NPM

  • Vue.js Dev Tools

  • Visual Studio Code

Preview 05:04

If you are a MacOS user, this will explain how to add PHP to Terminal and install Composer, a tool to create new projects in PHP and install all the libraries.

MacOS specific setup
05:14

If you are a Windows user, this will explain how to add PHP to Terminal and install Composer, a tool to create new projects in PHP and install all the libraries.

Windows specific setup
03:35

Where you can find the full source code of this course, and what's the best way to browse it?

  • How to browse the code on GitHub

  • How to find changes from particular lecture

  • How to browse the source code at particular moment

  • How to easily browse the code using GitHub Desktop

Preview 03:57

Visual Studio Code is a great and free code editor available on Windows/Mac OS/Linux. If you'll install couple of extensions, you can make it as much powerful as some of the paid IDE's out there. Watch this to know what you'll need and what's recommended to make most out of this course!

Visual Studio Code - extensions, shortcuts and tricks
07:27
+ Laravel API & Vue routing and basics
10 lectures 01:03:44

How to create a new Laravel application using Composer.

Preview 03:40
  • Configuring routes in Laravel (web.php/api.php)

  • Installing UI package to generate Vue scaffolding

  • NPM explained

  • Bundling JavaScript & Style assets

  • A potential problem with "cross-env"

  • Binding Vue application to a div element

  • Including the bundled app.js on the front page

Preview 13:17

All Laravel routes for API, should be directed to specific Laravel API controllers. But all the other routes, should be directed to the Vue.js frontend application, which then can take over the routing.

Fallback route in Laravel
05:57

Installing Vue Router and setting up frontend routes. How to use Vue Router with the Vue.js application.

Installing and setting up Vue Router
13:02
HTML5 history mode in Vue Router
04:43
Vue component registration (global/local) and Index component
07:38
Router Link component and routing inside a Vue application
02:27
Bootstrap, styling and Laravel Mix
04:13
Styling the navigation bar
03:23
+ Diving into Vue.js
11 lectures 01:29:34
Single file Vue components
04:09
Child components (using components in other components)
08:51
Component props and prop types
09:43
One-way data flow
04:59
Lifecycle hooks
06:41
Component state and reactivity
11:38
Reactivity gotchas
07:18
List rendering and v-else
09:01
Computed properties
09:52
Component methods
13:24
+ Database, Models, Migrations, Seeders, Queries, API testing, HTTP requests
11 lectures 01:16:29
Setting up database
06:38
Specified key was too long problem
02:52
Model and migrations
06:37
Routes and model all() method
07:42
API testing in Postman
07:47
Using Model::find() and mandatory/optional route parameters
06:36
Using Model::findOrFail() and Accept header
03:33
Making HTTP requests with Axios
06:45
CSS Flexbox and Bootstrap utility classes
02:53
+ Controllers, HTTP resources
7 lectures 45:13
Vue router parameters
07:05
Passing all object properties as props (v-bind trick)
05:57
Vue router links
02:27
Understanding CSS grid system
05:29
Laravel controllers
09:38
Resource controllers
04:23
API Resources
10:14
+ Forms, Events, Eloquent relations, Validation, Query Scopes, Handling errors
13 lectures 01:31:06
Availability component (horizontal forms, scoped styles)
10:37
Form input binding (v-model)
03:57
Handling DOM events in Vue
04:47
Laravel Debugbar (seeing what happens behind the scenes)
03:22
Booking model and relations
04:54
Seeding bookings (generating random, non overlapping time series)
13:57
Single Action Controller
04:43
Request input validation (validating data clients send to our server)
07:22
Eloquent Local Query Scopes
10:40
Returning bookable availability (HTTP response statuses)
05:17
Getting object availability in Vue.js
08:04
Displaying form errors
09:46
Final touches - displaying availability
03:40
+ ReviewList Component
11 lectures 01:26:34
ReviewList component markup (using responsive grid options)
11:57
Review model & migration (using UUID as model primary key)
07:20
Review model relationships (one-to-one, one-to-many)
03:52
Review model factory & seeder
08:43
Reviews controller (using latest() query scope)
06:52
Reviews HTTP resource (serializing model)
03:59
Loading reviews in Vue component
09:54
Vue filters and moment.js
07:19
Star Rating component (using FontAwesome)
09:47
Star Rating component logic (calculating stars to display from average rating)
14:03
Review list cleanup and section wrap-up
02:48
+ Review Page
24 lectures 03:08:29
Review Page component markup and route
07:43
Emitting and handling custom Vue.js events
09:12
Parent and child components communication
03:48
v-model explained, adding v-model support to custom components
06:32
Leaving a rating flow explained
07:14
Checking if review already exists on backend
07:44
Checking if review already exists on frontend
06:44
Booking review key and Eloquent model events
09:10
Fetching booking by review key (custom model methods)
07:55
Creating Resource classes for booking
05:35
Understanding promise chaining
11:44
Displaying the booking information on review page
10:23
A new API endpoint for storing a review (validation rules, complex flow)
12:04
Handling request errors in Vue
13:13
Storing a new review (using POST in axios)
05:00
Fixing a 500 error in BookingByReview controller
03:06
FatalError component (custom Vue component for unhandled errors)
04:45
Handling only specific errors (HTTP error codes, validation errors)
11:07
Validation on Review sending page
06:16
Reusable validation errors component
10:36
Vue Mixins - how to reuse the same code in different components
08:55
Using async/await in Review component
07:53
Vue Component Slots
08:16
+ Vuex - managing global state
8 lectures 46:05
Fixing application Vue issues
02:47
Vuex introduction - managing global state
05:01
Setting up Vuex
11:29
State mutations - storing last search dates
02:51
Reading Vuex state
02:49
Binding to Vuex state
06:43
Using Vuex actions to add side effects when committing to the store
07:45
Initializing Vuex state from the browser local storage
06:40
+ Price Breakdown Component
6 lectures 42:07
Vue Transitions
07:14
Using animated icons
03:36
Bookable price (controller, migration, factory), Carbon date library
09:37
Async/Await in Availability, emitting a custom event
06:20
Loading price in Bookable component and using Vuex bindings
06:15
Price breakdown component
09:05
Requirements
  • Good command of JavaScript fundamentals
  • Good command of PHP fundamentals, including Object Oriented Programming (a must have!)
Description

Learn Laravel together with Vue.js in this brand new, full-stack, project based course!

Learn how to create a robust API in Laravel and a Single Page Application frontend in Vue.js!

As with my other courses, you will start straight away with creating a project. During the course you will build a booking page, similar to very popular online booking websites!

No time wasted on so called "theory". I did by best and went extra mile, to explain everything that you need to learn by practical examples. It's not one of these courses when instructor in the first 10 hours reads the documentation out loud.

Topics covered include:

from Laravel: Controllers, Eloquent, Query Scopes, Model Events, HTTP resouces.

from Vue: Vue Router, Vue Components, Vuex (global state management).

Don't waste your time and money anymore, this course is the only resource you need to get up to speed with full-stack development using Laravel Framework 6+ and Vue.js!

Who this course is for:
  • PHP developers looking to learn Laravel to build APIs
  • JavaScript developers wanting to start with Vue that have PHP basics
  • Laravel developers wanting to enhance their skills by learning how to work with Vue