{"id":21739274,"url":"https://github.com/konkonam/nuxt-shopify","last_synced_at":"2025-04-13T03:29:01.688Z","repository":{"id":261657166,"uuid":"884466453","full_name":"konkonam/nuxt-shopify","owner":"konkonam","description":"🚀 Easily integrate Shopify into your Nuxt 3 app","archived":false,"fork":false,"pushed_at":"2025-04-04T23:22:01.000Z","size":1200,"stargazers_count":35,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-05T00:25:59.398Z","etag":null,"topics":["codegen","ecommerce","graphql","nuxt","nuxt-module","nuxt3","nuxt4","shopify","typescript"],"latest_commit_sha":null,"homepage":"https://konkonam.github.io/nuxt-shopify/","language":"TypeScript","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/konkonam.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","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":"2024-11-06T19:58:45.000Z","updated_at":"2025-04-02T21:25:21.000Z","dependencies_parsed_at":"2024-11-07T18:46:22.270Z","dependency_job_id":"a3b6be7c-6bba-4e6b-8085-c66679b31a7b","html_url":"https://github.com/konkonam/nuxt-shopify","commit_stats":null,"previous_names":["konkonam/nuxt-shopify"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konkonam%2Fnuxt-shopify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konkonam%2Fnuxt-shopify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konkonam%2Fnuxt-shopify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konkonam%2Fnuxt-shopify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/konkonam","download_url":"https://codeload.github.com/konkonam/nuxt-shopify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248659288,"owners_count":21141112,"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":["codegen","ecommerce","graphql","nuxt","nuxt-module","nuxt3","nuxt4","shopify","typescript"],"created_at":"2024-11-26T06:08:21.942Z","updated_at":"2025-04-13T03:29:01.669Z","avatar_url":"https://github.com/konkonam.png","language":"TypeScript","funding_links":[],"categories":["Starter Kits"],"sub_categories":[],"readme":"![nuxt-shopify](https://raw.githubusercontent.com/konkonam/nuxt-shopify/refs/heads/main/docs/public/logo-readme.png)\n\n# Nuxt Shopify\n\n[![NPM version][npm-version-src]][npm-version-href]\n[![NPM downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\nEasily integrate shopify into your nuxt app.\n\n- 📚 [Documentation](https://konkonam.github.io/nuxt-shopify)\n- ✨ [Release Notes](https://github.com/konkonam/nuxt-shopify/tree/main/CHANGELOG.md)\n- 🏀 [Online playground](https://stackblitz.com/github/konkonam/nuxt-shopify?file=playgrounds%2Fplayground%2Fnuxt.config.ts)\n\n## 🚀 Features\n\nHot-reloaded auto-generated typescript types from GraphQL operations for easy access to the Shopify APIs:\n\n![nuxt-shopify-demo](https://raw.githubusercontent.com/konkonam/nuxt-shopify/refs/heads/main/docs/public/demo.gif)\n\n- Plug \u0026 play Shopify integration\n- Fully typed GraphQL operations with hot-reloading\n- Nuxt 3 \u0026 4 ready\n- Storefront and Admin API support\n- Customizable GraphQL code generation\n- Sandboxed GraphiQL Explorer integration\n\n## 📦 Setup\n\nRun the following command to install the module in your project:\n\n```bash\nnpm install -D @konkonam/nuxt-shopify\n```\n\nAdd the module to your `nuxt.config.ts`:\n\n```ts\nexport default defineNuxtConfig({\n    modules: [\n        '@konkonam/nuxt-shopify',\n    ],\n})\n```\n\nAdd your Shopify configuration to the `nuxt.config.ts`:\n\n```ts\nexport default defineNuxtConfig({\n    shopify: {\n        name: 'quickstart-abcd1234',\n        clients: {\n            storefront: {\n                apiVersion: '2024-10',\n                publicAccessToken: 'YOUR_ACCESS_TOKEN',\n            },\n\n            admin: {\n                apiVersion: '2024-10',\n                accessToken: 'YOUR_ACCESS_TOKEN',\n            },\n        },\n    },\n})\n```\n\n## 🛠️ Usage\n\n### Type generation\n\nOnce installed, the module automatically generates your GraphQL types and saves them in:\n- .nuxt/types — Type definitions\n- .nuxt/schema — GraphQL schema files\n\nTo enable IDE support, add a GraphQL configuration file:\n\n```yaml\n# ~/graphql.config.yml\n\nschema:\n  - ./.nuxt/schema/storefront.schema.json\n  - ./.nuxt/schema/admin.schema.json\n```\n\n### Access APIs via Nitro endpoints\n\nThe module exposes utilities to access each API via Nitro endpoints.\n\n#### Storefront API example\n\nYou can use the `useStorefront` utility to access the storefront API:\n\n```typescript\n// ~/server/api/products.ts\n\nexport default defineEventHandler(async () =\u003e {\n    const storefront = useStorefront()\n\n    return await storefront.request(`#graphql\n        query FetchProducts($first: Int) {\n            products(first: $first) {\n                nodes {\n                    id\n                    title\n                    description\n                }\n            }\n        }\n    `, {\n        variables: {\n            first: 3,\n        },\n    })\n})\n```\n\nNotice how we can use the `graphql` directive inside the event handler, this is possible because in\nthe standard module configuration all `.ts` and `.gql` files are automatically processed for the\nstorefront API, as long as the don't end with `.admin.ts` or `.admin.gql`.\nRead more about the [codegen configuration](https://konkonam.github.io/nuxt-shopify/configuration/codegen).\n\nNow we can call the API at `/api/products` to obtain the first three products:\n\n```ts\n// ~/pages/your-page.vue\n\nconst { data, error } = await useFetch('/api/products')\n```\n\nThe `data` variable will be typed as `Ref\u003cClientResponse\u003cFetchProductsQuery\u003e\u003e`, which enables autocompletion and full\ntype checking.\n\n#### Admin API example\n\nFiles ending with `.admin.ts` or `.admin.gql` will automatically be processed for the admin API.\nWe can use the `useAdmin` utility to access the admin API in a nitro event handler:\n\n```typescript\n// ~/server/api/your-admin-api-handler.ts\n\nexport default defineEventHandler(async () =\u003e {\n    const admin = useAdmin()\n\n    return await admin.request(...)\n})\n```\n\nFor a full example, see [Admin API examples](https://konkonam.github.io/nuxt-shopify/examples/admin).\n\n## 🤝 Contributing\n\n1. Clone this repository\n2. Install dependencies using:\n    ```bash\n    pnpm install\n    ```\n   (Make sure pnpm is enabled with `corepack enable`. [Learn more](https://pnpm.io/installation#using-corepack).)\n3. Run `pnpm run dev:prepare` to generate type stubs.\n4. Start the default [playground](https://github.com/konkonam/nuxt-shopify/tree/main/playgrounds/playground) with:\n    ```bash\n    pnpm run dev\n    ```\n\n## 📜 License\n\nPublished under the [MIT License](https://github.com/konkonam/nuxt-shopify/tree/main/LICENSE).\n\n[npm-version-src]: https://img.shields.io/npm/v/@konkonam/nuxt-shopify/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=31C553\n[npm-version-href]: https://npmjs.com/package/@konkonam/nuxt-shopify\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/@konkonam/nuxt-shopify.svg?style=flat\u0026colorA=18181B\u0026colorB=31C553\n[npm-downloads-href]: https://npmjs.com/package/@konkonam/nuxt-shopify\n\n[license-src]: https://img.shields.io/github/license/konkonam/nuxt-shopify.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://github.com/konkonam/nuxt-shopify/tree/main/LICENSE\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkonkonam%2Fnuxt-shopify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkonkonam%2Fnuxt-shopify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkonkonam%2Fnuxt-shopify/lists"}