Master Laravel with GraphQL, Vue.js and Tailwind

17h 48m 5s
English
Paid

Course description

Learn modern and most up to date development tools in your web developer toolchain. I'll let you see how modern PHP is these days. First off, the power of the Laravel framework takes PHP to a whole new level. You don't need to use Node.js to be a modern developer. Laravel will make you super productive.

Read more about the course

Next, Laravel has a history of preferring Vue.js for frontend development and building SPA apps (Single Page Applications). It's a framework of choice for many Laravel developers. That's why I have a Vue crash course for you included. Yes, you will learn Vue in this course.

When building a SPA, you have 2 main components - the API (Application Programming Interface) server and the API consumer. The API itself needs to follow some rules and guidelines. This is where GraphQL steps in. It's a spec on how to build robust APIs, made by Facebook and used by them widely.

The course will focus on how to build a GraphQL API server using Laravel PHP Framework, aided by the Lighthouse library. I think you will be surprised how easy it is to build a fully-fledged, robust API in hours.

The API consumer would be a Vue.js SPA application and we will cover everything - including Vue basics, Vue Components, Vue Router, VueX (global state management). Everything a seasoned Vue developer should know.

On top of that, you will learn how to use Apollo - an industry-standard library to consume GraphQL APIs on the web. The knowledge you'll gain will stay with you whatever you use, as Apollo works with both React, Vue, and any other frontend framework out there!

Finally, we will deep dive into Tailwind CSS - the modern CSS framework that lets you build beautiful and complicated UIs by relaying on utility classes.

If you're looking to learn how to build SPA with PHP, Laravel, Lighthouse, Vue.js, Apollo Client, Tailwind CSS and GraphQL you found the best place.

In this course you will 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

  • Creating a SPA application in Vue.js

  • Styling your page with utility based CSS framework Tailwind CSS (new hot kid on the block!)

This course is like nothing else you can find. We have all these topics covered in depth and the interesting projects you'll build will keep you entertained for weeks.

Watch Online

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

Watch Online Master Laravel with GraphQL, Vue.js and Tailwind

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

AI Chat Bot with Vue.js and GPT-4

AI Chat Bot with Vue.js and GPT-4

Sources: vueschool.io
AI is a powerful tool of the future. With Open AI's Chat Completions API (GPT-3.5 Turbo and GPT-4), adopting it in your applications is as easy as a REST reques
1 hour 46 minutes 30 seconds
Vue 3 and Nuxt.js: Different Ways of Creating Vue Apps

Vue 3 and Nuxt.js: Different Ways of Creating Vue Apps

Sources: udemy
Learn how to create an Admin App using Vue 3. Vue 3, Nuxt.js, Composition API, Options API, Vuex, Typescript, Docker, c3.js charts, Upload Images, Export CSV, S
4 hours 59 minutes 48 seconds
Vue.js + Laravel: CRUD with SPA

Vue.js + Laravel: CRUD with SPA

Sources: laraveldaily.com
Everyone wants a full-stack developer these days, with some JS framework and Laravel as API.
1 hour 50 minutes 29 seconds