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 Tailwind

Overview

The Vite Vue 3 Browser Extension is a modern starter template designed for developers looking to create browser extensions using the robust technologies of Vite, Vue 3, and Manifest V3. It facilitates development for multiple browsers such as Chrome and Firefox, while offering a streamlined experience with built-in features for routing, state management, and UI components. This template is perfect for those who appreciate a polished, opinionated setup that emphasizes best practices in browser extension development.

By integrating the latest features from Vue 3 and a range of development tools, this template aims to simplify the extension-building process while supporting complex functionality and customization. Whether you’re building a simple popup or a fully-featured extension, the Vite Vue 3 Browser Extension stands out as a comprehensive solution for modern web developers.

Features

  • Multi-context Support: Seamlessly integrates with various extension contexts including background scripts, popups, options, content scripts, and more.

  • File-based Routing: Automatically registers UI pages, making it easier to manage and navigate your extension’s structure.

  • Vue 3 Composition API: Leverages the latest Vue 3 features, allowing for a more flexible and organized codebase.

  • State Management with Pinia: Simplifies state management with an easy-to-use API, making data handling straightforward across your application.

  • Built-in UI Components: Utilizes Zephyr UI v3, shadcn-vue, and Tailwind CSS for rapidly building attractive and responsive user interfaces.

  • WebExtension Utilities: Comes equipped with webext-bridge and webextension-polyfill, enhancing compatibility and facilitating communication between different parts of your extension.

  • Quick Start Commands: Provides straightforward commands to build, lint, and develop your extension for Chrome and Firefox, streamlining the development workflow.

  • Comprehensive Developer Documentation: Offers clear guidelines and best practices to help you navigate the architecture and design of the template.