Nuxt 3 Ecommerce site with WooCommerce backend
Table Of Contents (TOC)
Features
- Nuxt 3 for server-side rendering and optimal performance
- Vue 3 and Composition API with syntax
- Tailwind CSS for responsive and customizable design
- Nuxt Apollo for efficient GraphQL integration
- Pinia with pinia-plugin-persistedstate for robust state management
- Support for simple and variable WooCommerce products
- Stock quantity management for all product types
- CSS animations and transitions for enhanced user experience
- Form handling and validation with Formkit, Vee Validate, and Yup
- Streamlined checkout process
- Animated mobile menu for improved mobile usability
- Swiper integration for dynamic Hero section
- Basic Playwright tests integrated with Github Actions
Installation
- Install and activate the following required plugins, in your WordPress plugin directory:
-
woocommerce Ecommerce for WordPress.
-
wp-graphql Exposes GraphQL for WordPress.
-
wp-graphql-woocommerce Adds WooCommerce functionality to a WPGraphQL schema. Currently only confirmed to be working with version 0.62 of this plugin.
-
wp-algolia-woo-indexer WordPress plugin coded by me. Sends WooCommerce products to Algolia. Required for search to work.
Optional plugin:
-
headless-wordpress Disables the frontend so only the backend is accessible.
-
wp-graphql-cors Ensures that CORS works correctly. Remember to add the domain to the store under
Extend "Access-Control-Allow-Origin” header
The current release has been tested and is confirmed working with the following plugin versions:
- WordPress version 6.6.2
- WooCommerce version 7.4.0
- WP GraphQL version 1.13.8
- WooGraphQL version 0.12.0
- WPGraphQL CORS version 2.1
-
Make sure WooCommerce has some products already or import some sample products
The WooCommerce sample products CSV file is available at wp-content/plugins/woocommerce/sample-data/sample_products.csv
or Sample products
Import the products at WP Dashboard > Tools > Import > WooCommerce products(CSV)
-
Clone or fork the repo and modify .env
with the URL to the GraphQL endpoint (or set environment variables in the configuration UI for your deployment solution)
-
Start the server with npm run dev
-
Enable COD (Cash On Demand) payment method in WooCommerce
-
Add a product to the cart
-
Proceed to checkout
-
Fill in your details and place the order
Troubleshooting
I am getting a cart undefined error or other GraphQL errors
Check that you are using the 0.12.0 version of the wp-graphql-woocommerce plugin
I encounter a bug with add to cart
Try logging off wp-admin and try again.
The products page isn't loading
Check the attributes of the products. Right now the application requires Size and Color.