Master Laravel with GraphQL, Vue.js and Tailwind
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
| # | 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
Build an e-store using Next.js, Figma, GraphQL, PayPal
Test-Driven Laravel
Roles and permissions in Laravel
PWA with Vue JS, Quasar & Firebase (with NodeJS & Express)
