Full Vue App

Goal: when string-built HTML stops scaling, upgrade to a Vue 3 + TypeScript source project. Pick the "Vue 3 + TypeScript" template when creating the project to get the full skeleton.

main.ts — Vue project entry

// ==UserScript==
// @name Product Helper
// @description Vue 3 + TypeScript app example
// @match https://example.com/*
// @require dom
// @require store
// @require http
// ==/UserScript==

import { createApp } from "vue";
import App from "./App.vue";
import "./styles/theme.css";

LFDOM.ready(() => {
  const host = LFDOM.createFloatingRoot({ id: "product-helper" });
  createApp(App).mount(host);
});

Project layout

• main.ts — the entry file; the metadata header stays the same. All directives (including @require) only take effect in the entry, so declare the built-ins your components use here too
• App.vue and other components — wired with standard ESM import; a .vue file cannot be the entry
• styles/*.css — imported styles are compiled into the artifact and injected into the page automatically when the app starts
• npm dependencies — just import; the compiler fetches them from a CDN and caches them in IndexedDB, resolving versions from the package.json at the workspace root

How compilation works

When you click "Compile" at the top of the IDE (unsaved changes are saved first), the in-browser compiler bundles the .vue / .ts / ESM project into a single artifact and registers it with chrome.userScripts. Pressing Ctrl+S alone only saves; it does not compile. The first compile of a new npm dependency downloads it; later compiles hit the cache.

While developing, run liveDebug on in the terminal: every edit (no save needed) recompiles and hot-reloads the debug tab a moment after you stop typing, but it does not update the registered artifact — click "Compile" when you are done.

Limits

Compilation happens in the browser and Node built-ins are only partly available: path / buffer / events / process and similar have browser implementations; crypto covers part of the API; fs is unavailable in app source; http / net / os and similar throw when called; child_process / vm / worker_threads and similar fail the compile (see "Limits & FAQ" for the full tiers). Dependencies must ship browser-compatible builds.