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

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

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

Related courses

  • Testing Laravel with PHPUnit thumbnail

    Testing Laravel with PHPUnit

    Sources: Spatie
    In this course, Brent will help you get started testing a Laravel application. He'll cover how to get started, how to test every functionality in Laravel, and g
    2 hours 42 minutes 59 seconds 5 / 5
  • React and Laravel: Breaking a Monolith to Microservices thumbnail

    React and Laravel: Breaking a Monolith to Microservices

    Sources: Udemy
    Transform monolithic apps into scalable microservices using React, Laravel, and Docker. Master API development, authentication, and more in this comprehensive
    15 hours 7 minutes 45 seconds
  • GraphQL for beginners with JavaScript thumbnail

    GraphQL for beginners with JavaScript

    Sources: Udemy
    Obviously, you should use the right tool for the job, right? ... but often, what was the “right” tool, becomes the inferior tool, and frequently you
    5 hours 35 minutes 31 seconds 5 / 5