Editor

To get the best developer experience when working with the Nuxt Shopify module, it's recommended to set up your IDE to understand the GraphQL schemas provided by Shopify.

VSCode Setup

To enable the GraphQL language server in VSCode, you can use the VSCode GraphQL: Language Feature Support extension.

For proper syntax highlighting within GraphQL files and inline documents, you can also install the VSCode GraphQL: Syntax Highlighting extension.

GraphQL Config

The Nuxt Shopify module generates the GraphQL schemas for both the Storefront and Admin APIs, depending on which usage, into the .nuxt/schema directory. To enable IDE features like autocompletion and error checking, you can create a graphql.config.ts file in the root of your project.

import type { IGraphQLConfig } from 'graphql-config'

const config = {
  projects: {
    default: {
      schema: './.nuxt/schema/storefront.schema.json',
    },
    admin: {
      schema: './.nuxt/schema/admin.schema.json',
    },
  },
} satisfies IGraphQLConfig

export default config