What Technology Powers the Popup UI in FluentRead? Vue 3 and Element Plus Explained

The popup UI in FluentRead is built with Vue 3 and the Element Plus component library, bundled via Vite within the WXT extension framework.

The FluentRead browser extension (available at bistutu/fluentread) provides an immersive reading experience by translating web content in real-time. The popup UI in FluentRead serves as the primary configuration interface, allowing users to adjust translation settings, select target languages, and manage API keys through a modern, responsive interface.

Vue 3 and Element Plus: The Foundation of the Popup UI in FluentRead

The popup is a small, self-contained web application that mounts inside the browser action window. It uses Vue 3 (vue@^3.5.13) for reactive state management and component composition, paired with Element Plus (element-plus@^2.9.3) to provide ready-made UI components like selects, inputs, and layout containers.

Application Entry Point: entrypoints/popup/main.ts

The bootstrap file creates the Vue application instance and registers Element Plus components on demand for tree-shaking optimization.

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import 'element-plus/dist/index.css';
import {
  ElRow, ElCol, ElContainer, ElHeader, ElMain, ElFooter,
  ElSelect, ElOption, ElOptionGroup, ElInput, ElSwitch,
  ElCollapse, ElCollapseItem, ElTooltip, ElEmpty, ElIcon,
  ElMessage, ElLink, ElText, ElButton, ElDialog, ElDivider,
  ElInputNumber
} from 'element-plus';

// Create Vue app
const app = createApp(App);

// Register Element‑Plus components on demand
[
  ElRow, ElCol, ElContainer, ElHeader, ElMain, ElFooter,
  ElSelect, ElOption, ElOptionGroup, ElInput, ElSwitch,
  ElCollapse, ElCollapseItem, ElTooltip, ElEmpty, ElIcon,
  ElMessage, ElLink, ElText, ElButton, ElDialog, ElDivider,
  ElInputNumber
].forEach(comp => comp.name && app.component(comp.name, comp));

// Mount into the popup’s root element
app.mount('#app');

Layout Structure: entrypoints/popup/App.vue

The root component defines the visual structure using Element Plus layout primitives.

<template>
  <el-container>
    <el-header class="custom-padding">
      <Header/>
    </el-header>
    <el-main class="custom-padding" style="min-height: 320px">
      <Main/>
    </el-main>
    <el-footer class="custom-padding">
      <Footer/>
    </el-footer>
  </el-container>
</template>

<script lang="ts" setup>
import Header from '../../components/Header.vue';
import Main   from '../../components/Main.vue';
import Footer from '../../components/Footer.vue';
import '../../styles/theme.css';
import 'element-plus/theme-chalk/base.css';
import 'element-plus/theme-chalk/dark/css-vars.css';
</script>

HTML Container: entrypoints/popup/index.html

The static HTML file provides the mounting point for the Vue application.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>流畅阅读</title>
    <meta name="manifest.type" content="browser_action" />
  </head>
  <body style="margin: 0;">
    <div id="app"></div>
    <script type="module" src="./main.ts"></script>
  </body>
</html>

Component Architecture and Styling Strategy

The popup UI in FluentRead employs a layered styling approach that combines Element Plus themes with custom overrides.

On-Demand Component Registration

Rather than importing the entire Element Plus library, main.ts registers only the necessary components (ElSelect, ElInput, ElSwitch, etc.). This tree-shaking strategy keeps the popup bundle size minimal, ensuring the extension loads quickly when users click the browser action icon.

Theme and CSS Architecture

Styling is organized into four distinct layers:

1. Element Plus Base: element-plus/theme-chalk/base.css provides foundational variables and utility classes.
2. Dark Mode Variables: element-plus/theme-chalk/dark/css-vars.css enables automatic theme switching based on browser preferences.
3. Project-Specific Styles: styles/theme.css and entrypoints/popup/style.css define custom colors, spacing utilities (like custom-padding), and scrollbar customizations specific to FluentRead’s design language.
4. Component Scoping: Vue single-file components encapsulate structural styles, while Element Plus handles the visual design system.

Build Pipeline: Vite and WXT Configuration

The popup is not served as a traditional web page but compiled into a browser extension artifact. The build process relies on Vite (configured through the WXT framework) to bundle the Vue application.

The wxt.config.ts file orchestrates the compilation, treating entrypoints/popup/index.html as a browser action entry point. Vite processes the TypeScript, Vue single-file components, and CSS imports, outputting a single optimized script that runs inside the isolated popup context. This setup ensures that modern Vue 3 features like the Composition API and <script setup> syntax compile correctly for the extension environment.

Summary

• The popup UI in FluentRead is a Vue 3 single-page application mounted inside the browser action window.
• Element Plus (^2.9.3) provides the UI component library, with components registered on-demand in entrypoints/popup/main.ts to minimize bundle size.
• The layout structure is defined in entrypoints/popup/App.vue using Element Plus containers (<el-container>, <el-header>, <el-main>, <el-footer>).
• Styling combines Element Plus base themes, dark-mode CSS variables, and custom project styles in styles/theme.css and entrypoints/popup/style.css.
• Vite (via the WXT framework) bundles the TypeScript and Vue files into the final extension popup.

Frequently Asked Questions

What frontend framework does FluentRead use for its popup?

FluentRead uses Vue 3 as the frontend framework for its popup interface. The application is created using createApp from the Vue package and mounted to a DOM element in entrypoints/popup/main.ts, enabling reactive state management and component-based architecture within the browser extension context.

Which UI component library powers the FluentRead extension popup?

The popup is built with Element Plus, a Vue 3-based component library. The source code imports specific components like ElContainer, ElHeader, ElSelect, and ElSwitch from the element-plus package, using them to construct the layout and form controls without writing custom HTML/CSS from scratch.

How are Element Plus components loaded in the FluentRead popup?

Components are loaded on-demand (tree-shaking) rather than importing the entire library. In entrypoints/popup/main.ts, individual components are imported (e.g., import { ElButton } from 'element-plus') and registered with app.component(), ensuring the final bundle contains only the UI elements actually used in the popup.

What build tool compiles the FluentRead popup UI?

The popup UI is compiled using Vite through the WXT extension framework. The wxt.config.ts file configures the build pipeline to process Vue single-file components, TypeScript, and CSS, outputting optimized assets that run as a browser action popup in entrypoints/popup/index.html.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}