https://github.com/ilias777/vue3gasdaisyui
Vue 3 and Google Apps Script (GAS) boilerplate. With TailwindCSS, DaisyUI and as a backend Google Sheets
https://github.com/ilias777/vue3gasdaisyui
boilerplate boilerplate-template clasp clasp-integration daisy-ui daisyui daisyui-vue gas google google-apps-script google-clasp googleappsscript tailwind tailwind-css tailwindcss vite vue vue3 vuejs vuerouter
Last synced: 9 months ago
JSON representation
Vue 3 and Google Apps Script (GAS) boilerplate. With TailwindCSS, DaisyUI and as a backend Google Sheets
- Host: GitHub
- URL: https://github.com/ilias777/vue3gasdaisyui
- Owner: ilias777
- Created: 2024-10-23T09:49:15.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-16T11:23:07.000Z (about 1 year ago)
- Last Synced: 2025-04-06T06:45:17.186Z (9 months ago)
- Topics: boilerplate, boilerplate-template, clasp, clasp-integration, daisy-ui, daisyui, daisyui-vue, gas, google, google-apps-script, google-clasp, googleappsscript, tailwind, tailwind-css, tailwindcss, vite, vue, vue3, vuejs, vuerouter
- Language: HTML
- Homepage:
- Size: 184 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue3GASDaisyUI
This template should help get you started developing with Vue 3 in Vite, with TailwindCSS and
DaisyUI. As a Backend we are using Google Sheet and Google Apps Script.
## Tools
#### Frontend
#### Backend
#### Build tools
## Setup
Clone the project:
```shell
git clone git@github.com:ilias777/Vue3GASDaisyUI.git
```
Navigate to the root folder:
```shell
cd Vue3GASDaisyUI
```
Remove `git` and add your own repo later if you want:
```shell
rm -rf .git*
```
Install dependencies:
```shell
npm install
```
#### Create Google Sheets and Google Script
Go to Google Docs and create a new Spreadsheet. Rename the Spreadsheet and add some random data for
testing reading data and adding data to it.
From there go to the menu above and go to `Extensions` → `Apps Script`. A new page is loading
with your script. Rename the script as you like and copy the `scriptID` from this script
(https://script.google.com/macros/s/{scriptID}/edit).
#### Install `clasp`
[clasp](https://github.com/google/clasp) is a command line tool to develop Apps Script projects
locally.
```shell
npm install -g @google/clasp
```
Make sure to have Google Apps Script API enabled. Check it under
[https://script.google.com/home/usersettings](https://script.google.com/home/usersettings)
Login to your Google account from your terminal:
```shell
clasp login
```
Clone the Google Script with `clasp` in the ./gas folder:
```shell
clasp clone --rootDir ./gas
```
Remove the `.clasp.json` file from the root directory:
```shell
rm .clasp.json
```
After cloning the Google Script, a `.clasp.json` file is created in the ./gas folder.
Move it to the root directory:
```shell
mv ./gas/.clasp.json .
```
This contains the `scriptID` from your Google Script to connect with it.
#### Add `doGet` method
Go to `./gas/Code.js` file and add this code:
```javascript
function doGet(e) {
return HtmlService.createTemplateFromFile('index.html')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1.0')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
.setTitle('Vue3 GAS with DaisyUI')
}
```
#### Add function to read data from Spreadsheet
Go to `./gas/Code.js` and put this function:
```javascript
function getSheetData() {
let ss = SpreadsheetApp.getActiveSpreadsheet()
let ws = ss.getSheetByName('Sheet1')
let data = ws.getRange(2, 1, ws.getLastRow() - 1, 3).getValues()
return data
}
```
Read the [How-To](https://github.com/ilias777/Vue3GASDaisyUI/blob/main/howto.md) to see how to call
this function from a Vue file to read the data from the Spreadsheet.
#### Add function to add data to Spreadsheet
Go to `./gas/Code.js` and put this function:
```javascript
function writeValues(val) {
let ss = SpreadsheetApp.getActiveSpreadsheet()
let ws = ss.getSheetByName('Sheet1')
ws.getRange(ws.getLastRow() + 1, 1, 1, val.length).setValues([val])
}
```
Read the [How-To](https://github.com/ilias777/Vue3GASDaisyUI/blob/main/howto.md) to see how to add
data to the Spreadsheet from a Vue file.
#### Push files to Google Script
```shell
npm run build
```
### Preview
## Deploy and test your Web App
Read [here](https://github.com/ilias777/Vue3GASDaisyUI/blob/main/howto_deploy.md) how to deploy and test the Web-App.
## How to
How this works is explained in [How To](https://github.com/ilias777/Vue3GASDaisyUI/blob/main/howto.md).