Getting Started

Configuration

All module options and runtime configuration for shopify-app-nuxt.

Module Options

Configure shopify-app-nuxt in your nuxt.config.ts under the shopify key:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['shopify-app-nuxt'],

  shopify: {
    apiKey: '',
    apiSecretKey: '',
    appUrl: '',
    scopes: [],
    apiVersion: 'January26',
    authPathPrefix: '/_shopify/auth',
    distribution: 'app_store',
    useOnlineTokens: false,
    authPage: undefined,
    navLinks: [],
    codegen: false
  }
})

Options reference

Option	Type	Default	Description
`apiKey`	`string`	—	Your Shopify API key from the Partners dashboard
`apiSecretKey`	`string`	—	Your Shopify API secret key
`scopes`	`string[]`	`[]`	OAuth scopes (optional — Shopify reads from `shopify.app.toml`)
`appUrl`	`string`	—	Your app's public URL (tunnel URL in development)
`apiVersion`	`ApiVersion`	Latest stable	The Shopify API version to use
`authPathPrefix`	`string`	`/_shopify/auth`	URL prefix for OAuth endpoints
`distribution`	`AppDistribution`	`app_store`	App distribution type (`app_store`, `single_merchant`, `shopify_admin`)
`useOnlineTokens`	`boolean`	`false`	Use online (per-user) tokens in addition to offline (per-shop) tokens
`authPage`	`string \| false`	built-in page	Custom auth page component path, or `false` to disable
`navLinks`	`NavLink[]`	`[]`	Navigation links for the app sidebar (used by `<ShApp>`)
`codegen`	`boolean \| string[]`	`false`	Enable GraphQL codegen — `true` for default version, or array of versions

Environment variables

All credential options can be set via environment variables instead of hardcoding them:

Option	Env Variable
`apiKey`	`NUXT_SHOPIFY_API_KEY`
`apiSecretKey`	`NUXT_SHOPIFY_API_SECRET_KEY`
`appUrl`	`NUXT_SHOPIFY_APP_URL`

Codegen environment variables

When codegen is enabled, the module fetches schemas via introspection. Provide store credentials:

Env Variable	Description
`SHOPIFY_CODEGEN_STORE_DOMAIN`	Your Shopify store domain (e.g. `store.myshopify.com`)
`SHOPIFY_CODEGEN_ADMIN_ACCESS_TOKEN`	Admin API access token for schema introspection

Alternatively, you can use SHOPIFY_STORE_DOMAIN and SHOPIFY_ADMIN_ACCESS_TOKEN.

Runtime Configuration (`configureShopify`)

Simple values go in nuxt.config.ts. Complex runtime objects (session storage, hooks, billing) go in a Nitro plugin using configureShopify():

server/plugins/shopify.ts

import { configureShopify } from '#shopify/server'
import { MemorySessionStorage } from '@shopify/shopify-app-session-storage-memory'

export default defineNitroPlugin(() => {
  configureShopify({
    sessionStorage: new MemorySessionStorage(),
    hooks: {
      afterAuth: async ({ session, admin }) => {
        // post-auth logic
      }
    }
  })
})

Runtime config options

Option	Type	Description
`sessionStorage`	`SessionStorage`	Session storage adapter (default: `MemorySessionStorage`)
`webhooks`	`Record<string, WebhookHandler \| WebhookHandler[]>`	Webhook handler configuration
`hooks`	`{ afterAuth?: (opts) => void \| Promise<void> }`	Lifecycle hooks
`billing`	`Record<string, any>`	Billing configuration for subscriptions

Session storage adapters

For production, replace the default MemorySessionStorage with a persistent adapter:

Adapter	Package
Prisma	`@shopify/shopify-app-session-storage-prisma`
Drizzle	`@shopify/shopify-app-session-storage-drizzle`
Redis	`@shopify/shopify-app-session-storage-redis`
MongoDB	`@shopify/shopify-app-session-storage-mongodb`
Memory (default, not for production)	`@shopify/shopify-app-session-storage-memory`

Navigation Links

Configure sidebar navigation via the navLinks option. These are rendered by <ShApp> as the App Bridge nav menu:

nuxt.config.ts

export default defineNuxtConfig({
  shopify: {
    navLinks: [
      { label: 'Home', href: '/', rel: 'home' },
      { label: 'Products', href: '/products' },
      { label: 'Settings', href: '/settings' }
    ]
  }
})

Each link has:

Property	Type	Description
`label`	`string`	The visible label text
`href`	`string`	The URL path (e.g., `/products`)
`rel`	`string`	Optional — set to `'home'` to designate as the default landing page

Runtime Config Types

The module augments Nuxt's RuntimeConfig types for full autocomplete:

// Server — all Shopify config fields are typed
const config = useRuntimeConfig()
config.shopify.apiKey // string
config.shopify.apiSecretKey // string
config.shopify.scopes // string[]
config.shopify.appUrl // string
config.shopify.apiVersion // string
config.shopify.authPathPrefix // string
config.shopify.distribution // string
config.shopify.useOnlineTokens // boolean

// Client — only public fields
const publicConfig = useRuntimeConfig().public
publicConfig.shopify.apiKey // string
publicConfig.shopify.authPagePath // string
publicConfig.shopify.authPathPrefix // string
publicConfig.shopify.navLinks // NavLink[]

Edit this pageorReport an issue

Project Structure

Typical file structure for a shopify-app-nuxt application.

Requirements

Prerequisites for building a Shopify app with shopify-app-nuxt.