Getting Started
Installation
Installation of the Nuxt Shopify module
This guide will walk you through the installation and initial configuration of the Nuxt Shopify module.
Click here if you need help setting up Shopify.
You can start building without a store using mock.shop but you won't have access to real data.
Installation
Add the module to your app
npx nuxi@latest add nuxt-shopify
pnpx nuxi@latest add nuxt-shopify
bunx nuxi@latest add nuxt-shopify
npm install @nuxtjs/shopify
pnpm add @nuxtjs/shopify
bun add @nuxtjs/shopify
And then add the module to your Nuxt config:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxtjs/shopify'],
})
Configure the module
nuxt.config.ts
export default defineNuxtConfig({
shopify: {
name: 'quickstart-abcd1234',
clients: {
storefront: {
apiVersion: '2025-07',
publicAccessToken: 'YOUR_ACCESS_TOKEN',
},
},
}
})
nuxt.config.ts
export default defineNuxtConfig({
shopify: {
name: 'quickstart-abcd1234',
clients: {
storefront: {
apiVersion: '2025-07',
privateAccessToken: 'YOUR_PRIVATE_ACCESS_TOKEN',
},
},
}
})
nuxt.config.ts
export default defineNuxtConfig({
shopify: {
name: 'my-mocked-store',
clients: {
storefront: {
apiVersion: '2025-07',
mock: true,
},
},
}
})
nuxt.config.ts
export default defineNuxtConfig({
shopify: {
name: 'quickstart-abcd1234',
clients: {
admin: {
apiVersion: '2025-07',
accessToken: 'YOUR_ACCESS_TOKEN',
},
},
}
})
And that's it! You can now start using Nuxt Shopify.
The full module configuration reference can be found here.
Next Steps
- Check out the Usage guide to quickly get started with the module
- Read the Storefront API guide to learn how to query your Shopify store
- Read the Admin API guide to learn how to manage your Shopify store