-
-
Save davision/a7bdbdb4b0e8f92f681b928eed715941 to your computer and use it in GitHub Desktop.
Nuxt.js vue component to display datas from a google spreadsheet (with google api V4 without oAuth )
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div id="homepage"> | |
<h1>Les dernières Articles</h1> | |
<div class="article" v-for="article in articles"> | |
<h2> {{ article.title }} </h2> | |
<p> {{ article.content }} </p> | |
</div> | |
</div> | |
</template> | |
<script> | |
const axios = require('axios') | |
const _ = require('lodash') | |
// your spreadsheet has to be PUBLIC and SHARED with everybody to be accessed this way | |
// https://sheets.googleapis.com/v4/spreadsheets/{SPREASHEET_ID}/values/{SHEET_TAB_NAME}!{CELLS}?key={GOOGLE_API_KEY} | |
const url = 'https://sheets.googleapis.com/v4/spreadsheets/1rc0bQCTMy4rWqI24T-HJcYT7J8gIy7kbKhBIsZDuGus/values/articles!A1:D1000?key=AIzaSyBCL9IShJzo5MrEojaYHbfD1SlGPw13dJo' | |
export default { | |
async asyncData () { | |
const response = await axios.get(url) | |
const rows = response.data.values | |
const properties = rows.shift() | |
const articles = [] | |
for (const i in rows) { | |
articles.push(_.zipObject(properties, rows[i])) | |
} | |
return { articles } | |
} | |
} | |
</script> | |
<style> | |
#homepage { | |
padding-top: 10vh; | |
max-width: 70vw; | |
margin: auto; | |
} | |
#homepage h1 { | |
padding-bottom: 5vh; | |
} | |
#homepage .article { | |
padding-bottom: 5vh; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment