Introduction

What is shopify-app-nuxt?

shopify-app-nuxt is a Nuxt 4 module that integrates Shopify into Nuxt applications — providing authentication, webhooks, billing, session management, Polaris components, and App Bridge.

It is the Nuxt equivalent of @shopify/shopify-app-react-router. It builds on @shopify/shopify-api and creates a module layer that allows your app to communicate with and authenticate requests from Shopify.

By default, your app behaves as an embedded app running inside the Shopify Admin iframe, using the CDN-based Shopify App Bridge for frontend authentication.

How is this different from @nuxtjs/shopify?

@nuxtjs/shopify and shopify-app-nuxt solve fundamentally different problems — you may even use both in the same project.

@nuxtjs/shopify is a storefront/headless module. It's primarily built for merchants creating custom storefronts — product pages, carts, checkout flows — using the Storefront API. It also supports Admin API access (via client credentials, static token, or offline refresh token), webhooks (HMAC validation + CLI management), Customer Account API, and zero-config GraphQL codegen. However, it's designed around single-store access — your app talks to one Shopify store using pre-configured credentials. There's no OAuth flow for onboarding multiple merchants, no App Bridge, and no Polaris UI — because storefronts don't need those.

shopify-app-nuxt is an embedded app framework. It's for developers building Shopify apps that run inside the Shopify Admin — authenticating multiple merchants via OAuth, exchanging session tokens, managing per-shop sessions, and rendering Polaris UI inside the Admin iframe. Think of it as the Nuxt equivalent of @shopify/shopify-app-react-router.

Both modules support Admin API and webhooks, but the key difference is who they're built for:

Use @nuxtjs/shopify if you're building a custom Nuxt storefront for a single Shopify store — product pages, collections, cart, checkout. It excels at storefront data fetching, Customer Account API, GraphQL codegen, and CLI-based webhook management.

Use shopify-app-nuxt if you're building a Shopify app that multiple merchants install — something that runs inside the Shopify Admin, authenticates each merchant via OAuth, handles per-merchant session tokens, and renders Polaris UI. This is what you need to publish on the Shopify App Store.

Use both together if your app needs embedded admin functionality and storefront data access — they complement each other.

Why We Built This

Shopify's official app framework, @shopify/shopify-app-react-router, only supports React Router (formerly Remix). There's no official equivalent for Nuxt or Vue.

At KiriminAja, our team uses Nuxt across all our projects. When we needed to build Shopify apps, we faced a framework knowledge gap — our developers are experienced with Nuxt and Vue, not React. Rather than forcing the team to learn an entirely different stack just for Shopify, we built shopify-app-nuxt to bring the same capabilities to the framework we already know.

This module bridges that gap by reimplementing the core functionality of @shopify/shopify-app-react-router for Nuxt:

• OAuth & session management — ported from React Router's auth flow to Nuxt server routes
• App Bridge — using the CDN approach (framework-agnostic) with Vue composables
• Polaris components — Vue wrappers (Sh*) for Shopify's web components, since @shopify/polaris is React-only
• App Bridge UI — Vue wrappers (ShUi*) replacing @shopify/app-bridge-react components

If your team is in a similar situation — experienced with Vue/Nuxt but needing to build Shopify apps — this module is for you.

Why Nuxt?

Beyond familiarity, Nuxt brings real technical advantages over React Router for building Shopify apps:

• Rolldown + Vite integration — Nuxt is built on Vite with upcoming Rolldown support, delivering blazing-fast HMR and optimized production builds powered by Rust-based bundling.
• Powerful DevTools — Nuxt DevTools provides an in-browser panel for inspecting components, routes, state, server API routes, modules, and more — far beyond what React DevTools offers out of the box.
• Rich module ecosystem — Over 200+ modules maintained by the Nuxt team and community, covering everything from authentication and content management to SEO, image optimization, and database integration.
• Backed by the Vue & Nuxt core teams — Vue and Nuxt are actively maintained by dedicated core teams. The Vue roadmap continues to deliver performance improvements like Vapor Mode (a compilation strategy that eliminates the virtual DOM for even faster rendering).
• Nitro server engine — Nuxt's server layer (Nitro) provides auto-imported server utilities, file-based API routes, and deployment to 15+ hosting providers with zero config.
• Auto-imports everywhere — Components, composables, and server utilities are auto-imported. No boilerplate, no manual import statements cluttering your code.
• TypeScript by default — Full TypeScript support with auto-generated types for routes, config, and API responses — without extra configuration.

By choosing Nuxt, you get a modern, batteries-included framework that's continuously improving — and you don't have to give any of that up just because you're building a Shopify app.

Key Features

References

This module was built on top of and inspired by these projects:

• @shopify/shopify-app-react-router — Shopify's official React Router integration for building Shopify apps. shopify-app-nuxt reimplements its core functionality for Nuxt.
• @shopify/app-bridge — Shopify's App Bridge SDK for embedding apps in the Shopify Admin. We use the CDN-based approach with Vue composables.
• @nuxtjs/shopify — A Nuxt module for headless storefronts with Storefront API, Customer Account API, Admin API (static token), and GraphQL codegen. Solves a different problem — see the comparison table above.
• shopify-app-nuxt — An early Nuxt module for Shopify apps by Travis Reynolds that proved the concept and inspired this project.