Vue.js for browser extensions

Extension.js detects Vue from your dependencies. It configures single-file component (SFC) compilation, framework aliases, and dev-time update behavior automatically. Scoped styles, the Composition API, and <script setup> all work without extra bundler wiring.

When Vue is a good fit

You already ship production Vue apps.
You prefer Vue single-file component authoring with scoped styles and the Composition API.
You want extension UI surfaces that mirror existing Vue architecture.

Template examples

`new-vue`

Build a Vue new-tab experience with SFC support from day one.

npx extension@latest create my-extension --template=new-vue

pnpx extension@latest create my-extension --template=new-vue

yarn dlx extension@latest create my-extension --template=new-vue

bunx extension@latest create my-extension --template=new-vue

deno run -A npm:extension@latest create my-extension --template=new-vue

Repository: extension-js/examples/new-vue

`content-vue`

Inject Vue components directly into web pages with a content-script setup.

npx extension@latest create my-extension --template=content-vue

pnpx extension@latest create my-extension --template=content-vue

yarn dlx extension@latest create my-extension --template=content-vue

bunx extension@latest create my-extension --template=content-vue

deno run -A npm:extension@latest create my-extension --template=content-vue

Repository: extension-js/examples/content-vue

Usage with an existing extension

Add Vue to an existing extension with the steps below.

Installation

Install the required dependencies:

npm install vue

pnpm add vue

yarn add vue

bun add vue

deno add npm:vue

For explicit setup in existing projects, install the Vue SFC toolchain too:

npm install -D vue-loader @vue/compiler-sfc

pnpm add -D vue-loader @vue/compiler-sfc

yarn add -D vue-loader @vue/compiler-sfc

bun add -d vue-loader @vue/compiler-sfc

deno add -D npm:vue-loader npm:@vue/compiler-sfc

Configuration

Extension.js expects Vue components in .vue files. It configures vue-loader, VueLoaderPlugin, and Vue-related define flags in the Rspack pipeline.

Development behavior

When Extension.js detects Vue, it:

Enables .vue compilation in the framework plugin.
Applies Vue runtime aliases (for consistent runtime resolution).
Supports content script updates by remounting after relevant Vue SFC changes.

If your project lacks optional Vue tooling, Extension.js installs it and asks for a restart.

Troubleshooting

Missing Vue tooling warning: Install vue-loader and @vue/compiler-sfc.
Prompt to restart after install: Stop and rerun extension dev so Extension.js can load the newly installed loader/plugin.
Unexpected .vue handling issues: Verify vue is present in project dependencies so Extension.js detects Vue integration.

Usage examples

In a new tab extension

To use Vue in a new tab extension, include your entry file in HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>New Extension</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this extension.</noscript>
    <div id="app"></div>
  </body>
  <script src="./main.ts"></script>
</html>

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

<!-- App.vue -->
<template>
  <h1>Hello, Vue.js Extension!</h1>
</template>

<script setup lang="ts">
// Component logic goes here.
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

In a `content_script` file

For content scripts, mount a Vue app into an injected root node:

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

const rootDiv = document.createElement("div");
rootDiv.id = "extension-root";
document.body.appendChild(rootDiv);

createApp(App).mount("#extension-root");

Best practices

Keep UI entrypoints framework-first (main.ts, App.vue) and keep extension APIs in dedicated modules.
Use scoped styles in SFCs when possible to reduce style leaks in extension pages.
For large UIs, split components and shared composables to keep content scripts small.

Next steps

Learn more about TypeScript support.
Explore Sass and Sass modules.

Video walkthrough

Preact for browser extensions Svelte for browser extensions

⌘I

​When Vue is a good fit

​Template examples

​new-vue

​content-vue

​Usage with an existing extension

​Installation

​Configuration

​Development behavior

​Troubleshooting

​Usage examples

​In a new tab extension

​In a content_script file

​Best practices

​Next steps

​Video walkthrough