• 🏀 Online demo
• 📚 Nuxt Shopify documentation

• 🛍️ Shopify Integration: Sell your products directly from your Nuxt app with Nuxt Shopify
• 🌐 Internationalization: Built-in page localizations with Nuxt i18n
• 👤 Order and Account Management: Log in with the Customer Account API to view your profile and order history
• 🔎 Analytics and Cookies: Integrated analytics and cookie consent management using the Customer Privacy API
• 🧩 UI Components: Built with Nuxt UI components and Tailwind 4 for a consistent look and feel
• 🖼️ Image Optimization: Automatically optimized images with Nuxt Image
• 🔗 Type Safety: Fully type-safe and checked with Vue-Tsc
• 🧹 Code Quality: Minimally configured ESLint for code quality

Deploy to vercel:

Deploy to Cloudflare:

Run the following command to clone the shop template:

npx @nuxtjs/shopify@latest init ./my-shop

Now you can navigate to the my-shop directory:

cd my-shop

Install the dependencies:

npm install

(you can also use yarn, pnpm or bun if you prefer)

Create a .env file in the root of the project and add your Shopify credentials:

NUXT_SHOPIFY_NAME="..."
NUXT_SHOPIFY_CLIENTS_STOREFRONT_API_VERSION="2026-04"
NUXT_SHOPIFY_CLIENTS_STOREFRONT_PUBLIC_ACCESS_TOKEN="..."

To enable the customer account (login, profile and order history), add your Customer Account API credentials as well:

NUXT_SHOPIFY_CLIENTS_CUSTOMER_ACCOUNT_CLIENT_ID="..."
NUXT_SHOPIFY_CLIENTS_CUSTOMER_ACCOUNT_CLIENT_SECRET="..."

The OAuth flow needs a publicly reachable URL, so in development point it at a tunnel via the dev.tunnelURL option in nuxt.config.ts. See the Customer Account API guide for details.

And that's it! Now your template is ready to use.

To start the development server run the dev command:

npm run dev

The server will be available at: http://localhost:3000/.

To use the GraphQL explorer for the Storefront API navigate to: http://localhost:3000/_explorer/storefront.

To build the application use the build command:

npm run build

The template has an eslint configuration file, you can run it with the lint command:

npm run lint

The template uses vue-tsc to make sure all types are correct, you can run it with the typecheck command:

npm run typecheck

Published under the MIT License.