• 📂 vue-gsheets
  • 🔧 Installation
  • 📫 Input Arguments
  • ✨ How to use in components
  • 🔨 How to fetch SHEETID and sheetPageNumber from google sheet?
  • 📎 Other Information

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

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"
  }
]

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

Click here to live link

Set following arguments in data of your vue component

NOTE: All input variables in BOLD are mandatory to fetch correct data

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

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

See the GitHub release history.

MIT

• Got a bug, kindly report it here
• Let me know if you got a feature request, or support for other framework
• Contact me for contributions via twitter
• NPM Package

Spread Love ♥️ and not 🚫 hatred