DEV Community

Olivier Belaud
Olivier Belaud

Posted on

1

Introduction to Building a Nuxt 3 Storefront with Medusa 2

Introduction

In this series, we'll explore how to create a modern e-commerce storefront using Nuxt 3/4 and Medusa 2. While there are many resources for building storefronts with React ecosystems like Next.js or Gatsby, there's a significant gap when it comes to using Nuxt and Vue with a headless e-commerce backend like Medusa. This series aims to fill that void by providing comprehensive guidance on building a Nuxt-based e-commerce site powered by Medusa.

Why Focus on Medusa ?

Medusa, especially with the release of version 2, represents the future of e-commerce within the Node.js and TypeScript ecosystem. It's a highly flexible and technologically advanced platform, providing the freedom to build custom solutions without the limitations of proprietary systems like Shopify or Prestashop. With Medusa, you have full control over your e-commerce stack, benefiting from an open-source community that continuously evolves to tackle new challenges.

Why Nuxt?

Nuxt offers a modern framework that provides a modular structure, server-side rendering, and static site generation, making it ideal for building performant e-commerce sites. By using Nuxt 3/4 with Medusa, we're leveraging cutting-edge technology to create a flexible and maintainable storefront solution.

Objective of This Tutorial

The goal of this series is to guide you through creating a Nuxt-based storefront that mirrors the functionality of the Medusa Next.js starter template (Github). We'll provide comprehensive instructions on setting up your environment, connecting to Medusa, and utilizing the latest features of Nuxt 3/4 and Nuxt UI 3.

Medusa Next.js starter template

Playwright CLI Flags Tutorial

5 Playwright CLI Flags That Will Transform Your Testing Workflow

  • --last-failed: Zero in on just the tests that failed in your previous run
  • --only-changed: Test only the spec files you've modified in git
  • --repeat-each: Run tests multiple times to catch flaky behavior before it reaches production
  • --forbid-only: Prevent accidental test.only commits from breaking your CI pipeline
  • --ui --headed --workers 1: Debug visually with browser windows and sequential test execution

Learn how these powerful command-line options can save you time, strengthen your test suite, and streamline your Playwright testing experience. Practical examples included!

Watch Video 📹ī¸

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

If you found this post useful, please drop a ❤ī¸ or leave a kind comment!

Okay