CourseFlix

Master Laravel with GraphQL, Vue.js and Tailwind

17h 48m 5s
English
Paid

Learn modern and most up-to-date development tools to enhance your web developer toolchain. Discover the power of the Laravel framework and experience a new level of productivity without relying on Node.js. With Laravel, you'll be a super productive developer.

Vue.js and Single Page Applications (SPA)

Laravel has traditionally favored Vue.js for frontend development, especially for building Single Page Applications (SPA). Many Laravel developers prefer Vue.js, so we have included a Vue crash course in this program. You will master Vue in this course.

Building with GraphQL

When creating a SPA, you deal with two main components: the API server and the API consumer. The API server must adhere to specific standards and guidelines, and that's where GraphQL comes in. Created by Facebook, GraphQL is a specification for building robust APIs.

GraphQL API Development with Laravel

This course focuses on building a GraphQL API server using the Laravel PHP Framework and the Lighthouse library—showing you how constructing a fully-fledged, robust API can take just hours.

API Consumers and Vue.js

The API consumer will be a Vue.js SPA application. You'll learn everything from Vue basics, Vue Components, Vue Router, to VueX for global state management—in essence, everything a seasoned Vue developer should know.

Using Apollo for GraphQL APIs

Moreover, you'll learn to use Apollo, an industry-standard library for consuming GraphQL APIs on the web. This indispensable knowledge applies whether you use React, Vue, or any other frontend framework.

Responsive Design with Tailwind CSS

Finally, immerse yourself in Tailwind CSS, a modern CSS framework that empowers you to build beautiful and complex UIs using utility classes.

Hands-On Projects

In this course, you'll build a Trello clone (Laravello Project) and a Netlify-inspired blog application (BlogQL Project). Along the way, you will learn:

  • Creating a GraphQL API with Laravel and Lighthouse

  • Building a SPA application with Vue.js

  • Styling your pages with Tailwind CSS—the new hot utility-based CSS framework

This course provides a comprehensive and in-depth exploration of these topics, ensuring engaging learning through the projects you will build.

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 119 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 119 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (119)
#Lesson TitleDurationAccess
1
Introduction Demo
01:22
2
Source Code
01:12
3
Code Editor Suggestions
02:40
4
Vue Development Tools (Required!)
01:38
5
PHP & Database Setup Suggestions
06:03
6
Introduction to Vue.js Crash Course
04:24
7
Vue Instance Theory
05:37
8
Vue Instance Practical Example
15:18
9
Templating in Vue
11:38
10
Shorthands in Vue
04:29
11
Computed Properties
09:35
12
Watchers in Vue
11:04
13
CSS Class Binding
04:08
14
CSS Class Binding Array Syntax
03:01
15
Conditional Rendering (v-if Directive)
06:39
16
List Rendering (v-for Directive)
06:55
17
Form Input Binding
02:57
18
Event Handling
09:39
19
GraphQL Introduction
11:58
20
GraphQL Playground
05:52
21
More Complicated Query Example
07:47
22
Mutations
06:25
23
Composer 101
10:00
24
Installing Laravel and Dependencies
05:21
25
Setting Up Laravel
06:22
26
Laravel Mix & Tailwind CSS
06:53
27
Setting Up Tailwind CSS & Vue.js
08:44
28
Setting up a GraphQL Server in Laravel Part 1
08:00
29
Setting up a GraphQL Server in Laravel Part 2
14:58
30
Creating Eloquent Models & Migrations
07:22
31
Model Relations & Migration
17:04
32
Model Factories & Seeder
11:51
33
GraphQL Object Types, Queries and Directives
16:58
34
Model Relations N + 1 Problem
07:49
35
Using Laravel Telescope
08:06
36
Vue Router & Single File Components
11:24
37
Setting Up Routes in Vue Router
11:07
38
Vue Router History Mode
07:34
39
Vue Apollo Client Setup
05:26
40
Vue Apollo Smart Queries
08:51
41
Vue Apollo Loading State
05:29
42
Tailwind CSS Layout, Mobile First & Responsive Design
11:54
43
Vue Component Props, Router Links and More of Tailwind
15:30
44
Adding Avatar Faces
04:15
45
Post Page Markup & CSS Flexbox
12:55
46
Static & Reactive GraphQL Query Variables
14:02
47
List of Posts by Topic
13:22
48
List of Posts by Author
06:48
49
Vue Filters & Date Formatting
10:10
50
Fallback Route
05:52
51
404 Error Page Design
11:51
52
Setting Up Laravello Project
04:25
53
Eloquent Models & Relations & Migrations
17:19
54
GraphQL Types
06:06
55
Tailwind & Vue Setup
04:09
56
Board View Page
19:01
57
Extracting Board Into Vue Component
08:56
58
Seeding Data (Generating Fake Data)
16:18
59
Setup Vue Apollo & JavaScript Import Syntax
08:10
60
Querying For The Board (GraphQL Query)
06:56
61
Board Page - Querying Real Data
08:26
62
Extracting GraphQL Queries Into Separate Files
08:31
63
Adding Card GraphQL Mutation
07:01
64
GraphQL Mutation Input Type (Grouping Input)
05:50
65
GraphQL Mutation Inside Vue Component
04:09
66
Updating Query Cache After Mutation
16:01
67
Card Editor Component
07:11
68
Custom Vue Events (Parent/Child Communication)
11:29
69
More On Custom Vue Events
14:15
70
Group Hover & Transitions in Tailwind
10:23
71
Deleting Mutation
04:41
72
Deleting Card & Updating Query Cache Improvements
14:59
73
Deleting Card & Updating Query Cache Improvements Part 2
15:08
74
Your Custom Component v-model Support
12:28
75
@update Lighthouse Directive
08:14
76
Card Updating Editor
14:09
77
Setting Up Vue Router (In a Different Way Than Before)
09:02
78
Login Page Markup (A Lot of Tailwind)
16:19
79
Registration Page Markup
06:32
80
Authentication, Sessions, Cookies, Tokens & Laravel Sanctum
10:06
81
Setting Up Session Based Authentication with GraphQL
08:32
82
Session Based Authentication on Frontend (CSRF Token & Cookies)
05:41
83
Laravel Guards
06:39
84
Fixing GraphQL Playground
05:00
85
Non Directive Custom Login & Logout Mutations
09:19
86
Frontend Authentication
06:02
87
GraphQL Error Handling
09:28
88
Arrow Functions, Array Functions and Operators (Optional)
13:53
89
Login Error Handling
13:01
90
Registration GraphQL Mutation
08:47
91
Server Side Input Validation
17:09
92
Events & Listeners - Authenticate User After Registration
09:13
93
VueX Global State Management Explained
06:00
94
VueX Installation & Configuration
04:50
95
VueX State & Mutations
10:13
96
Tailwind CSS @apply
05:35
97
VueX Actions, Side Effects and Local Storage
09:47
98
Detecting Expired Sessions on Page Reload
13:31
99
Displaying Authenticated User Name (VueX mapState)
05:57
100
Logging Out - Resetting VueX State
04:54
101
Laravel Authorization Policies & @can Directive
10:31
102
Authorization on Frontend
08:10
103
Handling Expired Sessions on Failed Requests
09:08
104
Different Boards Have Different Colors
10:43
105
Authorization - Who Can Add a Card?
09:34
106
Frontend Authorization - Who Can Add a Card?
02:57
107
Dropdown Menu Component
10:16
108
Vue Component Slots
06:15
109
Vue Transitions - Animated Dropdown
05:38
110
User Boards Dropdown
10:35
111
User Boards Dropdown - Querying & Authorizing
09:58
112
Vue Clickaway Directive
04:37
113
Modal Box Component
11:08
114
Adding a New Board Modal Box
10:21
115
Board Color Component
13:13
116
Board Adding Mutation & Cache Update
14:51
117
Adding List Component
14:06
118
Adding List Mutation
08:09
119
There is Still More To Come!
01:51
Unlock unlimited learning

Get instant access to all 118 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription