diff --git a/app/vue/src/client/docs/config.ts b/app/vue/src/client/docs/config.ts
index fe69d10e31d..537773e4dfb 100644
--- a/app/vue/src/client/docs/config.ts
+++ b/app/vue/src/client/docs/config.ts
@@ -4,7 +4,6 @@ import { prepareForInline } from './prepareForInline';
 import { sourceDecorator } from './sourceDecorator';
 
 export const parameters = {
-  foobar: 'baz',
   docs: {
     inlineStories: true,
     iframeHeight: 120,
diff --git a/app/vue/src/client/preview/docs/config.ts b/app/vue/src/client/preview/docs/config.ts
deleted file mode 100644
index 225bf3a0d25..00000000000
--- a/app/vue/src/client/preview/docs/config.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { extractComponentDescription } from '@storybook/docs-tools';
-import { extractArgTypes } from './extractArgTypes';
-import { prepareForInline } from './prepareForInline';
-import { sourceDecorator } from './sourceDecorator';
-
-console.log('hello2');
-
-export const parameters = {
-  foobar: 'baz',
-  docs: {
-    inlineStories: true,
-    iframeHeight: 120,
-    prepareForInline,
-    extractArgTypes,
-    extractComponentDescription,
-  },
-};
-
-export const decorators = [sourceDecorator];
diff --git a/app/vue/src/client/preview/docs/extractArgTypes.ts b/app/vue/src/client/preview/docs/extractArgTypes.ts
deleted file mode 100644
index 92a9f113e9c..00000000000
--- a/app/vue/src/client/preview/docs/extractArgTypes.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import type { StrictArgTypes } from '@storybook/csf';
-import type { ArgTypesExtractor, DocgenInfo, PropDef } from '@storybook/docs-tools';
-import { hasDocgen, extractComponentProps, convert } from '@storybook/docs-tools';
-
-const SECTIONS = ['props', 'events', 'slots', 'methods'];
-
-/**
- * Check if "@values" tag is defined within docgenInfo.
- * If true, then propDef is mutated.
- */
-function isEnum(propDef: PropDef, docgenInfo: DocgenInfo): false | PropDef {
-  // cast as any, since "values" doesn't exist in DocgenInfo type
-  const { type, values } = docgenInfo as any;
-  const matched = Array.isArray(values) && values.length && type.name !== 'enum';
-
-  if (!matched) return false;
-
-  const enumString = values.join(', ');
-  let { summary } = propDef.type;
-  summary = summary ? `${summary}: ${enumString}` : enumString;
-
-  Object.assign(propDef.type, {
-    ...propDef.type,
-    name: 'enum',
-    value: values,
-    summary,
-  });
-  return propDef;
-}
-
-/**
- * @returns {Array} result
- * @returns {PropDef} result.def - propDef
- * @returns {boolean} result.isChanged - flag whether propDef is mutated or not.
- *  this is needed to prevent sbType from performing convert(docgenInfo).
- */
-function verifyPropDef(propDef: PropDef, docgenInfo: DocgenInfo): [PropDef, boolean] {
-  let def = propDef;
-  let isChanged = false;
-
-  // another callback can be added here.
-  // callback is mutually exclusive from each other.
-  const callbacks = [isEnum];
-  for (let i = 0, len = callbacks.length; i < len; i += 1) {
-    const matched = callbacks[i](propDef, docgenInfo);
-    if (matched) {
-      def = matched;
-      isChanged = true;
-    }
-  }
-
-  return [def, isChanged];
-}
-
-export const extractArgTypes: ArgTypesExtractor = (component) => {
-  if (!hasDocgen(component)) {
-    return null;
-  }
-  const results: StrictArgTypes = {};
-  SECTIONS.forEach((section) => {
-    const props = extractComponentProps(component, section);
-    props.forEach(({ propDef, docgenInfo, jsDocTags }) => {
-      const [result, isPropDefChanged] = verifyPropDef(propDef, docgenInfo);
-      const { name, type, description, defaultValue: defaultSummary, required } = result;
-
-      let sbType;
-      if (isPropDefChanged) {
-        sbType = type;
-      } else {
-        sbType = section === 'props' ? convert(docgenInfo) : { name: 'void' };
-      }
-      results[name] = {
-        name,
-        description,
-        type: { required, ...sbType },
-        table: {
-          type,
-          jsDocTags,
-          defaultValue: defaultSummary,
-          category: section,
-        },
-      };
-    });
-  });
-  return results;
-};
diff --git a/app/vue/src/client/preview/docs/prepareForInline.ts b/app/vue/src/client/preview/docs/prepareForInline.ts
deleted file mode 100644
index 3696a6bb768..00000000000
--- a/app/vue/src/client/preview/docs/prepareForInline.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Vue from 'vue';
-import type { StoryContext, PartialStoryFn } from '@storybook/csf';
-import type { VueFramework } from '../types-6-0';
-
-// Inspired by https://github.com/egoist/vue-to-react,
-// modified to store args as props in the root store
-
-// FIXME get this from @storybook/vue
-const COMPONENT = 'STORYBOOK_COMPONENT';
-const VALUES = 'STORYBOOK_VALUES';
-
-export const prepareForInline = (
-  storyFn: PartialStoryFn<VueFramework>,
-  { args }: StoryContext<VueFramework>
-) => {
-  const component = storyFn();
-  const el = React.useRef(null);
-
-  // FIXME: This recreates the Vue instance every time, which should be optimized
-  React.useEffect(() => {
-    const root = new Vue({
-      el: el.current,
-      data() {
-        return {
-          [COMPONENT]: component,
-          [VALUES]: args,
-        };
-      },
-      render(h) {
-        const children = this[COMPONENT] ? [h(this[COMPONENT])] : undefined;
-        return h('div', { attrs: { id: 'root' } }, children);
-      },
-    });
-    return () => root.$destroy();
-  });
-
-  return React.createElement('div', null, React.createElement('div', { ref: el }));
-};
diff --git a/app/vue/src/client/preview/docs/sourceDecorator.test.ts b/app/vue/src/client/preview/docs/sourceDecorator.test.ts
deleted file mode 100644
index 54695c1ea84..00000000000
--- a/app/vue/src/client/preview/docs/sourceDecorator.test.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-/* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */
-
-import { ComponentOptions } from 'vue';
-import Vue from 'vue/dist/vue';
-import { vnodeToString } from './sourceDecorator';
-
-expect.addSnapshotSerializer({
-  print: (val: any) => val,
-  test: (val) => typeof val === 'string',
-});
-
-const getVNode = (Component: ComponentOptions<any, any, any>) => {
-  const vm = new Vue({
-    render(h: (c: any) => unknown) {
-      return h(Component);
-    },
-  }).$mount();
-
-  return vm.$children[0]._vnode;
-};
-
-describe('vnodeToString', () => {
-  it('basic', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `<button>Button</button>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<button >Button</button>`);
-  });
-
-  it('static class', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `<button class="foo bar">Button</button>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<button class="foo bar">Button</button>`);
-  });
-
-  it('string dynamic class', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `<button :class="'foo'">Button</button>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<button class="foo">Button</button>`);
-  });
-
-  it('non-string dynamic class', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `<button :class="1">Button</button>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<button >Button</button>`);
-  });
-
-  it('array dynamic class', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `<button :class="['foo', null, false, 0, {bar: true, baz: false}]">Button</button>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<button class="foo bar">Button</button>`);
-  });
-
-  it('object dynamic class', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `<button :class="{foo: true, bar: false}">Button</button>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<button class="foo">Button</button>`);
-  });
-
-  it('merge dynamic and static classes', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `<button class="foo" :class="{bar: null, baz: 1}">Button</button>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<button class="foo baz">Button</button>`);
-  });
-
-  it('attributes', () => {
-    const MyComponent: ComponentOptions<any, any, any> = {
-      props: ['propA', 'propB', 'propC', 'propD', 'propE', 'propF', 'propG'],
-      template: '<div/>',
-    };
-
-    expect(
-      vnodeToString(
-        getVNode({
-          components: { MyComponent },
-          data(): { props: Record<string, any> } {
-            return {
-              props: {
-                propA: 'propA',
-                propB: 1,
-                propC: null,
-                propD: {
-                  foo: 'bar',
-                },
-                propE: true,
-                propF() {
-                  const foo = 'bar';
-
-                  return foo;
-                },
-                propG: undefined,
-              },
-            };
-          },
-          template: `<my-component v-bind="props"/>`,
-        })
-      )
-    ).toMatchInlineSnapshot(
-      `<my-component propE :propD='{"foo":"bar"}' :propC="null" :propB="1" propA="propA"/>`
-    );
-  });
-
-  it('children', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `
-          <div>
-            <form>
-              <button>Button</button>
-            </form>
-          </div>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<div ><form ><button >Button</button></form></div>`);
-  });
-});
diff --git a/app/vue/src/client/preview/docs/sourceDecorator.ts b/app/vue/src/client/preview/docs/sourceDecorator.ts
deleted file mode 100644
index 38eed0d20ff..00000000000
--- a/app/vue/src/client/preview/docs/sourceDecorator.ts
+++ /dev/null
@@ -1,242 +0,0 @@
-/* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */
-
-import type { StoryContext } from '@storybook/csf';
-import { addons } from '@storybook/addons';
-import { logger } from '@storybook/client-logger';
-import type Vue from 'vue';
-
-import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
-import type { VueFramework } from '../types-6-0';
-
-export const skipSourceRender = (context: StoryContext<VueFramework>) => {
-  const sourceParams = context?.parameters.docs?.source;
-  const isArgsStory = context?.parameters.__isArgsStory;
-
-  // always render if the user forces it
-  if (sourceParams?.type === SourceType.DYNAMIC) {
-    return false;
-  }
-
-  // never render if the user is forcing the block to render code, or
-  // if the user provides code, or if it's not an args story.
-  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
-};
-
-export const sourceDecorator = (storyFn: any, context: StoryContext<VueFramework>) => {
-  const story = storyFn();
-  console.log({ story });
-
-  // See ../react/jsxDecorator.tsx
-  if (skipSourceRender(context)) {
-    return story;
-  }
-
-  const channel = addons.getChannel();
-
-  const storyComponent = getStoryComponent(story.options.STORYBOOK_WRAPS);
-
-  return {
-    components: {
-      Story: story,
-    },
-    // We need to wait until the wrapper component to be mounted so Vue runtime
-    // struct VNode tree. We get `this._vnode == null` if switch to `created`
-    // lifecycle hook.
-    mounted() {
-      // Theoretically this does not happens but we need to check it.
-      if (!this._vnode) {
-        return;
-      }
-
-      try {
-        const storyNode = lookupStoryInstance(this, storyComponent);
-
-        const code = vnodeToString(storyNode._vnode);
-
-        const emitFormattedTemplate = async () => {
-          const prettier = await import('prettier/standalone');
-          const prettierHtml = await import('prettier/parser-html');
-
-          channel.emit(
-            SNIPPET_RENDERED,
-            (context || {}).id,
-            prettier.format(`<template>${code}</template>`, {
-              parser: 'vue',
-              plugins: [prettierHtml],
-              // Because the parsed vnode missing spaces right before/after the surround tag,
-              // we always get weird wrapped code without this option.
-              htmlWhitespaceSensitivity: 'ignore',
-            })
-          );
-        };
-
-        emitFormattedTemplate();
-      } catch (e) {
-        logger.warn(`Failed to generate dynamic story source: ${e}`);
-      }
-    },
-    template: '<story />',
-  };
-};
-
-export function vnodeToString(vnode: Vue.VNode): string {
-  const attrString = [
-    ...(vnode.data?.slot ? ([['slot', vnode.data.slot]] as [string, any][]) : []),
-    ['class', stringifyClassAttribute(vnode)],
-    ...(vnode.componentOptions?.propsData ? Object.entries(vnode.componentOptions.propsData) : []),
-    ...(vnode.data?.attrs ? Object.entries(vnode.data.attrs) : []),
-  ]
-    .filter(([name], index, list) => list.findIndex((item) => item[0] === name) === index)
-    .map(([name, value]) => stringifyAttr(name, value))
-    .filter(Boolean)
-    .join(' ');
-
-  if (!vnode.componentOptions) {
-    // Non-component elements (div, span, etc...)
-    if (vnode.tag) {
-      if (!vnode.children) {
-        return `<${vnode.tag} ${attrString}/>`;
-      }
-
-      return `<${vnode.tag} ${attrString}>${vnode.children.map(vnodeToString).join('')}</${
-        vnode.tag
-      }>`;
-    }
-
-    // TextNode
-    if (vnode.text) {
-      if (/[<>"&]/.test(vnode.text)) {
-        return `{{\`${vnode.text.replace(/`/g, '\\`')}\`}}`;
-      }
-
-      return vnode.text;
-    }
-
-    // Unknown
-    return '';
-  }
-
-  // Probably users never see the "unknown-component". It seems that vnode.tag
-  // is always set.
-  const tag = vnode.componentOptions.tag || vnode.tag || 'unknown-component';
-
-  if (!vnode.componentOptions.children) {
-    return `<${tag} ${attrString}/>`;
-  }
-
-  return `<${tag} ${attrString}>${vnode.componentOptions.children
-    .map(vnodeToString)
-    .join('')}</${tag}>`;
-}
-
-function stringifyClassAttribute(vnode: Vue.VNode): string | undefined {
-  if (!vnode.data || (!vnode.data.staticClass && !vnode.data.class)) {
-    return undefined;
-  }
-
-  return (
-    [...(vnode.data.staticClass?.split(' ') ?? []), ...normalizeClassBinding(vnode.data.class)]
-      .filter(Boolean)
-      .join(' ') || undefined
-  );
-}
-
-// https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes
-function normalizeClassBinding(binding: unknown): readonly string[] {
-  if (!binding) {
-    return [];
-  }
-
-  if (typeof binding === 'string') {
-    return [binding];
-  }
-
-  if (binding instanceof Array) {
-    // To handle an object-in-array binding smartly, we use recursion
-    return binding.map(normalizeClassBinding).reduce((a, b) => [...a, ...b], []);
-  }
-
-  if (typeof binding === 'object') {
-    return Object.entries(binding)
-      .filter(([, active]) => !!active)
-      .map(([className]) => className);
-  }
-
-  // Unknown class binding
-  return [];
-}
-
-function stringifyAttr(attrName: string, value?: any): string | null {
-  if (typeof value === 'undefined' || typeof value === 'function') {
-    return null;
-  }
-
-  if (value === true) {
-    return attrName;
-  }
-
-  if (typeof value === 'string') {
-    return `${attrName}=${quote(value)}`;
-  }
-
-  // TODO: Better serialization (unquoted object key, Symbol/Classes, etc...)
-  //       Seems like Prettier don't format JSON-look object (= when keys are quoted)
-  return `:${attrName}=${quote(JSON.stringify(value))}`;
-}
-
-function quote(value: string) {
-  return value.includes(`"`) && !value.includes(`'`)
-    ? `'${value}'`
-    : `"${value.replace(/"/g, '&quot;')}"`;
-}
-
-/**
- * Skip decorators and grab a story component itself.
- * https://github.com/pocka/storybook-addon-vue-info/pull/113
- */
-function getStoryComponent(w: any) {
-  let matched = w;
-
-  while (
-    matched &&
-    matched.options &&
-    matched.options.components &&
-    matched.options.components.story &&
-    matched.options.components.story.options &&
-    matched.options.components.story.options.STORYBOOK_WRAPS
-  ) {
-    matched = matched.options.components.story.options.STORYBOOK_WRAPS;
-  }
-  return matched;
-}
-
-interface VueInternal {
-  // We need to access this private property, in order to grab the vnode of the
-  // component instead of the "vnode of the parent of the component".
-  // Probably it's safe to rely on this because vm.$vnode is a reference for this.
-  // https://github.com/vuejs/vue/issues/6070#issuecomment-314389883
-  _vnode: Vue.VNode;
-}
-
-/**
- * Find the story's instance from VNode tree.
- */
-function lookupStoryInstance(instance: Vue, storyComponent: any): (Vue & VueInternal) | null {
-  if (
-    instance.$vnode &&
-    instance.$vnode.componentOptions &&
-    instance.$vnode.componentOptions.Ctor === storyComponent
-  ) {
-    return instance as Vue & VueInternal;
-  }
-
-  for (let i = 0, l = instance.$children.length; i < l; i += 1) {
-    const found = lookupStoryInstance(instance.$children[i], storyComponent);
-
-    if (found) {
-      return found;
-    }
-  }
-
-  return null;
-}