feat: support Vue with unplugin-vue

Author: fi3ework

examples/vue-component-bundle/README.md

@@ -1,3 +1,3 @@
 # @examples/vue-component
 
-This example demonstrates how to use Rslib to build a simple Vue component.
+This example demonstrates how to use Rslib to build a simple bundled Vue component.

examples/vue-component-bundle/package.json

@@ -9,8 +9,8 @@
     "build": "rslib build && vue-tsc"
   },
   "devDependencies": {
-    "@rsbuild/plugin-vue": "^1.0.7",
     "@rslib/core": "workspace:*",
+    "rsbuild-plugin-unplugin-vue": "^0.0.3",
     "typescript": "^5.8.3",
     "vue": "^3.5.13",
     "vue-tsc": "^2.2.10"

examples/vue-component-bundle/rslib.config.ts

@@ -1,10 +1,7 @@
-import { pluginVue } from '@rsbuild/plugin-vue';
 import { defineConfig } from '@rslib/core';
+import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue';
 
 export default defineConfig({
-  plugins: [pluginVue()],
+  plugins: [pluginUnpluginVue()],
   lib: [{ format: 'esm' }],
-  output: {
-    target: 'web',
-  },
 });

examples/vue-component-bundleless/README.md

@@ -0,0 +1,3 @@
+# @examples/vue-component
+
+This example demonstrates how to use Rslib to build a simple bundleless Vue component.

examples/vue-component-bundleless/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@examples/vue-component-bundleless",
+  "private": true,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "rslib build && vue-tsc"
+  },
+  "devDependencies": {
+    "@rslib/core": "workspace:*",
+    "rsbuild-plugin-unplugin-vue": "^0.0.3",
+    "typescript": "^5.8.3",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.10"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  }
+}

examples/vue-component-bundleless/rslib.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from '@rslib/core';
+import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue';
+
+export default defineConfig({
+  plugins: [pluginUnpluginVue()],
+  lib: [{ bundle: false, format: 'esm' }],
+});

examples/vue-component-bundleless/src/Counter.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h2 class="counter-text">Counter: {{ count }}</h2>
+    <counter-button @click="decrement" label="-" />
+    <counter-button @click="increment" label="+" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import CounterButton from './CounterButton.vue';
+
+const count = ref(0);
+
+const increment = () => count.value++;
+const decrement = () => count.value--;
+</script>
+
+<style scoped>
+.counter-text {
+  font-size: 50px;
+}
+</style>

examples/vue-component-bundleless/src/CounterButton.vue

@@ -0,0 +1,16 @@
+<template>
+  <button type="button" @click="onClick">{{ label }}</button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string;
+  onClick: () => void;
+}>();
+</script>
+
+<style scoped>
+.button {
+  background: yellow;
+}
+</style>

examples/vue-component-bundleless/src/index.ts

@@ -0,0 +1,3 @@
+import Counter from './Counter.vue';
+
+export { Counter };

examples/vue-component-bundleless/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": ".",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "outDir": "dist",
+    "lib": ["DOM", "ESNext"],
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "exclude": ["**/node_modules"],
+  "include": ["src"]
+}