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:

1. NuxtShop is built on Nuxt3 which at this time is still officially in beta
2. 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

1. Nuxt3 official documentation