Codegen

This module provides a seamless, fully typed API integration for Shopify. All typings are automatically generated in the background, adapting dynamically to the queries you write.

Example Usage

export default defineEventHandler(async (event) => {
  const storefront = useStorefront()

  const myQuery = await storefront.request(`#graphql
    query ExampleQuery {
      menu(handle: "main-menu") {
        ...MenuFields
      }
      products(first: 10) {
        ...ProductFields
      }
    }
    ${MENU_FRAGMENT}
    ${PRODUCT_FRAGMENT}
  `)

  return myQuery
})

Key Highlights:

• myQuery.data.products is automatically typed as ProductConnection.
• myQuery.data.menu is automatically typed as Menu.

Note: If your ProductFields fragment includes only specific fields, such as nodes -> title, the generated type will reflect only those fields.

As you can see, there is no need for manual typing — everything is generated for you automatically!

Generated Files

Depending on your configuration, the following files are generated:

Storefront

• .nuxt/schema/storefront.schema.json
• .nuxt/types/storefront/storefront.types.d.ts
• .nuxt/types/storefront/storefront.operations.d.ts

Admin

• .nuxt/schema/admin.schema.json
• .nuxt/types/admin/admin.types.d.ts
• .nuxt/types/admin/admin.operations.d.ts

These files are seamlessly integrated into Nuxt using Nuxt Templates, making them fully accessible within the framework.

Configuration

The module options allow you to configure code generation as follows:

Available Options:

• shopify
  • clients
    • storefront | admin
      • skipCodegen: boolean - Skip code generation for the specified client.
      • documents: [] - An array of glob patterns, relative to the Nuxt root, specifying the query documents to include.

Advanced Customization: Hooks

If you need to customize the code generation process, refer to the hooks provided in the following file: types/index.d.ts

Acknowledgements

We would like to thank the authors of the following libraries for making this possible:

• GraphQL Code Generator
• Shopify Codegen Preset