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
Proxy all client-side requests through Nitro - default: true
sandbox
boolean
Enable GraphiQL sandbox for the client - default: true
skipCodegen
boolean
Skip code generation for the client - default: false
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: 0

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
skipCodegen
boolean
Skip code generation for the client - default: false
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: 0

Auto-imports

autoImports.graphql
boolean
Auto-import from ~/graphql directory - default: true
autoImports.storefront
boolean
Auto-import generated types for the storefront client - default: true
autoImports.admin
boolean
Auto-import generated types for the admin client - default: true

Error Handling

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

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,
        skipCodegen: false,
        headers: {},
        documents: [],
        retries: 0,
      },
      
      admin: {
        apiVersion: '2025-07',
        accessToken: 'YOUR_ADMIN_ACCESS_TOKEN',
        sandbox: true,
        skipCodegen: false,
        headers: {},
        documents: [],
        retries: 0,
      },
    },
    
    logger: {},
    
    autoImports: {
      graphql: true,
      storefront: true,
      admin: true,
    },
    
    errors: {
      throw: true,
    },
  },
})

Setup Shopify

How to setup your Shopify shop to use with Nuxt Shopify

Storefront API

Using the Shopify Storefront API in Nuxt