Docs
Blog
Docs
Blog

Vue.js

Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be incrementally adoptable, with a core library that focuses on the view layer only.

Extension.js offers built-in support for Vue.js and its single-file component system. To use Vue.js in your extension, make sure you have Vue added as a dependency or devDependency in your package.json. Once added, you are ready to start building your extension with Vue.js!

Starter Vue.js Template

Extension.js includes a New Tab Vue.js template, ideal for creating new tab pages using Vue. This template provides everything you need to get started with Vue.js in your extension.

Vue.js Extension Template

Try it yourself

npm
pnpm
yarn
npx extension@latest create my-extension --template=new-vue

Vue.js + Content Script Template

Alternatively, Extension.js supports a Content Script Vue.js template, enabling you to inject Vue components into web pages via content scripts. This template is useful for extensions that interact directly with page content.

Vue.js + Content Script Template

Try it yourself

npm
pnpm
yarn
npx extension@latest create my-extension --template=content-vue

Usage With an Existing Extension

To integrate Vue.js into an existing extension, follow these steps:

Installation

Install the required dependencies:

npm
yarn
pnpm
bun
npm install vue @vue/compiler-sfc --save-dev

Configuration

Extension.js expects Vue components to be in the .vue format, using Vue’s single-file components (SFC). These files contain the HTML, JavaScript, and CSS for a component all in one file, which is compiled during the build process.

Usage Examples

In a New Tab Extension

To use Vue.js in a new tab extension, include it in your HTML file as a <script>:

<!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.js"></script>
</html>
// main.js;
import { createApp } from "vue";
import MyExtension from "./MyExtension.vue";

createApp(MyExtension).mount("#app");
<!-- MyExtension.vue -->
<template>
  <h1>Hello, Vue.js Extension!</h1>
</template>

<script>
export default {
  name: "MyExtension",
};
</script>

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

In a content_script File

For content scripts, you can inject Vue.js into the page by dynamically creating an HTML element and mounting a Vue component into it:

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

setTimeout(initial, 1000);

function initial() {
  // Create a new div element and append it to the document body
  const rootDiv = document.createElement("div");
  rootDiv.id = "extension-root";
  document.body.appendChild(rootDiv);

  // Mount the Vue component
  createApp(MyExtension).mount("#extension-root");
}

Next Steps