DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Charles Ouellet
Charles Ouellet

Posted on • Originally published at snipcart.com on

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

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

graphql-vuejs-gridsome

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

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!