Edgio AppOpsEdgio DeliveryEdgio StreamingContact SalesContact SupportResourcesInvestorsCareersDeliveryApp EdgeEdgeJS (CDN-as-code)ObservabilityTraffic SplittingGlobal CDNFull-Stack EnvironmentsFeature ManagementBranch PreviewPredictive PrefetchServerless ComputeGraphQL CachingImage OptimizationApp PlatformWeb Application FrameworksIterative MigrationApp SecurityWAF, DDoS, Bot Management and API ProtectionDevelop fasterRelease with confidenceRun sub-second sitesProtect your appSimplify, save and evolveSecurityStreamingExpert ServicesEdge Cache for ISPsAccelerated DevelopmentInstant Page LoadsNext-Gen Web CDNGlobal CDNWeb SecurityDocsContact SalesApp EdgeApp PlatformApp SecurityBranch PreviewEdgeJSFeature ManagementFull-stack EnvironmentsGlobal CDNGraphQL CachingImage OptimizationIterative MigrationObservabilityPredictive PrefetchServerless ComputeTraffic SplittingWAF, DDoS, Bot ManagementWeb Application FrameworksDeliveryStreamingSupportResource CenterBlogDeveloper DocsChangelogForumAboutLeadership TeamCareersInvestorsNewsroomContact UsTerms of ServicePrivacy PolicyAcceptable Use PolicyData and Protection AddendumInvoice MethodologiesPrivacy ShieldWebsite Disclaimer
Blog

NuxtShop: A Nuxt and Shopify eCommerce Starter Kit

By: Adebiyi Adedotun | February 9, 2022
Print Article

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

  • 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 less dependencies for a performant eCommerce site. If you’ve written any Nuxt at all, you will be right 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 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 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 PiniaIt 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, 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 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)

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

TypeScript Support

NuxtShop ships with TypeScript for static type checking.

Features

Easy to setup/get started

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.

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

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.

Deploy in 1-Click

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

Explore Edgio Solutions

Get the information you need. When you’re ready, chat with us, get an assessment or start your free trial.