Introduction

WooNuxt is the Next Generation Front-End for WooCommerce. A modern, headless eCommerce solution that combines the power of WooCommerce with the performance of Nuxt.js. Build blazing-fast, SEO-friendly online stores with complete control over your frontend while leveraging WooCommerce's robust backend.

What is WooNuxt?

WooNuxt provides a complete eCommerce frontend built with:

• Nuxt.js 4 - The latest version of the Vue.js framework
• WooCommerce - Industry-standard eCommerce platform
• GraphQL - Efficient data fetching via WPGraphQL & WooGraphQL
• Tailwind CSS - Utility-first styling framework
• Vue 3 - Reactive, component-based architecture

Key Features

WooNuxt comes with everything you need to build a modern online store:

• 🚀 Lightning Fast: Server-side rendering and optimized performance
• 🛒 Complete Cart & Checkout: Full shopping experience with secure payments
• 🔐 User Authentication: Customer accounts with JWT-based auth
• 💳 Stripe Integration: Built-in payment processing
• 🔍 Advanced Filtering: Dynamic product filters and search
• 📱 Responsive Design: Mobile-first, works on all devices
• 🎨 Fully Customizable: Built with Nuxt Layers for easy overrides
• ♿ Accessible: WCAG compliant components
• 🌍 i18n Ready: Multi-language support included
• 🖼️ Image Optimization: Automatic image optimization with Nuxt Image

Architecture

WooNuxt uses a Nuxt Layers architecture - similar to WordPress parent/child themes:

woonuxt/
├── woonuxt_base/ # Core functionality (parent)
└── app/ # Your customizations (child)

This means:

• ✅ Easy updates to core without losing customizations
• ✅ Override any component, page, or composable
• ✅ Clean separation of concerns
• ✅ Full control over your implementation

Quick Start

Get started in minutes:

# Clone the repository
git clone https://github.com/scottyzen/woonuxt.git
cd woonuxt

# Install dependencies
npm install
# or: yarn install
# or: pnpm install

# Create environment file
cp .env.example .env

# Edit .env with your WordPress URL
# GQL_HOST=https://yoursite.com/graphql

# Start development server
npm run dev
# or: yarn dev
# or: pnpm dev

Your store will be running at http://localhost:3000 🎉

Next Steps