Udemy

Building a Vue.js 3 and Laravel 11/12 E-commerce Website

Enroll Now
  • 140 Students
  • Updated 8/2025
4.8
(18 Ratings)
CTgoodjobs selects quality courses to enhance professionals' competitiveness. By purchasing courses through links on our site, we may receive an affiliate commission.

Course Information

Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
18 Hour(s) 14 Minute(s)
Language
English
Taught by
belasri imad
Rating
4.8
(18 Ratings)

Course Overview

Building a Vue.js 3 and Laravel 11/12 E-commerce Website

Build a dynamic e-commerce website with Laravel, Vue 3 Composition API & Pinia, styled with Bootstrap 5

Important Notice Before Enrolling:


This course is not for beginners. It is designed for students who already have a good understanding of Laravel and Vue, including how to work with routes, components, APIs, and basic project structures.


If you are new to Laravel or Vue, please do not enroll in this course. We strongly recommend completing beginner-level tutorials or courses before joining, to ensure you can follow along and get the most out of the content.


Welcome to Building a Vue.js 3 and Laravel 11/12 E-commerce Website. This comprehensive course guides intermediate developers through building a fully functional, modern e-commerce website using Vue.js for the front end and Laravel 11/12 for the back end.


Whether you're looking to add e-commerce functionality to a client project or start your online store, this course covers key aspects of web development, including user authentication, product management, shopping carts, payments, and order management.


By the end of the course, students will be able to create scalable, performant, and secure e-commerce websites that integrate modern JavaScript frameworks with robust backend technologies.


Technologies We Use

Laravel 11/12 – Powerful PHP framework for building modern web applications.

Vue.js 3 – Modern JavaScript framework for building reactive frontend components.

Bootstrap 5 – For responsive layouts and styling.

MySQL – Database for app data.

Visual Studio Code (VS Code) – Code editor we will use throughout the course.

XAMPP – Local development environment (Apache, MySQL, PHP).


The course is project-based, and students will build an e-commerce website from scratch and learn how to implement complex features like shopping carts, user authentication, and payment processing, and build RESTful APIs with Laravel 11/12.


They’ll gain hands-on experience integrating Laravel with Vue to create a seamless, dynamic front end and a solid, scalable back end.


This course is perfect for developers looking to enhance their full-stack skills and gain hands-on experience with two of the most popular technologies in modern web development today.


This course assumes a good knowledge of JavaScript, Vue.js, Laravel, and basic web development concepts.

Course Content

  • 10 section(s)
  • 55 lecture(s)
  • Section 1 Demo of the project
  • Section 2 Backend - Database
  • Section 3 Backend - Admin Dashboard
  • Section 4 Backend - Manage Categories
  • Section 5 Backend - Manage Brands
  • Section 6 Backend - Manage Colors
  • Section 7 Backend - Manage Sizes
  • Section 8 Backend - Manage Products
  • Section 9 Backend API - Manage Products
  • Section 10 Frontend - Products

What You’ll Learn

  • Create dynamic, responsive user interface for e-commerce website using Vue.js 3.
  • Explore Vue.js 3 component system, life cycle hooks, state management (via Pinia).
  • Build out key features like product listings, shopping carts, customer accounts, checkout, implement secure payment using stripe.
  • Explore advanced Laravel features such as implementing authentication, authorization, and robust API endpoints.
  • Build a real-world project with Vue frontend, Laravel API backend, and Blade for the admin dashboard — all without using Laravel starter kits.


Reviews

  • s
    sakda jatuporn
    3.5

    ในหน้า Product.vue //code error xxxxxxxxx //onMounted(() => productDetailsStore.fetchProduct(route.params.slug)) //use code watch( () => route.params.slug, // 1. สิ่งที่ต้องการเฝ้าดู (newSlug) => { // 2. ฟังก์ชันที่จะทำงานเมื่อ slug เปลี่ยน if (newSlug) { productDetailsStore .fetchProduct(newSlug) } }, { immediate: true } // 3. สั่งให้ทำงานทันทีเมื่อคอมโพเนนต์ถูกสร้าง (แทน onMounted) )

  • D
    Dyn Anthony JAO
    5.0

    This course is really worth it for a becoming Laravel-Vue full stack dev like me. Thank you very much Imad for your contribution. I totally recommend !

  • I
    Ilyas Elhaddaji
    5.0

    Very good course

  • A
    Alex Sanders
    5.0

    A good course, the lecturer captures many topics and explains them well, During the course I learned how to work with creating projects on laravel and writing APIs and interacting with it using Vue. The author has good English and he uses modern technologies for 2025, which contributes to learning

Start FollowingSee all

We use cookies to enhance your experience on our website. Please read and confirm your agreement to our Privacy Policy and Terms and Conditions before continue to browse our website.

Read and Agreed