/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

Primary LanguageVue

NPM Version Downloads Stats npm trends semantic-release

📂 vue-gsheets Netlify Status

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 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

[
  {
    "user": "John",
    "dateStarted": "22-01-1999",
    "role": "Manager"
  },
  {
    "user": "Bob",
    "dateStarted": "17-08-2005",
    "role": "Supervisor"
  },
  {
    "user": "Joe",
    "dateStarted": "03-12-2008",
    "role": "Clerk"
  }
]

🔧 Installation

yarn add vue-gsheets
# or
npm install --save vue-gsheets

🌏 Live Link

Click here to live link

📫 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

✨ How to use in components

Add this module as a mixin 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? to find out SHEETID and sheetPageNumber info from your google sheet.

<script>
import { vueGsheets } from 'vue-gsheets'

export default {
  mixins: [vueGsheets],
  date: () => ({
    COLUMNS: 3,
    sheetPageNumber: 1,
    SHEETID: '1Yc2esnockqfrNweacmegXnavuPly8PvjaRzqlRzaXTE'
  })
}
</script>

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.
<tr v-for="item in items" :key="item.dateStarted">
   <td> {{ item.User }}        </td>
   <td> {{ item.dateStarted }} </td>
   <td> {{ item.Role }}        </td>
</tr>

A screenshot from vue-devtools

vue-devtools

🔨 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

📅 Changelog

See the GitHub release history.

License

MIT

📎 Other Information

Buy Me A Coffee

Spread Love ♥️ and not 🚫 hatred Twitter Follow