{"id":21228267,"url":"https://github.com/zackha/nuxtcommerce","last_synced_at":"2025-04-06T02:07:16.513Z","repository":{"id":176828998,"uuid":"623408022","full_name":"zackha/nuxtcommerce","owner":"zackha","description":"An open-source, dynamic e-commerce solution powered by Nuxt 3 and GraphQL, headless storefront replacement for Woocommerce. Featuring a user interface in the style of Pinterest and fully customizable (Vue, Nuxt3).","archived":false,"fork":false,"pushed_at":"2025-03-20T20:53:10.000Z","size":2389,"stargazers_count":121,"open_issues_count":1,"forks_count":20,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-30T01:04:41.312Z","etag":null,"topics":["clothing-store","e-commerce","fashion-store","graphql","headless","nuxt3","pinterest-clone","storefront","themes","vue-ecommerce","vue3","woocommerce","woocommerce-theme","wordpress-theme"],"latest_commit_sha":null,"homepage":"https://commerce.nuxt.dev","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zackha.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2023-04-04T10:05:58.000Z","updated_at":"2025-03-28T14:51:49.000Z","dependencies_parsed_at":"2024-06-02T01:27:39.875Z","dependency_job_id":"ed7ee9aa-96b0-40d9-bad3-cd70889f7504","html_url":"https://github.com/zackha/nuxtcommerce","commit_stats":null,"previous_names":["zackha/nuxtcommerce"],"tags_count":55,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackha%2Fnuxtcommerce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackha%2Fnuxtcommerce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackha%2Fnuxtcommerce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackha%2Fnuxtcommerce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zackha","download_url":"https://codeload.github.com/zackha/nuxtcommerce/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247423512,"owners_count":20936626,"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":["clothing-store","e-commerce","fashion-store","graphql","headless","nuxt3","pinterest-clone","storefront","themes","vue-ecommerce","vue3","woocommerce","woocommerce-theme","wordpress-theme"],"created_at":"2024-11-20T23:15:22.514Z","updated_at":"2025-04-06T02:07:16.485Z","avatar_url":"https://github.com/zackha.png","language":"Vue","funding_links":[],"categories":["Vue","Starter Kits"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://commerce.nuxt.dev\"\u003e\n    \u003cimg alt=\"NuxtCommerce - Headless storefront for Woocommerce\" src=\"https://github.com/user-attachments/assets/1c6720b7-5aea-4f6b-be55-8944fb81799a\"\u003e\n  \u003c/a\u003e\n\n  \u003ch1 align=\"center\"\u003eNuxtCommerce\u003c/h2\u003e\n\n  \u003cp align=\"center\"\u003e\n    An open-source, dynamic e-commerce solution powered by Nuxt 3 and GraphQL, headless storefront replacement for Woocommerce. Featuring a user interface in the style of Pinterest and fully customizable (Vue, Nuxt3).\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://commerce.nuxt.dev\"\u003e\u003cstrong\u003e🚀 Live Demo\u003c/strong\u003e\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n## Introduction\n\nNuxtCommerce is a dynamic and lively e-commerce platform developed with Nuxt 3. Developed for WooCommerce, NuxtCommerce optimizes data flow with [WPGraphQL](https://github.com/wp-graphql/wp-graphql), offering an efficient shopping experience. It stands out with its Pinterest-style user-friendly interface and fashion-oriented structure. With its dark mode feature and open-source nature, it offers flexibility and continuous development opportunities.\n\nIf your product stocks and prices are not changeable, and you are not continuously uploading new products, it could be beneficial for you to opt for [Woonuxt](https://github.com/scottyzen/woonuxt#readme). This project, developed by [scottyzen](https://github.com/scottyzen), is static, thus providing a faster solution.\n\n## Stack\n\n- Nuxt3 / Vue\n- Headless Storefront\n- GraphQL with Apollo Client\n- NUXT UI / Tailwind CSS\n- Pinterest Interface\n- Developed for WooCommerce\n- Dynamic\n- Open Source\n- Suitable for Fashion Category\n- Dark Mode\n- UI Lab\n\n## Installation\n\nTo get started with NuxtCommerce, follow these steps:\n\n1. **Clone the repository:**\n\n   ```sh\n   git clone https://github.com/your-username/nuxtcommerce.git\n   cd nuxtcommerce\n   ```\n\n2. **Install dependencies:**\n\n   Make sure you have [Node.js](https://nodejs.org/) installed. Then run:\n\n   ```sh\n   pnpm install\n   ```\n\n3. **Set up environment variables:**\n\n   Create a .env file in the root directory and add the following variables:\n\n   ```sh\n   GQL_HOST=https://your-woocommerce-site.com/graphql\n   ```\n\n4. **Run the development server:**\n\n   ```sh\n   pnpm run dev\n   ```\n\n   Your application should now be running on [http://localhost:3000](http://localhost:3000).\n\n## WordPress Setup Guide\n\nThis guide will help you set up your WordPress site with WooCommerce and GraphQL for seamless integration. Follow the steps below carefully to ensure a successful configuration.\n\n### Step 1: Install Required Plugins\n\nTo begin, make sure the following plugins are installed and activated on your WordPress site:\n\n- [**WooCommerce**](https://woocommerce.com/): The essential plugin for creating an e-commerce store.\n- [**WPGraphQL**](https://www.wpgraphql.com/): Enables GraphQL support for WordPress.\n- [**WPGraphQL CORS**](https://github.com/funkhaus/wp-graphql-cors): Allows Cross-Origin Resource Sharing for WPGraphQL.\n- [**WPGraphQL WooCommerce (WooGraphQL)**](https://github.com/wp-graphql/wp-graphql-woocommerce): Adds WooCommerce-specific GraphQL functionalities.\n\n\u003e **Tip:** You can install these plugins directly from the WordPress Plugin Repository or upload them manually if you have the plugin files.\n\n### Step 2: Upload Product Data\n\nTo populate your WooCommerce store with product data, follow these steps:\n\n1. Download the product data files from [this link](https://github.com/zackha/nuxtcommerce/raw/refs/heads/master/public/products.zip). The zip file contains both variable and variation product CSV files.\n2. Navigate to the WooCommerce admin panel.\n3. Go to **Products \u003e Import**, then upload the CSV files from the downloaded zip.\n4. Follow the on-screen instructions to map the CSV columns to WooCommerce fields and complete the import.\n\n\u003e **Note:** Ensure your CSV files are properly formatted to avoid errors during the import process.\n\n### Step 3: Configure WPGraphQL\n\n1. Navigate to **WPGraphQL \u003e Settings** in the WordPress admin dashboard.\n2. Locate the **GraphQL Endpoint URL** and copy it. The default endpoint is typically `/graphql`.\n3. Open your project’s `.env` file and add the following line:\n\n   ```env\n   GQL_HOST=\u003cyour_graphql_endpoint_url\u003e\n   ```\n\n   Replace `\u003cyour_graphql_endpoint_url\u003e` with the copied URL from WPGraphQL settings.\n\n\u003e **Important:** Make sure your server allows CORS (Cross-Origin Resource Sharing) to enable communication between your WordPress backend and frontend application.\n\nBy following these steps, your WordPress site will be ready to integrate WooCommerce with GraphQL. For additional troubleshooting or advanced customization, refer to the official documentation of each plugin.\n\n## Contributing\n\nContributions of any kind are welcome! You can open an issue for requests, bug reports, or general feedback, or you can directly create a pull request(PR).\n\n## Contact\n\nDon't hesitate to get in touch if you have any questions or suggestions:\n\nEmail: zckhtln@icloud.com\u003c/br\u003e\nTwitter: [@ZHatlen](https://twitter.com/ZHatlen)\n\n[\u003cimg src=\"https://api.gitsponsors.com/api/badge/img?id=623408022\" height=\"20\"\u003e](https://api.gitsponsors.com/api/badge/link?p=xnKbnMYlcR3afRIY6B121fe0yL/MMr5pJVdLPgAnPawT4N6TPHIh8pnTgySEwXSSm0dn+3jdfTXpM34lY3BOl3fk0Y5VWUBAWBr3J04AeL9uiskXQ8xrfbWjL2SIon91CO6cyx9n0BBfcAZxWvR8kw==)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzackha%2Fnuxtcommerce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzackha%2Fnuxtcommerce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzackha%2Fnuxtcommerce/lists"}