vue3GAS

Vue 3 and Google Apps Script Boilerplate

AI Summary

Vue3 with Google Apps Script

A starter kit that lets you run a Vue 3 front-end on Google Apps Script while using Google Sheets as the back-end.

Target Users

Intermediate Google Apps Script developers who want to build a Vue 3 UI while keeping the back-end in GAS and Google Sheets.

Problems Solved

Deploying a modern Vue 3 front-end to a GAS environment is complex and time-consuming.

Main Features

Automated Build & Deployment

Combines Vite and clasp so that npm run build performs Vue3 build, moves the generated file to gas/, and pushes everything to Apps Script in one command.

Template for Vue3 & Sheets Integration

Provides base code that returns index.html via doGet and a layout that treats Google Sheets as a datastore, letting developers start coding with minimal setup.

Single-file Output for Better Performance

Uses vite-plugin-singlefile to bundle HTML, CSS, and JS into one HTML file, enabling fast delivery within Apps Script HTML Service limits.

Usage Examples

Basic setup to host a Vue3 app on GAS

/**
 * Minimal doGet that serves the Vue3 application.
 * Assumes the Vite build has copied dist/index.html into the gas folder.
 */
function doGet(e) {
  return HtmlService.createTemplateFromFile('index.html') // points to dist output
    .evaluate()
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .setTitle('Vue3 GAS');
}

Save this as Code.js, then run npm run build in your terminal. The command builds your Vue3 app, moves
index.html into the gas folder, and pushes everything to Apps Script automatically. Open the script in
your browser and choose “Deploy → Test deployment” to preview the latest build immediately.