NuxtShop is a highly-customizable, open-source starter kit for building headless Shopify stores with Nuxt 3. It comes out of the box with a great developer experience and built-in performance practices as a foundation for a production-quality eCommerce site.
NuxtShop was born out of a necessity heralded by the fallout of the Covid-19 pandemic on eCommerce. As discovered by Forrester and Bloomreach, there was a meteoric rise in eCommerce incremental sales and brand revenue in 2019 when 83% of businesses experienced a double-digit growth in digital revenue as opposed to mere 9%.
During this period, Universal Standard, the world’s most size-inclusive fashion brand, shuttered all retail spaces. Universal Standard successfully migrated to a headless architecture built with NuxtJS and Shopify, with 100% of revenue inbound from online sales despite the relatively small size of the development team and their modest budget.
Not only did the clothing company see a 200% lift in mobile conversion rate and an unprecedented highest revenue day with the migration, the team velocity also improved
Following the migration success, Justin Metros — Head of Technology, Universal Standard — set forth to create NuxtShop, a starter kit he wished he had when Universal Standard migrated. NuxtShop is a distillation of how Universal Standard architected the migration and solved for key challenges in headless commerce including:
Cross-domain communication for cart management
Optimization for Core Web Vitals
Apollo client and GraphQL API caching (coming soon)
Real-time CDN data synchronization
The open source project provides a seamless migration and proven techniques for server-side rendering (SSR), caching, performance optimization, and deployments with an emphasis on developer experience.
NuxtShop is an open source starter kit for developing headless eCommerce on Shopify with Vue 3, Nuxt 3, Apollo, Tailwind 3, and Pinia. It allows you to use the latest technologies like Nuxt3 and Tailwind 3, with less dependencies for a performant eCommerce site. If you’ve written any Nuxt at all, you will be right at home with NuxtShop.
a lightweight starting point
configured to help you be productive quickly
minimally styled with basic functionality ready to extend
opinionated, but not prescriptive
a starting point for Nuxt + Shopify eCommerce at the edge with Layer0
a project for basic eCommerce functionality with a structure that encourages great development practices
made for developers embarking on headless Shopify eCommerce with Nuxt
a Shopify theme
a full-featured, plug and play solution/production ready store
a design system
tightly coupled to any one tool - swap out what you want, add what you need
At the core of NuxtShop is minimalism and simplicity. It is built on the necessary technologies to run without sacrificing or compromising on quality. It is also future-proof because it is built with the latest technologies, on the bleeding-edge of innovation.
Nuxt 3 has been re-architected with a smaller core and optimized for faster performance and better developer experience. NuxtShop is built on the future of Nuxt with Nuxt 3 (which is currently in beta).
NuxtShop manages states with Pinia. It is intuitive, type safe, extensible, extremely light, modular by design, and has devtools support.
NuxtShop comes out of the box with Tailwind CSS, a highly customizable utility-first CSS framework that allows style composition directly in your markup without having to deal with semantic class names.
NuxtShop makes use of Apollo for managing APIs with GraphQL. With Apollo [Studio], not only will you be able to manage the lifecycle of your GraphQL APIs, you’d also be able to develop, deliver, and observe its activities.
By default, NuxtShop ships with Layer0 as the hosting platform because it offers a lot of the features that powers Universal Standard. Features like Core Web Vitals and Real User Monitoring, GraphQL Caching, Security (DDOS Protection, WAF, and Bot Management)
NuxtShop is powered by a decentralized headless architecture interconnected by APIs. It offers a storefront API with primitives and capabilities such as cart, checkout, etc. for you to hit the ground running. With the headless approach, you can also swap out what you need and don’t need, or easily introduce new services into your stack like a payment gateway, headless CMS, or checkout system.
NuxtShop ships with TypeScript for static type checking.
Getting NuxtShop and and running is straightforward to install and run with the Shopify and App setup, or deploying to Layer0 with a 1-click deploy that also clones the project to your GitHub account.
NuxtShop employs the services of only necessary packages required to run, putting you behind the wheels of control.
Not only is NuxtShop a built to be a lowest common denominator, it also ships with minimal styling, letting you take control of your design as you typically would with a fresh Nuxt project.
NuxtShop is built to be API-driven. Get started with a lean API footprint and swap and replace services as you see fit.
NuxtShop comes factory-built with a 1-click deploy to Layer0, an edge platform that integrates edge logic into app code & extends the edge to the browser. It helps you build, deploy, and ship faster, with features ranging from Core Web Vitals and Real User Monitoring, GraphQL Caching, Edge Experiments, to Security.
Visit the links below to get started.
Do you want to contribute to NuxtShop?
Fork NuxtShop to your GitHub account and clone it to your local device.
Create a new branch `git checkout -b <branch-name>`
Set up your Shopify store
In the local clone, rename `.env.sample` to `.env`
Add your Shopify Access Token and *.myshopify url to the .env variables
Run `yarn` to install dependencies
Run `yarn dev` to start your application on a local development server
Pull requests should be made against the `main` branch.
Found any issues with NuxtShop? Create a new issue
Get the information you need. When you’re ready, chat with us, get an assessment or start your free trial.