> ## Documentation Index
> Fetch the complete documentation index at: https://extension.js.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue 瀏覽器擴充功能範本

> 建立採用單檔元件與 Composition API、可用於 popup、options 與 content script 情境的 Vue 3 瀏覽器擴充功能。

<img src="https://mintcdn.com/extensionjs/VCnDd7fX2Nza24SE/images/examples/new-vue/screenshot.png?fit=max&auto=format&n=VCnDd7fX2Nza24SE&q=85&s=0f05d66951c6512c5fee920de0e097c1" alt="Vue template preview" className="w-full rounded-xl border border-black/10 dark:border-white/10" width="2400" height="1800" data-path="images/examples/new-vue/screenshot.png" />

## 建立專案

<CodeGroup>
  ```bash npm theme={null}
  npx extension@latest create my-extension --template=vue
  ```

  ```bash pnpm theme={null}
  pnpx extension@latest create my-extension --template=vue
  ```

  ```bash yarn theme={null}
  yarn dlx extension@latest create my-extension --template=vue
  ```

  ```bash bun theme={null}
  bunx extension@latest create my-extension --template=vue
  ```

  ```bash bun theme={null}
  bunx extension@latest create my-extension --template=vue
  ```
</CodeGroup>

## 你會獲得什麼

漸進式設定，搭配 `.vue` 單檔元件，並已準備好 popup、options 與 content script 情境。範本會處理 SFC 編譯與重新載入行為，讓你能專注在 UI。

對於已在出貨 Vue 應用、希望擴充功能能融入相同工作流程的團隊來說，這是合適的選擇。

## 原始碼

在 GitHub 瀏覽完整原始碼：[extension-js/examples/vue](https://github.com/extension-js/examples/tree/main/examples/vue)。