Getting Started
Installation
Install and configure shopify-app-nuxt in your Nuxt application.
Quick Start
Install the module
Add shopify-app-nuxt to your Nuxt application:
bun add shopify-app-nuxt
npm install shopify-app-nuxt
yarn add shopify-app-nuxt
Configure nuxt.config.ts
Add shopify-app-nuxt to the modules section and configure your Shopify credentials:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['shopify-app-nuxt'],
shopify: {
apiKey: 'ApiKeyFromPartnersDashboard',
apiSecretKey: 'ApiSecretKeyFromPartnersDashboard',
appUrl: 'https://your-app-url.com'
}
})
All values can also be set via environment variables:
| Option | Env Variable |
|---|---|
apiKey | NUXT_SHOPIFY_API_KEY |
apiSecretKey | NUXT_SHOPIFY_API_SECRET_KEY |
appUrl | NUXT_SHOPIFY_APP_URL |
Set up session storage (optional)
By default, the module provides an in-memory session storage (MemorySessionStorage) that works out of the box — no configuration needed. For production, use a persistent adapter.
Create a Nitro server plugin to override session storage or configure lifecycle hooks:
server/plugins/shopify.ts
import { configureShopify } from '#shopify/server'
import { PrismaSessionStorage } from '@shopify/shopify-app-session-storage-prisma'
import { prisma } from '~/server/utils/prisma'
export default defineNitroPlugin(() => {
configureShopify({
sessionStorage: new PrismaSessionStorage(prisma),
hooks: {
afterAuth: async ({ session, admin }) => {
// Register webhooks, seed data, etc.
}
}
})
})
Any config passed to
configureShopify() is merged with the defaults — you only need to specify what you want to override.Start your dev server
Use the Shopify CLI to start your development server with a tunnel:
Terminal
shopify app dev
Or start the Nuxt dev server directly:
Terminal
bun run dev
Your app will be running at http://localhost:3000.
Loading your app in Shopify Admin
To load your app within the Shopify Admin:
- Update your app's URL in the Partners Dashboard app setup page to your app URL (e.g.,
https://your-app-url.com) - Update the callback URL to
https://your-app-url.com/_shopify/auth/callback - Go to Test your app in Partners Dashboard and select your development store
In development, the Shopify CLI creates a Cloudflare tunnel automatically. Use the tunnel URL as your
appUrl.