Vue Templates Logo Vue Templates
Vite Vue3 Browser Extension V3 screenshot

Vite Vue3 Browser Extension V3

Author Avatar Theme by Mubaidr
Updated: 28 Jul 2025
767 Stars

Another vite powered web extension (chrome, firefox, etc.) starter template.

Github

Categories

Vite Scss Tailwind Daisyui

Overview:

The Vite Vue3 Browser Extension is a starter template for creating web extensions (such as those for Chrome and Firefox) powered by Vite, Vue3, and manifest 3. It provides several key features including Vue 3 with Composition API and Script setup, Vue devtools support, HMR (Hot Module Replacement) for extension pages and content scripts, pre-packaged Vite plugins for routing and component imports, and support for Tailwind CSS and DaisyUI. The template also includes recommended settings and extensions for Chrome plugin development in Visual Studio Code, effortless communication between contexts with the webext-bridge library, and a variety of useful plugins and UI frameworks. The project structure is organized into different folders for the main source, content scripts, background scripts, popup pages, options pages, and more.

Features:

  • Vue 3 with Composition API, Script setup, and more!
  • Vue 3 app in Content Script
  • Vue devtools support
  • HMR for extension pages and content scripts
  • Sample onInstall & onUpdate pages
  • Tailwind CSS and DaisyUI integration
  • Vue Router setup with automatic route registration
  • Recommended settings and extensions for Chrome plugin development in Visual Studio Code
  • Effortless communication between contexts with webext-bridge
  • Components auto importing
  • Icons from any iconset directly with support for Material Design Icons
  • TypeScript for type safety
  • Eslint & Prettier configured for Vue, JavaScript, and TypeScript
  • CRXJS Vite Plugin for building Chrome extensions
  • Build and release actions with Github

Installation:

To use the Vite Vue3 Browser Extension template, you have two options:

  1. GitHub Template: Create a new repository on GitHub using this template.

    • Go to the Vite Vue3 Browser Extension repository on GitHub (link not provided).
    • Click on the “Use this template” button to create a new repository based on this template.
    • Clone the newly created repository to your local machine.

  2. Clone to local: Clone the repository to your local machine manually.

    • Open your terminal/command prompt.
    • Navigate to the directory where you want to clone the repository.
    • Run the following command: git clone [repository-url], replacing [repository-url] with the URL of the repository.

Note: Before starting the installation, make sure you have pnpm installed. If not, you can install it by running npm install -g pnpm in your terminal/command prompt.

Summary:

The Vite Vue3 Browser Extension template is an easy-to-use starter template for creating web extensions using Vite, Vue3, and manifest 3. It includes a wide range of features and pre-configurations such as Vue 3 with Composition API and Script setup, support for Tailwind CSS and DaisyUI, Vue Router setup, recommended settings and extensions for Chrome plugin development, and more. The template provides a clear project structure and offers effortless communication between different contexts using the webext-bridge library. With the Vite Vue3 Browser Extension template, developers can quickly set up a powerful and customizable web extension project.