Laravel 11, Vue 3 & Inertia (2024) – Build APIs and SPAs

Course Curriculum

Chapter 1: Introduction

Lecture 1: Welcome to the course

Chapter 2: Setting up our Laravel Development Environment

Lecture 1: Section Introduction (DON'T SKIP unless you have dev environment setup)

Lecture 2: Setting up Local Development on Windows – Installing XAMPP

Lecture 3: Setting up Local Development on Windows – Install Composer & Laravel Installer

Lecture 4: Setting up Local Development on MacOs (v12+) – Installing Herd

Lecture 5: Setting up Local Development on Mac – Install Homebrew, PHP, MySQL and Composer

Lecture 6: Setting up Local Development on Mac – Installing Valet

Lecture 7: Alternative Local Development Environment – Installing Laravel Sail

Lecture 8: Other Tools to install

Lecture 9: REST Client Tools to install

Lecture 10: My Visual Studio Code Editor extensions & settings

Chapter 3: PART 1: Build and Deploy API with Laravel 11, SPA with Vue 3, Vue router & Pinia

Lecture 1: Introduction to Part 1

Chapter 4: Getting started with Laravel (Build REST API)

Lecture 1: Creating new Laravel project

Lecture 2: Model, Migration, Factories, and Seeders

Lecture 3: Creating our first API Endpoint

Lecture 4: Working with Eloquent API Resource

Lecture 5: Validating and Inserting Data

Lecture 6: Updating Data

Lecture 7: Deleting Data

Chapter 5: API Authentication with Sanctum

Lecture 1: Setting up Sanctum

Lecture 2: SPA Authentication – Signing users in

Lecture 3: SPA Authentication – Signing users out

Lecture 4: SPA Authentication – Registering users

Lecture 5: Protecting routes

Lecture 6: Using Sanctum for API Token Authentication

Lecture 7: Linking users to other resources

Chapter 6: Authorization

Lecture 1: Creating our first Policy

Lecture 2: Authorizing actions

Chapter 7: Getting started with Vue 3

Lecture 1: Setup Vue 3 project

Lecture 2: Single File Component

Lecture 3: Directives and Attribute bindings

Lecture 4: Handling events

Lecture 5: Two way bindings with v-model

Lecture 6: Working with methods

Lecture 7: Style and Class bindings

Lecture 8: Computed Properties

Lecture 9: Watchers

Lecture 10: Styling the Tags Input component

Lecture 11: Component Communication with Props

Lecture 12: Component Communication with emitting events

Chapter 8: Vue 3 Composition API Fundamental

Lecture 1: Composition API Introduction

Lecture 2: Composition API Setup

Lecture 3: Creating reactive reference with the ref function

Lecture 4: Creating reactive object with the reactive function

Lecture 5: Creating reactive reference from reactive object

Lecture 6: Computed properties

Lecture 7: Working with watch and watchEffect

Lecture 8: Working with props

Lecture 9: Emitting events

Lecture 10: Lifecycle hooks

Lecture 11: Composable functions

Lecture 12: Using Composition API script setup

Chapter 9: Consuming REST API in our Vue.js 3 Application

Lecture 1: Creating new Vue.js 3 project

Lecture 2: Setting up Axios for HTTP call

Lecture 3: Displaying data in Vue js components

Lecture 4: Using computed properties for displaying completed and uncompleted tasks

Lecture 5: Toggling the completed tasks

Lecture 6: Adding new component to insert data

Lecture 7: Creating an Inline editing feature

Lecture 8: Adding new feature in our Vue js app to update data

Lecture 9: Populating input element when editing data

Lecture 10: Adding new feature to mark the task as completed

Lecture 11: Adding new feature to remove tasks

Chapter 10: State Management With Pinia

Lecture 1: Setting up Pinia

Lecture 2: Defining Stores

Lecture 3: Defining Getters

Lecture 4: Defining Actions

Lecture 5: Refactoring our Stores (Using Setup stores)

Lecture 6: Refactoring our components

Chapter 11: Single Page Application with Vue Router

Lecture 1: Setting up Vue Router

Lecture 2: Route Navigation

Lecture 3: Programmatic navigations

Lecture 4: Styling the current active link

Lecture 5: Handling 404 error

Lecture 6: Navigation Guards

Lecture 7: Route meta fields

Lecture 8: Transitions

Chapter 12: Implementing Authentication in Vue 3 Application

Lecture 1: Storing Axios Base URL in environment variables

Lecture 2: Setting up Client Authentication

Lecture 3: Creating a Pinia store for authentication

Lecture 4: Building Login form

Lecture 5: Authentication redirection

Lecture 6: Logging users out

Lecture 7: Replacing the login button with a Dropdown

Lecture 8: Handling validation error messages

Lecture 9: Adding a Register form

Chapter 13: Deploying Laravel app

Lecture 1: Setting up our Server