├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── App.vue ├── assets └── logo.png ├── client_secret.json ├── components ├── HelloWorld.vue ├── Row.vue └── Sheet.vue ├── main.js ├── router └── index.js ├── store └── index.js └── views ├── Add.vue └── Home.vue /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # VueSheet 2 | 3 | ## Google Sheets API : google-spreadsheet Package 4 | 5 | ### Installation 6 | 7 | ``` npm i google-spreadsheet --save ``` 8 | 9 | ### Features 10 | 11 | - multiple auth options - API key, service account (used in this example), oauth 12 | - cell-based API - read, write, bulk-updates, formatting 13 | - row-based API - read, update, delete (based on the old v3 row-based calls) 14 | - managing worksheets - add, remove, resi 15 | 16 | ## Demo 17 | 18 | [Live Demo](https://vuesheet.netlify.app/) 19 | 20 | ## Examples 21 | 22 | the following [examples](https://www.npmjs.com/package/google-spreadsheet#examples) are meant to give you an idea of just some of the things you can do 23 | 24 | ## Project setup 25 | ``` 26 | npm install 27 | ``` 28 | 29 | ### Compiles and hot-reloads for development 30 | ``` 31 | npm run serve 32 | ``` 33 | 34 | ### Compiles and minifies for production 35 | ``` 36 | npm run build 37 | ``` 38 | 39 | ### Lints and fixes files 40 | ``` 41 | npm run lint 42 | ``` 43 | 44 | ### Customize configuration 45 | See [Configuration Reference](https://cli.vuejs.org/config/). 46 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuesheet", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.19.2", 12 | "core-js": "^3.6.4", 13 | "google-spreadsheet": "^3.0.11", 14 | "i": "^0.3.6", 15 | "sheetsu-node": "0.0.7", 16 | "vue": "^2.6.11", 17 | "vue-router": "^3.1.6", 18 | "vuex": "^3.1.3" 19 | }, 20 | "devDependencies": { 21 | "@vue/cli-plugin-babel": "~4.3.0", 22 | "@vue/cli-plugin-eslint": "~4.3.0", 23 | "@vue/cli-plugin-router": "^4.3.1", 24 | "@vue/cli-plugin-vuex": "^4.3.1", 25 | "@vue/cli-service": "~4.3.0", 26 | "babel-eslint": "^10.1.0", 27 | "eslint": "^6.7.2", 28 | "eslint-plugin-vue": "^6.2.2", 29 | "vue-template-compiler": "^2.6.11" 30 | }, 31 | "eslintConfig": { 32 | "root": true, 33 | "env": { 34 | "node": true 35 | }, 36 | "extends": [ 37 | "plugin:vue/essential", 38 | "eslint:recommended" 39 | ], 40 | "parserOptions": { 41 | "parser": "babel-eslint" 42 | }, 43 | "rules": {} 44 | }, 45 | "browserslist": [ 46 | "> 1%", 47 | "last 2 versions", 48 | "not dead" 49 | ] 50 | } 51 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aminehck/VueSheet/03950d5c5b2d19220981b1dfb3a64d3484ee11a9/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 12 | 13 | 14 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 31 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aminehck/VueSheet/03950d5c5b2d19220981b1dfb3a64d3484ee11a9/src/assets/logo.png -------------------------------------------------------------------------------- /src/client_secret.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "service_account", 3 | "project_id": "buoyant-operand-275521", 4 | "private_key_id": "294e2e71e4344988795a26715208d2dc93069ae2", 5 | "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQClQvnnNrJY1M5c\nbtIygpTffEWHguAEBLLXbv42/42AM+bBHcixysPGfC06bkg1geOkxI+TaF0KR1/T\nL8xokmhu0RoTS7fT8q/s7uNJlNPsHv7B2wmkHbht1TU5je6DKu90IYRJMwLN6EWR\nChaG9fHAjUTdnQNv/J+jzgZ2vwWf0R3nyaZKt3BeCCEAthmw6Fu/p0ggJ/r3TSe6\n7HpXexQiWIYduTG4edjcet8ML9PA+i1FtZst6hlSdsU3VNrMx5sXOJBh6VkYeIY3\nYkIsfbimzvfEeF5kQEWULP2BQGMZtNmlkKqZ9y9DNJG/7AMwsSrGHPxXn++TAy/F\n7Iv7R+CFAgMBAAECggEAAXZOvLd0q37dK98vzTzvhpdUYXxhxqyoommme85rWOjc\npUpsq09bx7vzMH2noOWQdzWP/vdg6gWIo6yGwUluUsYB1jgzclTG2VtMYoBxFuPi\npXduez0SE9Kw67HwRskl9jU9CjgWfG4401gvVoFYOA0SlhKyDuxsGH3AUTj5Gplc\n5gLqgICDqnWrzJDpHwIgbu9BXn1LwsBohsK4vUQj9KEczq5KRz7V9LxbO2IZa1Np\nqbJQh7ZcmkZ+y7OJWib+2TEnUPiDWK6JidfxcldByFqvXk8+2XguwuN/AKkFeb76\n3WQI1q8oMMvUcjLfAbjVHxN+XiE1RxmFYENhkb9ffwKBgQDaypKWqC9ZBcsLaBkq\nsjnGpjYlP8QacYKrbQzNCIkk9+MWBHYAfvBRlhqjSUzSt4/2IqkhFoBfygtvmZtc\n0cnIbsD/6IHj3cl0Iq8yirpTIBX+iKSRZEccLZhMWNjX9KTLDoZ2lowi/IbHR+3X\nxP1kZCVmEorBoBFSRdlmSCdwNwKBgQDBXedv2IkMGQcuEZET0qSG8bJYVn5ndJI3\ny9Bx7mHCFjFmeg5zSazoOj5mHRoh43Iq36fJeiMqWcwRBbMj50O6St3qoj7F3YD7\nsLTYnNEaM0rLBm2rRuT4qAfmSlD3fXUKFbkV5PTHkab83IQmTWIErOYZRObvj4wu\nr38rYeo/IwKBgAknbJatFr4MxgAGLPdiWZR8I8vPLS9GDIeLmnuBnetUC8ZCDYXb\nycZAF4E5ceNnFrjfnl/qBxj65RuYO63YgS7Ho3+RhM2529HmGZptv3n237S0lt4W\nafs91R9soDX44GQ2iV2w0tAr7J+t3L+oWEm4/u+UWwXa4p6kmYH0BuJlAoGAE9PN\nJ2rMorDuS4sBlUbEGBIwd15nF7ScSZxcg1IuM/iSmC9ry+aCFE3kmBPj2hW4Xy0P\nx1j+whjzE8vB0qykBTYoCycXyLItx6EW6h8qUcVwpeDC3g0m7VhNdw+nvbjfh2ky\n0UvozY3h0YvLASJuKoyQC4dFJstRVHgqUgh4PIECgYEA0Brdf2fN8+nuKRlxdlfO\nYWkwUvy7SXpCp8/ui5bv2LXSBfNJ2FaVCIvXvAaTUj5/P7fNTzA0sCfF+YrE1ZCJ\nkOZcAyfuZSpdYqnD0JpOCa5f/PLdgHSVOOqJNQuLsuhW+f9A/BQW9jp6gSI8bfrc\neDOMf2HqXvmIeCkjNRJN7kY=\n-----END PRIVATE KEY-----\n", 6 | "client_email": "sheets@buoyant-operand-275521.iam.gserviceaccount.com", 7 | "client_id": "113196399805428590932", 8 | "auth_uri": "https://accounts.google.com/o/oauth2/auth", 9 | "token_uri": "https://oauth2.googleapis.com/token", 10 | "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs", 11 | "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/sheets%40buoyant-operand-275521.iam.gserviceaccount.com" 12 | } 13 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 41 | 42 | 43 | 59 | -------------------------------------------------------------------------------- /src/components/Row.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/Sheet.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 70 | 71 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import store from './store' 5 | 6 | Vue.config.productionTip = false 7 | 8 | new Vue({ 9 | router, 10 | store, 11 | render: h => h(App) 12 | }).$mount('#app') 13 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import Home from '../views/Home.vue' 4 | 5 | Vue.use(VueRouter) 6 | 7 | const routes = [ 8 | { 9 | path: '/', 10 | name: 'Home', 11 | component: Home 12 | }, 13 | { 14 | path: '/add', 15 | name: 'Add', 16 | // route level code-splitting 17 | // this generates a separate chunk (add.[hash].js) for this route 18 | // which is lazy-loaded when the route is visited. 19 | component: () => import(/* webpackChunkName: "add" */ '../views/Add.vue') 20 | } 21 | ] 22 | 23 | const router = new VueRouter({ 24 | mode: 'history', 25 | routes 26 | }) 27 | 28 | export default router 29 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | }, 9 | mutations: { 10 | }, 11 | actions: { 12 | }, 13 | modules: { 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /src/views/Add.vue: -------------------------------------------------------------------------------- 1 | 72 | 73 | 122 | 123 | 126 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | --------------------------------------------------------------------------------