Vue3 with Google Apps Script

With this project your can use Vue3 with Google Sheets as a backend.

Tools

Frontend

Backend

Build tools

[!TIP] If you want to use a CSS framework like DaisyUI and tailwindcss, you can see my other repo to use it → here.

Introduction

Setup

Clone the repo:

git clone https://github.com/ilias777/vue3GAS.git

Navigate to the project folder:

cd vue3GAS

Install dependencies:

npm install

Remove the .clasp.json file in the root directory, to create later your own .clasp.json file with your scriptID:

rm .clasp.json

Install clasp in your system.

npm install -g @google/clasp

Create a Google Sheets Document.

• Go to docs.google.com and create a Google Sheets document
• Inside the Sheets document press in the menu bar, under extensions, Apps Script
• A new tab appears with the Google Apps Script code. Copy the script ID (https://script.google.com/macros/s/{scriptID}/edit).
• Press the Deploy button, in the upper right corner, to create a web app.

Enable Google Apps Script API

Go to https://script.google.com/home/usersettings and turn on the Google Apps Script API.

Login to your Google account from your terminal.

clasp login

Clone the Sheets script with clasp in the ./gas folder.

clasp clone --rootDir ./gas <scriptID>

Move from the ./gas folder the .clasp.json file to the root directory

mv ./gas/.clasp.json .

Build the project

npm run build

From here your can start build your web application, with Google Sheets as a backend.

If you are finish with your changes in your App, run npm run build to build the project and a index.html are created in the ./dist folder. Then this file is moved to the ./gas folder and all the files are pushed to google apps script automatically.

After the files are pushed, refresh the page of the Google Apps Script site, deploy your app again and you are done.

Make and update a deployment

Make a new deployment.

Run in the terminal:

npm run build

Then deploy your app:

clasp create-deployment --description "Message"

or

clasp create-deployment -d "Message"

Update an existing deployment

First see all deployments:

clasp deployments

A list appears with your deployments. Copy the ID from your last deployment and add it to the command:

clasp create-deployment -d "Message" -i <deployment-id>

To see your Web-App in the browser type:

clasp open-script

The script opens in your browser and press "Deploy" - "Manage Deployments". Click in the URL and your app opens in a new tab.

Test your App before make a new deployment

To test your Web-App before deploy it, go first to Google Script page:

clasp open-script

The script opens in the browser. Press "Deploy" and then "Test Deployment". Now click the URL to open the Web-App.

The Web-App opens in a new tab.

Keep it open in your browser.

Go to your editor and make the needed changes. If you want to see how it looks, push the files to Google Script:

npm run build

Now go to your browser, reload the page and now all the changes are applied.

With this method you can test your Web-App before creating a new deployment.

How to

These are the steps to reproduce the project:

Create Vue Application:

npm create vue@latest

Navigate to your project directory:

cd <your-project-folder>

Install the node dependencies:

npm install

Delete unnecessary code for a clean project:

• Remove content from ./src/App.vue.

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view />
</template>

• 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.

• Delete ./src/assets/logo.svg file.

• Delete all folders and files from ./src/components/ folder.

Install Vue plugin for inline HTML, CSS and JavaScript:

npm install --save-dev vite-plugin-singlefile

Add the plugin in the vite.config.js file:

import { viteSingleFile } from 'vite-plugin-singlefile'
export default defineConfig({
  plugins: [vue(), viteSingleFile()]
})

Install clasp in your system, to push the files to Google Apps Script

npm install -g @google/clasp

Create a Google Sheets Document

• Go to docs.google.com and create a Google Sheets document
• Inside the Sheets document press in the menu bar, under extensions, Apps Script
• A new tab appears with the Apps Script code. Copy the scriptID.

Connect the Google Sheets script to your project

Sing in to Google from your terminal with clasp.

clasp login

Enable Google Apps Script API

Go to https://script.google.com/home/usersettings and turn on the Google Apps Script API.

More information and the commands can you read in the clasp repo

Create a ./gas folder in the root directory.

mkdir gas

Clone the Sheets script with clasp in the ./gas folder.

clasp clone --rootDir ./gas <scriptUrl>

Move from the ./gas folder the .clasp.json file to the root directory

mv ./gas/.clasp.json .

Pull the files from Apps Script:

clasp pull

Now you have in your ./gas folder a Code.js file

Copy the following code inside this file:

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')
}

Push the files to Apps Script:

clasp push

Install Google types as a dependency:

npm install --save-dev @types/google-apps-script

Build the project to create a ./dist folder:

npm run build

Copy ./dist/index.html file to ./gas folder

cp ./dist/index.html ./gas

Change build script command in package.json file:

"scripts": {
    "build": "vite build && mv ./dist/index.html ./gas && clasp push",
}

Every change is saved in the ./dist/index.html file. With the command npm run build the index.html file is copied in the ./gas folder and pushed to google apps script automatically.