> ## 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.js > 用 Vue 單一檔案元件打造擴充功能 UI。Extension.js 會從相依套件偵測 Vue，並設定 SFC 編譯與別名。 Extension.js 會從相依套件偵測 Vue，並自動設定單一檔案元件（SFC）編譯、框架別名與開發階段的更新行為。scoped 樣式、Composition API 與 ` ``` ```ts theme={null} import { createApp } from "vue"; import App from "./App.vue"; createApp(App).mount("#app"); ``` ```vue theme={null} ``` ### 在 `content_script` 檔中 對於 content script，將 Vue app 掛載到注入的根節點： ```ts theme={null} import { createApp } from "vue"; import App from "./App.vue"; import "./content.css"; const rootDiv = document.createElement("div"); rootDiv.id = "extension-root"; document.body.appendChild(rootDiv); createApp(App).mount("#extension-root"); ``` ## 最佳實務 * 讓 UI 入口維持以框架為主（`main.ts`、`App.vue`），並把擴充功能 API 放在專屬模組。 * 在 SFC 中盡量使用 scoped 樣式，降低擴充功能頁面的樣式外洩。 * 對於較大的 UI，將元件與共用 composable 拆分，讓 content script 保持精簡。 ## 下一步 * 進一步了解 [TypeScript 支援](/docs/languages-and-frameworks/typescript)。 * 探索 [Sass 與 Sass modules](/docs/languages-and-frameworks/sass)。 ## 影片導覽