@haegemonia76/storybook-vue2-vite

@haegemonia76/storybook-vue2-vite

Storybook 10 framework for Vue 2.7, built on Vite. Lets you develop, view, and document Vue 2.7 components (Options API and Composition API setup()) with Storybook 10 — which dropped official Vue 2 support in v8. Adapted from the last official Vue 2 renderer, @storybook/vue@7.6.17.

Install

npm install --save-dev @haegemonia76/storybook-vue2-vite @haegemonia76/storybook-vue2

Setup

.storybook/main.ts:

import type { StorybookConfig } from '@haegemonia76/storybook-vue2-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(ts|js)'],
  framework: {
    name: '@haegemonia76/storybook-vue2-vite',
    options: {},
  },
};

export default config;

Writing a story

// Button.stories.ts
import type { Meta, StoryObj } from '@haegemonia76/storybook-vue2-vite';
import Button from './Button.vue';

interface ButtonArgs {
  label: string;
  primary?: boolean;
}

const meta: Meta<ButtonArgs> = {
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<ButtonArgs>;

export const Primary: Story = {
  args: { label: 'Button', primary: true },
};

Meta/StoryObj take an explicit args interface (Meta<ButtonArgs>) — see ADR-0005 for why this package doesn't attempt to infer prop types from typeof Component the way @storybook/vue3 does via vue-component-meta (@vue/language-core, Vue 3-only — no equivalent for Vue 2).

argTypes (props, events, slots — what populates the Controls panel and the autodocs page) are a separate, unrelated mechanism: extracted automatically from the .vue file's source via vue-docgen-api, at build time, regardless of the explicit interface typing the story.

Show code source snippet

The Docs panel's "Show code" block renders the real HTML markup for the story's current args (tag name, props as attributes, docgen-derived events as @event="…" listeners) — not addon-docs' generic fallback (the raw args object serialised as JSON). It updates live as controls change.

The tag name defaults to PascalCase (SbButton, matching how the component is actually registered — components: { SbButton }). Switch the whole project to kebab-case (sb-button, the convention for direct-in-DOM templates) via the framework's sourceTagCase option:

const config: StorybookConfig = {
  framework: {
    name: '@haegemonia76/storybook-vue2-vite',
    options: { sourceTagCase: 'kebab' },
  },
};

A single component or story can override the project setting by declaring the same value as a parameters.vue2.sourceTagCase — Storybook parameters cascade project → component → story, so this wins over the framework option for just that component/story:

export const KebabTag: Story = {
  parameters: { vue2: { sourceTagCase: 'kebab' } },
};

A component with no resolvable name (no .vue name option, no vue-docgen-api displayName) falls back to a generic Component tag rather than crashing the Docs panel.

Requirements

• vue ^2.7.0 (Composition API setup() requires Vue 2.7's built-in support)
• storybook ^10.0.0
• vite ^5.0.0 || ^6.0.0 || ^7.0.0

Scope

• CSF3 stories only (TypeScript, Meta/StoryObj), no raw .vue-as-story files.
• Vite builder only, no Webpack5 framework variant.
• Options API and Composition API setup(), no <script setup>-specific caveats beyond what Vue 2.7 itself supports.

See the monorepo repository for the full kitchen-sink example app and architecture decisions (CONTEXT.md, docs/adr/).

License

MIT