Airtable source setup for Gridsome

.env

AIRTABLE_API_KEY=
AIRTABLE_BASE_ID=
AIRTABLE_TABLE_NAME=

AirtableProject.vue

// templates/AirtableProject.vue
<template>
  <Layout>
    <main>
      <div class="uk-container uk-container-small">
        <article class="uk-article">
          <div v-for="image in $page.airtableProject.image" class="uk-margin-large-bottom">
            <img :src="image.url" width="1000" />
          </div>
          <p class="uk-article-meta uk-margin-remove"><span class="type" v-html="$page.airtableProject.type" /> | <span class="type" v-html="$page.airtableProject.status" /></p>
          <h1 class="uk-article-title uk-margin-small-top" v-html="$page.airtableProject.title"/>
          <p class="uk-text-lead" v-html="$page.airtableProject.excerpt"/>
          <hr class="uk-divider-icon">
          <h2>About The Project</h2>
          <div v-html="$page.airtableProject.description"/>
          <h2>Skills Used:</h2>
          <div>
            <span class="tag" v-for="value in $page.airtableProject.skills">
              {{ value }}
            </span>
          </div>
          <h2>Colophon:</h2>
          <div v-html="$page.airtableProject.colophon"/>

          <h2>Gallery:</h2>
          <div class="uk-grid-medium uk-child-width-1-4 uk-grid-match" uk-grid>
            <div v-for="image in $page.airtableProject.gallery">
              <img :src="image.url" width="500" />
            </div>
          </div>
        </article>
      </div>
    </main>
  </Layout>
</template>

<page-query>
query AirtableProject ($path: String!) {
  airtableProject (path: $path) {
    title
    excerpt
    description
    type
    status
    client
    colophon
    skills
    image {
      url
    }
    gallery {
      url
    }
  }
}
</page-query>

<script>
export default {
  metaInfo () {
    return {
      title: this.$page.airtableProject.title
    }
  }
}
</script>

gridsome.config.js

module.exports = {
  siteName: '',
  siteDescription: '',
  plugins: [
    {
      use: '@gridsome/source-airtable',
      options: {
        apiKey: process.env.AIRTABLE_API_KEY,
        baseId: process.env.AIRTABLE_BASE_ID,
        tableName: process.env.AIRTABLE_TABLE_NAME,
        typeName: Projects,
        route: '/projects/:slug'
      }
    }
  ]
}

Projects.vue

pages/Projects.vue
<template>
  <Layout>
  <main class="uk-block">
  <div class="uk-container uk-container-small">
    <h1>Portfolio</h1>
    <p class="uk-text-lead">Below are a couple examples of some of my work.</p>
    <hr class="uk-divider-icon" />
    <div class="uk-grid-medium uk-child-width-1-2 uk-grid-match" uk-grid>
      <div v-for="{ node } in $page.allAirtableProject.edges" :key="node.id">
        <Post :post="node" />
      </div>
    </div>
    <Pager :info="$page.allAirtableProject.pageInfo"/>
    </div>
    </main>
  </Layout>
</template>

<page-query>
query Home ($page: Int) {
  allAirtableProject (page: $page, perPage: 10) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        title
        path
        excerpt
        type
        client
        image {
          url
        }
      }
    }
  }
}
</page-query>

<script>
import { Pager } from 'gridsome'
import Post from '~/components/Project.vue'

export default {
  components: {
    Pager,
    Post
  },
  metaInfo: {
    title: 'Projects'
  }
}
</script>