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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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 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.

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.