Note

This project was previously named nuxt3-commerce and has been renamed to nuxt-shopify-commerce following the upgrade to Nuxt 4 and the transition to a version-agnostic naming structure. All functionality, Shopify Storefront API integrations, and the codebase remain the same; only the repository name has changed.

Nuxt Shopify Commerce

A modern Nuxt-based Shopify storefront starter designed for building performant, customizable e-commerce experiences. It integrates the Shopify Storefront API (GraphQL) with Nuxt 4, TailwindCSS, shadcn, Headless UI, and a full component architecture suitable for production stores.

• 📖 Live Demo: https://nuxt-shopify-commerce.vercel.app/
• 👀 Play Online (GitHub): https://githubblitz.com/muneebbug/nuxt-shopify-commerce
• 🔧 CodeSandbox: https://codesandbox.io/s/github/muneebbug/nuxt-shopify-commerce
• ⚡ StackBlitz: https://stackblitz.com/github/muneebbug/nuxt-shopify-commerce

---

Features

• ⚡ Nuxt 4
• 🛠 Shopify Storefront API (GraphQL)
• 🎨 Tailwind CSS
• 🧩 Pinia Store Management
• 📦 VueUse
• 💅 Sass Support
• 🧩 Headless UI
• 🌙 Color Mode / Theme Manager
• 👁️ Auto Animate
• 🎛 ShadCN Nuxt
• 💾 Pinia Persisted State

---

Getting Started

1. Clone the Repository

git clone https://github.com/muneebbug/nuxt-shopify-commerce.git
cd nuxt-shopify-commerce

2. Install Dependencies

pnpm install

3. Run the Development Server

pnpm run dev

The app will be available at http://localhost:3000.

4. Production Build

pnpm run build

5. Generate Static Files (SSG)

pnpm run generate

6. Preview Production Build

pnpm run preview

Additional Script

pnpm run postinstall

---

Roadmap / To-Do

Core

• Nuxt 4 integration
• Shopify Storefront GraphQL client
• TailwindCSS
• Headless UI
• ShadCN Nuxt
• Pinia state management
• Theme switcher (light/dark/system)
• ESLint configuration
• Caching
• SEO Enhancements
• Accessibility (A11y)
• Internationalization (i18n)
• Testing

Ecommerce Features

• Predictive search
• Cart drawer
• Product details
• Collection list
• Product list
• Product card
• Infinite scroll for collections

Pages

• Home
• Collection
• Product
• Search
• Cart
• Wishlist

Account

• Login
• Register
• Reset Password
• Account overview
• Addresses
• Orders

Components

• Ecommerce

  • Hero
  • Collection list
  • Product list
  • Product card
  • Featured product
  • Product details

• General

  • Button
  • Form components
  • Drawers
  • Modal
  • Tabs

---

Contributing

Contributions are welcome. Fork the repository, create a feature branch, and submit a pull request following the established coding standards. Please include relevant tests where applicable.

---

License

This project is available under the MIT License. See the LICENSE file for details.

---

Author

• Muneeb Ur Rehman — https://github.com/muneebbug

For issues or feature requests, please use the GitHub Issues section.