{"id":14964280,"url":"https://github.com/w3bdesign/nuxtjs-woocommerce","last_synced_at":"2025-10-08T21:01:42.180Z","repository":{"id":36971080,"uuid":"310944509","full_name":"w3bdesign/nuxtjs-woocommerce","owner":"w3bdesign","description":"⚡️ Nuxt 3 and Vue 3 headless eCommerce site with WooCommerce backend and Algolia search","archived":false,"fork":false,"pushed_at":"2025-04-09T21:20:18.000Z","size":29012,"stargazers_count":214,"open_issues_count":16,"forks_count":48,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-09T21:20:31.835Z","etag":null,"topics":["algolia","apollo","graphql","javascript","nuxt","nuxt-3","nuxtjs","tailwindcss","vue","woocommerce","wordpress","wp-graphql"],"latest_commit_sha":null,"homepage":"https://nuxt.dfweb.no","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/w3bdesign.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-07T22:39:24.000Z","updated_at":"2025-04-09T21:18:42.000Z","dependencies_parsed_at":"2024-02-14T16:27:05.191Z","dependency_job_id":"d29c240c-a75f-4f9e-a614-b06163c32f21","html_url":"https://github.com/w3bdesign/nuxtjs-woocommerce","commit_stats":{"total_commits":1658,"total_committers":10,"mean_commits":165.8,"dds":0.4252110977080821,"last_synced_commit":"fdabd9e5232c40bc545b64127b999471993f4682"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3bdesign%2Fnuxtjs-woocommerce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3bdesign%2Fnuxtjs-woocommerce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3bdesign%2Fnuxtjs-woocommerce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3bdesign%2Fnuxtjs-woocommerce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/w3bdesign","download_url":"https://codeload.github.com/w3bdesign/nuxtjs-woocommerce/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248617270,"owners_count":21134190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["algolia","apollo","graphql","javascript","nuxt","nuxt-3","nuxtjs","tailwindcss","vue","woocommerce","wordpress","wp-graphql"],"created_at":"2024-09-24T13:32:55.416Z","updated_at":"2025-10-08T21:01:42.172Z","avatar_url":"https://github.com/w3bdesign.png","language":"Vue","funding_links":[],"categories":["Starter Kits"],"sub_categories":[],"readme":"[![Playwright Tests](https://github.com/w3bdesign/nuxtjs-woocommerce/actions/workflows/playwright.yml/badge.svg)](https://github.com/w3bdesign/nuxtjs-woocommerce/actions/workflows/playwright.yml)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/1835e693354349ffaa703c0bbaf2b52b)](https://app.codacy.com/gh/w3bdesign/nuxtjs-woocommerce?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=w3bdesign/nuxtjs-woocommerce\u0026utm_campaign=Badge_Grade)\n[![CodeFactor](https://www.codefactor.io/repository/github/w3bdesign/nuxtjs-woocommerce/badge)](https://www.codefactor.io/repository/github/w3bdesign/nuxtjs-woocommerce)\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=w3bdesign_nuxtjs-woocommerce\u0026metric=alert_status)](https://sonarcloud.io/dashboard?id=w3bdesign_nuxtjs-woocommerce)\n\n# Nuxt 3 Ecommerce site with WooCommerce backend\n\n\u003cimg src=\"https://user-images.githubusercontent.com/45217974/106988377-f129a080-676f-11eb-94b9-a44c86ea6c79.png\" alt=\"Project screenshot\" /\u003e\n\n## Table Of Contents (TOC)\n\n- [Features](#Features)\n- [Installation](#Installation)\n- [Troubleshooting](#Troubleshooting)\n- [TODO](#TODO)\n\n## Features\n\n- Nuxt 3 for server-side rendering and optimal performance\n- Vue 3 and Composition API with \u003cscript setup\u003e syntax\n- Tailwind CSS for responsive and customizable design\n- Nuxt Apollo for efficient GraphQL integration\n- Pinia with pinia-plugin-persistedstate for robust state management\n- Support for simple and variable WooCommerce products\n- Stock quantity management for all product types\n- CSS animations and transitions for enhanced user experience\n- Form handling and validation with Formkit, Vee Validate, and Yup\n- Streamlined checkout process\n- Animated mobile menu for improved mobile usability\n- Swiper integration for dynamic Hero section\n- Basic Playwright tests integrated with Github Actions\n\n## Installation\n\n1.  Install and activate the following required plugins, in your WordPress plugin directory:\n\n- [woocommerce](https://wordpress.org/plugins/woocommerce) Ecommerce for WordPress.\n- [wp-graphql](https://wordpress.org/plugins/wp-graphql) Exposes GraphQL for WordPress.\n- [wp-graphql-woocommerce](https://github.com/wp-graphql/wp-graphql-woocommerce) Adds WooCommerce functionality to a WPGraphQL schema. Currently only confirmed to be working with version 0.62 of this plugin.\n- [wp-algolia-woo-indexer](https://github.com/w3bdesign/wp-algolia-woo-indexer) WordPress plugin coded by me. Sends WooCommerce products to Algolia. Required for search to work.\n\nOptional plugin:\n\n- [headless-wordpress](https://github.com/w3bdesign/headless-wp) Disables the frontend so only the backend is accessible.\n- [wp-graphql-cors](https://github.com/funkhaus/wp-graphql-cors) Ensures that CORS works correctly. Remember to add the domain to the store under `Extend \"Access-Control-Allow-Origin” header`\n\nThe current release has been tested and is confirmed working with the following plugin versions:\n\n- WordPress version 6.6.2\n- WooCommerce version 7.4.0\n- WP GraphQL version 1.13.8\n- WooGraphQL version 0.12.0\n- WPGraphQL CORS version 2.1\n\n2.  Make sure WooCommerce has some products already or import some sample products\n\n    The WooCommerce sample products CSV file is available at `wp-content/plugins/woocommerce/sample-data/sample_products.csv` or [Sample products](sample_products/)\n\n    Import the products at `WP Dashboard \u003e Tools \u003e Import \u003e WooCommerce products(CSV)`\n\n3.  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)\n\n4.  Start the server with `npm run dev`\n\n5.  Enable COD (Cash On Demand) payment method in WooCommerce\n\n6.  Add a product to the cart\n\n7.  Proceed to checkout\n\n8.  Fill in your details and place the order\n\n## Troubleshooting\n\n### I am getting a cart undefined error or other GraphQL errors\n\nCheck that you are using the 0.12.0 version of the [wp-graphql-woocommerce](https://github.com/wp-graphql/wp-graphql-woocommerce) plugin\n\n### I encounter a bug with add to cart\n\nTry logging off wp-admin and try again.\n\n### The products page isn't loading\n\nCheck the attributes of the products. Right now the application requires Size and Color.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fw3bdesign%2Fnuxtjs-woocommerce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fw3bdesign%2Fnuxtjs-woocommerce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fw3bdesign%2Fnuxtjs-woocommerce/lists"}