Skip to content

jspringer/vue-nuxt-sanity-snipcart-shop

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
css
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Web Shop

Vue.js + Nuxt.js e-commerce site using Sanity (headless CMS) for content, Snipcart for cart checkout.

Demo

Quickstart on local

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

Tips:

  • Make sure you are running on http://localhost:3000. If not sanity and snipcart will fail due to CORS origins.
  • Vue.js requires a recent Node version so if it fails on startup you might need an upgrade.

Using your own Sanity.io data

  • Install Sanity CLI: npm install -g @sanity/cli.
  • Initialize a new project: sanity init.
  • Select the e-commerce schema.
  • Start local Sanity studio: sanity start.
  • From sanity.json in the root directory of where your Sanity project is located, copy the projectId and dataset values.
  • In sanity.js in the root directory of this app, change the projectId and dataset values to the ones you copied above.
  • Remember to add CORS manage.sanity.io (ex. http://localhost:3000 to run locally).
  • Use sanity deploy to share your editor with others.
  • Sanity homepage

Install your own snipcart

Build production server or static project

# build for production and launch server
$ npm run build
$ npm start

# generate static project
$ npm run generate

If you want to host this on Netlify, as a static build, follow these steps while switching out the generate command above and changing the output directory from out to dist. Note: Nuxt is intended to run as a universal/isomorphic app and will make calls to the Sanity CDN.

The queries are by default limited to 100 items. This project is just an example, but it is possible to expand it with pagination or forever-scroll. To get more items, just add ex [0..1000] to the end of your query (more details).

About

Example international candy/chocolate shop using Sanity, Snipcart in Vue and Nuxt.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published