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

> Discover the Vue 3 and Element Plus technology behind FluentReads popup UI. This article explains the components and framework powering this feature explained.

- Repository: [ThinkStu/fluentread](https://github.com/bistutu/fluentread)
- Tags: deep-dive
- Published: 2026-02-26

---

**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`](https://github.com/bistutu/fluentread/blob/main/entrypoints/popup/main.ts)

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

```typescript
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`](https://github.com/bistutu/fluentread/blob/main/entrypoints/popup/App.vue)

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

```vue
<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`](https://github.com/bistutu/fluentread/blob/main/entrypoints/popup/index.html)

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

```html
<!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`](https://github.com/bistutu/fluentread/blob/main/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`](https://github.com/bistutu/fluentread/blob/main/element-plus/theme-chalk/base.css) provides foundational variables and utility classes.
2.  **Dark Mode Variables**: [`element-plus/theme-chalk/dark/css-vars.css`](https://github.com/bistutu/fluentread/blob/main/element-plus/theme-chalk/dark/css-vars.css) enables automatic theme switching based on browser preferences.
3.  **Project-Specific Styles**: [`styles/theme.css`](https://github.com/bistutu/fluentread/blob/main/styles/theme.css) and [`entrypoints/popup/style.css`](https://github.com/bistutu/fluentread/blob/main/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`](https://github.com/bistutu/fluentread/blob/main/wxt.config.ts) file orchestrates the compilation, treating [`entrypoints/popup/index.html`](https://github.com/bistutu/fluentread/blob/main/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`](https://github.com/bistutu/fluentread/blob/main/entrypoints/popup/main.ts) to minimize bundle size.
- The layout structure is defined in [`entrypoints/popup/App.vue`](https://github.com/bistutu/fluentread/blob/main/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`](https://github.com/bistutu/fluentread/blob/main/styles/theme.css) and [`entrypoints/popup/style.css`](https://github.com/bistutu/fluentread/blob/main/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`](https://github.com/bistutu/fluentread/blob/main/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`](https://github.com/bistutu/fluentread/blob/main/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`](https://github.com/bistutu/fluentread/blob/main/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`](https://github.com/bistutu/fluentread/blob/main/entrypoints/popup/index.html).