shopify-nuxtjs-starter's Introduction

Shopify Headless Site with Nuxt.js Example

This is a work in progress. Will update as I get time.

When I was building my first Shopify Store I noticed there were a lot of gotchas. I wanted to make sure I was following best practice so that I could build a scalable shopify store.

Here's a couple of issues you might run into as you build your first store.

Using asyncData vs fetch for products/pages/articles
Clearing state across product page loads
Shopify Product permisions vs Store front permissions
Checkout, and managing the CheckoutId
How to effectively manage product attributes/badges like 'sale', 'fast shipping' throughout the site.

Here's some other features features we have out of the box.

Automatic detection that product variants exist
Automatic Colour Picker
Static Site Deployment and automatically generate routes for all products/pages/articles

Demo Site

https://shopify-nuxtjs-starter.netlify.com

Store configuration

Copy .env.example to .env and populate with your store details.

You will need to create a new private app under you store. https://your-store-name.myshopify.com/admin/apps/private

SHOPIFY_DOMAIN="store.myshopify.com"
SHOPIFY_ACCESS_TOKEN=XXXXXX

We use a couple of projects under the hood.

Nuxt.js Shopify Module (https://github.com/Gomah/nuxt-shopify)
Cookie Universal Nuxt (https://www.npmjs.com/package/cookie-universal-nuxt)

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

Recommend Projects