Nuxt Shopify Module

Nuxt Shopify Module is a developer tool that brings Shopify's Storefront, Admin, and Customer Account GraphQL APIs into Nuxt 3 and 4 applications, generating fully typed clients from your queries.

What is Nuxt Shopify Module?

Nuxt Shopify Module is a fully typed GraphQL fetch client for the Shopify Storefront API, Shopify Admin API, and Shopify Customer Account API, designed for Nuxt 3 and Nuxt 4 applications. It runs on both server and client sides, with built-in support for mock.shop and automatic, hot-reloaded type generation from your GraphQL queries. Maintained by Frederik Bußmann and Zoltan Lukacs, it is published under the MIT License.

What makes Nuxt Shopify Module stand out?

Nuxt Shopify Module stands out by automatically generating fully typed GraphQL clients from your queries, supporting three Shopify APIs simultaneously, and integrating deeply with Nuxt and Nitro.

• Fully typed fetch client — Auto-generates TypeScript types from your GraphQL queries and schemas, giving autocompletion and type checking for Storefront, Admin, and Customer Account APIs.
• Hot-reload type generation — Types are regenerated automatically whenever your .gql, .ts, .vue files change, without manual codegen steps.
• Three API integrations — Storefront, Admin, and Customer Account APIs are all supported from one module, each with its own client configuration.
• Mock integration — Configure the mock option to true on the storefront client to route requests to mock.shop data for local development.
• Server-side proxy — Client requests are proxied through Nitro by default, which keeps access tokens secure and enables SSR support.
• Caching — Client and server-side caching options are available, with per-request cache settings for both client and proxy.
• Analytics support — Sends Shopify headless analytics through the Customer Privacy API, gated on visitor consent, and includes view components and a publish/subscribe composable.
• Webhook handling — Subscribe and unsubscribe webhooks via a CLI command, and validate incoming requests with defineWebhookEventHandler using HMAC validation.

Who should use Nuxt Shopify Module?

Nuxt developers building Shopify storefronts or headless commerce applications can use it to connect their Nuxt app to Shopify data. Shopify app developers who need Admin API access in Nitro endpoints will find the .admin.ts file pattern useful. Teams that want to prototype a store without live data can rely on the mock.shop integration to simulate product queries.

What can you do with Nuxt Shopify Module?

With Nuxt Shopify Module you can build and extend Shopify-powered Nuxt applications using these concrete workflows:

• Build a headless storefront: Fetch products and collections with the useStorefront composable on the client, with fully typed responses.
• Create API endpoints: Access the Storefront, Admin, and Customer Account APIs inside Nitro server routes using useStorefront, useAdmin, and useCustomerAccount utilities.
• Handle customer accounts: Use the useCustomerAccount composable to request customer data client-side after setting up the necessary dependencies and credentials.
• Automate webhooks: Subscribe to Shopify topics like ORDERS_CREATE from the command line, and validate incoming requests with HMAC validation using the built-in event handler.

How does Nuxt Shopify Module work?

Install the module with npx nuxi module add shopify, then define your Shopify clients in the shopify section of nuxt.config.ts. The module reads your GraphQL queries (located in .gql, .ts, .vue files), generates types and a GraphQL config file, and exposes composables like useStorefront and useStorefrontData. For server endpoints, the corresponding useAdmin and useCustomerAccount utilities are available in Nitro event handlers.

Pricing

Nuxt Shopify Module is free and open-source, released under the MIT License. There are no paid tiers or usage fees for the module itself; you pay only for your Shopify plan.

FAQ

Is Nuxt Shopify Module free?

Yes, the module is open-source under the MIT License and can be used without cost. There are no premium tiers or hidden charges for the module itself.

Which Shopify APIs are supported?

The module supports the Storefront API, the Admin API, and the Customer Account API. Each has its own client configuration and composables, such as useStorefront, useAdmin, and useCustomerAccount.

Can I mock the Storefront API?

Yes, you can enable mocking by setting the mock option to true on the storefront client. All Storefront requests will return data from mock.shop instead of your actual store, which is useful for development and demos.

Does it work with Nuxt 3 and Nuxt 4?

Yes, the module is tested with both Nuxt 3 and Nuxt 4. The setup uses standard Nuxt configuration and Nitro utilities, and the installation is the same for both versions.

How do I generate GraphQL types?

Types are generated automatically when the module runs. The generated types are saved in .nuxt/types, GraphQL schema files in .nuxt/schema, and a GraphQL config file at .nuxt/graphql.config.mjs for IDE support.