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:

git clone [email protected]:ilias777/Vue3GASDaisyUI.git

Navigate to the root folder:

cd Vue3GASDaisyUI

Remove git and add your own repo later if you want:

rm -rf .git*

Install dependencies:

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 is a command line tool to develop Apps Script projects locally.

npm install -g @google/clasp

Make sure to have Google Apps Script API enabled. Check it under https://script.google.com/home/usersettings

Login to your Google account from your terminal:

clasp login

Clone the Google Script with clasp in the ./gas folder:

clasp clone --rootDir ./gas <scriptID>

Remove the .clasp.json file from the root directory:

rm .clasp.json

After cloning the Google Script, a .clasp.json file is created in the ./gas folder. Move it to the root directory:

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:

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:

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 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:

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 to see how to add data to the Spreadsheet from a Vue file.

Push files to Google Script

npm run build

---

Preview

---

Deploy and test your Web App

Read here how to deploy and test the Web-App.

How to

How this works is explained in How To.