Vue 3 and Laravel: A Practical Guide with Docker

Install Laravel 8 by installing composer, run four commands in your terminal, create Laravel admin project, and start php artisan serve to run the server and verify in the browser.

Connect Laravel with my school using Docker by creating a Dockerfile and docker-compose. Install composer, run artisan serve, and map ports and volumes to a MySQL database for local development.

Connect to the database inside the docker container, run migrations to create the user table with first name, last name, email, password, and timestamps, and verify by inspecting the tables.

Create your first Laravel API route by building a hello endpoint in an OAuth controller, test it with Postman, and align Docker Compose for PHP 7.4.

Create a Laravel register endpoint that accepts post request data, hashes passwords, uses fillable fields, hides sensitive data, and returns a 201 response on success.

Create a custom register request to enforce validation, defining authorize and rules for required first name, last name, email, password, and password confirm, then use it in the controller.

Install Laravel Sanctum to manage API tokens for login, run migrations to create the personal access tokens table, and update the user model to have API tokens.

Explain a Laravel login using email and password, issue a JWT token on success, and return unauthorized with invalid credentials on failure; then use the token to retrieve the authenticated user.

Leverage JWT to fetch the authenticated user in a Vue 3 and Laravel API by adding Laravel Sanctum middleware, securing routes with bearer token, and returning user data.

Explore implementing jwt authentication with HttpOnly cookies in a Vue 3 and Laravel app, including setting a JWT cookie, enabling cors credentials, and middleware extraction.

Install the ide helper package to fix class not exist errors, generate ide helpers with artisan, and reveal highlighted cookie and model functions with in-IDE comments.

Create a user controller with five methods (index, store, show, update, destroy), map them to API resource routes in Laravel, and review the generated routes.

Manage users in a Vue 3 and Laravel guide: list users, create with first name, last name, email, and hashed password, then update via put or delete via destroy.

Demonstrate Laravel pagination by querying users with per-page and page parameters, showing 15 users per page. Seed data with a user factory and database seeders in Docker.

Add and validate user create, update, and info update requests in Laravel, enforce email validation, authorize changes, refresh the logged-in user data, and implement update password via API routes.

Create migrations for roles and permissions, generate models and controllers, expose api routes, implement index, show, update, destroy, and connect users to one role with multiple permissions.

Create a new migration to add an unsigned big integer role_id to the users table, enforce a foreign key to roles, and refresh the database with artisan migrate fresh.

Explore implementing one-to-many relations between roles and users in Laravel, including seeding data with factories, defining belongsTo and hasMany, and retrieving users with their roles via the api.

leverage whenLoaded in Laravel to conditionally load related data, using with and load on user resources and role collections to tailor the user list and detail views.

Establish a many-to-many relationship between roles and permissions in Laravel by creating a pivot table via migration, defining foreign keys, and configuring belongsToMany relationships and resource loading.

Learn how to manage role permissions in Laravel by attaching, detaching, and syncing permissions for admin, editor, and viewer roles, with seeds and role updates.

Create a product model using a migration and fields title, description, image, price; implement a controller, resource, and API routes; seed with a factory and demonstrate create, update, delete operations.

Implement image upload in Laravel by creating an image controller with an upload method, saving files to public storage, returning the URL, and validating image types in a dedicated request.

Learn to design a Laravel-backed order system by creating orders and order_items migrations, defining relationships, and building index and show endpoints with API resources and eager loading.

Explore creating nested factories in Laravel, seed 30 orders, and attach 1–5 order items per order using faker data for names, emails, and timestamps, linking items to their orders.

Learn to expose computed properties in Laravel models using attributes, including a name attribute and a total attribute that sums order item price times quantity for the order.

Create a csv export feature to download orders, building headers for product title, price, and quantity, and loop through orders and order items to write and download the file.

Build a chart data query by joining orders and order items, grouping by date, and summing price times quantity for each day in Laravel.

Define gates in the service provider to control view and edit abilities, checking if a user has access via role permissions. Use authorization in the user controller to protect routes.

Install vue cli globally, create a new view admin project with TypeScript, Router, and Vue, select Vue 3, use defaults, then run the dev server to open in the browser.

Master creating reusable Vue 3 components by building a nav and a menu with template, script, and style, importing them, and using them as custom tags to simplify the view.

Explore how to set up Vue 3 routing for a Laravel app by creating pages, importing dashboard and users components, configuring router-view and router-link navigation, and enabling active route highlighting.

Create a register page using Vue 3's setup function and ref to bind a reactive count to an input with v-model, enabling automatic template rendering.

Submit a form in Vue 3 using the composition API with ref-bound inputs for first name, last name, email, password, and password confirm; prevent default and log values.

Learn to register users in a Vue 3 and Laravel setup using Axios, posting data to a local /register endpoint, and handling responses with async/await and destructured data.

Create a login component and add it to the router, then on successful registration import useRouter, obtain the router, and redirect to login with router.push, clearing registration data.

Build a login form in Vue 3 using reactive to group email and password, with a submit handler that logs values and copies styles from the register.

Learn a Vue 3 login flow with a Laravel backend, posting credentials to the API and using with credentials to obtain cookies, then redirect to dashboard and fetch authenticated user.

Fetch the authenticated user in a Vue 3 app with axios after the email renders, then display the user's full name in the navigation profile link using the JWT data.

Implement logout by calling the backend logout via a post request, then redirect to the login page; wrap user retrieval in try/catch and redirect unauthenticated users to login, securing routes.

Organize the users feature by creating a dedicated folder and components, switch to TypeScript, fetch users with axios in Vue 3, and render id, name, email, and role.

Add pagination in a Vue 3 and Laravel app by wiring next and previous actions, tracking page with a ref, loading users asynchronously, and enforcing first and last page boundaries.

In Vue 3, use a watcher to observe the page variable and automatically call a function to load data when the page changes, enabling next and prev pagination.

Add delete functionality for the users table with a confirmation prompt, passing the user id to a delete function, and update both front-end state and back-end accordingly.

Create a user creation flow with a dedicated component, a /users/create route, a form for first name, last name, email, and role, and axios submission.

Update users in a Vue 3 and Laravel app by converting the create user form into a user edit form, loading existing data, and submitting changes via the API.

Create and manage roles in a Vue 3 and Laravel project by building a roles component and table, fetching roles with axios, and enabling delete and edit actions.

Create a roles form in a Vue 3 app, fetch permissions via API, present them as checkboxes, and submit the new role with selected permission IDs to the Laravel backend.

Update roles by editing permissions in a Vue 3 and Laravel app, fetching roles with axios, mapping permission ids, and submitting updates via a put request.

Design a reusable paginator component in Vue 3, move navigation logic into the component, pass last page as a prop, and emit pageChanged on navigation.

Learn to build a product creation form in a Vue 3 and Laravel app, using reactive data, a title, description, image, and price, with axios post and route navigation.

Learn to implement an image upload feature in a product form using a reusable image upload component, a hidden file input, form data, and server-side image URL handling.

Update a product by fetching the existing product data, pre-filling the form, and sending a put request to update the title, description, image, and price.

Build an orders feature with a Vue 3 view that lists orders in a table, fetches data via axios, supports pagination, and shows order items with animations when viewing.

Demonstrates adding toggleable panels in Vue 3, using a selected order id to show or hide content with max-height transitions, css classes, and overflow hidden for smooth animations.

Create an export feature to download orders as a CSV file by building a blob, configuring a download link, and triggering the download via a click.

Showcase building a time-series bar chart in a Vue 3 dashboard using c3 with TypeScript, fetching data via axios and mapping dates to sales columns.

Build a profile page in a Vue 3 and Laravel app with forms to update first name, last name, and email, plus separate password form using reactive data and axios.

Learn to manage a user with a Vuex store by initializing state, defining actions and mutations, and committing updates that reflect across components.

Explore how to organize Vuex state with models and namespaces, creating a user model in TypeScript, and using a namespace to clearly separate user state, mutations, and actions.

Document your Laravel API with OpenAPI using Swagger; install the package, add annotations to controllers, configure version, title, description, and contact, then generate and view the API docs at localhost:8000/api/documentation.

Test the user api and resolve unauthenticated errors by generating a bearer token with a Laravel artisan command. Use Swagger to authorize and access all users.

Add a query parameter page (integer) to enable pagination of users. Use a show method path parameter id, make it required and lowercase, and test with a token.

Explore building and documenting REST endpoints with OpenAPI for user creation, updating, and deletion, including request bodies, schemas, parameters, and validation tokens.

Tag api endpoints to separate user profile updates from core user actions, and document authenticated calls, parameters, and password and user info update workflows.