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.
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
})
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!
Depending on your configuration, the following files are generated:
These files are seamlessly integrated into Nuxt using Nuxt Templates, making them fully accessible within the framework.
The module options allow you to configure code generation as follows:
shopifyclientsstorefront | admincodegen.skip: boolean - Skip code generation for the specified client.codegen.pluginOptions.typescript: object - Custom TypeScript plugin options for code generation.documents: [] - An array of glob patterns, relative to the Nuxt root, specifying the query documents to
include.autoImport: boolean - Auto-import generated types for this client.If you need to customize the code generation process, refer to the hooks provided in the following file: types/index.d.ts
We would like to thank the authors of the following libraries for making this possible: