fix: alias vue3 to vue/dist/vue.esm-bundler.js by default (#216)

packages/framework-vue3/package.json

@@ -49,16 +49,13 @@
     "@rsbuild/core": "^1.1.13",
     "@types/node": "^18.0.0",
     "storybook": "8.5.0-beta.8",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "vue": "^3.5.13"
   },
   "peerDependencies": {
     "@rsbuild/core": "^1.0.1",
-    "storybook": "^8.2.1"
-  },
-  "peerDependenciesMeta": {
-    "typescript": {
-      "optional": true
-    }
+    "storybook": "^8.2.1",
+    "vue": "^3.0.0"
   },
   "engines": {
     "node": ">=18.0.0"

packages/framework-vue3/src/framework-preset-vue3-docs.ts → packages/framework-vue3/src/framework-preset-vue3.ts

@@ -1,11 +1,11 @@
-import { mergeRsbuildConfig } from '@rsbuild/core'
+import { type RsbuildConfig, mergeRsbuildConfig } from '@rsbuild/core'
 import { hasDocsOrControls } from 'storybook/internal/docs-tools'
 import type { StorybookConfig } from './types'
 
-export const rsbuildFinal: StorybookConfig['rsbuildFinal'] = (
+const rsbuildFinalDoc: StorybookConfig['rsbuildFinal'] = (
   config,
   options,
-) => {
+): RsbuildConfig => {
   if (!hasDocsOrControls(options)) return config
 
   let vueDocgenOptions = {}
@@ -20,7 +20,7 @@ export const rsbuildFinal: StorybookConfig['rsbuildFinal'] = (
     }
   }
 
-  const finalConfig = mergeRsbuildConfig(config, {
+  return {
     tools: {
       rspack: (config, { mergeConfig }) => {
         return mergeConfig(config, {
@@ -44,7 +44,31 @@ export const rsbuildFinal: StorybookConfig['rsbuildFinal'] = (
         })
       },
     },
-  })
+  }
+}
 
-  return finalConfig
+const rsbuildFinalBase: StorybookConfig['rsbuildFinal'] = (
+  config,
+  options,
+): RsbuildConfig => {
+  return {
+    resolve: {
+      alias: {
+        // https://github.com/fengyuanchen/vue-feather/issues/8
+        // Port https://github.com/storybookjs/storybook/blob/4224713c21c1f1ada8aca68db1b855dfad7f6975/code/presets/vue3-webpack/src/framework-preset-vue3.ts#L59.
+        vue$: require.resolve('vue/dist/vue.esm-bundler.js'),
+      },
+    },
+  }
+}
+
+export const rsbuildFinal: StorybookConfig['rsbuildFinal'] = (
+  config,
+  options,
+) => {
+  return mergeRsbuildConfig(
+    config,
+    rsbuildFinalBase(config, options),
+    rsbuildFinalDoc(config, options),
+  )
 }

packages/framework-vue3/src/preset.ts

@@ -1,7 +1,7 @@
 import { dirname, join } from 'node:path'
 import type { PresetProperty } from 'storybook/internal/types'
 
-export { rsbuildFinal } from './framework-preset-vue3-docs'
+export { rsbuildFinal } from './framework-preset-vue3'
 
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any