Master Laravel with GraphQL, Vue.js and Tailwind

17h 48m 5s
English
Paid
July 29, 2024

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.

More

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

Join premium to watch
Go to premium
# Title Duration
1 Introduction 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

Similar courses to Master Laravel with GraphQL, Vue.js and Tailwind

Paginated Vue Components with Laravel
React Js A-Z With Laravel - For Beginner to Advanced Level
Vue 3 Composition API 3

Vue 3 Composition API 3vueschool.io

Duration 1 hour 59 minutes 20 seconds
Modern GraphQL with Node - Complete Developers Guide

Modern GraphQL with Node - Complete Developers Guideudemy

Duration 10 hours 41 minutes 32 seconds