Vue 3, Nuxt.js and Laravel: A Rapid Guide - Advanced

Learn to set up a Laravel project from install to running locally, naming it Laravel Ambassador, and verify the installation by accessing the running server in the browser.

Create a Laravel setup with Docker using a Dockerfile (PHP 7.4 on Alpine) and a docker-compose.yaml to run a MySQL database and the app, with composer install and port mapping.

Connect to the database by configuring the port and docker container, test the connection, then run migrations to create the user table with is_admin, using artisan migrate inside the container.

Add four authentication endpoints with the API slash admin prefix: register user, get the authenticated user, and log out.

Learn to set up user registration routes in a Laravel-based admin area by building an OAuth register function, mapping it to routes, and prefixing admin routes; test with Postman.

Register users by validating input with a custom register request, then hash the password, create the user, and return the user data while hiding the password.

Implement a login function using email and password, returning 401 on invalid credentials and issuing a JWT via Laravel Sanctum stored in an http-only cookie.

Retrieve the authenticated user through a get endpoint protected by sanctum middleware, using cookies and a jwt token to set authorization and return a json response.

Remove the authentication cookie with cookie forget JWT and return the updated cookie. Use a post request to the logout endpoint to verify the user becomes unauthenticated.

Create a custom scope admin middleware, apply it to routes, and check the authenticated user for the admin scope. Abort with unauthorized if missing.

Update user information and passwords via authorized requests by updating first name, last name, email, and password with matching confirmation, then verify login with new credentials.

Learn to create an ambassador controller and index method to fetch ambassadors by using a local scope that filters where is_admin equals zero in Laravel.

Develop a Laravel-backed database diagram for products, links, orders, and order_items, modeling a many-to-many relationship for ambassadors and exposing endpoints to list, create, update, and delete.

Create and migrate a Laravel products table with title, nullable description, image, and price, then generate a product model, API resource controller, and seed 30 products with a factory.

Create a link model and its tables to map a many-to-many link product relationship, including slug and user_id, then seed 30 links with random products and expose them at users/{id}/links.

Create and migrate the orders and order items tables with normalization and foreign keys, track product title, price, quantity, and revenue, and verify completed purchases using Stripe transaction IDs.

Learn to build Laravel json resources to tailor order data by concatenating names, calculating an admin revenue total from order items, and conditionally loading order items with resource collections.

Focus on the ambassador site and implement ambassador authentication endpoints using the same functions with slight changes for the ambassador context.

Define shared route logic for admin and ambassador paths using a common function and scope middleware, enabling dynamic admin or ambassador behavior based on the request path.

Compute the user revenue by summing orders and ambassador revenue, expose it through a user resource, and conditionally include revenue for ambassador requests while restricting admins.

Explore ambassador endpoints by building five points, distinguishing front end and back end endpoints with products in frontend or backend, and implement link creation, link stats, and ambassador earnings rankings.

Add front-end and back-end API methods to fetch all products, implement pagination for 15 records, test endpoints, fix issues, and plan redis caching for high-traffic ambassador access.

Set up Redis with Docker, configure a Laravel cache store, and cache product data with a 30-minute expiry to speed up requests and illustrate cache warming and pagination.

Implement Laravel pagination for products by using a collection to fetch the requested page and items per page (nine), and return data, total, and last page for the front end.

Implement product search by filtering the list using a search variable s, applying Laravel's contains to match titles and descriptions, and observe results across pages.

Implement price-based sorting for products by reading an input order ascending or descending and sorting on the backend using a price comparator, integrated with search.

Create a stats controller with an index method that authenticates the user, fetches their links, and maps each link to return its code, purchase count, revenue from completed orders.

Define and display ambassador rankings by revenue, retrieving ambassadors, computing revenue from completed orders, and sorting with Laravel collection methods, then optimize with Redis.

Construct a Redis sorted set with ambassadors scored by revenue, then fetch and return rankings in reverse order using rev range.

Fire a product created, updated, or deleted event on changes, then invalidate the cache with a listener wired in the event service provider to clear product cache keys.

Create links with a random six-character code tied to the logged-in user, then associate multiple products via link products using an API store endpoint.

Implement checkout endpoints to fetch link information for front end, create an order, and confirm the order. Redirect to Stripe for payment and return to a confirmation page after payment.

Fetch link data by code, load related user and products via belongs to many, and expose links and orders through resources for frontend use.

Create and validate a new order from a link code, build order items with product details and quantities, calculate ambassador revenue as 10 percent, and return the order with items.

Wrap order creation in a database transaction so orders and their items are saved atomically with begin transaction, commit, and rollback in Laravel, ensuring all-or-none persistence on error.

Install and configure stripe in a Laravel app, create checkout sessions with line items, use public and secret keys, and handle success and cancel URLs to confirm orders.

Learn how to implement order confirmation in a Vue 3, Nuxt.js and Laravel app by validating orders, updating status, returning success, and triggering emails to admin and ambassador.

Install and run MailHog to fake emails for development. Configure Laravel to use localhost:1025 for SMTP in Docker and send order completed emails to admin and ambassador using templates.

Create a new Vue project with Vue create, select TypeScript, and note beautify currently does not support Vue 3; install beautify and run the dev server on port 880.

Learn to bootstrap a Vue 3, Nuxt.js and Laravel template by integrating bootstrap, refactoring assets and views, and building navigation components (nav and menu) for a streamlined dashboard.

Add two routes for login and register, wrap content in a layout component with a router-view, import and configure login and register components, and ensure a root element in templates.

Implement a complete register function in Vue 3 with first name, last name, email, password and password confirm fields, posting to /admin/register with axios and redirecting to login on success.

Master the login flow in a Vue 3, Nuxt.js and Laravel app by handling email and password, configuring axios with base URL and with credentials, and managing cookies for authentication.

Retrieve the authenticated user via the endpoint in the layout, handle failures with a try-catch redirect to login, and display the user in the navigation by passing a user prop.

Logout uses a synchronous method with awaited post-logout actions and redirects to the login page. The router links ensure authentication redirects from the main page back to login.

Create a users view that lists ambassadors and admins by fetching ambassadors endpoint data, displaying first and last names with emails in a table inside a shared layout using router-view.

Build a vuetify-based user table in a vue 3 setup, add primary color view buttons linking to /users/{id}, and plan pagination for the table.

Learning to implement pagination in a Vue 3 app by wrapping items in a div, setting page and per-page values, and computing last page from data length.

Create a links component to fetch a user’s links from the backend endpoint users/{id}/links, display a table with link code, count, and revenue, and sum order totals to compute revenue.

Create and integrate a products view with routing, display product cards, and implement delete with confirmation by calling the backend via axios in a Vue 3, Nuxt.js and Laravel project.

Create a product form with fields for title, description, image, and a price with minimum zero. Submit to post the product and redirect to the products list after creation.

Reuse a single component to create or edit products, fetch data to prefill fields, and submit with post for create or put for update, using product id routing.

Create the order component, fetch orders via an async request, and display each order with its name and total in an expandable panel showing item titles, prices, and quantities.

Create and link a profile page with two forms for account information and password updates, prefilled from the backend via mounted data and updated through Axios requests.

Define Vuex state, mutations, and a set user action, then commit and dispatch to update the user. Access the user via computed properties in layout and profile.

Set up a Vue 3 app using the composition API, choose TypeScript or Vuex, disable lint, and run on port 4000, then remove assets, components, and views.

Create and integrate a template into the ambassador app by building a layout, and adding navigation and header components, plus login and register flows with axios base URL api/ambassador.

Show the authenticated user's name in navigation by wiring the Vuex store with the composition API and axios, then render login or user name accordingly.

Use Vue 3's ref in setup to create reactive title and description, reflecting changes in the ui; pull user data from the store to show revenue or login links.

Use a watcher on the user variable to update the header when authentication changes, implement an async logout with store dispatch, and use router links for login and register.

Learn to wire a profile page and product views in a Vue 3 app, configure router links, and conditionally show the header based on the current route.

Build a reactive profile form in Vue 3 using reactive data and ref inputs for first name, last name, email, and password, with store-driven prefill and axios submission.

Build a dynamic stats page that fetches generated links and displays them in a table. Use TypeScript types and env files to manage development and production checkout URLs.

Duplicate the stats component to create the rankings view and fetch ranking data. Render a table that shows name and revenue with a 1-based rank using a TypeScript model.

Create a front-end and back-end products view by fetching API data and rendering product cards (id, title, image, price) in a Vue 3, Nuxt.js and Laravel app.

Build a reactive filters system in the products component to perform searches and emit filter changes. Load results via Axios from the Laravel backend.

Filter products on the front end by title and description using a case-insensitive search, managing all products and filtered products, and updating results as the search value changes.

Explore backend sorting in a Vue 3, Nuxt.js and Laravel app by implementing price-based sorting and search filters in a products component, with reactive state, props, and backend integration.

Learn how to implement frontend sorting and filters for products by price in a Vue 3 frontend, using a comparator to handle ascending and descending orders.

Implement backend lazy loading in a Vue 3/Nuxt.js app by adding a load more button, merging new products with existing results, and resetting the page on search.

Learn to implement lazy loading of product lists with front end and back end coordination, using nine items per page, a dynamic more button, and integrated filtering and search.

Learn to implement product selection by toggling a selected IDs array, applying a selected class, and updating front-end styles with scoped CSS for add and remove actions.

Generate a checkout link by posting selected products to the backend, then display the generated url or login error messages. Auto-hide alerts after five seconds using a finally block.

Set up a checkout flow with Next.js and TypeScript, leveraging automatic routing and server-side rendering, while adding Bootstrap and Axios and running on port 3000 (port 5000 in config).

Replace the index view with the glass container template for checkout, remove unused elements, and update bootstrap while simplifying the form to city and zip.

Render a success and an error page by name without routing, then rename the index file to underscore to capture a code from the url and log it for use.

Explain server-side rendering with Vue and Nuxt.js, fetch data via Axios, configure a base URL, and use pre-rendered user data with context to improve Google indexing.

Explore dynamic product rendering in a Vue template: fetch and loop products, display title, description, and price, manage per-product quantities, and compute a live total with a computed property.

Bind form inputs with v-model (first name, last name, email, country, city, zip), assemble a products array with id and quantity, submit to the backend, and inspect the response.

Install the stripe module, copy the publishable key, and redirect to stripe checkout using a session ID, then confirm the order with the source from the query string.