Gridsome Source for Google Sheets v2

!npm
!npm
!github

> This is an updated fork of this repository, but until my PR gets merged I decided to publish my own plugin.

Gridsome source plugin for google sheets, handles multiple pages or sheets!

Requirements

Gridsome: >0.7.0

Install

``js
yarn add gridsome-source-google-sheets-v2
`

npm

`js
npm install gridsome-source-google-sheets-v2
`

How to use

You will need to generate a google api key here. The Spreadsheet ID can be found on the sheets url. 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-v2",
options: {
apiKey: "GOOGLE_API_KEY",
spreadsheets: [
{
spreadsheetId: "SPREADSHEET_ID",
sheets: [
{
sheetName: "SHEET_NAME", // Example: "Sheet1"
collectionName: "COLLECTION_NAME" // Example: "Users" (Must be unique)
}
]
}
]
}
}
]
}
`

$3

`js
options.spreadsheets: [
{
spreadsheetId: 'SPREADSHEET_ID_1',
sheets: [
{
sheetName: 'SHEET_NAME', // Example: "Sheet1"
collectionName: 'COLLECTION_NAME', // Example: "Users" (Must be unique)
},
],
},
{
spreadsheetId: 'SPREADSHEET_ID_2',
sheets: [
{
sheetName: 'SHEET_NAME', // Example: "Sheet2"
collectionName: 'COLLECTION_NAME', // Example: "Projects" (Must be unique)
},
],
},
]
`

$3

`js
options.spreadsheets: [
{
spreadsheetId: 'SPREADSHEET_ID',
sheets: [
{
sheetName: 'SHEET_NAME', // Example: "Sheet1"
collectionName: 'COLLECTION_NAME', // Example: "Projects" (Must be unique)
},
{
sheetName: 'SHEET_NAME', // Example: "Sheet2"
collectionName: 'COLLECTION_NAME', // Example: "Users" (Must be Unique)
},
],
},
]
`

$3

This plugin assumes that the first row in your table is the column name. In this example the 2 columns that exist are named title and body, with id being a key that this plugin generates automatically.

`js

query {
allCollectionName {
edges {
node {
id, // Automatically generated
title,
body
}
}
}
}

`

$3

$page.allCollectionName.edges will be an array of each row of your Google Sheet.

`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: {
apiKey: "GOOGLE_API_KEY",
spreadsheets: [
{
spreadsheetId: "SPREADSHEET_ID",
sheets: [
{
sheetName: "SHEET_NAME", // Example: "Sheet1"
collectionName: "COLLECTION_NAME" // Example: "Users" (Must be unique)
}
]
}
]
}
}
],
templates: {
collectionName: [
{
path: "/somePath/:id", // Example: "/user/:id"
component: "./src/templates/collectionName.vue" // Example: "./src/templates/users.vue"
}
]
}
}
`

$3

`html

`

`js

query ($id: ID!) {
collectionName(id: $id) { // Example: "users(id: $id)"
title,
body
}
}

``