Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/avimehenwal/vue-gsheets
:package: A vuejs mixin to tranforms data from public google sheets ready to be used as component data for page views. @avi/vue-gsheets npm package
https://github.com/avimehenwal/vue-gsheets
google-sheet mixin npm npm-package sheet vue vue-gsheets vuejs2
Last synced: 3 days ago
JSON representation
:package: A vuejs mixin to tranforms data from public google sheets ready to be used as component data for page views. @avi/vue-gsheets npm package
- Host: GitHub
- URL: https://github.com/avimehenwal/vue-gsheets
- Owner: avimehenwal
- Created: 2020-04-10T22:14:20.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-13T06:39:24.000Z (almost 2 years ago)
- Last Synced: 2024-10-31T18:29:40.707Z (17 days ago)
- Topics: google-sheet, mixin, npm, npm-package, sheet, vue, vue-gsheets, vuejs2
- Language: Vue
- Homepage: https://www.npmjs.com/package/vue-gsheets
- Size: 45.5 MB
- Stars: 12
- Watchers: 2
- Forks: 1
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
[![NPM Version][npm-image]][npm-url]
[![Downloads Stats][npm-downloads]][npm-url]
[![npm trends][trends-badge]][npm-trends]
[](https://github.com/semantic-release/semantic-release)
- [:open_file_folder: vue-gsheets ](#open_file_folder-vue-gsheets-img-srchttpsapinetlifycomapiv1badges51bc5350-2b2c-4e7e-ba7f-73a3812ebbc4deploy-status-altnetlify-status)
- [:wrench: Installation](#wrench-installation)
- [:mailbox: Input Arguments](#mailbox-input-arguments)
- [:sparkles: How to use in components](#sparkles-how-to-use-in-components)
- [:hammer: How to fetch SHEETID and sheetPageNumber from google sheet?](#hammer-how-to-fetch-sheetid-and-sheetpagenumber-from-google-sheet)
- [:paperclip: Other Information](#paperclip-other-information)
[npm-trends]: https://www.npmtrends.com/vue-gsheets
[npm-url]: https://www.npmjs.com/package/vue-gsheets
[trends-badge]: https://img.shields.io/badge/npm-trends-orange
[npm-image]: https://img.shields.io/npm/v/vue-gsheets.svg?style=flat-square
[npm-downloads]: https://img.shields.io/npm/dm/vue-gsheets.svg?style=flat-square
# :open_file_folder: vue-gsheets [](https://app.netlify.com/sites/vue-sheets/deploys)
Parses a public Google sheets spreadsheet if it follows a basic format of equally structured rows that start with a heading row.
e.g. A [published spreadsheet](https://docs.google.com/spreadsheets/d/e/2PACX-1vQLWDoEdzvcFi5lX34b6jnyzbYqymfNXJhP4O6Xzhjsobv7gt3vn40H3fVFUwPpy-hMx0ERLQbZZh08/pubhtml?gid=143173541&single=true) with the following structure
User | dateStarted | Role
--------|-------------|------------
John | 22-01-1999 | Manager
Bob | 17-08-2005 | Supervisor
Joe | 03-12-2008 | Clerk
will be parsed into the following JSON
```json
[
{
"user": "John",
"dateStarted": "22-01-1999",
"role": "Manager"
},
{
"user": "Bob",
"dateStarted": "17-08-2005",
"role": "Supervisor"
},
{
"user": "Joe",
"dateStarted": "03-12-2008",
"role": "Clerk"
}
]
```
## :wrench: Installation
```sh
yarn add vue-gsheets
# or
npm install --save vue-gsheets
```
## :earth_asia: Live Link
[Click here to live link][url]
## :mailbox: Input Arguments
Set following arguments in `data` of your vue component
Arguments | default values | Description
---------|---------|-------------
SHEETID | 1Yc2esnockqfrNweacmegXnavuPly8PvjaRzqlRzaXTE | ID of google sheet, kindle refer README on how to fetch it
COLUMNS | 3 | Number of colums on given google sheet
sheetPageNumber | 1 | Google sheet Page Number, usually 1
NOTE: All input variables in BOLD are mandatory to fetch correct data
## :sparkles: How to use in components
Add this module as a [mixin](https://vuejs.org/v2/guide/mixins.html) to the
component or page which consumes data from published google sheet. Then update the `COLUMNS`, `sheetPageNumber`
and `SHEETID` data values in component to correct values.
Kindly refer this section [How to fetch SHEETID and sheetPageNumber from google sheet?](#how-to-fetch-sheetid-and-sheetpagenumber-from-google-sheet)
to find out `SHEETID` and `sheetPageNumber` info from your google sheet.
```js
import { vueGsheets } from 'vue-gsheets'
export default {
mixins: [vueGsheets],
date: () => ({
COLUMNS: 3,
sheetPageNumber: 1,
SHEETID: '1Yc2esnockqfrNweacmegXnavuPly8PvjaRzqlRzaXTE'
})
}
```
All information will be fetched from google sheet, transformed and saved to component
data ready to be comsumed in component template section.
Following data properties are added
1. COLUMNS - number of columns
2. headers - list of header keys
3. items - array of objects with data fetched
4. records - number of records, 3 in eg.
```html
{{ item.User }}
{{ item.dateStarted }}
{{ item.Role }}
```
A screenshot from `vue-devtools`
## :hammer: How to fetch SHEETID and sheetPageNumber from google sheet?
Open the google sheet you want to import data from in your browser. Make sure its `published`
(if not kindly do so, else this approach will not work).
The URL of google sheet would look something like this,
```
https://docs.google.com/spreadsheets/d/1Yc2esnockqfrNweacmegXnavuPly8PvjaRzqlRzaXTE/edit#gid=143173541
```
**SHEETID** = `1Yc2esnockqfrNweacmegXnavuPly8PvjaRzqlRzaXTE`
**sheetPageNumber** = `1` unless there are multiple pages on spreadsheet
## :date: Changelog
See the GitHub [release history.](https://github.com/avimehenwal/vue-gsheets/releases)
## License
MIT
---
## :paperclip: Other Information
* [Got a bug, kindly report it here](https://github.com/avimehenwal/vue-gsheets/issues)
* [Let me know if you got a feature request, or support for other framework](https://github.com/avimehenwal/vue-gsheets/issues)
* Contact me for contributions via [twitter](https://twitter.com/avimehenwal)
* [NPM Package](https://www.npmjs.com/package/vue-gsheets)
[url]: https://vue-sheets.netlify.app/
Spread Love :hearts: and not :no_entry_sign: hatred [](https://twitter.com/avimehenwal)