Skip to main content
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

Template screenshot Build a Vue new-tab experience with SFC support from day one. 
npx extension@latest create my-extension --template=new-vue
Repository: extension-js/examples/new-vue

​
content-vue

Template screenshot Inject Vue components directly into web pages with a content-script setup. 
npx 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: For explicit setup in existing projects, install the Vue SFC toolchain too:

​
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

​
Video walkthrough