woonuxt

![full](https://user-images.githubusercontent.com/5116925/218879668-f4c1f9fd-bef4-44b0-bc7f-e87d994aa3a1.png)

# Next Generation Front-End for WooCommerce

## Introduction

WooNuxt is a modern, fast, and SEO-friendly front-end for WooCommerce. Built on Nuxt 4 and WPGraphQL, it supports both fully static deployment and hybrid ISR rendering for large catalogs. It is fully customizable and can be extended with custom components and modules. You can see a live demo below.

The primary live demo is [demo.woonuxt.com](https://demo.woonuxt.com/).

| Other live examples | URL                            |
| ------------------- | ------------------------------ |
| Vercel              | https://woonuxt-v3.vercel.app/ |
| NuxtHub             | https://woo.nuxt.dev/          |
| Customized store    | https://myshop.woonuxt.com/    |

## Troubleshooting

You can find some common errors and how to fix them [here](https://woonuxt.com/faq#some-common-errors-to-troubleshoot)

**Symptom: HTML loads, but every `/_nuxt/*.js` and `/_nuxt/*.css` request returns 404.** The publish directory doesn't contain Nuxt's generated bundle — publish `.output/public` (not `dist`) with `npm run generate` as the build command. See [Static Deployment](#static-deployment) below.

## Get Started

- Install the [Settings for WooNuxt](https://wordpress.org/plugins/settings-for-woonuxt/) plugin from the WordPress plugin directory (**Plugins > Add New**, search for "Settings for WooNuxt").
- Activate it, then go to **Settings > WooNuxt** to install the required plugins and configure your storefront. This will install all the required plugins for WooNuxt, add some useful fields to the WPGraphQL schema, and automatically retrieve the WooCommerce payment gateway settings for [Stripe](https://wordpress.org/plugins/woocommerce-gateway-stripe/) and [PayPal](https://woo.com/document/paypal-standard/).
- Once the plugin is activated you are ready to deploy WooNuxt on whatever hosting you like or click one of the fast deploy buttons below.
- Once the plugin is activated, configure `GQL_HOST` and `NUXT_IMAGE_DOMAINS`. Check out the `.env.example` file for details.

[![button](https://user-images.githubusercontent.com/5116925/218880214-a16287a7-fd8c-4299-9e65-0871136f0771.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/scottyzen/woonuxt) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fscottyzen%2Fwoonuxt&repository-name=WooNuxt&env=GQL_HOST,NUXT_IMAGE_DOMAINS)

### Deploy on Deplo

Copy WooNuxt into your Git account and deploy the storefront on your own [Deplo](https://deplo.build) instance:

[![Deploy on Deplo](https://deplo.build/button.svg)](https://deplo.build/deploy?repo=https://github.com/scottyzen/woonuxt)

Requires Deplo 0.8.2 or later. Complete the WordPress setup above and set `GQL_HOST` and `NUXT_IMAGE_DOMAINS` in Deplo before deploying. See [`.env.example`](./.env.example) for the storefront