Introduction

NuxtShop is a highly-customizable, open-source starter kit, introduced at Vue.js Nation 2022, for building headless Shopify stores with Nuxt 3. It comes out of the box with a great developer experience and in-built performance practices as a foundation for a production-quality eCommerce site.

Read the blog post NuxtShop: A Nuxt and Shopify eCommerce Starter Kit to learn more.

Technologies

NuxtShop uses the following technologies:

Nuxt3 as the Vue framework.
Pinia for state management in Vue.
Tailwind CSS for CSS styling.
Apollo for GraphQL.
Layer0 for deployment.
Shopify for Headless eCommerce and as a checkout system.
TypeScript for type safety.

Features/Benefits

Easy to setup/get started.
Only necessary packages required to run.
Customizable — minimal styling out of the box.
Cart.
Shopify checkout.
1-click deploy to Layer0 with features like Real User Monitoring

1-click deploy to Layer0

Click the deploy button below to deploy NuxtShop to Layer0 in 1-click.

NOTE: If you're deploying to Layer0, Layer0 only supports Node.js version 14. See this guide on how to Install Node.js and npm

Getting Started

1. Fork and clone this repository

Fork this repository to your GitHub account and then clone it to your local environment.

2. Install dependencies

Install the dependencies:

yarn install

3. Local development

Start the development server on http://localhost:3000:

yarn dev

4. Production

Build the application for production:

yarn build

Checkout the deployment documentation.

Shopify Setup

Create a Shopify store
- Tip: Sign up as a Shopify Partner to get access to development stores.
In your new store, go to Apps, create a private app and give it Storefront API access
Recommended reading: Getting started with the Shopify Storefront API
This project references a collection named 'All', but you can adjust that to whatever you like.
Optional: Sample Shopify product CSVs. The demo uses 'apparel.csv'.

App Setup

rename .env.sample to .env
Add your Shopify Access Token and *.myshopify url to the .env variables

Dev tooling recommendations

VSCode Extensions
- Vetur
- Tailwind intellisense for class autocomplete
Prettier
Eslint

Limitations

Because NuxtShop is built in the open and on the bleeding-edge, there are a few limitations to be aware of:

NuxtShop is built on Nuxt3 which at this time is still officially in beta
NuxtShop uses the new Shopify Cart API which does not support Shopify Scripts on Plus yet. To use scripts, you can adjust to the Checkout API

Troubleshoot

Deploying to Layer0? Node 14 is the latest supported version.

Recommended resources

Nuxt3 official documentation

qianlanse/nuxtshop