Deployment

WooNuxt supports three output modes. Choose the one that fits your hosting and catalog size.

Output Modes

Netlify

Static Generation (Recommended)

1. Connect your GitHub repo in the Netlify dashboard
2. Set Build command: npm run generate
3. Set Publish directory: .output/public
4. Add environment variables (see below)

Build Hook (Trigger Rebuild from WordPress)

When content changes in WooCommerce (new products, price updates), you can trigger a rebuild automatically:

1. In Netlify: Site settings > Build & deploy > Build hooks → create a hook
2. Copy the hook URL
3. In WordPress: Settings > WooNuxt > Build Hook → paste the URL
4. Click Trigger Rebuild to test

The rebuild button appears in the WooNuxt Settings admin page only when a Build Hook URL is configured.

Vercel

1. Import your GitHub repo in the Vercel dashboard
2. Framework preset: Nuxt.js (auto-detected)
3. Build command: npm run generate (SSG) or npm run build (SSR)
4. Add environment variables

Build Hook for Vercel

1. In Vercel: Project > Settings > Git > Deploy Hooks → create a hook
2. Copy the URL and paste it into Settings > WooNuxt > Build Hook in WordPress

Required Environment Variables

Set these in your hosting provider's environment variables panel:

# Required
GQL_HOST=https://yourwordpress.com/graphql
NUXT_IMAGE_DOMAINS=yourwordpress.com,cdn.yourwordpress.com

# Optional — overrides WooNuxt Settings plugin values
NUXT_PUBLIC_PRODUCTS_PER_PAGE=24
NUXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...
PRIMARY_COLOR=#7F54B2

# Optional — ISR cache lifetime (SSR/hybrid mode only)
CATALOG_ISR_TTL=3600

SSL for Local Development

If you need HTTPS locally (Stripe, PWA, OAuth providers):

# Install mkcert
brew install mkcert
mkcert -install

# Generate local certificate
mkcert localhost

# Run dev server with SSL
npm run dev:ssl

The dev:ssl script is pre-configured in package.json.