## 事象
たとえば、`app.vue`で`ref`が`Uncaught ReferenceError: ref is not defined`になる。
## 原因
[[WXT]]がフロントエンドフレームワークとの統合をmoduleで行うようになったから。
> [!thinking]
> リリースノートに記載がないので前からそうだったのかもしれないが、`@wxt-dev/module-xxx`の1.0がリリースされたのは最近なので、このタイミングで何かが変わった可能性がある...。少なくとも`init`で生成されるプロジェクトは以前とは変わっていた。
<div class="link-card">
<div class="link-card-header">
<img src="https://wxt.dev/favicon.ico" class="link-card-site-icon"/>
<span class="link-card-site-name">wxt.dev</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<p class="link-card-title">Next-gen Web Extension Framework – WXT</p>
<p class="link-card-description">WXT provides the best developer experience, making it quick, easy, and fun to develop chrome extensions for all browsers. With built-in utilities for building, zipping, and ... </p>
</div>
<img src="https://wxt.dev/social-preview.png" class="link-card-image" />
</div>
<a href="https://wxt.dev/guide/key-concepts/frontend-frameworks.html"></a>
</div>
## 解決方法
`@vitejs/plugin-vue`の代わりに`@wxt-dev/module-vue`を使う。
```console
bun add --dev @wxt-dev/module-vue
bun remove @vitejs/plugin-vue
```
[[wxt.config.ts]]を変更。
```diff
import { defineConfig } from "wxt";
- import vue from "@vitejs/plugin-vue";
// See https://wxt.dev/api/config.html
export default defineConfig({
+ modules: ["@wxt-dev/module-vue"],
imports: {
addons: {
vueTemplate: true,
},
presets: ["vue"],
},
- vite: () => ({
- plugins: [vue()],
- }),
```