Vue

The Vue starter is a sidebar panel plus a content script, written in Vue with TypeScript. Start from it when you want a working extension in Vue before you change a line.

The toolbar icon opens the panel, and the panel shows the title of the page you are on. The content script adds an "Open sidebar" button to every page, inside a shadow root so page styles stay out. The background worker opens the panel when you click that button. The sidebar and the in-page button are single-file components, each mounted by a short script. shims-vue.d.ts declares the .vue module type so the imports check.

Surfaces	Sidebar, content script, action, background
Language	Vue with TypeScript
Browsers	Chrome, Edge, Firefox
Source	extension-js/examples/vue
Catalog page	templates.extension.dev/vue

From the terminal

One command creates the project and installs its dependencies. Then dev opens a browser with the extension loaded.

npx extension@latest create my-vue --template vue
cd my-vue
npm run dev

From an agent

With the MCP server installed, one sentence does the same. The agent calls extension_create with this template, then extension_dev to run it.

Create a Vue extension called my-vue and run it

Asked for a Vue extension, the agent creates the starter and runs it in Chrome.

From the catalog

The catalog page runs the template live in the page, with its instructions and source one tab away. One click turns it into a private repository of your own. That click lands on Import with the template preselected.

Files

src/background.ts
src/content/ContentApp.vue
src/content/scripts.ts
src/content/styles.css
src/content/types.d.ts
src/images/
src/manifest.json
src/shims-vue.d.ts
src/sidebar/index.html
src/sidebar/page-title.ts
src/sidebar/scripts.ts
src/sidebar/SidebarApp.vue
src/sidebar/styles.css

src/manifest.json declares the action, the side panel, the content script's <all_urls> match and the background worker. The sidebar folder is the panel, the content folder runs on the page, and images holds the icons the manifest declares.

When it fails

• [Extension.js] Requires Node.js >= 22.12. The CLI checks the runtime before any command and exits. Upgrade to Node.js 22.12 or newer. Bun 1.2 and Deno 2.5 or newer also pass the check.
• The "Open sidebar" button does nothing in Firefox. Firefox opens a sidebar only from a toolbar click, so the Firefox build shows a hint in place of the button. Click the toolbar icon instead.

Next

• The other starters: JavaScript, TypeScript, React, Preact, Svelte
• Import a repository once the template is yours
• extension_create for every input the agent can set