Vue and Nuxt for headless commerce

Why framework choice matters in headless commerce

In a headless architecture, the storefront is a fully independent application. It lives and dies by its own performance, its own deployment pipeline, and its own engineering conventions. The framework is not just a rendering engine — it shapes the development experience, the hiring pool, the upgrade cadence, and the long-term maintenance cost.

Framework choice in headless commerce almost always comes down to two options: Vue with Nuxt, or React with Next.js. Both ship production storefronts at scale. The differences are smaller than the developer discourse suggests, but they are real in the places that matter for commerce specifically.

What Vue brings to a headless storefront

Vue is a progressive JavaScript framework built around a component model with a clear separation of template, logic, and styles. The Options API and Composition API give teams flexibility in how they structure components, but the framework itself imposes more conventions than React does. That is a feature, not a constraint, for teams maintaining a storefront across a multi-year delivery cycle.

Single-file components (SFCs) are Vue's most practical advantage for commerce. Each component is one file: the template, the script, and the scoped styles together. There is no ambiguity about where a component's behavior is defined. For teams handing off storefronts between developers, this predictability compounds over time.

Vue's reactivity system is also well-suited to commerce data patterns. Cart state, product variants, price calculations, stock availability — these are all reactive data problems. Vue's reactive primitives handle them cleanly without the boilerplate that Redux or Zustand introduce in React projects.

What Nuxt adds on top of Vue

Nuxt is the full-stack framework built on top of Vue. It handles routing, server-side rendering, static generation, data fetching, and deployment. For headless commerce, Nuxt's most important contributions are:

• SSR by default. Every page is server-rendered unless you opt out. Product pages, category listings, and landing pages all return full HTML on first request. This matters for Core Web Vitals and for SEO indexing, particularly on commerce-critical pages where Google needs to see product data in the initial response.
• Nuxt Image. Automatic image optimization with responsive sizes, lazy loading, and CDN integration. Images are the dominant performance cost on commerce pages. Nuxt Image handles this at the framework level rather than requiring per-component implementation.
• Nuxt SEO. Server-rendered meta, Open Graph, Twitter cards, canonical links, and schema.org structured data, all driven by composables. Product schema, breadcrumb schema, and organization schema ship with the module. Commerce storefronts need structured data; Nuxt makes it a first-class concern.
• i18n. Multi-language and multi-currency storefronts are a standard requirement for Nordic merchants selling across SE, NO, DK, and FI. Nuxt's i18n module handles route translation, locale detection, and content switching cleanly.
• Nuxt modules ecosystem. Sitemap, robots, fonts, icon sets, analytics — the module registry covers the standard storefront toolchain. Most are maintained by the core team or Nuxt community partners.

Vue and Nuxt vs React and Next.js for commerce

The honest comparison is closer than either community admits. Both stacks render fast, both have mature SSR, and both have the ecosystem depth that a headless commerce project needs. The real differences come down to:

• API surface. Vue's API is smaller and more opinionated. React gives more choices, which means more decisions for the team to make and more ways for a project to diverge from conventions over time.
• Hiring market. React and Next.js have a larger global developer pool. Vue and Nuxt have a strong European and particularly Nordic talent base. For agencies delivering storefronts in Sweden, Norway, and the Netherlands, Vue hiring is not a bottleneck.
• Server components. Next.js introduced React Server Components as a fundamental shift in how React applications are structured. Nuxt's approach to server rendering is more established and less experimental. For teams that want stability over cutting-edge architecture, Nuxt's model is lower risk.
• Commerce ecosystem. Alokai (formerly Vue Storefront) is built on Vue and Nuxt. Frntkey is built on Vue and Nuxt. The leading headless commerce FaaS products in the European market have standardized on this stack. That alignment means more shared tooling, more community examples, and a more established pattern library.

Performance considerations specific to commerce

Framework performance in isolation means little for commerce. What matters is time-to-first-byte on product pages, Largest Contentful Paint on category listings, and Interaction to Next Paint on cart and checkout flows. All of these are determined more by data fetching strategy, image optimization, and edge caching than by framework choice.

Nuxt's ISR (Incremental Static Regeneration) and full-page edge caching on Vercel are the primary performance levers for product and category pages. Pages that do not change frequently — category structure, product detail for in-stock items — can be served from CDN edge nodes with near-zero TTFB. Cart, checkout, and account pages require server rendering and cannot be edge-cached.

The BFF (backend-for-frontend) layer that sits between the Nuxt storefront and the commerce APIs is where most performance engineering happens. Composing product data, price data, and stock data into a single optimized response, and caching that response appropriately, is what separates fast headless storefronts from slow ones. The framework choice has minimal impact on this.

How Frntkey uses Vue and Nuxt

Frntkey is a frontend-as-a-service built entirely on Nuxt.js, Vue.js, and Tailwind CSS. The storefront component library is Vue SFCs. The routing, SSR, and data fetching layer is Nuxt. Hosting runs on Vercel with edge CDN and ISR for product and category pages.

The same codebase powers storefronts on Norce Commerce and Shopware. Each backend has its own adapter layer that translates the commerce API into the shared Frntkey data model. The Vue and Nuxt surface is identical regardless of which commerce engine is running underneath.

The technology choices are explained in detail on the Frntkey technology page. The short version: Vue and Nuxt were chosen for their balance of SSR maturity, module ecosystem coverage, and long-term maintainability in a product that has to stay current across multiple major versions.

When to choose Vue and Nuxt for a headless storefront

Vue and Nuxt are the right choice when:

• The delivery team or agency has Vue and Nuxt experience. Framework familiarity matters more than framework benchmarks.
• The project runs on a commerce backend with a Vue-first FaaS option — Norce with Frntkey, or a Shopware project where Frntkey or Alokai are under evaluation.
• The storefront needs multi-market support with route-level i18n from day one. Nuxt's i18n module is mature and well-documented.
• The team wants a stable, lower-churn upgrade path. Nuxt's major version transitions have been well-managed. The jump from Nuxt 2 to Nuxt 3 was significant but handled with a clear migration guide and long support windows.

React and Next.js are the better choice when the team is React-native, the project is on Shopify (where Hydrogen is the headless standard), or the delivery partner's toolchain is Next-first. Framework loyalty that runs against the team's experience is a project risk.