0.4.1 • Published 4 years ago
gridsome-source-google-sheets v0.4.1
Gridsome Source for Google Sheets
Source plugin for fetching data from Google Sheets.
Requirements
Gridsome: >0.7.0
Install
yarn add gridsome-source-google-sheets
npm
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.
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.
}
}
]
}
Example query on page template
<page-query>
query MyData {
allGoogleSheet {
edges {
node {
id
title
}
}
}
}
</page-query>
To use data in page
<template>
<div>
{{ $page.allGoogleSheet.node.id }}
</div>
<div>
{{ $page.allGoogleSheet.node.title }}
</div>
</template>
Using Templates
To use this in a template first setup the template route in gridsome.config.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'
}
]
}
}
Example template in src/template/googleSheet.vue
<template>
<layout>
<div>{{$page.googleSheet.title}}</div>
<div>{{$page.googleSheet.body}}</div>
</layout>
</template>
<page-query>
query Post ($path: String!) {
googleSheet (path: $path) {
title
body
}
}
</page-query>
Limitations
- Max columns 52
- Max rows 10000
0.4.1
4 years ago
0.4.0
4 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.0
5 years ago
0.2.0-beta.0
5 years ago
0.2.0-beta
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago