feat: Add @wxt-dev/module-vue package (#716)

.github/workflows/validate.yml

@@ -13,6 +13,12 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - run: pnpm check
+  builds:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - run: pnpm -r build
   build-demo:
     runs-on: ubuntu-22.04
     steps:

packages/module-vue/README.md

@@ -0,0 +1,35 @@
+# `@wxt-dev/module-vue`
+
+Enables the use of [Vue](https://vuejs.org/) in your web extension, in HTML pages and content scripts.
+
+This plugin makes a few changes:
+
+1. Adds `@vitejs/plugin-vue` to vite config
+2. Adds the [`vue` preset](https://github.com/unjs/unimport/blob/main/src/presets/vue.ts) to auto-imports
+3. Applies sourcemap fix to prevent HMR errors during development
+4. Enable auto-imports in `.vue` files
+
+## Usage
+
+```sh
+pnpm i -D @wxt-dev/module-vue
+```
+
+Then add the module to your config:
+
+```ts
+// wxt.config.ts
+export default defineConfig({
+  // Required
+  modules: ['@wxt-dev/module-vue'],
+
+  // Optional: Pass options to the module:
+  vue: {
+    vite: {
+      script: {
+        propsDestructure: true,
+      },
+    },
+  },
+});
+```

packages/module-vue/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@wxt-dev/module-vue",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "pnpm -s build-deps && unbuild",
+    "check": "pnpm -s build-deps && check",
+    "build-deps": "pnpm -ws build-deps @wxt-dev/module-vue"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0",
+    "wxt": ">=0.18.5"
+  },
+  "dependencies": {
+    "@vitejs/plugin-vue": "^5.0.5"
+  },
+  "devDependencies": {
+    "@aklinker1/check": "^1.1.1",
+    "publint": "^0.2.6",
+    "typescript": "^5.4.5",
+    "unbuild": "^2.0.0",
+    "wxt": "workspace:*",
+    "vue": "^3.0.0"
+  }
+}

packages/module-vue/src/index.ts

@@ -0,0 +1,47 @@
+import 'wxt';
+import { addImportPreset, addViteConfig, defineWxtModule } from 'wxt/modules';
+import vue, { Options as ViteOptions } from '@vitejs/plugin-vue';
+
+export default defineWxtModule<VueModuleOptions>({
+  name: '@wxt-dev/module-vue',
+  configKey: 'vue',
+  setup(wxt, options) {
+    const { vite } = options ?? {};
+
+    // Add plugin & set sourcemap option
+    addViteConfig(wxt, ({ command }) => ({
+      // @ts-ignore: Ignore vite version issues
+      plugins: [vue(vite)],
+      build: {
+        // Fixes known issue: https://github.com/wxt-dev/wxt/pull/607
+        sourcemap: false,
+      },
+    }));
+
+    // Enable auto-imports in template files
+    wxt.hooks.hook('ready', (wxt) => {
+      if (!wxt.config.imports) return;
+
+      wxt.config.imports.addons ??= {};
+      if (!Array.isArray(wxt.config.imports.addons)) {
+        wxt.config.imports.addons.vueTemplate = true;
+      } else {
+        wxt.logger.warn(
+          'Could not enable auto-imports in vue templates when using and array for imports.addons',
+        );
+      }
+    });
+
+    addImportPreset(wxt, 'vue');
+  },
+});
+
+export interface VueModuleOptions {
+  vite?: ViteOptions;
+}
+
+declare module 'wxt' {
+  export interface InlineConfig {
+    vue?: VueModuleOptions;
+  }
+}

packages/module-vue/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "exclude": ["node_modules/**", "dist/**"]
+}