Vue.js for browser extensions

​

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

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

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

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

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

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

​

content-vue

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

​

Usage with an existing extension

​

Installation

npm install vue

pnpm add vue

yarn add vue

bun add vue

deno add npm:vue

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

​

Development behavior

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

​

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

<!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

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.

​

Runtime build and the Options API

export default {
  config: (config) => {
    config.resolve = config.resolve || {};
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      vue$: "vue/dist/vue.esm-bundler.js",
    };
    return config;
  },
};

​

Next steps

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

​

Video walkthrough

​

See the template run