diff --git a/.gitignore b/.gitignore
index 64cee52cc0..8574d3ed49 100644
--- a/.gitignore
+++ b/.gitignore
@@ -316,3 +316,5 @@ vite.config.mts.timestamp-*
 # Release
 .npmrc
 .release.sh
+
+*storybook.log
diff --git a/.husky/_/pre-commit b/.husky/_/pre-commit
new file mode 100755
index 0000000000..a130880f63
--- /dev/null
+++ b/.husky/_/pre-commit
@@ -0,0 +1,66 @@
+#!/bin/sh
+
+if [ "$LEFTHOOK_VERBOSE" = "1" -o "$LEFTHOOK_VERBOSE" = "true" ]; then
+  set -x
+fi
+
+if [ "$LEFTHOOK" = "0" ]; then
+  exit 0
+fi
+
+call_lefthook()
+{
+  if test -n "$LEFTHOOK_BIN"
+  then
+    "$LEFTHOOK_BIN" "$@"
+  elif lefthook -h >/dev/null 2>&1
+  then
+    lefthook "$@"
+  else
+    dir="$(git rev-parse --show-toplevel)"
+    osArch=$(uname | tr '[:upper:]' '[:lower:]')
+    cpuArch=$(uname -m | sed 's/aarch64/arm64/;s/x86_64/x64/')
+    if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook"
+    then
+      "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook"
+    then
+      "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook"
+    then
+      "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook" "$@"
+    elif test -f "$dir/node_modules/lefthook/bin/index.js"
+    then
+      "$dir/node_modules/lefthook/bin/index.js" "$@"
+    
+    elif go tool lefthook -h >/dev/null 2>&1
+    then
+      go tool lefthook "$@"
+    elif bundle exec lefthook -h >/dev/null 2>&1
+    then
+      bundle exec lefthook "$@"
+    elif yarn lefthook -h >/dev/null 2>&1
+    then
+      yarn lefthook "$@"
+    elif pnpm lefthook -h >/dev/null 2>&1
+    then
+      pnpm lefthook "$@"
+    elif swift package lefthook >/dev/null 2>&1
+    then
+      swift package --build-path .build/lefthook --disable-sandbox lefthook "$@"
+    elif command -v mint >/dev/null 2>&1
+    then
+      mint run csjones/lefthook-plugin "$@"
+    elif uv run lefthook -h >/dev/null 2>&1
+    then
+      uv run lefthook "$@"
+    elif mise exec -- lefthook -h >/dev/null 2>&1
+    then
+      mise exec -- lefthook "$@"
+    else
+      echo "Can't find lefthook in PATH"
+    fi
+  fi
+}
+
+call_lefthook run "pre-commit" "$@"
diff --git a/.husky/_/prepare-commit-msg b/.husky/_/prepare-commit-msg
new file mode 100755
index 0000000000..4748c279ec
--- /dev/null
+++ b/.husky/_/prepare-commit-msg
@@ -0,0 +1,66 @@
+#!/bin/sh
+
+if [ "$LEFTHOOK_VERBOSE" = "1" -o "$LEFTHOOK_VERBOSE" = "true" ]; then
+  set -x
+fi
+
+if [ "$LEFTHOOK" = "0" ]; then
+  exit 0
+fi
+
+call_lefthook()
+{
+  if test -n "$LEFTHOOK_BIN"
+  then
+    "$LEFTHOOK_BIN" "$@"
+  elif lefthook -h >/dev/null 2>&1
+  then
+    lefthook "$@"
+  else
+    dir="$(git rev-parse --show-toplevel)"
+    osArch=$(uname | tr '[:upper:]' '[:lower:]')
+    cpuArch=$(uname -m | sed 's/aarch64/arm64/;s/x86_64/x64/')
+    if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook"
+    then
+      "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook"
+    then
+      "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook"
+    then
+      "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook" "$@"
+    elif test -f "$dir/node_modules/lefthook/bin/index.js"
+    then
+      "$dir/node_modules/lefthook/bin/index.js" "$@"
+    
+    elif go tool lefthook -h >/dev/null 2>&1
+    then
+      go tool lefthook "$@"
+    elif bundle exec lefthook -h >/dev/null 2>&1
+    then
+      bundle exec lefthook "$@"
+    elif yarn lefthook -h >/dev/null 2>&1
+    then
+      yarn lefthook "$@"
+    elif pnpm lefthook -h >/dev/null 2>&1
+    then
+      pnpm lefthook "$@"
+    elif swift package lefthook >/dev/null 2>&1
+    then
+      swift package --build-path .build/lefthook --disable-sandbox lefthook "$@"
+    elif command -v mint >/dev/null 2>&1
+    then
+      mint run csjones/lefthook-plugin "$@"
+    elif uv run lefthook -h >/dev/null 2>&1
+    then
+      uv run lefthook "$@"
+    elif mise exec -- lefthook -h >/dev/null 2>&1
+    then
+      mise exec -- lefthook "$@"
+    else
+      echo "Can't find lefthook in PATH"
+    fi
+  fi
+}
+
+call_lefthook run "prepare-commit-msg" "$@"
diff --git a/bun.lockb b/bun.lockb
new file mode 100755
index 0000000000..2342b68834
Binary files /dev/null and b/bun.lockb differ
diff --git a/packages/vue/.storybook/main.ts b/packages/vue/.storybook/main.ts
index 3107a17d2c..59c11f163b 100644
--- a/packages/vue/.storybook/main.ts
+++ b/packages/vue/.storybook/main.ts
@@ -1 +1,41 @@
-import '../../../.storybook/styles.css'
+import type { StorybookConfig } from '@storybook/vue3-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.ts'],
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: { backgrounds: false, controls: false, actions: false },
+    },
+    '@storybook/addon-a11y',
+    '@storybook/addon-actions',
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  core: {
+    disableTelemetry: true,
+  },
+  docs: {
+    autodocs: false,
+  },
+
+  // TODO: fix this when vue-docgen accepts types from other packages in components
+  // This is a workaround until vue-docgen-plugin is fixed since we also dont use autodocs
+  // This removes the plugin vue-docgen-plugin so it wont load and throws an error on the use of an type import like
+  // import { Avatar, type AvatarRootEmits, type AvatarRootProps } from '@ark-ui/vue/avatar'
+  // using options: { docgen: "vue-component-meta",} throws other errors with node_modules/@zag-js/avatar/dist/index.mjs.vue'
+  // could not be found. This could be a fix for the vue-docgen-plugin error but it is not working for now
+  viteFinal(config) {
+    const vueDocgenIndex =
+      config.plugins?.findIndex(
+        (plugin) =>
+          plugin && typeof plugin === 'object' && 'name' in plugin && plugin.name === 'storybook:vue-docgen-plugin',
+      ) ?? -1
+    if (vueDocgenIndex !== -1) config.plugins?.splice(vueDocgenIndex, 1)
+    return config
+  },
+}
+
+export default config
diff --git a/packages/vue/.storybook/preview.ts b/packages/vue/.storybook/preview.ts
new file mode 100644
index 0000000000..d39aebb890
--- /dev/null
+++ b/packages/vue/.storybook/preview.ts
@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/vue3'
+import '../../../.storybook/styles.css'
+
+const preview: Preview = {
+  parameters: {
+    options: {
+      storySort: {
+        method: 'alphabetical',
+      },
+    },
+    layout: 'padded',
+  },
+}
+
+export default preview
diff --git a/packages/vue/.storybook/storybook.types.ts b/packages/vue/.storybook/storybook.types.ts
new file mode 100644
index 0000000000..65516bf5c0
--- /dev/null
+++ b/packages/vue/.storybook/storybook.types.ts
@@ -0,0 +1,6 @@
+// Convert Vue emit tuple format to function format for Storybook
+// example: from `statusChange: [details: avatar.StatusChangeDetails]`
+// to `statusChanged: (details: avatar.StatusChangeDetails) => void`
+export type EmitHandlers<T> = {
+  [K in keyof T]: T[K] extends readonly [infer P] ? (param: P) => void : never
+}
diff --git a/packages/vue/histoire.config.ts b/packages/vue/histoire.config.ts
deleted file mode 100644
index 7f7e9c7e06..0000000000
--- a/packages/vue/histoire.config.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { HstVue } from '@histoire/plugin-vue'
-import { defineConfig } from 'histoire'
-
-export default defineConfig({
-  plugins: [HstVue()],
-  storyMatch: ['**/*.stories.vue'],
-  setupFile: '.storybook/main.ts',
-  viteNodeInlineDeps: [/lucide-vue-next/],
-  vite: {
-    resolve: {
-      preserveSymlinks: true,
-    },
-    server: {
-      fs: {
-        allow: ['**/*', '../../**/*'],
-      },
-    },
-  },
-})
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 32f9c2f70a..551dc048d1 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -75,10 +75,11 @@
     "test:coverage": "vitest run --coverage",
     "test:ci": "vitest --run",
     "typecheck": "vue-tsc",
-    "storybook": "histoire dev",
+    "storybook": "storybook dev -p 6009",
     "prepack": "clean-package",
     "postpack": "clean-package restore",
-    "release-it": "release-it --config ../../release-it.json"
+    "release-it": "release-it --config ../../release-it.json",
+    "build-storybook": "storybook build"
   },
   "publishConfig": {
     "access": "public"
@@ -143,7 +144,13 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@histoire/plugin-vue": "0.17.17",
+    "@chromatic-com/storybook": "^3",
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/blocks": "^8.6.7",
+    "@storybook/experimental-addon-test": "^8.6.7",
+    "@storybook/test": "^8.6.7",
+    "@storybook/vue3": "^8.6.7",
+    "@storybook/vue3-vite": "^8.6.7",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/user-event": "14.6.1",
@@ -151,6 +158,7 @@
     "@types/jsdom": "21.1.7",
     "@vitejs/plugin-vue": "5.2.4",
     "@vitejs/plugin-vue-jsx": "4.2.0",
+    "@vitest/browser": "3.0.9",
     "@vue/compiler-sfc": "3.5.16",
     "clean-package": "2.2.0",
     "globby": "14.1.0",
@@ -158,6 +166,7 @@
     "jsdom": "26.1.0",
     "lucide-vue-next": "0.507.0",
     "resize-observer-polyfill": "1.5.1",
+    "storybook": "^8.6.7",
     "typescript": "5.8.3",
     "vite": "6.3.5",
     "vite-plugin-dts": "4.5.3",
diff --git a/packages/vue/src/components/accordion/accordion.stories.ts b/packages/vue/src/components/accordion/accordion.stories.ts
new file mode 100644
index 0000000000..e7320d9bb5
--- /dev/null
+++ b/packages/vue/src/components/accordion/accordion.stories.ts
@@ -0,0 +1,147 @@
+import { action } from '@storybook/addon-actions'
+import type { Meta } from '@storybook/vue3'
+
+import type { EmitHandlers } from '../../../.storybook/storybook.types'
+
+import type { AccordionRootEmits } from './accordion-root.vue'
+import type { AccordionProps } from './examples/accordion.vue'
+
+import AccordionExample from './examples/accordion.vue'
+import BasicExample from './examples/basic.vue'
+import CollapsibleExample from './examples/collapsible.vue'
+import ContextFocusedValueExample from './examples/context/focusedValue.vue'
+import ContextGetItemStateExample from './examples/context/getItemState.vue'
+import ContextSetValueExample from './examples/context/setValue.vue'
+import ContextValueExample from './examples/context/value.vue'
+import ControlledExample from './examples/controlled.vue'
+import DisabledExample from './examples/disabled.vue'
+import HorizontalExample from './examples/horizontal.vue'
+import MultipleExample from './examples/multiple.vue'
+import RenderPropExample from './examples/render-prop.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import VerticalExample from './examples/vertical.vue'
+
+const meta = {
+  title: 'Components / Accordion',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const RenderProp = {
+  render: () => ({
+    components: { RenderPropExample },
+    template: '<RenderPropExample />',
+  }),
+}
+
+export const Collapsible = {
+  render: () => ({
+    components: { CollapsibleExample },
+    template: '<CollapsibleExample />',
+  }),
+}
+
+export const Multiple = {
+  render: () => ({
+    components: { MultipleExample },
+    template: '<MultipleExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const Vertical = {
+  render: () => ({
+    components: { VerticalExample },
+    template: '<VerticalExample />',
+  }),
+}
+
+export const Horizontal = {
+  render: () => ({
+    components: { HorizontalExample },
+    template: '<HorizontalExample />',
+  }),
+}
+
+export const Disabled = {
+  render: () => ({
+    components: { DisabledExample },
+    template: '<DisabledExample />',
+  }),
+}
+
+interface ClosedArgs {
+  props: AccordionProps
+  emits: EmitHandlers<AccordionRootEmits>
+}
+
+export const Closed = {
+  render: (args: ClosedArgs) => ({
+    components: { AccordionExample },
+    setup() {
+      return {
+        args,
+      }
+    },
+    template: `<AccordionExample v-bind="args.props" v-on="args.emits" />`,
+  }),
+  args: {
+    props: {
+      items: ['React', 'Solid', 'Vue'],
+      multiple: true,
+    },
+    emits: {
+      focusChange: (details) => action('focus changed')(details),
+      valueChange: (details) => action('value changed')(details),
+      'update:modelValue': (value) => action('model value updated')(value),
+    },
+  } satisfies ClosedArgs,
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
+
+export const ContextFocusedValue = {
+  render: () => ({
+    components: { ContextFocusedValueExample },
+    template: '<ContextFocusedValueExample />',
+  }),
+}
+
+export const ContextValue = {
+  render: () => ({
+    components: { ContextValueExample },
+    template: '<ContextValueExample />',
+  }),
+}
+
+export const ContextSetValue = {
+  render: () => ({
+    components: { ContextSetValueExample },
+    template: '<ContextSetValueExample />',
+  }),
+}
+
+export const ContextGetItemState = {
+  render: () => ({
+    components: { ContextGetItemStateExample },
+    template: '<ContextGetItemStateExample />',
+  }),
+}
diff --git a/packages/vue/src/components/accordion/accordion.stories.vue b/packages/vue/src/components/accordion/accordion.stories.vue
deleted file mode 100644
index a9cc0cd072..0000000000
--- a/packages/vue/src/components/accordion/accordion.stories.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script setup lang="ts">
-import Accordion from './examples/accordion.vue'
-import Basic from './examples/basic.vue'
-import Collapsible from './examples/collapsible.vue'
-import ContextFocusedValue from './examples/context/focusedValue.vue'
-import ContextGetItemState from './examples/context/getItemState.vue'
-import ContextSetValue from './examples/context/setValue.vue'
-import ContextValue from './examples/context/value.vue'
-import Controlled from './examples/controlled.vue'
-import Disabled from './examples/disabled.vue'
-import Horizontal from './examples/horizontal.vue'
-import Multiple from './examples/multiple.vue'
-import RenderProp from './examples/render-prop.vue'
-import RootProvider from './examples/root-provider.vue'
-import Vertical from './examples/vertical.vue'
-</script>
-<template>
-  <Story title="Accordion">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="RenderProp">
-      <RenderProp />
-    </Variant>
-    <Variant title="Collapsible">
-      <Collapsible />
-    </Variant>
-    <Variant title="Multiple">
-      <Multiple />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="Vertical">
-      <Vertical />
-    </Variant>
-    <Variant title="Horizontal">
-      <Horizontal />
-    </Variant>
-    <Variant title="Disabled">
-      <Disabled />
-    </Variant>
-    <Variant title="Closed">
-      <Accordion multiple :items="['React', 'Solid', 'Vue']" />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-    <Variant title="ContextFocusedValue">
-      <ContextFocusedValue />
-    </Variant>
-    <Variant title="ContextValue">
-      <ContextValue />
-    </Variant>
-    <Variant title="ContextSetValue">
-      <ContextSetValue />
-    </Variant>
-    <Variant title="ContextGetItemState">
-      <ContextGetItemState />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/angle-slider/angle-slider.stories.ts b/packages/vue/src/components/angle-slider/angle-slider.stories.ts
new file mode 100644
index 0000000000..bfc91dbeeb
--- /dev/null
+++ b/packages/vue/src/components/angle-slider/angle-slider.stories.ts
@@ -0,0 +1,32 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import StepsExample from './examples/steps.vue'
+
+const meta = {
+  title: 'Components / Angle Slider',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Steps = {
+  render: () => ({
+    components: { StepsExample },
+    template: '<StepsExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
diff --git a/packages/vue/src/components/angle-slider/angle-slider.stories.vue b/packages/vue/src/components/angle-slider/angle-slider.stories.vue
deleted file mode 100644
index 33a34fad03..0000000000
--- a/packages/vue/src/components/angle-slider/angle-slider.stories.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import Steps from './examples/steps.vue'
-</script>
-<template>
-  <Story title="AngleSlider">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="Steps">
-      <Steps />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/avatar/avatar.stories.ts b/packages/vue/src/components/avatar/avatar.stories.ts
new file mode 100644
index 0000000000..2b36a3356b
--- /dev/null
+++ b/packages/vue/src/components/avatar/avatar.stories.ts
@@ -0,0 +1,65 @@
+import { action } from '@storybook/addon-actions'
+import type { Meta } from '@storybook/vue3'
+
+import type { EmitHandlers } from '../../../.storybook/storybook.types'
+
+import type { AvatarRootEmits } from './avatar-root.vue'
+import type { AvatarProps } from './examples/closed.vue'
+
+import BasicExample from './examples/basic.vue'
+import ClosedExample from './examples/closed.vue'
+import EventsExample from './examples/events.vue'
+import RootProviderExample from './examples/root-provider.vue'
+
+const meta = {
+  title: 'Components / Avatar',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Events = {
+  render: () => ({
+    components: { EventsExample },
+    template: '<EventsExample />',
+  }),
+}
+
+interface ClosedArgs {
+  props: AvatarProps
+  emits: EmitHandlers<AvatarRootEmits>
+}
+
+export const Closed = {
+  render: (args: ClosedArgs) => ({
+    components: { ClosedExample },
+    setup() {
+      return {
+        args,
+      }
+    },
+    template: '<ClosedExample v-bind="args.props" v-on="args.emits" />',
+  }),
+  args: {
+    props: {
+      name: 'Christian',
+      src: 'https://avatars.githubusercontent.com/u/1846056?v=4',
+    },
+    emits: {
+      statusChange: (details) => action('status changed')(details),
+    },
+  } satisfies ClosedArgs,
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
diff --git a/packages/vue/src/components/avatar/avatar.stories.vue b/packages/vue/src/components/avatar/avatar.stories.vue
deleted file mode 100644
index 3ba59ad09a..0000000000
--- a/packages/vue/src/components/avatar/avatar.stories.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Avatar from './examples/closed.vue'
-import Events from './examples/events.vue'
-import RootProvider from './examples/root-provider.vue'
-</script>
-<template>
-  <Story title="Avatar">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Events">
-      <Events />
-    </Variant>
-    <Variant title="Closed">
-      <Avatar
-        name="Christian"
-        src="https://avatars.githubusercontent.com/u/1846056?v=4"
-        @status-change="(e) => console.log(e.status)"
-      />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/carousel/carousel.stories.ts b/packages/vue/src/components/carousel/carousel.stories.ts
new file mode 100644
index 0000000000..30ee21026e
--- /dev/null
+++ b/packages/vue/src/components/carousel/carousel.stories.ts
@@ -0,0 +1,40 @@
+import type { Meta } from '@storybook/vue3'
+
+import AutoplayExample from './examples/autoplay.vue'
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import RootProviderExample from './examples/root-provider.vue'
+
+const meta = {
+  title: 'Components / Carousel',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const Autoplay = {
+  render: () => ({
+    components: { AutoplayExample },
+    template: '<AutoplayExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/carousel/carousel.stories.vue b/packages/vue/src/components/carousel/carousel.stories.vue
deleted file mode 100644
index 011478b785..0000000000
--- a/packages/vue/src/components/carousel/carousel.stories.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import Autoplay from './examples/autoplay.vue'
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import RootProvider from './examples/root-provider.vue'
-</script>
-<template>
-  <Story title="Carousel">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="Autoplay">
-      <Autoplay />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/checkbox/checkbox.stories.ts b/packages/vue/src/components/checkbox/checkbox.stories.ts
new file mode 100644
index 0000000000..fbb34d3904
--- /dev/null
+++ b/packages/vue/src/components/checkbox/checkbox.stories.ts
@@ -0,0 +1,64 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import GroupExample from './examples/group.vue'
+import IndeterminateExample from './examples/indeterminate.vue'
+import RenderPropExample from './examples/render-prop.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import WithFieldExample from './examples/with-field.vue'
+
+const meta = {
+  title: 'Components / Checkbox',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const Indeterminate = {
+  render: () => ({
+    components: { IndeterminateExample },
+    template: '<IndeterminateExample />',
+  }),
+}
+
+export const RenderProp = {
+  render: () => ({
+    components: { RenderPropExample },
+    template: '<RenderPropExample />',
+  }),
+}
+
+export const Group = {
+  render: () => ({
+    components: { GroupExample },
+    template: '<GroupExample />',
+  }),
+}
+
+export const WithField = {
+  render: () => ({
+    components: { WithFieldExample },
+    template: '<WithFieldExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/checkbox/checkbox.stories.vue b/packages/vue/src/components/checkbox/checkbox.stories.vue
deleted file mode 100644
index caa50dda92..0000000000
--- a/packages/vue/src/components/checkbox/checkbox.stories.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import GroupControlled from './examples/group-controlled.vue'
-import Group from './examples/group.vue'
-import Indeterminate from './examples/indeterminate.vue'
-import RenderProp from './examples/render-prop.vue'
-import RootProvider from './examples/root-provider.vue'
-import WithField from './examples/with-field.vue'
-</script>
-
-<template>
-  <Story title="Checkbox">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="Indeterminate">
-      <Indeterminate />
-    </Variant>
-    <Variant title="RenderProp">
-      <RenderProp />
-    </Variant>
-    <Variant title="Group">
-      <Group />
-    </Variant>
-    <Variant title="With Field">
-      <WithField />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-    <Variant title="Group Controlled">
-      <GroupControlled />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/clipboard/clipboard.stories.ts b/packages/vue/src/components/clipboard/clipboard.stories.ts
new file mode 100644
index 0000000000..0e3f10720a
--- /dev/null
+++ b/packages/vue/src/components/clipboard/clipboard.stories.ts
@@ -0,0 +1,40 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import RenderFnExample from './examples/render-fn.vue'
+import RootProviderExample from './examples/root-provider.vue'
+
+const meta = {
+  title: 'Components / Clipboard',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const RenderFn = {
+  render: () => ({
+    components: { RenderFnExample },
+    template: '<RenderFnExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/clipboard/clipboard.stories.vue b/packages/vue/src/components/clipboard/clipboard.stories.vue
deleted file mode 100644
index db9ff07062..0000000000
--- a/packages/vue/src/components/clipboard/clipboard.stories.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import RenderFn from './examples/render-fn.vue'
-import RootProvider from './examples/root-provider.vue'
-</script>
-<template>
-  <Story title="Clipboard">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="RenderFn">
-      <RenderFn />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/collapsible/collapsible.stories.ts b/packages/vue/src/components/collapsible/collapsible.stories.ts
new file mode 100644
index 0000000000..cb1a0e04e6
--- /dev/null
+++ b/packages/vue/src/components/collapsible/collapsible.stories.ts
@@ -0,0 +1,64 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import LazyMountAndUnmountOnExitExample from './examples/lazy-mount-and-unmount-on-exit.vue'
+import LazyMountExample from './examples/lazy-mount.vue'
+import OnExitCompleteExample from './examples/on-exit-complete.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import UnMountOnExitExample from './examples/unmount-on-exit.vue'
+
+const meta = {
+  title: 'Components / Collapsible',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const LazyMount = {
+  render: () => ({
+    components: { LazyMountExample },
+    template: '<LazyMountExample />',
+  }),
+}
+
+export const OnExitComplete = {
+  render: () => ({
+    components: { OnExitCompleteExample },
+    template: '<OnExitCompleteExample />',
+  }),
+}
+
+export const UnmountOnExit = {
+  render: () => ({
+    components: { UnMountOnExitExample },
+    template: '<UnMountOnExitExample />',
+  }),
+}
+
+export const LazyMountAndUnmountOnExit = {
+  render: () => ({
+    components: { LazyMountAndUnmountOnExitExample },
+    template: '<LazyMountAndUnmountOnExitExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/collapsible/collapsible.stories.vue b/packages/vue/src/components/collapsible/collapsible.stories.vue
deleted file mode 100644
index 71fdf4b275..0000000000
--- a/packages/vue/src/components/collapsible/collapsible.stories.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup>
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import LazyMountAndUnmountOnExit from './examples/lazy-mount-and-unmount-on-exit.vue'
-import LazyMount from './examples/lazy-mount.vue'
-import OnExitComplete from './examples/on-exit-complete.vue'
-import RootProvider from './examples/root-provider.vue'
-import UnMountOnExit from './examples/unmount-on-exit.vue'
-</script>
-
-<template>
-  <Story title="Collapsible">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="LazyMount">
-      <LazyMount />
-    </Variant>
-    <Variant title="OnExitComplete">
-      <OnExitComplete />
-    </Variant>
-    <Variant title="UnmountOnExit">
-      <UnMountOnExit />
-    </Variant>
-    <Variant title="LazyMountAndUnmountOnExit">
-      <LazyMountAndUnmountOnExit />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/color-picker/color-picker.stories.ts b/packages/vue/src/components/color-picker/color-picker.stories.ts
new file mode 100644
index 0000000000..b677d564cb
--- /dev/null
+++ b/packages/vue/src/components/color-picker/color-picker.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import ControlledOpenExample from './examples/controlled-open.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import WithFieldExample from './examples/with-field.vue'
+
+const meta = {
+  title: 'Components / ColorPicker',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const ControlledOpen = {
+  render: () => ({
+    components: { ControlledOpenExample },
+    template: '<ControlledOpenExample />',
+  }),
+}
+
+export const WithField = {
+  render: () => ({
+    components: { WithFieldExample },
+    template: '<WithFieldExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/color-picker/color-picker.stories.vue b/packages/vue/src/components/color-picker/color-picker.stories.vue
deleted file mode 100644
index 712b9b0c58..0000000000
--- a/packages/vue/src/components/color-picker/color-picker.stories.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import ControlledOpen from './examples/controlled-open.vue'
-import Controlled from './examples/controlled.vue'
-import RootProvider from './examples/root-provider.vue'
-import WithField from './examples/with-field.vue'
-</script>
-<template>
-  <Story title="ColorPicker">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="Controlled Open">
-      <ControlledOpen />
-    </Variant>
-    <Variant title="With Field">
-      <WithField />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/combobox/combobox.stories.ts b/packages/vue/src/components/combobox/combobox.stories.ts
new file mode 100644
index 0000000000..4ad7488ba6
--- /dev/null
+++ b/packages/vue/src/components/combobox/combobox.stories.ts
@@ -0,0 +1,56 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import GroupingExample from './examples/grouping.vue'
+import LinksExample from './examples/links.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import WithFieldExample from './examples/with-field.vue'
+
+const meta = {
+  title: 'Components / Combobox',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Grouping = {
+  render: () => ({
+    components: { GroupingExample },
+    template: '<GroupingExample />',
+  }),
+}
+
+export const Links = {
+  render: () => ({
+    components: { LinksExample },
+    template: '<LinksExample />',
+  }),
+}
+
+export const WithField = {
+  render: () => ({
+    components: { WithFieldExample },
+    template: '<WithFieldExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
diff --git a/packages/vue/src/components/combobox/combobox.stories.vue b/packages/vue/src/components/combobox/combobox.stories.vue
deleted file mode 100644
index 28e52e4df6..0000000000
--- a/packages/vue/src/components/combobox/combobox.stories.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import Grouping from './examples/grouping.vue'
-import Links from './examples/links.vue'
-import RootProvider from './examples/root-provider.vue'
-import WithField from './examples/with-field.vue'
-</script>
-<template>
-  <Story title="Combobox">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Grouping">
-      <Grouping />
-    </Variant>
-    <Variant title="Links">
-      <Links />
-    </Variant>
-    <Variant title="With Field">
-      <WithField />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/date-picker/date-picker.stories.ts b/packages/vue/src/components/date-picker/date-picker.stories.ts
new file mode 100644
index 0000000000..379409a093
--- /dev/null
+++ b/packages/vue/src/components/date-picker/date-picker.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import RangeExample from './examples/range.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import StandaloneExample from './examples/standalone.vue'
+
+const meta = {
+  title: 'Components / DatePicker',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const Standalone = {
+  render: () => ({
+    components: { StandaloneExample },
+    template: '<StandaloneExample />',
+  }),
+}
+
+export const Range = {
+  render: () => ({
+    components: { RangeExample },
+    template: '<RangeExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
diff --git a/packages/vue/src/components/date-picker/date-picker.stories.vue b/packages/vue/src/components/date-picker/date-picker.stories.vue
deleted file mode 100644
index 7f3ee9e8e0..0000000000
--- a/packages/vue/src/components/date-picker/date-picker.stories.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import Range from './examples/range.vue'
-import RootProvider from './examples/root-provider.vue'
-import Standalone from './examples/standalone.vue'
-</script>
-<template>
-  <Story title="DatePicker">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="Standalone">
-      <Standalone />
-    </Variant>
-    <Variant title="Range">
-      <Range />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/dialog/dialog.stories.ts b/packages/vue/src/components/dialog/dialog.stories.ts
new file mode 100644
index 0000000000..c96e1e3bf1
--- /dev/null
+++ b/packages/vue/src/components/dialog/dialog.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import LazyMountExample from './examples/lazy-mount.vue'
+import RenderFnExample from './examples/render-fn.vue'
+import RootProviderExample from './examples/root-provider.vue'
+
+const meta = {
+  title: 'Components / Dialog',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const LazyMount = {
+  render: () => ({
+    components: { LazyMountExample },
+    template: '<LazyMountExample />',
+  }),
+}
+
+export const RenderFn = {
+  render: () => ({
+    components: { RenderFnExample },
+    template: '<RenderFnExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/dialog/dialog.stories.vue b/packages/vue/src/components/dialog/dialog.stories.vue
deleted file mode 100644
index e8de1b9574..0000000000
--- a/packages/vue/src/components/dialog/dialog.stories.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import LazyMount from './examples/lazy-mount.vue'
-import RenderFn from './examples/render-fn.vue'
-import RootProvider from './examples/root-provider.vue'
-</script>
-<template>
-  <Story title="Dialog">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="LazyMount">
-      <LazyMount />
-    </Variant>
-    <Variant title="RenderFn">
-      <RenderFn />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/download-trigger/download-trigger.stories.ts b/packages/vue/src/components/download-trigger/download-trigger.stories.ts
new file mode 100644
index 0000000000..a7248eda06
--- /dev/null
+++ b/packages/vue/src/components/download-trigger/download-trigger.stories.ts
@@ -0,0 +1,32 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import SvgExample from './examples/svg.vue'
+import WithPromiseExample from './examples/with-promise.vue'
+
+const meta = {
+  title: 'Components / Download Trigger',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Svg = {
+  render: () => ({
+    components: { SvgExample },
+    template: '<SvgExample />',
+  }),
+}
+
+export const WithPromise = {
+  render: () => ({
+    components: { WithPromiseExample },
+    template: '<WithPromiseExample />',
+  }),
+}
diff --git a/packages/vue/src/components/download-trigger/download-trigger.stories.vue b/packages/vue/src/components/download-trigger/download-trigger.stories.vue
deleted file mode 100644
index da151e6e2d..0000000000
--- a/packages/vue/src/components/download-trigger/download-trigger.stories.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import WithSvg from './examples/svg.vue'
-import WithPromise from './examples/with-promise.vue'
-</script>
-<template>
-  <Story title="DownloadTrigger">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Svg">
-      <WithSvg />
-    </Variant>
-    <Variant title="With Promise">
-      <WithPromise />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/editable/editable.stories.ts b/packages/vue/src/components/editable/editable.stories.ts
new file mode 100644
index 0000000000..08c51b70cf
--- /dev/null
+++ b/packages/vue/src/components/editable/editable.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import CustomControlsExample from './examples/custom-controls.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import WithFieldExample from './examples/with-field.vue'
+
+const meta = {
+  title: 'Components / Editable',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const CustomControls = {
+  render: () => ({
+    components: { CustomControlsExample },
+    template: '<CustomControlsExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const WithField = {
+  render: () => ({
+    components: { WithFieldExample },
+    template: '<WithFieldExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/editable/editable.stories.vue b/packages/vue/src/components/editable/editable.stories.vue
deleted file mode 100644
index ed5604f09b..0000000000
--- a/packages/vue/src/components/editable/editable.stories.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import CustomControls from './examples/custom-controls.vue'
-import RootProvider from './examples/root-provider.vue'
-import WithField from './examples/with-field.vue'
-</script>
-<template>
-  <Story title="Editable">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="CustomControls">
-      <CustomControls />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="With Field">
-      <WithField />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/field/field.stories.ts b/packages/vue/src/components/field/field.stories.ts
new file mode 100644
index 0000000000..9298a00e12
--- /dev/null
+++ b/packages/vue/src/components/field/field.stories.ts
@@ -0,0 +1,88 @@
+import type { Meta } from '@storybook/vue3'
+
+import DisabledExample from './examples/disabled.vue'
+import InputControlledExample from './examples/input-controlled.vue'
+import InputExample from './examples/input.vue'
+import ReactiveInvalidExample from './examples/reactive-invalid.vue'
+import RequiredIndicatorExample from './examples/required-indicator.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import SelectControlledExample from './examples/select-controlled.vue'
+import SelectExample from './examples/select.vue'
+import TextareaControlledExample from './examples/textarea-controlled.vue'
+import TextareaExample from './examples/textarea.vue'
+
+const meta = {
+  title: 'Components / Field',
+} as Meta
+
+export default meta
+
+export const Input = {
+  render: () => ({
+    components: { InputExample },
+    template: '<InputExample />',
+  }),
+}
+
+export const InputControlled = {
+  render: () => ({
+    components: { InputControlledExample },
+    template: '<InputControlledExample />',
+  }),
+}
+
+export const Select = {
+  render: () => ({
+    components: { SelectExample }, 
+    template: '<SelectExample />',
+  }),
+}
+
+export const SelectControlled = {
+  render: () => ({
+    components: { SelectControlledExample },
+    template: '<SelectControlledExample />',
+  }),
+}
+
+export const Disabled = {
+  render: () => ({
+    components: { DisabledExample },
+    template: '<DisabledExample />',
+  }),
+}
+
+export const Textarea = {
+  render: () => ({
+    components: { TextareaExample },
+    template: '<TextareaExample />',
+  }),
+}
+
+export const TextareaControlled = {
+  render: () => ({
+    components: { TextareaControlledExample },
+    template: '<TextareaControlledExample />',
+  }),
+}
+
+export const RequiredIndicator = {
+  render: () => ({
+    components: { RequiredIndicatorExample },
+    template: '<RequiredIndicatorExample />',
+  }),
+}
+
+export const ReactiveInvalid = {
+  render: () => ({
+    components: { ReactiveInvalidExample },
+    template: '<ReactiveInvalidExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/field/field.stories.vue b/packages/vue/src/components/field/field.stories.vue
deleted file mode 100644
index 064a0c8010..0000000000
--- a/packages/vue/src/components/field/field.stories.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import Disabled from './examples/disabled.vue'
-import InputControlled from './examples/input-controlled.vue'
-import Input from './examples/input.vue'
-import ReactiveInvalid from './examples/reactive-invalid.vue'
-import RequiredIndicator from './examples/required-indicator.vue'
-import RootProvider from './examples/root-provider.vue'
-import SelectControlled from './examples/select-controlled.vue'
-import Select from './examples/select.vue'
-import TextareaAutoresize from './examples/textarea-autoresize.vue'
-import TextareaControlled from './examples/textarea-controlled.vue'
-import Textarea from './examples/textarea.vue'
-</script>
-<template>
-  <Story title="Field">
-    <Variant title="Input">
-      <Input />
-    </Variant>
-    <Variant title="Input Controlled">
-      <InputControlled />
-    </Variant>
-    <Variant title="Select">
-      <Select />
-    </Variant>
-    <Variant title="Select Controlled">
-      <SelectControlled />
-    </Variant>
-    <Variant title="Disabled">
-      <Disabled />
-    </Variant>
-    <Variant title="Textarea">
-      <Textarea />
-    </Variant>
-    <Variant title="Textarea Controlled">
-      <TextareaControlled />
-    </Variant>
-    <Variant title="Textarea Autoresize">
-      <TextareaAutoresize />
-    </Variant>
-    <Variant title="Required Indicator">
-      <RequiredIndicator />
-    </Variant>
-    <Variant title="Reactive Invalid">
-      <ReactiveInvalid />
-    </Variant>
-    <Variant title="Root Provider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/fieldset/fieldset.stories.ts b/packages/vue/src/components/fieldset/fieldset.stories.ts
new file mode 100644
index 0000000000..cdf1ee7a05
--- /dev/null
+++ b/packages/vue/src/components/fieldset/fieldset.stories.ts
@@ -0,0 +1,28 @@
+import BasicExample from './examples/basic.vue'
+import WithCheckboxExample from './examples/with-checkbox.vue'
+import WithFieldExample from './examples/with-field.vue'
+
+export default {
+  title: 'Components / Fieldset',
+};
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+};
+
+export const WithField = {
+  render: () => ({
+    components: { WithFieldExample },
+    template: '<WithFieldExample />',
+  }),
+};
+
+export const WithCheckbox = {
+  render: () => ({
+    components: { WithCheckboxExample },
+    template: '<WithCheckboxExample />',
+  }),
+};
\ No newline at end of file
diff --git a/packages/vue/src/components/fieldset/fieldset.stories.vue b/packages/vue/src/components/fieldset/fieldset.stories.vue
deleted file mode 100644
index 483dd26428..0000000000
--- a/packages/vue/src/components/fieldset/fieldset.stories.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import PhoneInput from './examples/phone-input.vue'
-import WithCheckbox from './examples/with-checkbox.vue'
-import WithField from './examples/with-field.vue'
-</script>
-<template>
-  <Story title="Fieldset">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="WithField">
-      <WithField />
-    </Variant>
-    <Variant title="WithCheckbox">
-      <WithCheckbox />
-    </Variant>
-    <Variant title="PhoneInput">
-      <PhoneInput />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/file-upload/file-upload.stories.ts b/packages/vue/src/components/file-upload/file-upload.stories.ts
new file mode 100644
index 0000000000..ab344f5906
--- /dev/null
+++ b/packages/vue/src/components/file-upload/file-upload.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import DirectoryUploadExample from './examples/directory-upload.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import ValidationExample from './examples/validation.vue'
+import WithFieldExample from './examples/with-field.vue'
+
+const meta = {
+  title: 'Components / File Upload',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const DirectoryUpload = {
+  render: () => ({
+    components: { DirectoryUploadExample },
+    template: '<DirectoryUploadExample />',
+  }),
+}
+
+export const Validation = {
+  render: () => ({
+    components: { ValidationExample },
+    template: '<ValidationExample />',
+  }),
+}
+
+export const WithField = {
+  render: () => ({
+    components: { WithFieldExample },
+    template: '<WithFieldExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
diff --git a/packages/vue/src/components/file-upload/file-upload.stories.vue b/packages/vue/src/components/file-upload/file-upload.stories.vue
deleted file mode 100644
index f2c0ab21f5..0000000000
--- a/packages/vue/src/components/file-upload/file-upload.stories.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import WithDirectoryUpload from './examples/directory-upload.vue'
-import RootProvider from './examples/root-provider.vue'
-import WithValidation from './examples/validation.vue'
-import WithField from './examples/with-field.vue'
-</script>
-<template>
-  <Story title="FileUpload">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="With Field">
-      <WithField />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-    <Variant title="With Validation">
-      <WithValidation />
-    </Variant>
-    <Variant title="With Directory Upload">
-      <WithDirectoryUpload />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/floating-panel/floating-panel.stories.ts b/packages/vue/src/components/floating-panel/floating-panel.stories.ts
new file mode 100644
index 0000000000..5f52feef3e
--- /dev/null
+++ b/packages/vue/src/components/floating-panel/floating-panel.stories.ts
@@ -0,0 +1,64 @@
+import type { Meta } from '@storybook/vue3'
+
+import AnchorPositionExample from './examples/anchor-position.vue'
+import BasicExample from './examples/basic.vue'
+import ControlledOpenExample from './examples/controlled-open.vue'
+import ControlledPositionExample from './examples/controlled-position.vue'
+import ControlledSizeExample from './examples/controlled-size.vue'
+import LazyMountExample from './examples/lazy-mount.vue'
+import RenderFnExample from './examples/render-fn.vue'
+
+const meta = {
+  title: 'Components / Floating Panel',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const AnchorPosition = {
+  render: () => ({
+    components: { AnchorPositionExample },
+    template: '<AnchorPositionExample />',
+  }),
+}
+
+export const ControlledPosition = {
+  render: () => ({
+    components: { ControlledPositionExample },
+    template: '<ControlledPositionExample />',
+  }),
+}
+
+export const ControlledOpen = {
+  render: () => ({
+    components: { ControlledOpenExample },
+    template: '<ControlledOpenExample />',
+  }),
+}
+
+export const ControlledSize = {
+  render: () => ({
+    components: { ControlledSizeExample },
+    template: '<ControlledSizeExample />',
+  }),
+}
+
+export const LazyMount = {
+  render: () => ({
+    components: { LazyMountExample },
+    template: '<LazyMountExample />',
+  }),
+}
+
+export const RenderFn = {
+  render: () => ({
+    components: { RenderFnExample },
+    template: '<RenderFnExample />',
+  }),
+}
diff --git a/packages/vue/src/components/floating-panel/floating-panel.stories.vue b/packages/vue/src/components/floating-panel/floating-panel.stories.vue
deleted file mode 100644
index 8eb07e84ad..0000000000
--- a/packages/vue/src/components/floating-panel/floating-panel.stories.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import AnchorPosition from './examples/anchor-position.vue'
-import Basic from './examples/basic.vue'
-import ControlledOpen from './examples/controlled-open.vue'
-import ControlledPosition from './examples/controlled-position.vue'
-import ControlledSize from './examples/controlled-size.vue'
-import LazyMount from './examples/lazy-mount.vue'
-import RenderFn from './examples/render-fn.vue'
-</script>
-
-<template>
-  <Story title="Floating Panel">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="AnchorPosition">
-      <AnchorPosition />
-    </Variant>
-    <Variant title="ControlledPosition">
-      <ControlledPosition />
-    </Variant>
-    <Variant title="ControlledOpen">
-      <ControlledOpen />
-    </Variant>
-    <Variant title="ControlledSize">
-      <ControlledSize />
-    </Variant>
-    <Variant title="LazyMount">
-      <LazyMount />
-    </Variant>
-    <Variant title="RenderFn">
-      <RenderFn />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/focus-trap/focus-trap.stories.ts b/packages/vue/src/components/focus-trap/focus-trap.stories.ts
new file mode 100644
index 0000000000..968c68a233
--- /dev/null
+++ b/packages/vue/src/components/focus-trap/focus-trap.stories.ts
@@ -0,0 +1,32 @@
+import type { Meta } from '@storybook/vue3'
+
+import AutofocusExample from './examples/autofocus.vue'
+import BasicExample from './examples/basic.vue'
+import InitialFocusExample from './examples/initial-focus.vue'
+
+const meta = {
+  title: 'Components / Focus Trap',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const InitialFocus = {
+  render: () => ({
+    components: { InitialFocusExample },
+    template: '<InitialFocusExample />',
+  }),
+}
+
+export const Autofocus = {
+  render: () => ({
+    components: { AutofocusExample },
+    template: '<AutofocusExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/focus-trap/focus-trap.stories.vue b/packages/vue/src/components/focus-trap/focus-trap.stories.vue
deleted file mode 100644
index d4e9cc172d..0000000000
--- a/packages/vue/src/components/focus-trap/focus-trap.stories.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import Autofocus from './examples/autofocus.vue'
-import Basic from './examples/basic.vue'
-import InitialFocus from './examples/initial-focus.vue'
-</script>
-
-<template>
-  <Story title="Focus Trap">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Initial Focus">
-      <InitialFocus />
-    </Variant>
-    <Variant title="Autofocus">
-      <Autofocus />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/format/format.stories.ts b/packages/vue/src/components/format/format.stories.ts
new file mode 100644
index 0000000000..77802fd998
--- /dev/null
+++ b/packages/vue/src/components/format/format.stories.ts
@@ -0,0 +1,112 @@
+import type { Meta } from '@storybook/vue3'
+
+import ByteBasicExample from './examples/byte-basic.vue'
+import ByteSizesExample from './examples/byte-sizes.vue'
+import ByteWithLocaleExample from './examples/byte-with-locale.vue'
+import ByteWithUnitDisplayExample from './examples/byte-with-unit-display.vue'
+import ByteWithUnitExample from './examples/byte-with-unit.vue'
+import NumberBasicExample from './examples/number-basic.vue'
+import NumberWithCompactExample from './examples/number-with-compact.vue'
+import NumberWithCurrencyExample from './examples/number-with-currency.vue'
+import NumberWithLocaleExample from './examples/number-with-locale.vue'
+import NumberWithPercentageExample from './examples/number-with-percentage.vue'
+import NumberWithUnitExample from './examples/number-with-unit.vue'
+import RelativeTimeBasicExample from './examples/relative-time-basic.vue'
+import RelativeTimeShortExample from './examples/relative-time-short.vue'
+
+const meta = {
+  title: 'Components / Format',
+} as Meta
+
+export default meta
+
+export const NumberBasic = {
+  render: () => ({
+    components: { NumberBasicExample },
+    template: '<NumberBasicExample />',
+  }),
+}
+
+export const NumberWithLocale = {
+  render: () => ({
+    components: { NumberWithLocaleExample },
+    template: '<NumberWithLocaleExample />',
+  }),
+}
+
+export const NumberWithUnit = {
+  render: () => ({
+    components: { NumberWithUnitExample },
+    template: '<NumberWithUnitExample />',
+  }),
+}
+
+export const NumberWithPercentage = {
+  render: () => ({
+    components: { NumberWithPercentageExample },
+    template: '<NumberWithPercentageExample />',
+  }),
+}
+
+export const NumberWithCurrency = {
+  render: () => ({
+    components: { NumberWithCurrencyExample },
+    template: '<NumberWithCurrencyExample />',
+  }),
+}
+
+export const NumberWithCompact = {
+  render: () => ({
+    components: { NumberWithCompactExample },
+    template: '<NumberWithCompactExample />',
+  }),
+}
+
+export const ByteBasic = {
+  render: () => ({
+    components: { ByteBasicExample },
+    template: '<ByteBasicExample />',
+  }),
+}
+
+export const ByteSizes = {
+  render: () => ({
+    components: { ByteSizesExample },
+    template: '<ByteSizesExample />',
+  }),
+}
+
+export const ByteWithLocale = {
+  render: () => ({
+    components: { ByteWithLocaleExample },
+    template: '<ByteWithLocaleExample />',
+  }),
+}
+
+export const ByteWithUnit = {
+  render: () => ({
+    components: { ByteWithUnitExample },
+    template: '<ByteWithUnitExample />',
+  }),
+}
+
+export const ByteWithUnitDisplay = {
+  render: () => ({
+    components: { ByteWithUnitDisplayExample },
+    template: '<ByteWithUnitDisplayExample />',
+  }),
+}
+
+export const RelativeTimeBasic = {
+  render: () => ({
+    components: { RelativeTimeBasicExample },
+    template: '<RelativeTimeBasicExample />',
+  }),
+}
+
+export const RelativeTimeShort = {
+  render: () => ({
+    components: { RelativeTimeShortExample },
+    template: '<RelativeTimeShortExample />',
+  }),
+}
diff --git a/packages/vue/src/components/format/format.stories.vue b/packages/vue/src/components/format/format.stories.vue
deleted file mode 100644
index eb37188420..0000000000
--- a/packages/vue/src/components/format/format.stories.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import ByteBasic from './examples/byte-basic.vue'
-import ByteSizes from './examples/byte-sizes.vue'
-import ByteWithLocale from './examples/byte-with-locale.vue'
-import ByteWithUnitDisplay from './examples/byte-with-unit-display.vue'
-import ByteWithUnit from './examples/byte-with-unit.vue'
-import NumberBasic from './examples/number-basic.vue'
-import NumberWithCompact from './examples/number-with-compact.vue'
-import NumberWithCurrency from './examples/number-with-currency.vue'
-import NumberWithLocale from './examples/number-with-locale.vue'
-import NumberWithPercentage from './examples/number-with-percentage.vue'
-import NumberWithUnit from './examples/number-with-unit.vue'
-import RelativeTimeBasic from './examples/relative-time-basic.vue'
-import RelativeTimeShort from './examples/relative-time-short.vue'
-</script>
-
-<template>
-  <Story title="Format">
-    <Variant title="Number Basic">
-      <NumberBasic />
-    </Variant>
-    <Variant title="Number with Locale">
-      <NumberWithLocale />
-    </Variant>
-    <Variant title="Number with Unit">
-      <NumberWithUnit />
-    </Variant>
-    <Variant title="Number with Percentage">
-      <NumberWithPercentage />
-    </Variant>
-    <Variant title="Number with Compact">
-      <NumberWithCompact />
-    </Variant>
-
-    <Variant title="Byte Basic">
-      <ByteBasic />
-    </Variant>
-    <Variant title="Byte Sizes">
-      <ByteSizes />
-    </Variant>
-    <Variant title="Byte with Locale">
-      <ByteWithLocale />
-    </Variant>
-    <Variant title="Byte with Unit">
-      <ByteWithUnit />
-    </Variant>
-    <Variant title="Byte with Unit Display">
-      <ByteWithUnitDisplay />
-    </Variant>
-    <Variant title="Number with Currency">
-      <NumberWithCurrency />
-    </Variant>
-
-    <Variant title="Relative Time Basic">
-      <RelativeTimeBasic />
-    </Variant>
-    <Variant title="Relative Time Short">
-      <RelativeTimeShort />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/frame/frame.stories.ts b/packages/vue/src/components/frame/frame.stories.ts
new file mode 100644
index 0000000000..69d41c6f3e
--- /dev/null
+++ b/packages/vue/src/components/frame/frame.stories.ts
@@ -0,0 +1,32 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ScriptExample from './examples/script.vue'
+import SrcDocExample from './examples/src-doc.vue'
+
+const meta = {
+  title: 'Components / Frame',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const SrcDoc = {
+  render: () => ({
+    components: { SrcDocExample },
+    template: '<SrcDocExample />',
+  }),
+}
+
+export const Script = {
+  render: () => ({
+    components: { ScriptExample },
+    template: '<ScriptExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/frame/frame.stories.vue b/packages/vue/src/components/frame/frame.stories.vue
deleted file mode 100644
index 61a92af4ef..0000000000
--- a/packages/vue/src/components/frame/frame.stories.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Script from './examples/script.vue'
-import SrcDoc from './examples/src-doc.vue'
-</script>
-
-<template>
-  <Story title="Frame">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="SrcDoc">
-      <SrcDoc />
-    </Variant>
-    <Variant title="Script">
-      <Script />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/highlight/highlight.stories.ts b/packages/vue/src/components/highlight/highlight.stories.ts
new file mode 100644
index 0000000000..77b7850fd6
--- /dev/null
+++ b/packages/vue/src/components/highlight/highlight.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import IgnoreCaseExample from './examples/ignore-case.vue'
+import MatchAllExample from './examples/match-all.vue'
+import MultipleExample from './examples/multiple.vue'
+import WithInputExample from './examples/with-input.vue'
+
+const meta = {
+  title: 'Components / Highlight',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Multiple = {
+  render: () => ({
+    components: { MultipleExample },
+    template: '<MultipleExample />',
+  }),
+}
+
+export const WithInput = {
+  render: () => ({
+    components: { WithInputExample },
+    template: '<WithInputExample />',
+  }),
+}
+
+export const IgnoreCase = {
+  render: () => ({
+    components: { IgnoreCaseExample },
+    template: '<IgnoreCaseExample />',
+  }),
+}
+
+export const MatchAll = {
+  render: () => ({
+    components: { MatchAllExample },
+    template: '<MatchAllExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/highlight/highlight.stories.vue b/packages/vue/src/components/highlight/highlight.stories.vue
deleted file mode 100644
index 8e5b4800aa..0000000000
--- a/packages/vue/src/components/highlight/highlight.stories.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import IgnoreCase from './examples/ignore-case.vue'
-import MatchAll from './examples/match-all.vue'
-import Multiple from './examples/multiple.vue'
-import WithInput from './examples/with-input.vue'
-</script>
-
-<template>
-  <Story title="Highlight">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Multiple">
-      <Multiple />
-    </Variant>
-    <Variant title="WithInput">
-      <WithInput />
-    </Variant>
-    <Variant title="IgnoreCase">
-      <IgnoreCase />
-    </Variant>
-    <Variant title="MatchAll">
-      <MatchAll />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/hover-card/hover-card.stories.ts b/packages/vue/src/components/hover-card/hover-card.stories.ts
new file mode 100644
index 0000000000..f70a9e77a6
--- /dev/null
+++ b/packages/vue/src/components/hover-card/hover-card.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import PositioningExample from './examples/positioning.vue'
+import RenderPropExample from './examples/render-prop.vue'
+import RootProviderExample from './examples/root-provider.vue'
+
+const meta = {
+  title: 'Components / HoverCard',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const Positioning = {
+  render: () => ({
+    components: { PositioningExample },
+    template: '<PositioningExample />',
+  }),
+}
+
+export const RenderProp = {
+  render: () => ({
+    components: { RenderPropExample },
+    template: '<RenderPropExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/hover-card/hover-card.stories.vue b/packages/vue/src/components/hover-card/hover-card.stories.vue
deleted file mode 100644
index f11e8eb696..0000000000
--- a/packages/vue/src/components/hover-card/hover-card.stories.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import Positioning from './examples/positioning.vue'
-import RenderProp from './examples/render-prop.vue'
-import RootProvider from './examples/root-provider.vue'
-</script>
-<template>
-  <Story title="HoverCard">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="Positioning">
-      <Positioning />
-    </Variant>
-    <Variant title="RenderProp">
-      <RenderProp />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/listbox/listbox.stories.ts b/packages/vue/src/components/listbox/listbox.stories.ts
new file mode 100644
index 0000000000..7de173d6ae
--- /dev/null
+++ b/packages/vue/src/components/listbox/listbox.stories.ts
@@ -0,0 +1,64 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import DisabledExample from './examples/disabled.vue'
+import GroupExample from './examples/group.vue'
+import MultipleExample from './examples/multiple.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import ValueTextExample from './examples/value-text.vue'
+
+const meta = {
+  title: 'Components / Listbox',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const Disabled = {
+  render: () => ({
+    components: { DisabledExample },
+    template: '<DisabledExample />',
+  }),
+}
+
+export const Group = {
+  render: () => ({
+    components: { GroupExample },
+    template: '<GroupExample />',
+  }),
+}
+
+export const Multiple = {
+  render: () => ({
+    components: { MultipleExample },
+    template: '<MultipleExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
+
+export const ValueText = {
+  render: () => ({
+    components: { ValueTextExample },
+    template: '<ValueTextExample />',
+  }),
+}
diff --git a/packages/vue/src/components/listbox/listbox.stories.vue b/packages/vue/src/components/listbox/listbox.stories.vue
deleted file mode 100644
index 643fa5f827..0000000000
--- a/packages/vue/src/components/listbox/listbox.stories.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import Disabled from './examples/disabled.vue'
-import Group from './examples/group.vue'
-import Multiple from './examples/multiple.vue'
-import RootProvider from './examples/root-provider.vue'
-import ValueText from './examples/value-text.vue'
-</script>
-
-<template>
-  <Story title="Listbox">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="Disabled">
-      <Disabled />
-    </Variant>
-    <Variant title="Group">
-      <Group />
-    </Variant>
-    <Variant title="Multiple">
-      <Multiple />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-    <Variant title="ValueText">
-      <ValueText />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/menu/menu.stories.ts b/packages/vue/src/components/menu/menu.stories.ts
new file mode 100644
index 0000000000..1f95f95410
--- /dev/null
+++ b/packages/vue/src/components/menu/menu.stories.ts
@@ -0,0 +1,88 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import CheckboxExample from './examples/checkbox.vue'
+import ContextExample from './examples/context.vue'
+import ControlledExample from './examples/controlled.vue'
+import GroupExample from './examples/group.vue'
+import NestedExample from './examples/nested.vue'
+import RadioGroupExample from './examples/radio-group.vue'
+import RenderPropExample from './examples/render-prop.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import SeparatorExample from './examples/separator.vue'
+
+const meta = {
+  title: 'Components / Menu',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const Group = {
+  render: () => ({
+    components: { GroupExample },
+    template: '<GroupExample />',
+  }),
+}
+
+export const Separator = {
+  render: () => ({
+    components: { SeparatorExample },
+    template: '<SeparatorExample />',
+  }),
+}
+
+export const Context = {
+  render: () => ({
+    components: { ContextExample },
+    template: '<ContextExample />',
+  }),
+}
+
+export const RenderProp = {
+  render: () => ({
+    components: { RenderPropExample },
+    template: '<RenderPropExample />',
+  }),
+}
+
+export const Nested = {
+  render: () => ({
+    components: { NestedExample },
+    template: '<NestedExample />',
+  }),
+}
+
+export const Checkbox = {
+  render: () => ({
+    components: { CheckboxExample },
+    template: '<CheckboxExample />',
+  }),
+}
+
+export const RadioGroup = {
+  render: () => ({
+    components: { RadioGroupExample },
+    template: '<RadioGroupExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/menu/menu.stories.vue b/packages/vue/src/components/menu/menu.stories.vue
deleted file mode 100644
index 08e2e15725..0000000000
--- a/packages/vue/src/components/menu/menu.stories.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Checkbox from './examples/checkbox.vue'
-import Context from './examples/context.vue'
-import Controlled from './examples/controlled.vue'
-import Group from './examples/group.vue'
-import Nested from './examples/nested.vue'
-import RadioGroup from './examples/radio-group.vue'
-import RenderProp from './examples/render-prop.vue'
-import RootProvider from './examples/root-provider.vue'
-import SelectEvent from './examples/select-event.vue'
-import Separator from './examples/separator.vue'
-</script>
-<template>
-  <Story title="Menu">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="Group">
-      <Group />
-    </Variant>
-    <Variant title="Separator">
-      <Separator />
-    </Variant>
-    <Variant title="Context">
-      <Context />
-    </Variant>
-    <Variant title="RenderProp">
-      <RenderProp />
-    </Variant>
-    <Variant title="Nested">
-      <Nested />
-    </Variant>
-    <Variant title="Checkbox">
-      <Checkbox />
-    </Variant>
-    <Variant title="RadioGroup">
-      <RadioGroup />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-    <Variant title="SelectEvent">
-      <SelectEvent />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/number-input/number-input.stories.ts b/packages/vue/src/components/number-input/number-input.stories.ts
new file mode 100644
index 0000000000..febaa30fc6
--- /dev/null
+++ b/packages/vue/src/components/number-input/number-input.stories.ts
@@ -0,0 +1,104 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import FormUsageExample from './examples/form-usage.vue'
+import FormattedExample from './examples/formatted.vue'
+import FractionDigitsExample from './examples/fraction-digits.vue'
+import MinMaxExample from './examples/min-max.vue'
+import MouseWheelExample from './examples/mouse-wheel.vue'
+import NoClampExample from './examples/no-clamp.vue'
+import RenderFnExample from './examples/render-fn.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import ScrubberExample from './examples/scrubber.vue'
+import WithFieldExample from './examples/with-field.vue'
+
+const meta = {
+  title: 'Components / NumberInput',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const MinMax = {
+  render: () => ({
+    components: { MinMaxExample },
+    template: '<MinMaxExample />',
+  }),
+}
+
+export const FractionDigits = {
+  render: () => ({
+    components: { FractionDigitsExample },
+    template: '<FractionDigitsExample />',
+  }),
+}
+
+export const Scrubber = {
+  render: () => ({
+    components: { ScrubberExample },
+    template: '<ScrubberExample />',
+  }),
+}
+
+export const MouseWheel = {
+  render: () => ({
+    components: { MouseWheelExample },
+    template: '<MouseWheelExample />',
+  }),
+}
+
+export const NoClamp = {
+  render: () => ({
+    components: { NoClampExample },
+    template: '<NoClampExample />',
+  }),
+}
+
+export const FormUsage = {
+  render: () => ({
+    components: { FormUsageExample },
+    template: '<FormUsageExample />',
+  }),
+}
+
+export const Formatted = {
+  render: () => ({
+    components: { FormattedExample },
+    template: '<FormattedExample />',
+  }),
+}
+
+export const RenderFn = {
+  render: () => ({
+    components: { RenderFnExample },
+    template: '<RenderFnExample />',
+  }),
+}
+
+export const WithField = {
+  render: () => ({
+    components: { WithFieldExample },
+    template: '<WithFieldExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/number-input/number-input.stories.vue b/packages/vue/src/components/number-input/number-input.stories.vue
deleted file mode 100644
index 4318277039..0000000000
--- a/packages/vue/src/components/number-input/number-input.stories.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import FormUsage from './examples/form-usage.vue'
-import Formatted from './examples/formatted.vue'
-import FractionDigits from './examples/fraction-digits.vue'
-import MinMax from './examples/min-max.vue'
-import MouseWheel from './examples/mouse-wheel.vue'
-import NoClamp from './examples/no-clamp.vue'
-import RenderFn from './examples/render-fn.vue'
-import RootProvider from './examples/root-provider.vue'
-import Scrubber from './examples/scrubber.vue'
-</script>
-<template>
-  <Story title="NumberInput">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="MinMax">
-      <MinMax />
-    </Variant>
-    <Variant title="FractionDigits">
-      <FractionDigits />
-    </Variant>
-    <Variant title="Scrubber">
-      <Scrubber />
-    </Variant>
-    <Variant title="MouseWheel">
-      <MouseWheel />
-    </Variant>
-    <Variant title="NoClamp">
-      <NoClamp />
-    </Variant>
-    <Variant title="FormUsage">
-      <FormUsage />
-    </Variant>
-    <Variant title="Formatted">
-      <Formatted />
-    </Variant>
-    <Variant title="RenderFn">
-      <RenderFn />
-    </Variant>
-    <Variant title="With Field">
-      <WithField />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/pagination/pagination.stories.ts b/packages/vue/src/components/pagination/pagination.stories.ts
new file mode 100644
index 0000000000..25bc422f1d
--- /dev/null
+++ b/packages/vue/src/components/pagination/pagination.stories.ts
@@ -0,0 +1,32 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import CustomizedExample from './examples/customized.vue'
+import RootProviderExample from './examples/root-provider.vue'
+
+const meta = {
+  title: 'Components / Pagination',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Customized = {
+  render: () => ({
+    components: { CustomizedExample },
+    template: '<CustomizedExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/pagination/pagination.stories.vue b/packages/vue/src/components/pagination/pagination.stories.vue
deleted file mode 100644
index 713c3a7f9b..0000000000
--- a/packages/vue/src/components/pagination/pagination.stories.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Customized from './examples/customized.vue'
-import RootProvider from './examples/root-provider.vue'
-</script>
-<template>
-  <Story title="Pagination">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Customized">
-      <Customized />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/password-input/password-input.stories.ts b/packages/vue/src/components/password-input/password-input.stories.ts
new file mode 100644
index 0000000000..6f0b096b85
--- /dev/null
+++ b/packages/vue/src/components/password-input/password-input.stories.ts
@@ -0,0 +1,56 @@
+import type { Meta } from '@storybook/vue3'
+
+import AutocompleteExample from './examples/autocomplete.vue'
+import BasicExample from './examples/basic.vue'
+import ControlledVisibilityExample from './examples/controlled-visibility.vue'
+import IgnorePasswordManagerExample from './examples/ignore-password-manager.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import WithFieldExample from './examples/with-field.vue'
+
+const meta = {
+  title: 'Components / Password Input',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Autocomplete = {
+  render: () => ({
+    components: { AutocompleteExample },
+    template: '<AutocompleteExample />',
+  }),
+}
+
+export const ControlledVisibility = {
+  render: () => ({
+    components: { ControlledVisibilityExample },
+    template: '<ControlledVisibilityExample />',
+  }),
+}
+
+export const IgnorePasswordManager = {
+  render: () => ({
+    components: { IgnorePasswordManagerExample },
+    template: '<IgnorePasswordManagerExample />',
+  }),
+}
+
+export const WithField = {
+  render: () => ({
+    components: { WithFieldExample },
+    template: '<WithFieldExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
diff --git a/packages/vue/src/components/password-input/password-input.stories.vue b/packages/vue/src/components/password-input/password-input.stories.vue
deleted file mode 100644
index 7c604795d5..0000000000
--- a/packages/vue/src/components/password-input/password-input.stories.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import Autocomplete from './examples/autocomplete.vue'
-import Basic from './examples/basic.vue'
-import ControlledVisibility from './examples/controlled-visibility.vue'
-import IgnorePasswordManager from './examples/ignore-password-manager.vue'
-import RootProvider from './examples/root-provider.vue'
-import WithField from './examples/with-field.vue'
-</script>
-<template>
-  <Story title="PasswordInput">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Autocomplete">
-      <Autocomplete />
-    </Variant>
-    <Variant title="Controlled Visibility">
-      <ControlledVisibility />
-    </Variant>
-    <Variant title="Ignore Password Manager">
-      <IgnorePasswordManager />
-    </Variant>
-    <Variant title="With Field">
-      <WithField />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/pin-input/pin-input.stories.ts b/packages/vue/src/components/pin-input/pin-input.stories.ts
new file mode 100644
index 0000000000..06ec229378
--- /dev/null
+++ b/packages/vue/src/components/pin-input/pin-input.stories.ts
@@ -0,0 +1,72 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import BlurredExample from './examples/blurred.vue'
+import CustomizedExample from './examples/customized.vue'
+import InitialValueExample from './examples/initial-value.vue'
+import OTPModeExample from './examples/otp-mode.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import WithFieldExample from './examples/with-field.vue'
+import WithMaskExample from './examples/with-mask.vue'
+
+const meta = {
+  title: 'Components / PinInput',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const InitialValue = {
+  render: () => ({
+    components: { InitialValueExample },
+    template: '<InitialValueExample />',
+  }),
+}
+
+export const Customized = {
+  render: () => ({
+    components: { CustomizedExample },
+    template: '<CustomizedExample />',
+  }),
+}
+
+export const Blurred = {
+  render: () => ({
+    components: { BlurredExample },
+    template: '<BlurredExample />',
+  }),
+}
+
+export const OTPMode = {
+  render: () => ({
+    components: { OTPModeExample },
+    template: '<OTPModeExample />',
+  }),
+}
+
+export const WithMask = {
+  render: () => ({
+    components: { WithMaskExample },
+    template: '<WithMaskExample />',
+  }),
+}
+
+export const WithField = {
+  render: () => ({
+    components: { WithFieldExample },
+    template: '<WithFieldExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/pin-input/pin-input.stories.vue b/packages/vue/src/components/pin-input/pin-input.stories.vue
deleted file mode 100644
index 712d657a95..0000000000
--- a/packages/vue/src/components/pin-input/pin-input.stories.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Blurred from './examples/blurred.vue'
-import Customized from './examples/customized.vue'
-import InitialValue from './examples/initial-value.vue'
-import OTPMode from './examples/otp-mode.vue'
-import RootProvider from './examples/root-provider.vue'
-import WithField from './examples/with-field.vue'
-import WithMask from './examples/with-mask.vue'
-</script>
-<template>
-  <Story title="PinInput">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="InitialValue">
-      <InitialValue />
-    </Variant>
-    <Variant title="Customized">
-      <Customized />
-    </Variant>
-    <Variant title="Blurred">
-      <Blurred />
-    </Variant>
-    <Variant title="OTPMode">
-      <OTPMode />
-    </Variant>
-    <Variant title="WithMask">
-      <WithMask />
-    </Variant>
-    <Variant title="With Field">
-      <WithField />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/popover/popover.stories.ts b/packages/vue/src/components/popover/popover.stories.ts
new file mode 100644
index 0000000000..c78bc2a884
--- /dev/null
+++ b/packages/vue/src/components/popover/popover.stories.ts
@@ -0,0 +1,88 @@
+import type { Meta } from '@storybook/vue3'
+
+import ArrowExample from './examples/arrow.vue'
+import BasicExample from './examples/basic.vue'
+import CloseBehaviorExample from './examples/close-behavior.vue'
+import ControlledExample from './examples/controlled.vue'
+import ModalExample from './examples/modal.vue'
+import OnOpenChangeExample from './examples/on-open-change.vue'
+import PortalledExample from './examples/portalled.vue'
+import PositioningExample from './examples/positioning.vue'
+import RenderFnExample from './examples/render-fn.vue'
+import RootProviderExample from './examples/root-provider.vue'
+
+const meta = {
+  title: 'Components / Popover',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Portalled = {
+  render: () => ({
+    components: { PortalledExample },
+    template: '<PortalledExample />',
+  }),
+}
+
+export const OnOpenChange = {
+  render: () => ({
+    components: { OnOpenChangeExample },
+    template: '<OnOpenChangeExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const RenderFn = {
+  render: () => ({
+    components: { RenderFnExample },
+    template: '<RenderFnExample />',
+  }),
+}
+
+export const Arrow = {
+  render: () => ({
+    components: { ArrowExample },
+    template: '<ArrowExample />',
+  }),
+}
+
+export const CloseBehavior = {
+  render: () => ({
+    components: { CloseBehaviorExample },
+    template: '<CloseBehaviorExample />',
+  }),
+}
+
+export const Positioning = {
+  render: () => ({
+    components: { PositioningExample },
+    template: '<PositioningExample />',
+  }),
+}
+
+export const Modal = {
+  render: () => ({
+    components: { ModalExample },
+    template: '<ModalExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/popover/popover.stories.vue b/packages/vue/src/components/popover/popover.stories.vue
deleted file mode 100644
index f813792856..0000000000
--- a/packages/vue/src/components/popover/popover.stories.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import Arrow from './examples/arrow.vue'
-import Basic from './examples/basic.vue'
-import CloseBehavior from './examples/close-behavior.vue'
-import Controlled from './examples/controlled.vue'
-import Modal from './examples/modal.vue'
-import OnOpenChange from './examples/on-open-change.vue'
-import Portalled from './examples/portalled.vue'
-import Positioning from './examples/positioning.vue'
-import RenderFn from './examples/render-fn.vue'
-import RootProvider from './examples/root-provider.vue'
-</script>
-<template>
-  <Story title="Popover">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Portalled">
-      <Portalled />
-    </Variant>
-    <Variant title="OnOpenChange">
-      <OnOpenChange />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="RenderFn">
-      <RenderFn />
-    </Variant>
-    <Variant title="Arrow">
-      <Arrow />
-    </Variant>
-    <Variant title="CloseBehavior">
-      <CloseBehavior />
-    </Variant>
-    <Variant title="Positioning">
-      <Positioning />
-    </Variant>
-    <Variant title="Modal">
-      <Modal />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/presence/presence.stories.ts b/packages/vue/src/components/presence/presence.stories.ts
new file mode 100644
index 0000000000..7b98a6007c
--- /dev/null
+++ b/packages/vue/src/components/presence/presence.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import LazyMountAndUnmountOnExitExample from './examples/lazy-mount-and-unmount-on-exit.vue'
+import LazyMountExample from './examples/lazy-mount.vue'
+import SkipAnimationOnMountExample from './examples/skip-animation-on-mount.vue'
+import UnmountOnExitExample from './examples/unmount-on-exit.vue'
+
+const meta = {
+  title: 'Components / Presence',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const LazyMount = {
+  render: () => ({
+    components: { LazyMountExample },
+    template: '<LazyMountExample />',
+  }),
+}
+
+export const UnmountOnExit = {
+  render: () => ({
+    components: { UnmountOnExitExample },
+    template: '<UnmountOnExitExample />',
+  }),
+}
+
+export const SkipAnimationOnMount = {
+  render: () => ({
+    components: { SkipAnimationOnMountExample },
+    template: '<SkipAnimationOnMountExample />',
+  }),
+}
+
+export const LazyMountAndUnmountOnExit = {
+  render: () => ({
+    components: { LazyMountAndUnmountOnExitExample },
+    template: '<LazyMountAndUnmountOnExitExample />',
+  }),
+}
diff --git a/packages/vue/src/components/presence/presence.stories.vue b/packages/vue/src/components/presence/presence.stories.vue
deleted file mode 100644
index f155ff9bc3..0000000000
--- a/packages/vue/src/components/presence/presence.stories.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import LazyMountAndUnmountOnExit from './examples/lazy-mount-and-unmount-on-exit.vue'
-import LazyMount from './examples/lazy-mount.vue'
-import SkipAnimationOnMount from './examples/skip-animation-on-mount.vue'
-import UnmountOnExit from './examples/unmount-on-exit.vue'
-</script>
-<template>
-  <Story title="Presence">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="LazyMount">
-      <LazyMount />
-    </Variant>
-    <Variant title="UnmountOnExit">
-      <UnmountOnExit />
-    </Variant>
-    <Variant title="LazyMountAndUnmountOnExit">
-      <LazyMountAndUnmountOnExit />
-    </Variant>
-    <Variant title="SkipAnimationOnMount">
-      <SkipAnimationOnMount />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/progress/progress-circular.stories.ts b/packages/vue/src/components/progress/progress-circular.stories.ts
new file mode 100644
index 0000000000..97a6a0d1cb
--- /dev/null
+++ b/packages/vue/src/components/progress/progress-circular.stories.ts
@@ -0,0 +1,64 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/circular/basic.vue'
+import ControlledExample from './examples/circular/controlled.vue'
+import IndeterminateExample from './examples/circular/indeterminate.vue'
+import InitialValueExample from './examples/circular/initial-value.vue'
+import MinMaxExample from './examples/circular/min-max.vue'
+import RootProviderExample from './examples/circular/root-provider.vue'
+import ValueTextExample from './examples/circular/value-text.vue'
+
+const meta = {
+  title: 'Components / Progress / Circular',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const InitialValue = {
+  render: () => ({
+    components: { InitialValueExample },
+    template: '<InitialValueExample />',
+  }),
+}
+
+export const MinMax = {
+  render: () => ({
+    components: { MinMaxExample },
+    template: '<MinMaxExample />',
+  }),
+}
+
+export const Indeterminate = {
+  render: () => ({
+    components: { IndeterminateExample },
+    template: '<IndeterminateExample />',
+  }),
+}
+
+export const ValueText = {
+  render: () => ({
+    components: { ValueTextExample },
+    template: '<ValueTextExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/progress/progress-circular.stories.vue b/packages/vue/src/components/progress/progress-circular.stories.vue
deleted file mode 100644
index 1e0a439cad..0000000000
--- a/packages/vue/src/components/progress/progress-circular.stories.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/circular/basic.vue'
-import Controlled from './examples/circular/controlled.vue'
-import Indeterminate from './examples/circular/indeterminate.vue'
-import InitialValue from './examples/circular/initial-value.vue'
-import MinMax from './examples/circular/min-max.vue'
-import RootProvider from './examples/circular/root-provider.vue'
-import ValueText from './examples/circular/value-text.vue'
-</script>
-<template>
-  <Story title="Progress / Circular">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="Initial Value">
-      <InitialValue />
-    </Variant>
-    <Variant title="Min Max">
-      <MinMax />
-    </Variant>
-    <Variant title="Indeterminate">
-      <Indeterminate />
-    </Variant>
-    <Variant title="Value Text">
-      <ValueText />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/progress/progress-linear.stories.ts b/packages/vue/src/components/progress/progress-linear.stories.ts
new file mode 100644
index 0000000000..420a27a775
--- /dev/null
+++ b/packages/vue/src/components/progress/progress-linear.stories.ts
@@ -0,0 +1,64 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/linear/basic.vue'
+import ControlledExample from './examples/linear/controlled.vue'
+import IndeterminateExample from './examples/linear/indeterminate.vue'
+import InitialValueExample from './examples/linear/initial-value.vue'
+import MinMaxExample from './examples/linear/min-max.vue'
+import RootProviderExample from './examples/circular/root-provider.vue'
+import ValueTextExample from './examples/linear/value-text.vue'
+
+const meta = {
+  title: 'Components / Progress / Linear',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const InitialValue = {
+  render: () => ({
+    components: { InitialValueExample },
+    template: '<InitialValueExample />',
+  }),
+}
+
+export const MinMax = {
+  render: () => ({
+    components: { MinMaxExample },
+    template: '<MinMaxExample />',
+  }),
+}
+
+export const Indeterminate = {
+  render: () => ({
+    components: { IndeterminateExample },
+    template: '<IndeterminateExample />',
+  }),
+}
+
+export const ValueText = {
+  render: () => ({
+    components: { ValueTextExample },
+    template: '<ValueTextExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/progress/progress-linear.stories.vue b/packages/vue/src/components/progress/progress-linear.stories.vue
deleted file mode 100644
index 7044441d82..0000000000
--- a/packages/vue/src/components/progress/progress-linear.stories.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import RootProvider from './examples/circular/root-provider.vue'
-import Basic from './examples/linear/basic.vue'
-import Controlled from './examples/linear/controlled.vue'
-import Indeterminate from './examples/linear/indeterminate.vue'
-import InitialValue from './examples/linear/initial-value.vue'
-import MinMax from './examples/linear/min-max.vue'
-import ValueText from './examples/linear/value-text.vue'
-</script>
-<template>
-  <Story title="Progress / Linear">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="Initial Value">
-      <InitialValue />
-    </Variant>
-    <Variant title="Min Max">
-      <MinMax />
-    </Variant>
-    <Variant title="Indeterminate">
-      <Indeterminate />
-    </Variant>
-    <Variant title="Value Text">
-      <ValueText />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/qr-code/qr-code.stories.ts b/packages/vue/src/components/qr-code/qr-code.stories.ts
new file mode 100644
index 0000000000..7ed8420c82
--- /dev/null
+++ b/packages/vue/src/components/qr-code/qr-code.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import ErrorCorrectionExample from './examples/error-correction.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import WithOverlayExample from './examples/with-overlay.vue'
+
+const meta = {
+  title: 'Components / QR Code',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
+
+export const WithOverlay = {
+  render: () => ({
+    components: { WithOverlayExample },
+    template: '<WithOverlayExample />',
+  }),
+}
+
+export const ErrorCorrection = {
+  render: () => ({
+    components: { ErrorCorrectionExample },
+    template: '<ErrorCorrectionExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/qr-code/qr-code.stories.vue b/packages/vue/src/components/qr-code/qr-code.stories.vue
deleted file mode 100644
index f3b0affdba..0000000000
--- a/packages/vue/src/components/qr-code/qr-code.stories.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import ErrorCorrection from './examples/error-correction.vue'
-import RootProvider from './examples/root-provider.vue'
-import WithOverlay from './examples/with-overlay.vue'
-</script>
-<template>
-  <Story title="QR Code">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-    <Variant title="WithOverlay">
-      <WithOverlay />
-    </Variant>
-    <Variant title="ErrorCorrection">
-      <ErrorCorrection />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/radio-group/radio-group.stories.ts b/packages/vue/src/components/radio-group/radio-group.stories.ts
new file mode 100644
index 0000000000..dbf9bea57f
--- /dev/null
+++ b/packages/vue/src/components/radio-group/radio-group.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import DisabledExample from './examples/disabled.vue'
+import InitialValueExample from './examples/initial-value.vue'
+import OnEventExample from './examples/on-event.vue'
+import RootProviderExample from './examples/root-provider.vue'
+
+const meta = {
+  title: 'Components / RadioGroup',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Disabled = {
+  render: () => ({
+    components: { DisabledExample },
+    template: '<DisabledExample />',
+  }),
+}
+
+export const InitialValue = {
+  render: () => ({
+    components: { InitialValueExample },
+    template: '<InitialValueExample />',
+  }),
+}
+
+export const OnEvent = {
+  render: () => ({
+    components: { OnEventExample },
+    template: '<OnEventExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/radio-group/radio-group.stories.vue b/packages/vue/src/components/radio-group/radio-group.stories.vue
deleted file mode 100644
index 805fcf0495..0000000000
--- a/packages/vue/src/components/radio-group/radio-group.stories.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Disabled from './examples/disabled.vue'
-import InitialValue from './examples/initial-value.vue'
-import OnEvent from './examples/on-event.vue'
-import RootProvider from './examples/root-provider.vue'
-</script>
-<template>
-  <Story title="RadioGroup">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Disabled">
-      <Disabled />
-    </Variant>
-    <Variant title="InitialValue">
-      <InitialValue />
-    </Variant>
-    <Variant title="OnEvent">
-      <OnEvent />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/rating-group/rating-group.stories.ts b/packages/vue/src/components/rating-group/rating-group.stories.ts
new file mode 100644
index 0000000000..49242437c6
--- /dev/null
+++ b/packages/vue/src/components/rating-group/rating-group.stories.ts
@@ -0,0 +1,80 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import DisabledExample from './examples/disabled.vue'
+import FormUsageExample from './examples/form-usage.vue'
+import HalfRatingsExample from './examples/half-ratings.vue'
+import InitialValueExample from './examples/initial-value.vue'
+import ReadOnlyExample from './examples/read-only.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import WithFieldExample from './examples/with-field.vue'
+
+const meta = {
+  title: 'Components / RatingGroup',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const HalfRatings = {
+  render: () => ({
+    components: { HalfRatingsExample },
+    template: '<HalfRatingsExample />',
+  }),
+}
+
+export const InitialValue = {
+  render: () => ({
+    components: { InitialValueExample },
+    template: '<InitialValueExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const Disabled = {
+  render: () => ({
+    components: { DisabledExample },
+    template: '<DisabledExample />',
+  }),
+}
+
+export const ReadOnly = {
+  render: () => ({
+    components: { ReadOnlyExample },
+    template: '<ReadOnlyExample />',
+  }),
+}
+
+export const FormUsage = {
+  render: () => ({
+    components: { FormUsageExample },
+    template: '<FormUsageExample />',
+  }),
+}
+
+export const WithField = {
+  render: () => ({
+    components: { WithFieldExample },
+    template: '<WithFieldExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/rating-group/rating-group.stories.vue b/packages/vue/src/components/rating-group/rating-group.stories.vue
deleted file mode 100644
index 7484d09d22..0000000000
--- a/packages/vue/src/components/rating-group/rating-group.stories.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import Disabled from './examples/disabled.vue'
-import FormUsage from './examples/form-usage.vue'
-import HalfRatings from './examples/half-ratings.vue'
-import InitialValue from './examples/initial-value.vue'
-import ReadOnly from './examples/read-only.vue'
-import RootProvider from './examples/root-provider.vue'
-import WithField from './examples/with-field.vue'
-</script>
-<template>
-  <Story title="RatingGroup">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="HalfRatings">
-      <HalfRatings />
-    </Variant>
-    <Variant title="InitialValue">
-      <InitialValue />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="Disabled">
-      <Disabled />
-    </Variant>
-    <Variant title="ReadOnly">
-      <ReadOnly />
-    </Variant>
-    <Variant title="FormUsage">
-      <FormUsage />
-    </Variant>
-    <Variant title="With Field">
-      <WithField />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/segment-group/segment-group.stories.ts b/packages/vue/src/components/segment-group/segment-group.stories.ts
new file mode 100644
index 0000000000..fc39f3931b
--- /dev/null
+++ b/packages/vue/src/components/segment-group/segment-group.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import DisabledExample from './examples/disabled.vue'
+import InitialValueExample from './examples/initial-value.vue'
+import RootProviderExample from './examples/root-provider.vue'
+
+const meta = {
+  title: 'Components / SegmentGroup',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const InitialValue = {
+  render: () => ({
+    components: { InitialValueExample },
+    template: '<InitialValueExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const Disabled = {
+  render: () => ({
+    components: { DisabledExample },
+    template: '<DisabledExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/segment-group/segment-group.stories.vue b/packages/vue/src/components/segment-group/segment-group.stories.vue
deleted file mode 100644
index b7d1ddce38..0000000000
--- a/packages/vue/src/components/segment-group/segment-group.stories.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import Disabled from './examples/disabled.vue'
-import InitialValue from './examples/initial-value.vue'
-import RootProvider from './examples/root-provider.vue'
-</script>
-<template>
-  <Story title="SegmentGroup">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="InitialValue">
-      <InitialValue />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="Disabled">
-      <Disabled />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/select/select.stories.ts b/packages/vue/src/components/select/select.stories.ts
new file mode 100644
index 0000000000..af083a8e87
--- /dev/null
+++ b/packages/vue/src/components/select/select.stories.ts
@@ -0,0 +1,64 @@
+import type { Meta } from '@storybook/vue3'
+
+import AdvancedExample from './examples/advanced.vue'
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import MultipleExample from './examples/multiple.vue'
+import ReactiveCollectionExample from './examples/reactive-collection.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import WithFieldExample from './examples/with-field.vue'
+
+const meta = {
+  title: 'Components / Select',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Advanced = {
+  render: () => ({
+    components: { AdvancedExample },
+    template: '<AdvancedExample />',
+  }),
+}
+
+export const Multiple = {
+  render: () => ({
+    components: { MultipleExample },
+    template: '<MultipleExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const WithField = {
+  render: () => ({
+    components: { WithFieldExample },
+    template: '<WithFieldExample />',
+  }),
+}
+
+export const ReactiveCollection = {
+  render: () => ({
+    components: { ReactiveCollectionExample },
+    template: '<ReactiveCollectionExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/select/select.stories.vue b/packages/vue/src/components/select/select.stories.vue
deleted file mode 100644
index 33f3132b36..0000000000
--- a/packages/vue/src/components/select/select.stories.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import Advanced from './examples/advanced.vue'
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import Multiple from './examples/multiple.vue'
-import ReactiveCollection from './examples/reactive-collection.vue'
-import RootProvider from './examples/root-provider.vue'
-import WithField from './examples/with-field.vue'
-</script>
-
-<template>
-  <Story title="Select">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Advanced">
-      <Advanced />
-    </Variant>
-    <Variant title="Multiple">
-      <Multiple />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="With Field">
-      <WithField />
-    </Variant>
-    <Variant title="Reactive Collection">
-      <ReactiveCollection />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/signature-pad/signature-pad.stories.ts b/packages/vue/src/components/signature-pad/signature-pad.stories.ts
new file mode 100644
index 0000000000..35ea4678b9
--- /dev/null
+++ b/packages/vue/src/components/signature-pad/signature-pad.stories.ts
@@ -0,0 +1,40 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ImagePreviewExample from './examples/image-preview.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import WithFieldExample from './examples/with-field.vue'
+
+const meta = {
+  title: 'Components / SignaturePad',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const ImagePreview = {
+  render: () => ({
+    components: { ImagePreviewExample },
+    template: '<ImagePreviewExample />',
+  }),
+}
+
+export const WithField = {
+  render: () => ({
+    components: { WithFieldExample },
+    template: '<WithFieldExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/signature-pad/signature-pad.stories.vue b/packages/vue/src/components/signature-pad/signature-pad.stories.vue
deleted file mode 100644
index 9532befa53..0000000000
--- a/packages/vue/src/components/signature-pad/signature-pad.stories.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import ImagePreview from './examples/image-preview.vue'
-import RootProvider from './examples/root-provider.vue'
-import WithField from './examples/with-field.vue'
-</script>
-<template>
-  <Story title="Signature Pad">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Image Preview">
-      <ImagePreview />
-    </Variant>
-    <Variant title="With Field">
-      <WithField />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/slider/slider.stories.ts b/packages/vue/src/components/slider/slider.stories.ts
new file mode 100644
index 0000000000..d7b3ebfe97
--- /dev/null
+++ b/packages/vue/src/components/slider/slider.stories.ts
@@ -0,0 +1,88 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import CenterOriginExample from './examples/center-origin.vue'
+import DraggingIndicatorExample from './examples/dragging-indicator.vue'
+import InitialValueExample from './examples/initial-value.vue'
+import MinMaxExample from './examples/min-max.vue'
+import OnEventExample from './examples/on-event.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import StepExample from './examples/step.vue'
+import VerticalExample from './examples/vertical.vue'
+import WithMarksExample from './examples/with-marks.vue'
+
+const meta = {
+  title: 'Components / Slider',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const WithMarks = {
+  render: () => ({
+    components: { WithMarksExample },
+    template: '<WithMarksExample />',
+  }),
+}
+
+export const InitialValue = {
+  render: () => ({
+    components: { InitialValueExample },
+    template: '<InitialValueExample />',
+  }),
+}
+
+export const MinMax = {
+  render: () => ({
+    components: { MinMaxExample },
+    template: '<MinMaxExample />',
+  }),
+}
+
+export const Step = {
+  render: () => ({
+    components: { StepExample },
+    template: '<StepExample />',
+  }),
+}
+
+export const OnEvent = {
+  render: () => ({
+    components: { OnEventExample },
+    template: '<OnEventExample />',
+  }),
+}
+
+export const Vertical = {
+  render: () => ({
+    components: { VerticalExample },
+    template: '<VerticalExample />',
+  }),
+}
+
+export const CenterOrigin = {
+  render: () => ({
+    components: { CenterOriginExample },
+    template: '<CenterOriginExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
+
+export const DraggingIndicator = {
+  render: () => ({
+    components: { DraggingIndicatorExample },
+    template: '<DraggingIndicatorExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/slider/slider.stories.vue b/packages/vue/src/components/slider/slider.stories.vue
deleted file mode 100644
index 7576de5cd3..0000000000
--- a/packages/vue/src/components/slider/slider.stories.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import CenterOrigin from './examples/center-origin.vue'
-import DraggingIndicator from './examples/dragging-indicator.vue'
-import InitialValue from './examples/initial-value.vue'
-import MinMax from './examples/min-max.vue'
-import OnEvent from './examples/on-event.vue'
-import RootProvider from './examples/root-provider.vue'
-import Step from './examples/step.vue'
-import Vertical from './examples/vertical.vue'
-import WithMarks from './examples/with-marks.vue'
-</script>
-<template>
-  <Story title="Slider">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="WithMarks">
-      <WithMarks />
-    </Variant>
-    <Variant title="InitialValue">
-      <InitialValue />
-    </Variant>
-    <Variant title="MinMax">
-      <MinMax />
-    </Variant>
-    <Variant title="Step">
-      <Step />
-    </Variant>
-    <Variant title="OnEvent">
-      <OnEvent />
-    </Variant>
-    <Variant title="Vertical">
-      <Vertical />
-    </Variant>
-    <Variant title="CenterOrigin">
-      <CenterOrigin />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-    <Variant title="DraggingIndicator">
-      <DraggingIndicator />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/splitter/splitter.stories.ts b/packages/vue/src/components/splitter/splitter.stories.ts
new file mode 100644
index 0000000000..a9194697f7
--- /dev/null
+++ b/packages/vue/src/components/splitter/splitter.stories.ts
@@ -0,0 +1,64 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import CollapsibleExample from './examples/collapsible.vue'
+import EventsExample from './examples/events.vue'
+import MultiplePanelsExample from './examples/multiple-panels.vue'
+import RenderPropExample from './examples/render-prop.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import VerticalExample from './examples/vertical.vue'
+
+const meta = {
+  title: 'Components / Splitter',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Collapsible = {
+  render: () => ({
+    components: { CollapsibleExample },
+    template: '<CollapsibleExample />',
+  }),
+}
+
+export const MultiplePanels = {
+  render: () => ({
+    components: { MultiplePanelsExample },
+    template: '<MultiplePanelsExample />',
+  }),
+}
+
+export const RenderProp = {
+  render: () => ({
+    components: { RenderPropExample },
+    template: '<RenderPropExample />',
+  }),
+}
+
+export const Events = {
+  render: () => ({
+    components: { EventsExample },
+    template: '<EventsExample />',
+  }),
+}
+
+export const Vertical = {
+  render: () => ({
+    components: { VerticalExample },
+    template: '<VerticalExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
diff --git a/packages/vue/src/components/splitter/splitter.stories.vue b/packages/vue/src/components/splitter/splitter.stories.vue
deleted file mode 100644
index 5635bcaea0..0000000000
--- a/packages/vue/src/components/splitter/splitter.stories.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Collapsible from './examples/collapsible.vue'
-import Events from './examples/events.vue'
-import MultiplePanels from './examples/multiple-panels.vue'
-import RenderProp from './examples/render-prop.vue'
-import RootProvider from './examples/root-provider.vue'
-import Vertical from './examples/vertical.vue'
-</script>
-<template>
-  <Story title="Splitter">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="RenderProp">
-      <RenderProp />
-    </Variant>
-    <Variant title="Events">
-      <Events />
-    </Variant>
-    <Variant title="Vertical">
-      <Vertical />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-    <Variant title="MultiplePanels">
-      <MultiplePanels />
-    </Variant>
-    <Variant title="Collapsible">
-      <Collapsible />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/steps/steps.stories.ts b/packages/vue/src/components/steps/steps.stories.ts
new file mode 100644
index 0000000000..62422faab3
--- /dev/null
+++ b/packages/vue/src/components/steps/steps.stories.ts
@@ -0,0 +1,24 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import RootProviderExample from './examples/root-provider.vue'
+
+const meta = {
+  title: 'Components / Steps',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/steps/steps.stories.vue b/packages/vue/src/components/steps/steps.stories.vue
deleted file mode 100644
index ddafadf4ee..0000000000
--- a/packages/vue/src/components/steps/steps.stories.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import RootProvider from './examples/root-provider.vue'
-</script>
-<template>
-  <Story title="Steps">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/switch/switch.stories.ts b/packages/vue/src/components/switch/switch.stories.ts
new file mode 100644
index 0000000000..485b6c2dc8
--- /dev/null
+++ b/packages/vue/src/components/switch/switch.stories.ts
@@ -0,0 +1,64 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import DisabledExample from './examples/disabled.vue'
+import InitialValueExample from './examples/initial-value.vue'
+import RenderPropExample from './examples/render-prop.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import WithFieldExample from './examples/with-field.vue'
+
+const meta = {
+  title: 'Components / Switch',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const InitialValue = {
+  render: () => ({
+    components: { InitialValueExample },
+    template: '<InitialValueExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const Disabled = {
+  render: () => ({
+    components: { DisabledExample },
+    template: '<DisabledExample />',
+  }),
+}
+
+export const RenderProp = {
+  render: () => ({
+    components: { RenderPropExample },
+    template: '<RenderPropExample />',
+  }),
+}
+
+export const WithField = {
+  render: () => ({
+    components: { WithFieldExample },
+    template: '<WithFieldExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/switch/switch.stories.vue b/packages/vue/src/components/switch/switch.stories.vue
deleted file mode 100644
index 9868497efe..0000000000
--- a/packages/vue/src/components/switch/switch.stories.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import Disabled from './examples/disabled.vue'
-import InitialValue from './examples/initial-value.vue'
-import RenderProp from './examples/render-prop.vue'
-import RootProvider from './examples/root-provider.vue'
-import WithField from './examples/with-field.vue'
-</script>
-<template>
-  <Story title="Switch">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="InitialValue">
-      <InitialValue />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="Disabled">
-      <Disabled />
-    </Variant>
-    <Variant title="RenderProp">
-      <RenderProp />
-    </Variant>
-    <Variant title="With Field">
-      <WithField />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/tabs/tabs.stories.ts b/packages/vue/src/components/tabs/tabs.stories.ts
new file mode 100644
index 0000000000..00c6915f63
--- /dev/null
+++ b/packages/vue/src/components/tabs/tabs.stories.ts
@@ -0,0 +1,80 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import DisabledTabExample from './examples/disabled-tab.vue'
+import IndicatorExample from './examples/indicator.vue'
+import InitialTabExample from './examples/initial-tab.vue'
+import LazyMountExample from './examples/lazy-mount.vue'
+import ManualExample from './examples/manual.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import VerticalExample from './examples/vertical.vue'
+
+const meta = {
+  title: 'Components / Tabs',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const InitialTab = {
+  render: () => ({
+    components: { InitialTabExample },
+    template: '<InitialTabExample />',
+  }),
+}
+
+export const Indicator = {
+  render: () => ({
+    components: { IndicatorExample },
+    template: '<IndicatorExample />',
+  }),
+}
+
+export const LazyMount = {
+  render: () => ({
+    components: { LazyMountExample },
+    template: '<LazyMountExample />',
+  }),
+}
+
+export const DisabledTab = {
+  render: () => ({
+    components: { DisabledTabExample },
+    template: '<DisabledTabExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const Vertical = {
+  render: () => ({
+    components: { VerticalExample },
+    template: '<VerticalExample />',
+  }),
+}
+
+export const Manual = {
+  render: () => ({
+    components: { ManualExample },
+    template: '<ManualExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/tabs/tabs.stories.vue b/packages/vue/src/components/tabs/tabs.stories.vue
deleted file mode 100644
index 241095d23f..0000000000
--- a/packages/vue/src/components/tabs/tabs.stories.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import DisabledTab from './examples/disabled-tab.vue'
-import Indicator from './examples/indicator.vue'
-import InitialTab from './examples/initial-tab.vue'
-import LazyMount from './examples/lazy-mount.vue'
-import Manual from './examples/manual.vue'
-import RootProvider from './examples/root-provider.vue'
-import Vertical from './examples/vertical.vue'
-</script>
-<template>
-  <Story title="Tabs">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="InitialTab">
-      <InitialTab />
-    </Variant>
-    <Variant title="Indicator">
-      <Indicator />
-    </Variant>
-    <Variant title="LazyMount">
-      <LazyMount />
-    </Variant>
-    <Variant title="DisabledTab">
-      <DisabledTab />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="Vertical">
-      <Vertical />
-    </Variant>
-    <Variant title="Manual">
-      <Manual />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/tags-input/tags-input.stories.ts b/packages/vue/src/components/tags-input/tags-input.stories.ts
new file mode 100644
index 0000000000..f52e026bf3
--- /dev/null
+++ b/packages/vue/src/components/tags-input/tags-input.stories.ts
@@ -0,0 +1,96 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import BlurBehaviorExample from './examples/blur-behavior.vue'
+import ControlledExample from './examples/controlled.vue'
+import DisabledEditingExample from './examples/disabled-editing.vue'
+import InitialValueExample from './examples/initial-value.vue'
+import MaxWithOverflowExample from './examples/max-with-overflow.vue'
+import OnEventExample from './examples/on-event.vue'
+import PasteBehaviorExample from './examples/paste-behavior.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import ValidatedExample from './examples/validated.vue'
+import WithFieldExample from './examples/with-field.vue'
+
+const meta = {
+  title: 'Components / TagsInput',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const InitialValue = {
+  render: () => ({
+    components: { InitialValueExample },
+    template: '<InitialValueExample />',
+  }),
+}
+
+export const MaxWithOverflow = {
+  render: () => ({
+    components: { MaxWithOverflowExample },
+    template: '<MaxWithOverflowExample />',
+  }),
+}
+
+export const Validated = {
+  render: () => ({
+    components: { ValidatedExample },
+    template: '<ValidatedExample />',
+  }),
+}
+
+export const BlurBehavior = {
+  render: () => ({
+    components: { BlurBehaviorExample },
+    template: '<BlurBehaviorExample />',
+  }),
+}
+
+export const PasteBehavior = {
+  render: () => ({
+    components: { PasteBehaviorExample },
+    template: '<PasteBehaviorExample />',
+  }),
+}
+
+export const DisabledEditing = {
+  render: () => ({
+    components: { DisabledEditingExample },
+    template: '<DisabledEditingExample />',
+  }),
+}
+
+export const OnEvent = {
+  render: () => ({
+    components: { OnEventExample },
+    template: '<OnEventExample />',
+  }),
+}
+
+export const WithField = {
+  render: () => ({
+    components: { WithFieldExample },
+    template: '<WithFieldExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/tags-input/tags-input.stories.vue b/packages/vue/src/components/tags-input/tags-input.stories.vue
deleted file mode 100644
index 189d8006e5..0000000000
--- a/packages/vue/src/components/tags-input/tags-input.stories.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import BlurBehavior from './examples/blur-behavior.vue'
-import Controlled from './examples/controlled.vue'
-import DisabledEditing from './examples/disabled-editing.vue'
-import InitialValue from './examples/initial-value.vue'
-import MaxWithOverflow from './examples/max-with-overflow.vue'
-import OnEvent from './examples/on-event.vue'
-import PasteBehavior from './examples/paste-behavior.vue'
-import RootProvider from './examples/root-provider.vue'
-import Validated from './examples/validated.vue'
-import WithField from './examples/with-field.vue'
-</script>
-<template>
-  <Story title="TagsInput">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="InitialValue">
-      <InitialValue />
-    </Variant>
-    <Variant title="MaxWithOverflow">
-      <MaxWithOverflow />
-    </Variant>
-    <Variant title="Validated">
-      <Validated />
-    </Variant>
-    <Variant title="BlurBehavior">
-      <BlurBehavior />
-    </Variant>
-    <Variant title="PasteBehavior">
-      <PasteBehavior />
-    </Variant>
-    <Variant title="DisabledEditing">
-      <DisabledEditing />
-    </Variant>
-    <Variant title="OnEvent">
-      <OnEvent />
-    </Variant>
-    <Variant title="With Field">
-      <WithField />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/time-picker/time-picker.stories.ts b/packages/vue/src/components/time-picker/time-picker.stories.ts
new file mode 100644
index 0000000000..c328b749dc
--- /dev/null
+++ b/packages/vue/src/components/time-picker/time-picker.stories.ts
@@ -0,0 +1,32 @@
+import type { Meta } from '@storybook/vue3'
+
+import AdvancedExample from './examples/advanced.vue'
+import BasicExample from './examples/basic.vue'
+import RootProviderExample from './examples/root-provider.vue'
+
+const meta = {
+  title: 'Components / TimePicker',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Advanced = {
+  render: () => ({
+    components: { AdvancedExample },
+    template: '<AdvancedExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/time-picker/time-picker.stories.vue b/packages/vue/src/components/time-picker/time-picker.stories.vue
deleted file mode 100644
index dd6f99ee91..0000000000
--- a/packages/vue/src/components/time-picker/time-picker.stories.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import Advanced from './examples/advanced.vue'
-import Basic from './examples/basic.vue'
-import RootProvider from './examples/root-provider.vue'
-</script>
-
-<template>
-  <Story title="TimePicker">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Advanced">
-      <Advanced />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/timer/timer.stories.ts b/packages/vue/src/components/timer/timer.stories.ts
new file mode 100644
index 0000000000..3bab2d19e5
--- /dev/null
+++ b/packages/vue/src/components/timer/timer.stories.ts
@@ -0,0 +1,40 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import CountdownExample from './examples/countdown.vue'
+import EventsExample from './examples/events.vue'
+import RootProviderExample from './examples/root-provider.vue'
+
+const meta = {
+  title: 'Components / Timer',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Countdown = {
+  render: () => ({
+    components: { CountdownExample },
+    template: '<CountdownExample />',
+  }),
+}
+
+export const Events = {
+  render: () => ({
+    components: { EventsExample },
+    template: '<EventsExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/timer/timer.stories.vue b/packages/vue/src/components/timer/timer.stories.vue
deleted file mode 100644
index ffeda6f180..0000000000
--- a/packages/vue/src/components/timer/timer.stories.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Countdown from './examples/countdown.vue'
-import Events from './examples/events.vue'
-import RootProvider from './examples/root-provider.vue'
-</script>
-
-<template>
-  <Story title="Timer">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Countdown">
-      <Countdown />
-    </Variant>
-    <Variant title="Events">
-      <Events />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/toast/toast.stories.ts b/packages/vue/src/components/toast/toast.stories.ts
new file mode 100644
index 0000000000..119809d756
--- /dev/null
+++ b/packages/vue/src/components/toast/toast.stories.ts
@@ -0,0 +1,32 @@
+import type { Meta } from '@storybook/vue3'
+
+import ActionExample from './examples/action.vue'
+import BasicExample from './examples/basic.vue'
+import UpdateExample from './examples/update.vue'
+
+const meta = {
+  title: 'Components / Toast',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Action = {
+  render: () => ({
+    components: { ActionExample },
+    template: '<ActionExample />',
+  }),
+}
+
+export const Update = {
+  render: () => ({
+    components: { UpdateExample },
+    template: '<UpdateExample />',
+  }),
+}
diff --git a/packages/vue/src/components/toast/toast.stories.vue b/packages/vue/src/components/toast/toast.stories.vue
deleted file mode 100644
index 59af4d42ff..0000000000
--- a/packages/vue/src/components/toast/toast.stories.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-</script>
-<template>
-  <Story title="Toast">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/toggle-group/toggle-group.stories.ts b/packages/vue/src/components/toggle-group/toggle-group.stories.ts
new file mode 100644
index 0000000000..febde9116b
--- /dev/null
+++ b/packages/vue/src/components/toggle-group/toggle-group.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import InitialValueExample from './examples/initial-value.vue'
+import MultipleExample from './examples/multiple.vue'
+import RootProviderExample from './examples/root-provider.vue'
+
+const meta = {
+  title: 'Components / ToggleGroup',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const InitialValue = {
+  render: () => ({
+    components: { InitialValueExample },
+    template: '<InitialValueExample />',
+  }),
+}
+
+export const Multiple = {
+  render: () => ({
+    components: { MultipleExample },
+    template: '<MultipleExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/toggle-group/toggle-group.stories.vue b/packages/vue/src/components/toggle-group/toggle-group.stories.vue
deleted file mode 100644
index 1389ab90ce..0000000000
--- a/packages/vue/src/components/toggle-group/toggle-group.stories.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import InitialValue from './examples/initial-value.vue'
-import Multiple from './examples/multiple.vue'
-import RootProvider from './examples/root-provider.vue'
-</script>
-<template>
-  <Story title="ToggleGroup">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="InitialValue">
-      <InitialValue />
-    </Variant>
-    <Variant title="Multiple">
-      <Multiple />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/toggle/toggle.stories.ts b/packages/vue/src/components/toggle/toggle.stories.ts
new file mode 100644
index 0000000000..431a9bde0a
--- /dev/null
+++ b/packages/vue/src/components/toggle/toggle.stories.ts
@@ -0,0 +1,40 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import DisabledExample from './examples/disabled.vue'
+import IndicatorExample from './examples/indicator.vue'
+
+const meta = {
+  title: 'Components / Toggle',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const Disabled = {
+  render: () => ({
+    components: { DisabledExample },
+    template: '<DisabledExample />',
+  }),
+}
+
+export const Indicator = {
+  render: () => ({
+    components: { IndicatorExample },
+    template: '<IndicatorExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/toggle/toggle.stories.vue b/packages/vue/src/components/toggle/toggle.stories.vue
deleted file mode 100644
index 853a7bc249..0000000000
--- a/packages/vue/src/components/toggle/toggle.stories.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import Disabled from './examples/disabled.vue'
-import Indicator from './examples/indicator.vue'
-</script>
-
-<template>
-  <Story title="Toggle">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="Disabled">
-      <Disabled />
-    </Variant>
-    <Variant title="Indicator">
-      <Indicator />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/tooltip/tooltip.stories.ts b/packages/vue/src/components/tooltip/tooltip.stories.ts
new file mode 100644
index 0000000000..077cce630f
--- /dev/null
+++ b/packages/vue/src/components/tooltip/tooltip.stories.ts
@@ -0,0 +1,64 @@
+import type { Meta } from '@storybook/vue3'
+
+import ArrowExample from './examples/arrow.vue'
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import PositioningExample from './examples/positioning.vue'
+import RenderFnExample from './examples/render-fn.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import TimingsExample from './examples/timings.vue'
+
+const meta = {
+  title: 'Components / Tooltip',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const RenderFn = {
+  render: () => ({
+    components: { RenderFnExample },
+    template: '<RenderFnExample />',
+  }),
+}
+
+export const Arrow = {
+  render: () => ({
+    components: { ArrowExample },
+    template: '<ArrowExample />',
+  }),
+}
+
+export const Timings = {
+  render: () => ({
+    components: { TimingsExample },
+    template: '<TimingsExample />',
+  }),
+}
+
+export const Positioning = {
+  render: () => ({
+    components: { PositioningExample },
+    template: '<PositioningExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
\ No newline at end of file
diff --git a/packages/vue/src/components/tooltip/tooltip.stories.vue b/packages/vue/src/components/tooltip/tooltip.stories.vue
deleted file mode 100644
index 0ad712de5b..0000000000
--- a/packages/vue/src/components/tooltip/tooltip.stories.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import Arrow from './examples/arrow.vue'
-import Basic from './examples/basic.vue'
-import Controlled from './examples/controlled.vue'
-import Positioning from './examples/positioning.vue'
-import RenderFn from './examples/render-fn.vue'
-import RootProvider from './examples/root-provider.vue'
-import Timings from './examples/timings.vue'
-</script>
-<template>
-  <Story title="Tooltip">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="Controlled">
-      <Controlled />
-    </Variant>
-    <Variant title="RenderFn">
-      <RenderFn />
-    </Variant>
-    <Variant title="Arrow">
-      <Arrow />
-    </Variant>
-    <Variant title="Timings">
-      <Timings />
-    </Variant>
-    <Variant title="Positioning">
-      <Positioning />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/tour/tour.stories.ts b/packages/vue/src/components/tour/tour.stories.ts
new file mode 100644
index 0000000000..3aff74cf17
--- /dev/null
+++ b/packages/vue/src/components/tour/tour.stories.ts
@@ -0,0 +1,24 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import TourExample from './examples/tour.vue'
+
+const meta = {
+  title: 'Components / Tour',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Tour = {
+  render: () => ({
+    components: { TourExample },
+    template: '<TourExample />',
+  }),
+}
diff --git a/packages/vue/src/components/tour/tour.stories.vue b/packages/vue/src/components/tour/tour.stories.vue
deleted file mode 100644
index 706b413780..0000000000
--- a/packages/vue/src/components/tour/tour.stories.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-</script>
-
-<template>
-  <Story title="Tour">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/components/tree-view/tree-view.stories.ts b/packages/vue/src/components/tree-view/tree-view.stories.ts
new file mode 100644
index 0000000000..7209b2efa1
--- /dev/null
+++ b/packages/vue/src/components/tree-view/tree-view.stories.ts
@@ -0,0 +1,64 @@
+import type { Meta } from '@storybook/vue3'
+
+import AsyncLoadingExample from './examples/async-loading.vue'
+import AsyncTreeNodeExample from './examples/async-tree-node.vue'
+import BasicExample from './examples/basic.vue'
+import ControlledExpandedExample from './examples/controlled-expanded.vue'
+import ControlledSelectedExample from './examples/controlled-selected.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import TreeNodeExample from './examples/tree-node.vue'
+
+const meta = {
+  title: 'Components / Tree View',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const TreeNode = {
+  render: () => ({
+    components: { TreeNodeExample },
+    template: '<TreeNodeExample />',
+  }),
+}
+
+export const AsyncLoading = {
+  render: () => ({
+    components: { AsyncLoadingExample },
+    template: '<AsyncLoadingExample />',
+  }),
+}
+
+export const AsyncTreeNode = {
+  render: () => ({
+    components: { AsyncTreeNodeExample },
+    template: '<AsyncTreeNodeExample />',
+  }),
+}
+
+export const ControlledExpanded = {
+  render: () => ({
+    components: { ControlledExpandedExample },
+    template: '<ControlledExpandedExample />',
+  }),
+}
+
+export const ControlledSelected = {
+  render: () => ({
+    components: { ControlledSelectedExample },
+    template: '<ControlledSelectedExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
diff --git a/packages/vue/src/components/tree-view/tree-view.stories.vue b/packages/vue/src/components/tree-view/tree-view.stories.vue
deleted file mode 100644
index b05a9b8d7b..0000000000
--- a/packages/vue/src/components/tree-view/tree-view.stories.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import AsyncLoading from './examples/async-loading.vue'
-import Basic from './examples/basic.vue'
-import ControlledExpanded from './examples/controlled-expanded.vue'
-import ControlledSelected from './examples/controlled-selected.vue'
-import RootProvider from './examples/root-provider.vue'
-</script>
-<template>
-  <Story title="TreeView">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-    <Variant title="RootProvider">
-      <RootProvider />
-    </Variant>
-    <Variant title="AsyncLoading">
-      <AsyncLoading />
-    </Variant>
-    <Variant title="ControlledExpanded">
-      <ControlledExpanded />
-    </Variant>
-    <Variant title="ControlledSelected">
-      <ControlledSelected />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/providers/environment/environment.stories.ts b/packages/vue/src/providers/environment/environment.stories.ts
new file mode 100644
index 0000000000..893912a223
--- /dev/null
+++ b/packages/vue/src/providers/environment/environment.stories.ts
@@ -0,0 +1,32 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import SetupExample from './examples/setup.vue'
+import UsageExample from './examples/usage.vue'
+
+const meta = {
+  title: 'Providers / Environment',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Setup = {
+  render: () => ({
+    components: { SetupExample },
+    template: '<SetupExample />',
+  }),
+}
+
+export const Usage = {
+  render: () => ({
+    components: { UsageExample },
+    template: '<UsageExample />',
+  }),
+}
diff --git a/packages/vue/src/providers/environment/environment.stories.vue b/packages/vue/src/providers/environment/environment.stories.vue
deleted file mode 100644
index 09f8384dc1..0000000000
--- a/packages/vue/src/providers/environment/environment.stories.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-</script>
-
-<template>
-  <Story title="Environment">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/vue/src/providers/locale/locale.stories.ts b/packages/vue/src/providers/locale/locale.stories.ts
new file mode 100644
index 0000000000..ceda0f10a5
--- /dev/null
+++ b/packages/vue/src/providers/locale/locale.stories.ts
@@ -0,0 +1,32 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import SetupExample from './examples/setup.vue'
+import UsageExample from './examples/usage.vue'
+
+const meta = {
+  title: 'Providers / Locale',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Setup = {
+  render: () => ({
+    components: { SetupExample },
+    template: '<SetupExample />',
+  }),
+}
+
+export const Usage = {
+  render: () => ({
+    components: { UsageExample },
+    template: '<UsageExample />',
+  }),
+}
diff --git a/packages/vue/src/providers/locale/locale.stories.vue b/packages/vue/src/providers/locale/locale.stories.vue
deleted file mode 100644
index 55ffc6fe01..0000000000
--- a/packages/vue/src/providers/locale/locale.stories.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import Basic from './examples/basic.vue'
-</script>
-
-<template>
-  <Story title="Locale">
-    <Variant title="Basic">
-      <Basic />
-    </Variant>
-  </Story>
-</template>