Laravel Ecommerce Website with Vue.js Admin Panel

Learn the Laravel ecommerce database schema, covering users, products with slug and image data, orders, payments, carts, soft deletes, order details, and minimalistic reporting.

Generate Laravel models and empty migrations for products, countries, cart items, orders, and customers with php artisan make model -m, sequencing migrations to respect foreign-key references and build schema.

Learn to design comprehensive migrations for a Laravel ecommerce database, including products, orders, payments, customers, and addresses, with foreign keys, soft deletes, and running migrations via artisan.

Explore Talon CSS, a utility-first framework with tiny classes, and learn to set up a local project, build buttons, cards, and a responsive sidebar, and manage dist output.

Install talon css in a vue.js project by initializing postcss and talon config, creating src/index.css, importing it in main.js, and running npm run dev to apply styles.

Build a login form page in Vue by using a Tilewind UI sign-in template, installing Hero icons, Headless UI, and Tailwind CSS forms plugin, and updating HTML and body tags.

Guides building a guest layout in a Vue.js auth flow for a Laravel ecommerce site, using a guest layout component with props, slots, composition API, and emit-based form submission.

Build the admin panel navbar by adding a top header with a user avatar, a headless UI dropdown for profile and logout, and responsive layout tweaks.

Implement a top header sidebar toggle in a vue.js admin panel, using a ref to track open state and emitting a toggle sidebar event with a smooth negative margin-left transition.

Define a route guard that checks the user token before navigation, redirecting to login for unauthenticated users and guarding access with requires authentication and requires guest meta.

Create a custom 404 not found page by adding a catch-all route and a not found component, styled with tailwind, to redirect users to the app dashboard.

Implement the admin login and logout flow in the Laravel REST API, install Axios in Vue.js, and connect the admin panel to the Laravel API to finalize full authentication.

Define an is admin boolean on the users table, create an admin user via a dedicated seeder, and run migrate and seed to enable login.

Implement login and logout for admin users in a Laravel app using a custom auth controller and Sanctum tokens, with admin middleware to restrict access and API route configuration.

Install and configure an axios client in a Vue.js app, create axios.js with a base URL from vite env, and attach bearer tokens via request interceptors while handling 401 errors.

Learn how to implement a complete login and logout flow in a Vue.js admin panel, including form binding, loading states, error handling, Vuex actions and mutations, token storage, and navigation.

Show login form validation errors and a loading spinner with a disabled button; fetch current user data for the navbar in a Laravel ecommerce site with Vue.js admin panel.

Discover how to return a concise Laravel user resource, fetch it in Vue.js via a store, and display the current user's name in the navbar with a loader.

Implement products CRUD across the API and Vue.js admin panel, building Laravel API CRUD operations, then create a sortable, searchable, paginated products table with refactored components and animations.

Install and configure a slug-aware Laravel API for products, enabling soft deletes, factories, and seeds. Build a CRUD controller, resources, and request validation to manage products in the admin panel.

Create a reusable Vue.js spinner component in a core folder, integrate it into the app layout, and refactor the store to separate state for scalable product crud.

connects a vue.js products table to an api by managing per page and search as refs and fetching products via a store action to update data and pagination.

Implement a Vue.js pagination UI in a Laravel ecommerce admin panel using backend meta data for from-to, total, and per-page, with navigable links and active or disabled states.

Implement end-to-end sorting for the product table by adding back-end sort field and direction and a reusable Vue table header cell that emits sort events and displays arrows.

Refactor the product component into a dedicated products folder, create a product creation form, split into products table and product model, and verify sorting and pagination.

Learn to build an empty product modal in a Laravel ecommerce app using Vue.js, headless UI, and two-way binding with props and emits for controlled visibility.

Connect product create and update flows to the Laravel API by sending form data for images and fields, handling _method=put for updates, and ensuring proper storage linkage for images.

Add an actions header with a dropdown for each product, including delete and edit. Implement delete flow with confirmation, a backend API call, and page refresh to update product list.

Implement a complete product update workflow in a Laravel Vue.js admin panel, including editing via a modal, loading full product details, and handling image uploads.

Add animation to the products table in the Laravel Vue.js admin panel by defining fade in down keyframes, applying transform and opacity transitions, and staggering rows with index-based delays.

Move api controllers into the api folder to align with routing in a Laravel ecommerce app, refactor the auth and product controllers, and update routes/api.php with proper imports.

Integrate a Tailwind CSS and Alpine JS ecommerce theme into a Laravel site, then implement sign up, login, password reset, email templates, and product rendering on home and detail pages.

Implement a theme-designed login form in a laravel ecommerce app by integrating a blade login view, CSRF protection, a post login action, and real-time validation error display.

Create a password reset form by adapting an existing layout, wiring the route to password.email, using x-input, handling validation and session status, and ensuring csrf and login link work.

Create a signup form in a Laravel ecommerce app by tailoring the register blade, enabling CSRF protection, and aligning client-side alpine validation with server-side rules, including password confirmation.

Demonstrates wiring email sending on user registration with mailtrap SMTP, enabling must verify email and verified middleware, and customizing Laravel Breeze-style verification emails using inline styles and table layouts.

Publish vendor mail templates, customize the email layout and styles in Laravel Breeze, and tailor table-based verification and password reset emails for your Vue.js ecommerce app.

Create a slug-based product page by implementing a show function, wiring routes to slug, and building a view; align backend and API models to use slug for consistency.

Implement add to cart across product listing and detail pages using Laravel cart helper and controller; use alpine js and present a cart listing with subtotal and checkout.

Define api routes for cart management in a Laravel ecommerce app, enabling guest and verified users to add, view, remove, and update cart items via a cart group with middleware.

Create a guestOrVerified middleware by extending the email verified middleware, allowing guests to proceed and redirecting non-guests to verification. Register, alias, and apply it to routes.

Prepare a lightweight JavaScript layer for the Laravel cart by building a fetch-based HTTP helper, wiring add-to-cart, remove, and quantity updates to Alpine.js events and toast notifications.

Implement a dynamic Laravel cart page that shows the cart total and subtotal, updates when items are added, removed, or quantities change, with Alpine.js re-evaluating the total.

Learn to manage the cart across login and registration by moving cookies into database, merging carts on login, and enabling add to cart on the product page, subtotal, and checkout.

Build a customer profile page in a Laravel ecommerce app, enabling users to update personal details, manage addresses, and change passwords within a Vue.js admin panel.

Rename the customer table ID to user ID to create a 1-to-1 reference with the users table. Run a migration with PHP artisan and Doctrine Debug, then verify in phpMyAdmin.

Open the registered user controller and implement the store logic to create a customer in the customers table by exploding the full name into first and last name.

Learn how to migrate a countries states column to JSON in a Laravel ecommerce app, seed countries, and manage profile and addresses in a Vue.js admin panel.

Define eloquent relations from a customer to its user and addresses, including shipping and billing addresses via an address type enum.

Create a profile controller and a profile blade view in Laravel. Wire a /profile route protected by auth and verified middleware and update the navigation using the existing template.

Define and validate a profile request in Laravel, configure custom attributes, and implement a live profile form with shipping and billing addresses using Laravel and Alpine.js, with country state dynamics.

Define a dynamic customer details form with profile fields and billing and shipping addresses, including country and state selects that adapt to user input.

Add a post route for profile password update, create a password update request with rules, ensure the user is authorized, and hash the new password in the profile controller.

Implement Stripe checkout flow from the cart to Stripe, where customers enter card details and return to the site with the order paid, then view order listing and order details.

Learn how to integrate Stripe online payments into a Laravel e-commerce site, using test mode, publishable and secret keys, and a Stripe checkout session to handle one-time payments.

Implement a Stripe checkout flow in a Laravel ecommerce app by validating the session, retrieving the customer, and showing a success page while handling errors.

Create an order and associated payment in a Laravel ecommerce app with Stripe checkout, storing the session ID, and manage unpaid, pending, and paid statuses, updating on success.

Create a customer orders list page by routing to orders index, paginating the current user's orders, and rendering a view with order details and actions to view or pay.

Build the payment flow for unpaid orders by creating order items after the order, integrating Stripe session payments, and ensuring transactional integrity across orders, items, and payments.

Learn to configure stripe webhooks in a local environment with the stripe cli, create a webhook endpoint, disable csrf for it, and handle payment intents to keep orders in sync.

Create the order details page to show order number, date, status, total price, and items, with a pay button for unpaid orders and an option to view invoice.

Create a Vue.js admin panel orders component to display orders and statuses, with a details page to view items and update status; trigger emails on new orders and status changes.

Develop the admin orders view in a Laravel e-commerce site using Vue.js. Create orders route, orders table, and show order details via Vuex state for a unified customer orders experience.

Design and refine Laravel API resources for an ecommerce app, creating a customer address resource, adjusting relationships, and embedding order items with product details for a complete order view.

Build an order details page in a Laravel ecommerce website with a Vue.js admin panel, displaying order data, items, customer details, and updating status from paid to completed.

Learn to implement a toast notification for order status updates using a reusable toast component, Vue store state, and mutations to show and hide messages across the layout.