Skip to content
A Gridsome starter leveraging Airtable with a minimalist design.
Vue JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Netlify Status

Airtable starter for Gridsome

This starter is meant to act as a starting point/example for connecting Gridsome with Airtable.

Note: This Starter utilizes Moment.js for date/times and can be removed from the Event files if not needed (and removed with yarn remove moment)

Install Gridsome CLI tool (if you dont' have it already)

npm install --global @gridsome/cli

Create a Gridsome project

  1. gridsome create my-gridsome-site to install this starter
  2. cd my-gridsome-site to open the folder
  3. gridsome develop to start a local dev server at http://localhost:8080
  4. Happy coding 🎉💻

Configure your Airtable connection

Inside your gridsome.config.js file, you'll see the following:

// gridsome.config.js //

module.exports = {
  siteName: 'Site Name',
  plugins: [
      use: '@gridsome/source-airtable',
      options: {
        // Add these to a .env file
        // Details on finding these values can be found at:
        apiKey: process.env.AIRTABLE_KEY, //required
        baseId: process.env.AIRTABLE_BASE, //required
        tableName: 'Events', //required
        typeName: 'Event', //required - needs to match template name
        route: '/events/:name' //optional
  • apiKey is the API secret provided by Airtable
  • baseId is the identifier for the base you would like to connect to
  • tableName is the table you would like to pull data from
  • typeName is what you would like to call your data in GraphQL
  • route is the optional path you would like to use for accessing your records. This can use GraphQL keys to identify records.

Note: In order for your templates to generate properly at the specified route a typeName.vue file must exist in \templates. In this starter, this is \templates\Event.vue for the Event type.

dotenv file

Details on Gridsome Environment Variables.

You'll need to create the file .env in your root project directory (The same level as gridsome.config.js) with the following (replace with your values):


You can learn more about getting these values from the plugin page.

NOTE: When you deploy to Netlify, you'll need to setup these values under "Build & Deploy" > "Environment" > "Environment Variables"

Query Pages

A list of files where the starter uses queries to make updating easier (all from the src folder):

  • pages/Events.vue - Grabs all Events sorted by startDate
  • components/EventCard.vue - Brings Props in from pages/Events.vue
  • templates/Event.vue - Uses id to pull in data from Airtable.

My Airtable

This is what my Airtable Base looks like:

"Airtable with columns for Name, Header Image, Start Date, End Date, Excerpt, Notes, and Attachments."

Deploy with Netlify

Deploy to Netlify

You can’t perform that action at this time.