{"id":21205866,"url":"https://github.com/rylanharper/nitrogen","last_synced_at":"2025-04-04T23:06:37.456Z","repository":{"id":261733743,"uuid":"865637409","full_name":"rylanharper/nitrogen","owner":"rylanharper","description":"☁️ A Nuxt Shopify template based on Hydrogen (Nuxt4 ready!)","archived":false,"fork":false,"pushed_at":"2025-04-02T16:42:21.000Z","size":2754,"stargazers_count":195,"open_issues_count":2,"forks_count":23,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-04T23:06:32.986Z","etag":null,"topics":["ecommerce","headless","hydrogen","klaviyo","nuxt","sanity","shopify","vue"],"latest_commit_sha":null,"homepage":"https://nitrogenshop.netlify.app","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/rylanharper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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-09-30T21:31:08.000Z","updated_at":"2025-04-02T16:42:24.000Z","dependencies_parsed_at":"2024-12-13T23:23:45.407Z","dependency_job_id":"8dba0981-969d-4b2c-9e3a-b3db804a8bec","html_url":"https://github.com/rylanharper/nitrogen","commit_stats":null,"previous_names":["rylanharper/nitrogen"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rylanharper%2Fnitrogen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rylanharper%2Fnitrogen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rylanharper%2Fnitrogen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rylanharper%2Fnitrogen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rylanharper","download_url":"https://codeload.github.com/rylanharper/nitrogen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247261600,"owners_count":20910108,"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":["ecommerce","headless","hydrogen","klaviyo","nuxt","sanity","shopify","vue"],"created_at":"2024-11-20T20:53:20.031Z","updated_at":"2025-04-04T23:06:37.435Z","avatar_url":"https://github.com/rylanharper.png","language":"Vue","funding_links":[],"categories":["Vue","Starter Kits"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/rylanharper/nitrogen\"\u003e\n    \u003cimg src=\"./public/logo.svg\" width=\"175\" height=\"175\" alt=\"Nitrogen Logo\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# Nitrogen\n\nNitrogen is a Nuxt template inspired by Shopify's [Hydrogen](https://github.com/Shopify/hydrogen) framework for headless commerce. This template is designed to empower Nuxt developers to build fast, scalable, and customizable storefronts that incorporate key features from Hydrogen's starter theme.\n\n\u003e [!IMPORTANT]\n\u003e This template now features a minimal [Sanity](https://www.sanity.io/) integration on a separate `sanity` branch. This is meant to pair with the [Nitrogen Sanity Studio](https://github.com/rylanharper/nitrogen-sanity-studio) template, which synchronizes content between a Sanity dataset and your Shopify storefront.\n\n## ✨ Key Features\n\n- 💪 Strongly typed\n- 🛒 Cart functionality\n- 🔒 User authentication, with password reset\n- 👤 Full customer account functionality\n- 🗂️ Collection pages, with pagination\n- 🕹️ Collection filter and sort functionality\n- 👕 Product pages, with metafields\n- 🔍 Search functionality\n- 🌐 Shop localization\n- 📫 Klaviyo integration\n- 🧠 Sanity integration\n- 🎠 Embla Carousel\n- 🎨 Tailwind v4\n- 🔮 Codegen\n\n## 📖 Documentation\n\n\u003e [!TIP]\n\u003e Read through the docs to learn how to configure your Shopify store to work with Nitrogen!\n\n[Nitrogen documentation](https://nitrogendocs.netlify.app/)\n\n## 💻 Development\n\nTo begin using Nitrogen, you'll need to add the following environment variables:\n\n```ini\n# Shopify\nNUXT_SHOPIFY_STOREFRONT=https://your-shop-name.myshopify.com\nNUXT_SHOPIFY_ACCESS_TOKEN=your_storefront_access_token\nNUXT_SHOPIFY_API_VERSION=2025-01\n\n# Klaviyo (optional)\nNUXT_KLAVIYO_PUBLIC_API_KEY=your_public_api_key\nNUXT_KLAVIYO_PRIVATE_API_KEY=your_private_api_key\nNUXT_KLAVIYO_API_VERSION=2025-01-15\n\n# Sanity (optional)\nNUXT_SANITY_PROJECT_ID=your_project_id\nNUXT_SANITY_DATASET=production\nNUXT_SANITY_API_VERSION=2025-02-02\nNUXT_SANITY_STUDIO_URL=http://your-site-domain.com\nNUXT_SANITY_API_READ_TOKEN=your_api_read_token\n```\n\n\u003e [!WARNING]\n\u003e It is strongly recommended that you use the `2024-07` Storefront API version or higher. If not, you will not have access to new API features found within this template (this will cause breaking changes).\n\n### Local Setup\n\n1. Install dependencies using `pnpm install`\n2. Generate your project types using `pnpm codegen`\n3. Start the development server using `pnpm dev`\n\n## ⚡ Basic Usage\n\nNitrogen provides a minimal [GraphQL client](https://github.com/rylanharper/nitrogen/blob/master/server/utils/graphql-client.ts) that seamlessly integrates with Shopify's Storefront API. It uses a [server-side proxy](https://github.com/rylanharper/nitrogen/blob/master/server/api/shopify.ts) to handle API authentication and requests, while offering a typed interface for executing GraphQL operations.\n\n### Operations\n\nThis project includes pre-built [operations](https://github.com/rylanharper/nitrogen/tree/master/server/operations/shopify) for common Storefront API queries and mutations. Feel free to add or remove operations that fit your project needs.\n\n### Composable\n\nTo get GraphQL operations, use the `useShopify` composable:\n\n```ts\nconst shopify = useShopify();\n```\n\nOperations can be referenced using this composable with dot notation:\n\n```ts\n// Shopify\nconst shopify = useShopify();\n\n// With dot notation\nawait shopify.cart.addLines(cart.id, [ ... ])\nawait shopify.product.get({ handle: 'example-product' })\n```\n\n### With `useAsyncData`\n\nPerfect for reactive data fetching in pages or components:\n\n```ts\n// Shopify\nconst shopify = useShopify();\n\n// Fetch data\nconst productVars = computed\u003cProductQueryVariables\u003e(() =\u003e ({\n  handle: handle.value,\n  country: shopStore.buyerCountryCode,\n  language: shopStore.buyerLanguageCode\n}))\n\nconst { data: productData } = await useAsyncData(\n  `product-${handle.value}`,\n  () =\u003e shopify.product.get(productVars.value),\n  { watch: [productVars] }\n);\n\n// Computed data\nconst product = computed(() =\u003e productData.value)\n```\n\n### With `Pinia`\n\nIdeal for working with actions in your Pinia stores:\n\n```ts\n// Shopify\nconst shopify = useShopify();\n\n// Cart actions\nactions: {\n  async createCart(input?: CartInput, optionalParams?: CartOptionalInput) {\n    try {\n      const response = await shopify.cart.create({\n        input: input,\n        ...optionalParams\n      });\n\n      if (response?.userErrors?.length) {\n        throw new Error(response?.userErrors[0]?.message);\n      }\n\n      this.cart = response?.cart;\n    } catch (error: any) {\n      console.error('Cannot create cart:', error.message);\n      throw error;\n    }\n  },\n  // More actions...\n}\n```\n\n## 🌱 Contribute\n\nContributions are always welcome! If you’d like to help improve this project, here’s how you can get involved:\n\n- Post an issue: Use the [Issues tab](https://github.com/rylanharper/nitrogen/issues) to report bugs or request new features.\n- Start a discussion: Share ideas or ask for help in the [Discussions tab](https://github.com/rylanharper/nitrogen/discussions).\n- Submit a pull request: If you’d like to contribute, fork the repository, make your changes, and submit a pull request for review.\n\nI actively monitor this repository and will do my best to respond quickly. Whether it’s fixing a small typo or adding a new feature, every contribution helps!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frylanharper%2Fnitrogen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frylanharper%2Fnitrogen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frylanharper%2Fnitrogen/lists"}