{"id":20608457,"url":"https://github.com/ilias777/vue3gas","last_synced_at":"2025-10-15T12:10:04.672Z","repository":{"id":208234494,"uuid":"721135796","full_name":"ilias777/vue3GAS","owner":"ilias777","description":"Vue 3 and Google Apps Script Boilerplate","archived":false,"fork":false,"pushed_at":"2024-11-04T18:36:11.000Z","size":88,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T04:13:44.408Z","etag":null,"topics":["boilerplate","clasp","gas","google-apps-script","google-sheets","googleappsscript","googlesheets","vite","vue3","vuejs"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/ilias777.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-20T12:34:30.000Z","updated_at":"2025-03-21T20:30:53.000Z","dependencies_parsed_at":"2023-11-20T13:45:31.024Z","dependency_job_id":"f270a012-c602-43f0-818c-032459ec6807","html_url":"https://github.com/ilias777/vue3GAS","commit_stats":null,"previous_names":["ilias777/vue3gas"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilias777%2Fvue3GAS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilias777%2Fvue3GAS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilias777%2Fvue3GAS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilias777%2Fvue3GAS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ilias777","download_url":"https://codeload.github.com/ilias777/vue3GAS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249003958,"owners_count":21196793,"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":["boilerplate","clasp","gas","google-apps-script","google-sheets","googleappsscript","googlesheets","vite","vue3","vuejs"],"created_at":"2024-11-16T10:10:40.101Z","updated_at":"2025-10-15T12:10:04.665Z","avatar_url":"https://github.com/ilias777.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue3 with Google Apps Script\n\nWith this project your can use Vue3 with Google Sheets as a backend.\n\n## Tools\n\n#### Frontend\n\n![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge\u0026logo=vuedotjs\u0026logoColor=%234FC08D)\n\n#### Backend\n\n![Google Apps Script](https://img.shields.io/badge/Google_Apps_Script-blue?style=for-the-badge\u0026logo=google%20apps%20script\u0026logoColor=white)\n![Google Sheets](https://img.shields.io/badge/Google_Sheets-darkgreen?style=for-the-badge\u0026logo=google%20sheets\u0026logoColor=white)\n\n#### Build tools\n\n![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge\u0026logo=vite\u0026logoColor=white)\n![Clasp](https://img.shields.io/badge/CLASP-darkblue?style=for-the-badge\u0026logo=google\u0026logoColor=white)\n\n\u003e [!TIP]\n\u003e If you want to use a CSS framework like [DaisyUI](https://daisyui.com/) and [tailwindcss](https://tailwindcss.com/),\n\u003e you can see my other repo to use it \u0026rarr; [here](https://github.com/ilias777/Vue3GASDaisyUI).\n\n## Introduction\n\n### Setup\n\n#### Clone the repo:\n\n```shell\ngit clone https://github.com/ilias777/vue3GAS.git\n```\n\n#### Navigate to the project folder:\n\n```shell\ncd vue3GAS\n```\n\n#### Install dependencies:\n\n```shell\nnpm install\n```\n\n#### Remove the `.clasp.json` file in the root directory, to create later your own `.clasp.json` file with your scriptID:\n\n```shell\nrm .clasp.json\n```\n\n#### Install [clasp](https://github.com/google/clasp) in your system.\n\n```shell\nnpm install -g @google/clasp\n```\n\n#### Create a Google Sheets Document.\n\n- Go to [docs.google.com](https://docs.google.com/) and create a Google Sheets document\n- Inside the Sheets document press in the menu bar, under extensions, _Apps Script_\n- A new tab appears with the Google Apps Script code. **Copy the script ID** (https://script.google.com/macros/s/{scriptID}/edit).\n- Press the `Deploy` button, in the upper right corner, to create a web app.\n\n#### Enable Google Apps Script API\n\nGo to [https://script.google.com/home/usersettings](https://script.google.com/home/usersettings)\nand turn on the Google Apps Script API.\n\n#### Login to your Google account from your terminal.\n\n```shell\nclasp login\n```\n\nClone the Sheets script with clasp in the `./gas` folder.\n\n```shell\nclasp clone --rootDir ./gas \u003cscriptID\u003e\n```\n\nMove from the `./gas` folder the `.clasp.json` file to the root directory\n\n```shell\nmv ./gas/.clasp.json .\n```\n\nBuild the project\n\n```shell\nnpm run build\n```\n\nFrom here your can start build your web application, with Google Sheets as a backend.\n\nIf you are finish with your changes in your App, run `npm run build` to build the project and\na `index.html` are created in the `./dist` folder. Then this file is moved to the `./gas` folder\nand all the files are pushed to google apps script automatically.\n\nAfter the files are pushed, refresh the page of the Google Apps Script site, deploy your app again and you are done.\n\n## Make and update a deployment\n\n**Make a new deployment**.\n\nRun in the terminal:\n\n```shell\nnpm run build\n```\n\nThen deploy your app:\n\n```shell\nclasp create-deployment --description \"Message\"\n```\n\nor\n\n```shell\nclasp create-deployment -d \"Message\"\n```\n\n**Update an existing deployment**\n\nFirst see all deployments:\n\n```shell\nclasp deployments\n```\n\nA list appears with your deployments. Copy the ID from your last deployment and add it to the command:\n\n```shell\nclasp create-deployment -d \"Message\" -i \u003cdeployment-id\u003e\n```\n\nTo see your Web-App in the browser type:\n\n```shell\nclasp open-script\n```\n\nThe script opens in your browser and press \"Deploy\" - \"Manage Deployments\". Click in the URL and your app opens in a new tab.\n\n## Test your App before make a new deployment\n\nTo test your Web-App before deploy it, go first to Google Script page:\n\n```shell\nclasp open-script\n```\n\nThe script opens in the browser. Press \"Deploy\" and then \"Test Deployment\". Now click the URL to open the Web-App.\n\nThe Web-App opens in a new tab.\n\n**Keep it open in your browser.**\n\nGo to your editor and make the needed changes. If you want to see how it looks, push the files to Google Script:\n\n```shell\nnpm run build\n```\n\nNow go to your browser, reload the page and now all the changes are applied.\n\nWith this method you can test your Web-App before creating a new deployment.\n\n## How to\n\n**These are the steps to reproduce the project:**\n\n#### Create Vue Application:\n\n```shell\nnpm create vue@latest\n```\n\n#### Navigate to your project directory:\n\n```shell\ncd \u003cyour-project-folder\u003e\n```\n\n#### Install the node dependencies:\n\n```shell\nnpm install\n```\n\n#### Delete unnecessary code for a clean project:\n\n- Remove content from `./src/App.vue`.\n\n```vue\n\u003ctemplate\u003e\n  \u003cnav\u003e\n    \u003crouter-link to=\"/\"\u003eHome\u003c/router-link\u003e |\n    \u003crouter-link to=\"/about\"\u003eAbout\u003c/router-link\u003e\n  \u003c/nav\u003e\n  \u003crouter-view /\u003e\n\u003c/template\u003e\n```\n\n- Remove content from `./src/assets/main.css` and keep only the first line `@import './base.css';` In your `base.css` file you can add css styles if needed.\n\n- Delete `./src/assets/logo.svg` file.\n\n- Delete all folders and files from `./src/components/` folder.\n\n#### Install Vue plugin for inline HTML, CSS and JavaScript:\n\n```shell\nnpm install --save-dev vite-plugin-singlefile\n```\n\n#### Add the plugin in the `vite.config.js` file:\n\n```javascript\nimport { viteSingleFile } from 'vite-plugin-singlefile'\nexport default defineConfig({\n  plugins: [vue(), viteSingleFile()]\n})\n```\n\n#### Install [clasp](https://github.com/google/clasp) in your system, to push the files to Google Apps Script\n\n```shell\nnpm install -g @google/clasp\n```\n\n#### Create a Google Sheets Document\n\n- Go to [docs.google.com](https://docs.google.com/) and create a Google Sheets document\n- Inside the Sheets document press in the menu bar, under extensions, _Apps Script_\n- A new tab appears with the Apps Script code. **Copy the scriptID**.\n\n#### Connect the Google Sheets script to your project\n\nSing in to Google from your terminal with clasp.\n\n```shell\nclasp login\n```\n\n#### Enable Google Apps Script API\n\nGo to [https://script.google.com/home/usersettings](https://script.google.com/home/usersettings)\nand turn on the Google Apps Script API.\n\nMore information and the commands can you read in the [clasp repo](https://github.com/google/clasp)\n\n#### Create a `./gas` folder in the root directory.\n\n```shell\nmkdir gas\n```\n\n#### Clone the Sheets script with clasp in the `./gas` folder.\n\n```shell\nclasp clone --rootDir ./gas \u003cscriptUrl\u003e\n```\n\n#### Move from the `./gas` folder the `.clasp.json` file to the root directory\n\n```shell\nmv ./gas/.clasp.json .\n```\n\n#### Pull the files from Apps Script:\n\n```\nclasp pull\n```\n\nNow you have in your `./gas` folder a `Code.js` file\n\n#### Copy the following code inside this file:\n\n```javascript\nfunction doGet(e) {\n  return HtmlService.createTemplateFromFile('index.html')\n    .evaluate()\n    .addMetaTag('viewport', 'width=device-width, initial-scale=1.0')\n    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)\n    .setTitle('Vue3 GAS')\n}\n```\n\n#### Push the files to Apps Script:\n\n```shell\nclasp push\n```\n\n#### Install Google types as a dependency:\n\n```shell\nnpm install --save-dev @types/google-apps-script\n```\n\n#### Build the project to create a `./dist` folder:\n\n```shell\nnpm run build\n```\n\nCopy `./dist/index.html` file to `./gas` folder\n\n```shell\ncp ./dist/index.html ./gas\n```\n\n#### Change build script command in `package.json` file:\n\n```json\n\"scripts\": {\n    \"build\": \"vite build \u0026\u0026 mv ./dist/index.html ./gas \u0026\u0026 clasp push\",\n}\n```\n\nEvery change is saved in the `./dist/index.html` file. With the command `npm run build` the `index.html` file is copied in the `./gas`\nfolder and pushed to google apps script automatically.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filias777%2Fvue3gas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Filias777%2Fvue3gas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filias777%2Fvue3gas/lists"}