Laravel 12 & Vue 3 fullstack Mastery: Build 2 portfolio apps

Set up your local Laravel development environment by installing PHP 8.0+, required extensions, and a database, then explore stacks such as Ballet, Valet, or Sail.

Set up a Windows local development environment with XAMPP, installing Apache and MySQL, configuring PHP, adding PHP to the system path, and verifying PHP from the command line.

Install composer on Windows, configure PHP path, and verify the setup. Install the Laravel installer and create a Laravel project using composer create-project or Laravel new.

Set up macOS local development with Homebrew, install PHP, MySQL, Composer, Laravel installer, and run a local server to bootstrap a Laravel project.

Set up valet on mac to run Laravel locally by installing Homebrew, Composer, and Valet, then park your workspace and access projects via a local domain suffix.

Learn to install Laravel Sail with Docker Desktop, create a Laravel project, configure MySQL and Redis, and run Sail-based artisan and composer commands.

Install essential tools for Laravel development: a browser, a code editor (Visual Studio Code), a terminal, database tools, NodeJS with NPM, Yarn, and Git.

Learn what an API is and how Laravel builds clean, secure APIs with route handling, eloquent ORM, middleware, and API resources. Practice authentication, validation, rate limiting, testing, and versioning.

Set up a Laravel project geared for API development, skipping blade and session logic, configure a MySQL database, run migrations, and start the built-in server to verify JSON endpoints.

Create a task model, its migration, and a factory in Laravel, using migrations as version control and factories to seed ten sample tasks with default values.

Learn how APIs communicate over http with methods like get, post, put, patch, and delete, and interpret common status codes to build predictable, well-debugged APIs.

Learn why API versioning matters in Laravel, preventing breaking changes by maintaining v1 endpoints while introducing v2, ensuring stability, clear communication, and scalable growth.

Create the first api endpoint by moving the task controller to app/http/controllers/api/v1, updating its namespace, returning all tasks in the index method, and defining a v1 resource route in api.php.

Explore how eloquent api resources act as a transformation layer to shape task data for json responses, exposing only id, name, and is_completed.

Develop automated tests for a Laravel API v1 tasks endpoint using phpunit, employing getjson, assert json structure, and refresh database, following the arrange-act-assert pattern and using model factories.

Test your api get endpoints manually with Postman, checking headers, status codes, and json responses from a running Laravel app, and compare with automated Phpunit tests for long-term stability.

Accept client data, validate it with a form request, and store it securely in the database. Build a secure post endpoint that returns the created task as json.

Update task names and toggle completion via put and patch endpoints, reuse validation logic for updates, and expose a dedicated invokable controller for the completion action with consistent json responses.

Implement delete functionality in a Laravel API using the destroy method to remove a task from the database, returning a 204 no content response in a RESTful delete operation.

Master automated testing of post, put, and delete endpoints for task management using PHPUnit, validating creation, updates, completion status, deletion, validation errors, and database state, with manual Postman testing next.

Test post, put, patch, and delete endpoints with Postman to create, update, mark completion, and delete tasks, and observe Laravel’s error handling and status codes.

Review how you built a complete, scalable RESTful API with Laravel, including routing, models, validation, API resources, automated testing with Phpunit and Postman, and preparing for Sanctum security.

Explore how Laravel Sanctum secures APIs and single-page apps with API token and session-based authentication using cookies and CSRF protection.

Learn to install and configure Laravel Sanctum for API token authentication using php artisan install api on Laravel 11+, or manual steps for Laravel 10 and below.

Create a Laravel Sanctum login endpoint that validates credentials with a form request, issues a personal access token, and returns the token and user in a json response.

Test the login endpoint with PHPUnit and Postman by creating automated tests that verify 200 responses with valid credentials and 422 errors for invalid input using Laravel Sanctum.

Create a user registration endpoint for the API, validate input with a register request, generate an API token, and return token plus user in a 201 response.

Test the register endpoint in a Laravel app using PHPUnit and Postman, verify 201 with a token and user, and 422 for invalid payloads, ensuring secure registration flow with Sanctum.

Implement a logout endpoint using Sanctum to revoke the current user's API token by deleting it from the personal access tokens table, protected by the auth:sanctum middleware.

Test the logout endpoint with phpunit by creating a user and token. Return 204, then verify protected routes yield 401 after logout using postman.

Test protected routes in a Laravel app using PHPUnit and Postman, ensuring guests receive 401 while authenticated users get 200 with user id and email via sanctum token.

Master spa authentication with sessions and cookies using Sanctum, enabling web-like login for Vue or React apps. Cookies handle sessions, CSRF is built-in, with the X-XSRF-TOKEN header for protected requests.

Set up Laravel Sanctum for spa authentication using sessions and cookies instead of tokens. Define stateful domains in env and enable cors with credentials to share cookies across origins.

Build a session-based spa login with Laravel Sanctum, using secure cookies instead of tokens, and learn web guard usage, validation, session fixation prevention, and CSRF testing with Postman.

Registering users with Laravel Sanctum enables a session-based authentication flow: create a register endpoint, hash passwords, auto-login via session, and protect with CSRF while routing through web.php.

Set up secure logout for a Laravel Sanctum SPA using session-based authentication, by logging out the web guard, invalidating the session, regenerating the CSRF token, and returning a 204 response.

Test protected routes using sanctum, distinguishing stateful and stateless requests, and add referrer or origin headers in Postman to simulate trusted front end domains for authenticated access.

Define a has many relationship from users to tasks and add a user_id to the tasks table. Implement two api versions, unauthenticated and sanctum-protected, and verify with phpunit tests.

Learn to create Vue.js projects with Vite-based build tools, choosing between minimal and maximal setups, installing dependencies, and running a dev server locally or in the cloud via Stackblitz.

Explore how a single file component in Vue.js combines script, template, and style, register components locally or globally, and resolve registration issues to render inputs.

Explains building a Vue.js tags input component by defining data with a tags array, rendering with interpolation, and using v-for, v-if, and v-bind to bind attributes and manage the DOM.

Master listening for and handling events in Vue.js with the v-on directive, including keydown and modifiers for enter and tab, and updating a tags array.

Explore two-way data binding in Vue.js using v-model to sync input values with data, including modifiers like trim, lazy, and number for precise control.

Implement an add new tag method to validate non-empty input on enter or tab. Update the tags array, clear the input, and support removing tags or the last tag.

Learn to use style and class bindings to dynamically style inputs based on the tags array, color duplicates red, and apply line-through with object or string notation.

learn to use a computed property in Vue.js to determine if a new tag exists before adding it, preventing duplicates, with caching and the ability to call it without parentheses.

Learn how watchers in Vue.js detect data changes and trigger actions, such as updating a tags array when a comma is typed, while handling duplicates and trimming punctuation with slice.

Style the tags input in Vue by adding a unique key for v-for, wrapping the list, and applying tag item and tag input classes; copy styles and test adding tags.

Explore component communication by passing data from parent to child using props, which are reactive and support type definitions, default values, and required checks, with attribute binding and kebab-case naming.

The lecture explains bidirectional component communication in Vue.js by emitting custom events from a child tag input to the parent, handling the change event to update tags, and ensuring reusability.

The Vue 3 composition API introduces a declarative, function-based approach that improves code organization, reusability, testability, readability, and TypeScript support over the options API.

Explore the composition API setup method, contrast with the options API, define a default variable, and return it to the template to resolve the render error.

Discover how to define reactive state in the Composition API with ref. Wrap values with ref, access .value in code, and rely on the template to handle the value automatically.

Explore how the reactive function creates a reactive data object and auto-updates components, contrasting it with ref for single values, demonstrated by swapping item name and price.

Use Deref to create a reactive reference to a single property and tariffs to build an object of reactive references for all properties, demonstrating updates to item.name and item.price.

Use the Vue composition API to define computed properties that derive a total from item price and quantity, automatically updating when dependencies change.

Learn to observe changes in reactive data and computed properties using watch and watchEffect in Vue, with examples of watching the total value, immediate option, and tracking reactive objects.

Explore how to use props in the Vue composition API, pass data from a parent to a child with a reactive items array, and prepare for emitting events.

Learn to emit events with the Vue 3 composition API, using the setup context emit method, the emits option, and a remove event to update a reactive list.

Explore Vue.js lifecycle hooks from creation to destruction, using the composition API to run code on mount in the DOM, respond to updates, and clean up on unmount.

Learn about composable functions in Vue 3 using the composition API to encapsulate logic and share it across components.

Learn to use the Vue 3 composition API script setup in single-file components, gaining succinct code, type-safe props and emits, and auto accessible template bindings for faster development.

Create a new Vue 3 project with npm init, scaffold the app, and start the dev server, building a navbar, tasks page, and footer to access the Laravel Rest API.

Set up axios in a Vue app to talk to a Laravel rest api. Create a reusable axios instance with a base url and a task api.

Fetch tasks from an api and render them in Vue using a reactive tasks array with ref, looping with v-for and passing each task to a task component via props.

Define two computed properties to separate uncompleted and completed tasks, display uncompleted tasks at the top and completed ones below, and apply dynamic classes and checkbox binding based on is_completed.

Learn to toggle completed tasks in a Laravel 12 and Vue 3 SPA by adding a centered Bootstrap button that shows or hides completed tasks using the show prop.

Build a new input component that emits an added event on enter, then the parent sends the task to the API and prepends the created task to the list.

create an inline editing feature for task items using a dedicated action component, with hover-to-edit, keyboard escape handling, double-click to edit, and autofocus focus directive.

Implement an inline edit that persists changes by calling the REST API. The lecture shows updating a task, emitting updates, and handling them through parent and child Vue components.

Implement a toggle to mark tasks as completed by updating the task state, emitting events, and calling a patch API to reflect changes in both task and completed lists.

Add a remove task feature by emitting a removed event from task actions and listening to it in the tasks component and tasks page component to splice the removed item.