Nuxt Shopify

Essentials

Module Config

Configure the Nuxt Shopify module

The Nuxt Shopify module can be configured via the shopify property in your nuxt.config.ts file.

Quickstart

Minimal configuration to get started:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/shopify'],
  
  shopify: {
    name: 'quickstart-abcd1234',
    clients: {
      storefront: {
        apiVersion: '2025-07',
        publicAccessToken: 'YOUR_ACCESS_TOKEN',
      },
      admin: {
        apiVersion: '2025-07',
        accessToken: 'YOUR_ACCESS_TOKEN',
      },
    },
  },
})
See the Shopify Setup Guide to learn how to find your store name and access tokens.

Configuration Examples

Choose the configuration that matches your use case:

nuxt.config.ts
export default defineNuxtConfig({
  shopify: {
    name: 'quickstart-abcd1234',
    clients: {
      storefront: {
        apiVersion: '2025-07',
        publicAccessToken: 'YOUR_ACCESS_TOKEN',
      },
    },
  },
})

Full Configuration Reference

Basic Options

name
string required
Your Shopify store name (e.g., quickstart-abcd1234).
logger
object
Optional module logger configuration (Consola options)

Client Configuration

Configure one or both API clients:

Storefront Client

apiVersion
string required
Shopify API version to use (e.g., 2025-07)
publicAccessToken
string
Public access token for client-side requests
privateAccessToken
string
Private access token for server-side requests
mock
boolean
Use mock.shop instead of your actual store - default: false
proxy
boolean | string
Proxy all client-side requests through Nitro. Use true for default path or provide custom path - default: true
sandbox
boolean
Enable GraphiQL sandbox for the client - default: true
autoImport
boolean
Auto-import generated types for this client - default: true
codegen.skip
boolean
Skip code generation for the client - default: false
codegen.pluginOptions.typescript
object
Custom TypeScript plugin options for code generation
headers
object
Additional headers to include in requests
documents
array
Additional glob patterns to include in code generation
retries
number
Number of retries for failed requests - default: 3

Admin Client

apiVersion
string required
Shopify API version to use (e.g., 2025-07)
accessToken
string required
Access token for admin API requests
sandbox
boolean
Enable GraphiQL sandbox for the client - default: true
autoImport
boolean
Auto-import generated types for this client - default: false (admin only enabled when explicitly set)
codegen.skip
boolean
Skip code generation for the client - default: false
codegen.pluginOptions.typescript
object
Custom TypeScript plugin options for code generation
headers
object
Additional headers to include in requests
documents
array
Additional glob patterns to include in code generation
retries
number
Number of retries for failed requests - default: 3

Fragments

fragments.path
string
Path to GraphQL fragments directory - default: /graphql
fragments.autoImport
boolean
Auto-import from fragments directory - default: true

Error Handling

errors.throw
boolean
API clients throw errors instead of returning them in the errors object in the response - default: true

Webhooks

webhooks.secret
string
Your Shopify App Client Secret. Used for HMAC validation.
webhooks.hooks
array
An array of webhooks to subscribe to.

Complete Example

Full configuration example with all options:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/shopify'],
  
  shopify: {
    name: 'quickstart-abcd1234',
    
    clients: {
      storefront: {
        apiVersion: '2025-07',
        publicAccessToken: 'YOUR_PUBLIC_ACCESS_TOKEN',
        privateAccessToken: 'YOUR_PRIVATE_ACCESS_TOKEN',
        mock: false,
        proxy: true,
        sandbox: true,
        autoImport: true,
        codegen: {
          skip: false,
          pluginOptions: {
            typescript: {},
          },
        },
        headers: {},
        documents: [],
        retries: 3,
      },
      
      admin: {
        apiVersion: '2025-07',
        accessToken: 'YOUR_ADMIN_ACCESS_TOKEN',
        sandbox: true,
        autoImport: false,
        codegen: {
          skip: false,
          pluginOptions: {
            typescript: {},
          },
        },
        headers: {},
        documents: [],
        retries: 3,
      },
    },
    
    logger: {},
    
    fragments: {
      path: '/graphql',
      autoImport: true,
    },
    
    errors: {
      throw: true,
    },

    webhooks: {
      secret: 'YOUR_SHOPIFY_CLIENT_SECRET',
      hooks: [
        {
          topic: 'ORDERS_CREATE',
          uri: 'https://your-app.com/api/webhooks/orders-create',
          format: 'JSON',
          filter: '',
          includeFields: '',
          metafieldNamespaces: [],
          metafields: [],
        },
      ],
    },
  },
})

Setup Shopify

How to setup your Shopify shop to use with Nuxt Shopify

Storefront API

Using the Shopify Storefront API in Nuxt