> ## 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 浏览器扩展模板

> 脚手架生成一个 Vue 3 浏览器扩展，包含单文件组件以及为 popup、options 和 content script 上下文接好的组合式 API。

<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)。