{"id":20179779,"url":"https://github.com/avimehenwal/vue-gsheets","last_synced_at":"2025-04-10T04:50:29.936Z","repository":{"id":40813392,"uuid":"254746516","full_name":"avimehenwal/vue-gsheets","owner":"avimehenwal","description":":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","archived":false,"fork":false,"pushed_at":"2022-12-13T06:39:24.000Z","size":47668,"stargazers_count":12,"open_issues_count":29,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T16:04:18.419Z","etag":null,"topics":["google-sheet","mixin","npm","npm-package","sheet","vue","vue-gsheets","vuejs2"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue-gsheets","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/avimehenwal.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-10T22:14:20.000Z","updated_at":"2024-10-01T13:55:54.000Z","dependencies_parsed_at":"2023-01-28T08:15:43.676Z","dependency_job_id":null,"html_url":"https://github.com/avimehenwal/vue-gsheets","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avimehenwal%2Fvue-gsheets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avimehenwal%2Fvue-gsheets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avimehenwal%2Fvue-gsheets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avimehenwal%2Fvue-gsheets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avimehenwal","download_url":"https://codeload.github.com/avimehenwal/vue-gsheets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248161244,"owners_count":21057552,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google-sheet","mixin","npm","npm-package","sheet","vue","vue-gsheets","vuejs2"],"created_at":"2024-11-14T02:28:10.072Z","updated_at":"2025-04-10T04:50:29.902Z","avatar_url":"https://github.com/avimehenwal.png","language":"Vue","funding_links":["https://www.buymeacoffee.com/F1j07cV"],"categories":[],"sub_categories":[],"readme":"[![NPM Version][npm-image]][npm-url]\n[![Downloads Stats][npm-downloads]][npm-url]\n[![npm trends][trends-badge]][npm-trends]\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n\n- [:open_file_folder: vue-gsheets ![Netlify Status](https://app.netlify.com/sites/vue-sheets/deploys)](#open_file_folder-vue-gsheets-img-srchttpsapinetlifycomapiv1badges51bc5350-2b2c-4e7e-ba7f-73a3812ebbc4deploy-status-altnetlify-status)\n  - [:wrench: Installation](#wrench-installation)\n  - [:mailbox: Input Arguments](#mailbox-input-arguments)\n  - [:sparkles: How to use in components](#sparkles-how-to-use-in-components)\n  - [:hammer: How to fetch SHEETID and sheetPageNumber from google sheet?](#hammer-how-to-fetch-sheetid-and-sheetpagenumber-from-google-sheet)\n  - [:paperclip: Other Information](#paperclip-other-information)\n\n\u003c!-- Markdown link \u0026 img dfn's --\u003e\n[npm-trends]: https://www.npmtrends.com/vue-gsheets\n[npm-url]: https://www.npmjs.com/package/vue-gsheets\n[trends-badge]: https://img.shields.io/badge/npm-trends-orange\n[npm-image]: https://img.shields.io/npm/v/vue-gsheets.svg?style=flat-square\n[npm-downloads]: https://img.shields.io/npm/dm/vue-gsheets.svg?style=flat-square\n\n# :open_file_folder: vue-gsheets  [![Netlify Status](https://api.netlify.com/api/v1/badges/51bc5350-2b2c-4e7e-ba7f-73a3812ebbc4/deploy-status)](https://app.netlify.com/sites/vue-sheets/deploys)\n\nParses a public Google sheets spreadsheet if it follows a basic format of equally structured rows that start with a heading row.\n\ne.g. A [published spreadsheet](https://docs.google.com/spreadsheets/d/e/2PACX-1vQLWDoEdzvcFi5lX34b6jnyzbYqymfNXJhP4O6Xzhjsobv7gt3vn40H3fVFUwPpy-hMx0ERLQbZZh08/pubhtml?gid=143173541\u0026single=true) with the following structure\n\nUser\t| dateStarted |\tRole\n--------|-------------|------------\nJohn\t| 22-01-1999\t | Manager\nBob\t    | 17-08-2005\t | Supervisor\nJoe\t    | 03-12-2008\t | Clerk\n\nwill be parsed into the following JSON\n\n```json\n[\n  {\n    \"user\": \"John\",\n    \"dateStarted\": \"22-01-1999\",\n    \"role\": \"Manager\"\n  },\n  {\n    \"user\": \"Bob\",\n    \"dateStarted\": \"17-08-2005\",\n    \"role\": \"Supervisor\"\n  },\n  {\n    \"user\": \"Joe\",\n    \"dateStarted\": \"03-12-2008\",\n    \"role\": \"Clerk\"\n  }\n]\n```\n\n\n## :wrench: Installation\n\n```sh\nyarn add vue-gsheets\n# or\nnpm install --save vue-gsheets\n```\n\n## :earth_asia: Live Link\n\n[Click here to live link][url]\n\n\n## :mailbox: Input Arguments\n\nSet following arguments in `data` of your vue component\n\nArguments | default values | Description\n---------|---------|-------------\nSHEETID         | 1Yc2esnockqfrNweacmegXnavuPly8PvjaRzqlRzaXTE | ID of google sheet, kindle refer README on how to fetch it\nCOLUMNS         | 3 | Number of colums on given google sheet\nsheetPageNumber | 1 | Google sheet Page Number, usually 1\n\n\nNOTE: All input variables in BOLD are mandatory to fetch correct data\n\n## :sparkles: How to use in components\n\nAdd this module as a [mixin](https://vuejs.org/v2/guide/mixins.html) to the\ncomponent or page which consumes data from published google sheet. Then update the `COLUMNS`, `sheetPageNumber`\nand `SHEETID` data values in component to correct values.\n\nKindly refer this section [How to fetch SHEETID and sheetPageNumber from google sheet?](#how-to-fetch-sheetid-and-sheetpagenumber-from-google-sheet)\nto find out `SHEETID` and `sheetPageNumber` info from your google sheet.\n\n\n\n```js\n\u003cscript\u003e\nimport { vueGsheets } from 'vue-gsheets'\n\nexport default {\n  mixins: [vueGsheets],\n  date: () =\u003e ({\n    COLUMNS: 3,\n    sheetPageNumber: 1,\n    SHEETID: '1Yc2esnockqfrNweacmegXnavuPly8PvjaRzqlRzaXTE'\n  })\n}\n\u003c/script\u003e\n```\n\nAll information will be fetched from google sheet, transformed and saved to component\ndata ready to be comsumed in component template section.\n\nFollowing data properties are added\n\n1. COLUMNS - number of columns\n2. headers - list of header keys\n3. items   - array of objects with data fetched\n4. records - number of records, 3 in eg.\n\n```html\n\u003ctr v-for=\"item in items\" :key=\"item.dateStarted\"\u003e\n   \u003ctd\u003e {{ item.User }}        \u003c/td\u003e\n   \u003ctd\u003e {{ item.dateStarted }} \u003c/td\u003e\n   \u003ctd\u003e {{ item.Role }}        \u003c/td\u003e\n\u003c/tr\u003e\n```\n\nA screenshot from `vue-devtools`\n\n![vue-devtools](/assets/demo.png)\n\n## :hammer: How to fetch SHEETID and sheetPageNumber from google sheet?\n\nOpen the google sheet you want to import data from in your browser. Make sure its `published`\n(if not kindly do so, else this approach will not work).\n\nThe URL of google sheet would look something like this,\n\n```\nhttps://docs.google.com/spreadsheets/d/1Yc2esnockqfrNweacmegXnavuPly8PvjaRzqlRzaXTE/edit#gid=143173541\n```\n\n**SHEETID** = `1Yc2esnockqfrNweacmegXnavuPly8PvjaRzqlRzaXTE`\n\n**sheetPageNumber** = `1` unless there are multiple pages on spreadsheet\n\n\n## :date: Changelog\n\nSee the GitHub [release history.](https://github.com/avimehenwal/vue-gsheets/releases)\n\n## License\n\nMIT\n\n---\n\n## :paperclip: Other Information\n\n* [Got a bug, kindly report it here](https://github.com/avimehenwal/vue-gsheets/issues)\n* [Let me know if you got a feature request, or support for other framework](https://github.com/avimehenwal/vue-gsheets/issues)\n* Contact me for contributions via [twitter](https://twitter.com/avimehenwal)\n* [NPM Package](https://www.npmjs.com/package/vue-gsheets)\n\n[url]: https://vue-sheets.netlify.app/\n\n\u003ca href=\"https://www.buymeacoffee.com/F1j07cV\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" alt=\"Buy Me A Coffee\" style=\"height: 51px !important;width: 217px !important;\" \u003e\u003c/a\u003e\n\n Spread Love :hearts: and not :no_entry_sign: hatred   [![Twitter Follow](https://img.shields.io/twitter/follow/avimehenwal.svg?style=social)](https://twitter.com/avimehenwal)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favimehenwal%2Fvue-gsheets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favimehenwal%2Fvue-gsheets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favimehenwal%2Fvue-gsheets/lists"}