snipcart / gridsome-graphql-snipcart

A Gridsome demo with Airtable as database (GraphQL queries)

Home Page:https://snipcart.com/blog/vuejs-graphql-airtable-example

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

gridsome-demo

Hard to argue against the fact that Vue.js and GraphQL have 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 here 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:

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

Read the full tutorial here

See the live demo here

Enjoy folks!

About

A Gridsome demo with Airtable as database (GraphQL queries)

https://snipcart.com/blog/vuejs-graphql-airtable-example


Languages

Language:Vue 78.6%Language:JavaScript 21.4%