{"id":14964252,"url":"https://github.com/gomah/nuxt-shopify","last_synced_at":"2025-05-15T09:07:34.680Z","repository":{"id":37693221,"uuid":"178666133","full_name":"Gomah/nuxt-shopify","owner":"Gomah","description":"🛍 Seamless Shopify Buy SDK integration with Nuxt.js.","archived":false,"fork":false,"pushed_at":"2025-04-14T22:35:00.000Z","size":11269,"stargazers_count":356,"open_issues_count":40,"forks_count":29,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-15T09:07:28.798Z","etag":null,"topics":["nuxt","nuxt-module","nuxt-modules","nuxtjs","shopify","shopify-buy","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://nuxt-shopify-docs.vercel.app","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/Gomah.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2019-03-31T09:14:50.000Z","updated_at":"2025-05-06T14:52:03.000Z","dependencies_parsed_at":"2023-12-19T01:02:07.075Z","dependency_job_id":"370ae5c2-c769-410c-9143-efce807a1419","html_url":"https://github.com/Gomah/nuxt-shopify","commit_stats":{"total_commits":708,"total_committers":7,"mean_commits":"101.14285714285714","dds":0.2005649717514124,"last_synced_commit":"53d6cc9ffe321d6526e434fca3baa631167ac6d7"},"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gomah%2Fnuxt-shopify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gomah%2Fnuxt-shopify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gomah%2Fnuxt-shopify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gomah%2Fnuxt-shopify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gomah","download_url":"https://codeload.github.com/Gomah/nuxt-shopify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254310515,"owners_count":22049469,"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":["nuxt","nuxt-module","nuxt-modules","nuxtjs","shopify","shopify-buy","vue","vuejs"],"created_at":"2024-09-24T13:32:52.417Z","updated_at":"2025-05-15T09:07:29.660Z","avatar_url":"https://github.com/Gomah.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![nuxt-shopify](https://nuxt-shopify-docs.vercel.app/preview.png)](https://nuxt-shopify-docs.vercel.app)\n\n# 🛍 Shopify Module\n\n[![npm version][npm-version-src]][npm-version-href]\n[![Dependencies][david-dm-src]][david-dm-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-000000.svg?style=flat-square)](https://prettier.io/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-black.svg?style=flat-square)](https://opensource.org/licenses/MIT)\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FGomah%2Fnuxt-shopify.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FGomah%2Fnuxt-shopify?ref=badge_shield)\n\n\u003e Easy \u003ca href=\"https://github.com/Shopify/js-buy-sdk\"\u003eShopify Buy\u003c/a\u003e client integration with Nuxt.js\n\n## Setup\n\nInstall with yarn:\n\n```bash\nyarn add nuxt-shopify\n```\n\nInstall with npm:\n\n```bash\nnpm install nuxt-shopify\n```\n\n**nuxt.config.js**\n\n```ts\nmodule.exports = {\n  modules: ['nuxt-shopify'],\n\n  shopify: {\n    /**\n     * Your shopify domain\n     */\n    domain: 'your-shop-name.myshopify.com',\n\n    /**\n     * Your shopify storefront access token\n     */\n    storefrontAccessToken: 'your-storefront-access-token',\n\n    /**\n     * This will be larger than the optimized version, as it will contain all fields that are available in the\n     * Storefront API. (https://help.shopify.com/en/api/custom-storefronts/storefront-api/reference)\n     * This should only be used when you need to add custom queries to supplement the JS Buy SDK queries.\n     */\n    unoptimized: false,\n\n    /**\n     * Set language to return translated content (optional)\n     */\n    language: 'ja-JP',\n  },\n};\n```\n\nOR\n\n```ts\nmodule.exports = {\n  modules: ['nuxt-shopify'],\n\n  env: {\n    SHOPIFY_DOMAIN: 'your-shop-name.myshopify.com', // your shopify domain\n    SHOPIFY_ACCESS_TOKEN: 'your-storefront-access-token', // your shopify storefront access token\n  },\n};\n```\n\nDon't have a Storefront Access Token yet? [Get started](https://help.shopify.com/en/api/custom-storefronts/storefront-api/getting-started).\n\n## Usage\n\n### Component\n\n**`asyncData`**\n\n```ts\nasync asyncData({ $shopify, params }) {\n  const product = await $shopify.product.fetch(params.id);\n  return { product };\n}\n```\n\n**`methods`/`created`/`mounted`/etc**\n\n```ts\nmethods: {\n  async fetchProduct(productId) {\n    this.product = await this.$shopify.product.fetch(productId);\n  }\n}\n```\n\n### Store actions (including `nuxtServerInit`)\n\n```ts\n// In store\n{\n  actions: {\n    async fetchAllProducts ({ commit }) {\n      const products = await this.$shopify.product.fetchAll();\n      commit('SET_PRODUCTS', products)\n    }\n  }\n}\n```\n\n### Shopify Client\n\n\u003e \u003ca href=\"https://github.com/Shopify/js-buy-sdk/blob/master/README.md#examples\"\u003eExamples\u003c/a\u003e from the official shopify-buy sdk library\n\n#### Fetching products\n\n```ts\n// Fetch all products in your shop\nthis.$shopify.product.fetchAll().then((products) =\u003e {\n  // Do something with the products\n  console.log(products);\n});\n\n// Fetch a single product by ID\nconst productId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=';\n\nthis.$shopify.product.fetch(productId).then((product) =\u003e {\n  // Do something with the product\n  console.log(product);\n});\n```\n\n#### Fetching Collections\n\n```ts\n// Fetch all collections, including their products\nthis.$shopify.collection.fetchAllWithProducts().then((collections) =\u003e {\n  // Do something with the collections\n  console.log(collections);\n  console.log(collections[0].products);\n});\n\n// Fetch a single collection by ID, including its products\nconst collectionId = 'Z2lkOi8vc2hvcGlmeS9Db2xsZWN0aW9uLzM2OTMxMjU4NA==';\n\nthis.$shopify.collection.fetchWithProducts(collectionId).then((collection) =\u003e {\n  // Do something with the collection\n  console.log(collection);\n  console.log(collection.products);\n});\n```\n\n#### Creating a checkout\n\n```ts\n// Create an empty checkout\nthis.$shopify.checkout.create().then((checkout) =\u003e {\n  // Do something with the checkout\n  console.log(checkout);\n});\n```\n\n#### Adding Line Items\n\n```ts\nconst checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout\nconst lineItemsToAdd = [\n  {\n    variantId: 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8yOTEwNjAyMjc5Mg==',\n    quantity: 5,\n    customAttributes: [{ key: 'MyKey', value: 'MyValue' }],\n  },\n];\n\n// Add an item to the checkout\nthis.$shopify.checkout.addLineItems(checkoutId, lineItemsToAdd).then((checkout) =\u003e {\n  // Do something with the updated checkout\n  console.log(checkout.lineItems); // Array with one additional line item\n});\n```\n\n#### Updating checkout attributes\n\n```ts\nconst checkoutId = 'Z2lkOi8vc2hvcGlmeS9DaGVja291dC9kMTZmM2EzMDM4Yjc4N=';\nconst input = { customAttributes: [{ key: 'MyKey', value: 'MyValue' }] };\n\nthis.$shopify.checkout.updateAttributes(checkoutId, input).then((checkout) =\u003e {\n  // Do something with the updated checkout\n});\n```\n\n#### Updating Line Items\n\n```ts\nconst checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout\nconst lineItemsToUpdate = [{ id: 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=', quantity: 2 }];\n\n// Update the line item on the checkout (change the quantity or variant)\nthis.$shopify.checkout.updateLineItems(checkoutId, lineItemsToUpdate).then((checkout) =\u003e {\n  // Do something with the updated checkout\n  console.log(checkout.lineItems); // Quantity of line item 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=' updated to 2\n});\n```\n\n#### Removing Line Items\n\n```ts\nconst checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout\nconst lineItemIdsToRemove = ['Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ='];\n\n// Remove an item from the checkout\nthis.$shopify.checkout.removeLineItems(checkoutId, lineItemIdsToRemove).then((checkout) =\u003e {\n  // Do something with the updated checkout\n  console.log(checkout.lineItems); // Checkout with line item 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=' removed\n});\n```\n\n#### Fetching a Checkout\n\n```ts\nconst checkoutId = '2U4NWNkYzI4ZWEyOTdlOD9rZXk9MDVjMzY3Zjk3YWM0YWJjNGRhMTkwMDgwYTUzOGJmYmI=';\n\nthis.$shopify.checkout.fetch(checkoutId).then((checkout) =\u003e {\n  // Do something with the checkout\n  console.log(checkout);\n});\n```\n\n#### Adding a Discount\n\n```ts\nconst checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout\nconst discountCode = 'best-discount-ever';\n\n// Add a discount code to the checkout\nthis.$shopify.checkout.addDiscount(checkoutId, discountCode).then((checkout) =\u003e {\n  // Do something with the updated checkout\n  console.log(checkout);\n});\n```\n\n#### Removing a Discount\n\n```ts\nconst checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout\n\n// Removes the applied discount from an existing checkout.\nthis.$shopify.checkout.removeDiscount(checkoutId).then((checkout) =\u003e {\n  // Do something with the updated checkout\n  console.log(checkout);\n});\n```\n\n#### Updating a Shipping Address\n\n```ts\nconst checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout\n\nconst shippingAddress = {\n  address1: 'Chestnut Street 92',\n  address2: 'Apartment 2',\n  city: 'Louisville',\n  company: null,\n  country: 'United States',\n  firstName: 'Bob',\n  lastName: 'Norman',\n  phone: '555-625-1199',\n  province: 'Kentucky',\n  zip: '40202',\n};\n\n// Update the shipping address for an existing checkout.\nthis.$shopify.checkout.updateShippingAddress(checkoutId, shippingAddress).then((checkout) =\u003e {\n  // Do something with the updated checkout\n});\n```\n\n## Development\n\n1. Clone this repository\n2. Install dependencies using `yarn install` or `npm install`\n3. Build the module using `yarn build` or `npm run build`\n4. Start development server using `yarn dev` or `npm run dev`\n\n## 📑 License\n\n[MIT License](./LICENSE)\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/dt/nuxt-shopify.svg?style=flat-square\n[npm-version-href]: https://npmjs.com/package/nuxt-shopify\n[npm-downloads-src]: https://img.shields.io/npm/v/nuxt-shopify/latest.svg?style=flat-square\n[npm-downloads-href]: https://npmjs.com/package/nuxt-shopify\n[david-dm-src]: https://david-dm.org/gomah/nuxt-shopify/status.svg?style=flat-square\n[david-dm-href]: https://david-dm.org/gomah/nuxt-shopify\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FGomah%2Fnuxt-shopify.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FGomah%2Fnuxt-shopify?ref=badge_large)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgomah%2Fnuxt-shopify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgomah%2Fnuxt-shopify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgomah%2Fnuxt-shopify/lists"}