Quick Start Guide

Follow these steps to get WooNuxt running quickly. This is the condensed version - see detailed sections for more information.

Step 1: Prerequisites Checklist

Make sure you have everything ready:

Step 2: Install WooNuxt Settings Plugin

This plugin is essential - it installs all dependencies automatically:

1. Download from GitHub Releases
2. Upload to Plugins > Add New > Upload Plugin
3. Activate the plugin
4. Go to Settings > WooNuxt
5. Click "Install Now" for each required plugin
6. Wait for all plugins to show "✅ Installed"

Required plugins that will be installed:

• WPGraphQL 2.12.0+
• WooGraphQL 1.0.2+
• Headless Login for WPGraphQL 0.4.4+

Step 3: Configure WooNuxt Settings

In Settings > WooNuxt, configure these key settings:

• Logo URL - Upload a logo to Media Library and paste the URL
• Primary Color - Set your brand color (default: #7F54B2)
• Front End URL - Set to http://localhost:3000 for development
• Products Per Page - Set to 24 (or your preference)

Global Attributes - Add at least one product attribute for filtering:

1. Click Add New under Global Attributes
2. Select an attribute (Color, Size, etc.)
3. Configure display options
4. Save changes

Step 4: Test WordPress GraphQL

Verify your setup works:

1. Go to GraphQL > GraphiQL IDE
2. Run this test query:

query TestSetup {
  products(first: 5) {
    nodes {
      id
      name
      ... on SimpleProduct {
        price
      }
    }
  }
  woonuxtSettings {
    primary_color
    logo
  }
}

Step 5: Clone & Configure Frontend

# Clone 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:

GQL_HOST=https://yoursite.com/graphql
APP_HOST=http://localhost:3000
NUXT_IMAGE_DOMAINS=yoursite.com

Step 6: Start Development Server

# Using npm
npm run dev

# Or using yarn
yarn dev

# Or using pnpm
pnpm dev

Open http://localhost:3000 in your browser.

Step 7: Verify Everything Works

Test these features:

Common Issues

No products showing? Ensure products are published in WooCommerce and the WooNuxt Settings plugin is configured.

Filters not working? Add product attributes in WooCommerce and configure them in Settings > WooNuxt > Global Attributes.

Images not loading? Add your WordPress domain to .env:

NUXT_IMAGE_DOMAINS=yoursite.com

What's Next?

Now that you're running, customize your store: