Gridsome Source for Google Sheets

!npm
!npm
!NPM

Source plugin for fetching data from Google Sheets.

Requirements

Gridsome: >0.7.0

Install

``js
yarn add gridsome-source-google-sheets
`
npm
`js
npm install gridsome-source-google-sheets
`

How to use

You will need to generate a google api key here. The sheetId
can be found on the sheets url. It is the large hash number near the end. You will also need to make your spreadsheet viewable to the public to use the api credentials.

`js
module.exports = {
siteName: 'Gridsome',
plugins: [
{
use: 'gridsome-source-google-sheets',
options: {
sheetId: 'GOOGLE_SHEET_ID',
apiKey: 'GOOGLE_API_KEY',
// type: 'TYPE_NAME', //Optional - default is googleSheet. Used for graphql queries.
}
}
]
}
`

$3

`js

query MyData {
allGoogleSheet {
edges {
node {
id
title
}
}
}
}

`

$3

`js

`

$3

To use this in a template first setup the template route in gridsome.config.js

`js
module.exports = {
siteName: 'Gridsome',
plugins: [
{
use: 'gridsome-source-google-sheets',
options: {
sheetId: 'GOOGLE_SHEET_ID',
apiKey: 'GOOGLE_API_KEY',
// type: 'TYPE_NAME', //Optional - default is googleSheet. Used for graphql queries.
}
}
],
templates: {
googleSheet: [
{
path: '/:id',
component: './src/templates/googleSheet.vue'
}
]
}
}

`

$3

`js



query Post ($path: String!) {
googleSheet (path: $path) {
title
body
}
}

``

Limitations

* Max columns 52
* Max rows 10000