Home Blogs NuxtShop: A Nuxt and Shopify eCommerce Starter Kit
Applications

NuxtShop: A Nuxt and Shopify eCommerce Starter Kit

About The Author

Outline

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.

Deploy in 1-click

Why NuxtShop was born

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 double-digit growth in digital revenue as opposed to a 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, but 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 had when Universal Standard migrated. NuxtShop is a distillation of how Universal Standard architected the migration and solved 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
  • Developer productivity
  • Performance optimization

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.

What NuxtShop is and what it isn’t

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 fewer dependencies for a performant eCommerce site. If you’ve written any Nuxt at all, you will be at home with NuxtShop.

NuxtShop is:

  • 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

NuxtShop is not:

  • 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

What Technologies is NuxtShop built on?

At the core of NuxtShop are minimalism and simplicity. It is built on the necessary technologies to run without sacrificing or compromising quality. It is also future-proof because it is built with the latest technologies on the bleeding edge of innovation.

Nuxt 3 as the Vue Framework

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).

State Management with Pinia

NuxtShop manages states with Pinia. It is intuitive, type-safe, extensible, extremely light, modular by design, and has devtools support.

CSS Styling with Tailwind CSS

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.

Apollo for GraphQL

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, but you’d also be able to develop, deliver, and observe its activities.

Hosting via Layer0

By default, NuxtShop ships with Layer0 as the hosting platform because it offers many features that power Universal Standard. Features like Core Web Vitals and Real User Monitoring, GraphQL Caching, Security (DDOS Protection, WAF, and Bot Management)

Shopify for Headless eCommerce and as a checkout system.

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 swap out what you need and don’t or easily introduce new services into your stack like a payment gateway, headless CMS, or checkout system.

TypeScript Support

NuxtShop ships with TypeScript for static type checking.

Features

Easy to setup/get started

Getting NuxtShop 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.

Minimal External Package Footprint

NuxtShop employs the services of only necessary packages required to run, putting you behind the wheels of control.

Minimal Preliminary Styles

Not only is NuxtShop built to be the lowest common denominator, but it also ships with minimal styling, letting you take control of your design as you typically would with a fresh Nuxt project.

Headless Architecture

NuxtShop is built to be API-driven. Get started with a lean API footprint and swap and replace services as you see fit.

Hosting via Layer0

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.

Getting Started

Visit the links below to get started.

Contributions

Do you want to contribute to NuxtShop?

  1. Fork NuxtShop to your GitHub account and clone it to your local device.
  2. Create a new branch `git checkout -b <branch-name>`
  3. Set up your Shopify store
  4. In the local clone, rename `.env.sample` to `.env`
  5. Add your Shopify Access Token and *.myshopify URL to the .env variables
  6. Run `yarn` to install dependencies
  7. Run `yarn dev` to start your application on a local development server

Open a Pull Request

Pull requests should be made against the `main` branch.

Issues

Found any issues with NuxtShop? Create a new issue