As the latest dev hire for Snipcart, I was put to the test quickly.

My mission? Craft an e-commerce side-project using our shopping cart with an imposed technology, in a limited amount of time.

The technology in question? Gridsome, the Jamstack framework for Vue.js.

So, I rolled up my sleeves and got to work.

My efforts resulted in a Gridsome e-commerce demo. I documented my process in a step-by-step tutorial ready for you to follow along.

This tutorial explores how to:

• Create a Gridsome project
• Enable e-commerce functionalities with Snipcart
• Craft product listings & pages
• Configure the template routing
• Leverage GraphQL with Gridsome

I think I did a decent job. Let’s see, shall we?

What’s up with Gridsome?

In case you don’t know about it, Gridsome is a modern website generator for Vue.js.

What does “modern” mean here? As a tool, it falls under the trending Jamstack umbrella and can be used to generate static websites, progressive web apps (PWA), or single-page apps (SPA). Whatever the type of frontend platform you want to create, Gridsome makes it easy to connect to any CMS or data source using GraphQL.

This first post we wrote about Gridsome explained how to use the GraphQL API to fetch data from an Airtable database.

Familiar with the React-powered Gatsby? Well, Gridsome can be considered the equivalent for Vue.

→ Read the full tutorial here