Leveraging Vue.js & GraphQL with Gridsome (Airtable Database Example)

Take a moment to look back at the advancement of modern JavaScript in the last few years.

There are certainly a few specific frontend techs that pop to your mind—React, Node, Redux, etc.

You can’t argue that Vue.js and GraphQL also made significant waves in the ever-growing JS pond.

Now, what if I told you that the tool leveraging both to build powerful websites and apps has arrived?

Yes, Vue.js finally found its Gatsby, and it’s called Gridsome.

It quickly caught the attention of our team and today I’m putting it to the test by building my own Vue & GraphQL-powered e-commerce app.

This tutorial will highlight some of Gridsome’s neat features while using Airtable as a handcrafted database.

Steps 🛠

1. Creating a Gridsome project
2. Handling a products sheet in Airtable
3. Crafting a Gridsome data source plugin to fetch products from Airtable
4. Querying data with GraphQL
5. Building Vue.js views & listing
6. Adding the buy button

First, a bit of context.

Intro to Gridsome: Leveraging Vue.js & GraphQL

Please don’t feel ignorant if this is the first time you've read about Gridsome as it’s only a few months old. Though, spoiler alert, you’ll probably hear about it more and more in the months to come.

It’s a Vue-based static site generator that connects to any CMS or data source from a GraphQL layer.

It was strongly inspired by what Gatsby does for React.

→ Read the full post and technical tutorial here