CF

Master Laravel with GraphQL, Vue.js and Tailwind

17h 48m 5s
English
Paid

Master Laravel with GraphQL, Vue.js and Tailwind is a 119-lesson 17 hours 48 minutes self-paced course by Udemy. Learn modern and most up-to-date development tools to enhance your web developer toolchain.

Course facts

Lessons
119
Duration
17 hours 48 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Premium

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.

Who teaches Master Laravel with GraphQL, Vue.js and Tailwind? 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.

What lessons are included in Master Laravel with GraphQL, Vue.js and Tailwind?

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

What courses are similar to Master Laravel with GraphQL, Vue.js and Tailwind?

Frequently asked questions

What are the prerequisites for enrolling in this course?
The course assumes familiarity with basic web development concepts and a working knowledge of PHP, as you will be using Laravel extensively. Familiarity with JavaScript and basic front-end development is also recommended since Vue.js is a key component of the course. Prior experience with GraphQL is not required as the course includes an introduction to GraphQL and its implementation with Laravel.
What projects will I build during this course?
Throughout the course, you will build a Single Page Application (SPA) using Vue.js as the frontend framework and a GraphQL API server using Laravel. The course guides you through setting up a project called Laravello, where you will create features such as a post page with markup and CSS Flexbox, and implement dynamic functionalities using Vue Router, Vue Components, and Apollo for consuming GraphQL APIs.
Who is the target audience for this course?
This course is designed for web developers interested in enhancing their development toolchain with modern frameworks and methodologies. It is particularly suitable for those who want to deepen their understanding of Laravel and Vue.js, as well as those looking to integrate GraphQL APIs into their web applications. Developers aiming to move beyond traditional REST APIs and explore GraphQL will find this course valuable.
How does the depth and scope of this course compare to others?
The course provides a thorough exploration of integrating GraphQL with Laravel and Vue.js, focusing on building a fully functional SPA. Unlike other courses that might address these topics separately, this course offers a cohesive approach by combining them into a single curriculum. It includes practical examples, such as setting up GraphQL servers and using Vue Apollo, which are covered in detail along with necessary tooling like Tailwind CSS for styling.
What specific tools and platforms are taught in this course?
Key tools and platforms taught in the course include the Laravel PHP framework for server-side development, Vue.js for building the frontend of SPAs, and GraphQL for API development. The course also covers the use of Lighthouse for GraphQL server setup, the Vue Apollo client for API consumption, and Tailwind CSS for modern styling techniques. Composer is introduced for managing PHP dependencies.
What topics are not covered in the course?
The course does not cover Node.js or traditional REST API development, as the focus is on using GraphQL with Laravel. While there are comprehensive sections on Vue.js and GraphQL, the course does not extend into other JavaScript frameworks beyond Vue or delve into mobile app development. Additionally, advanced server-side topics like microservices architecture are not part of the curriculum.
How can the skills learned in this course be applied to other areas or careers?
Skills acquired from this course are transferable to various web development roles, especially those requiring expertise in modern JavaScript frameworks and API development. Understanding GraphQL can be advantageous for backend developers interested in API design, while knowledge of Vue.js and Laravel enhances frontend and full-stack development capabilities. These skills are relevant across industries seeking to build scalable and efficient web applications.