tessl/npm-storybook--vue
Storybook Vue 2.x renderer that enables Vue 2.x component story development and documentation (Note: @storybook/vue3 is separate)
—
legacy-apis.mddocs/
Legacy Story APIs
Legacy story APIs for backwards compatibility with older Storybook versions and migration scenarios. These APIs support CSF v1 and v2 story formats.
Capabilities
StoriesOf API
Creates a story collection for a component with fluent API for adding individual stories.
/**
* Create a story collection for a component
* @param kind - The story kind/title (e.g., "Button")
* @param module - The module containing the stories
* @returns StoryApi for chaining story definitions
*/
function storiesOf(kind: string, module: NodeModule): StoryApi;
interface StoryApi {
add(name: string, storyFn: StoryFunction): StoryApi;
addParameters(parameters: Parameters): StoryApi;
addDecorator(decorator: DecoratorFunction): StoryApi;
}Usage Example:
import { storiesOf } from "@storybook/vue";
import MyButton from "./MyButton.vue";
storiesOf("Example/Button", module)
.addParameters({
layout: "centered",
})
.add("Primary", () => ({
components: { MyButton },
template: '<MyButton :primary="true" label="Button" />',
}))
.add("Secondary", () => ({
components: { MyButton },
template: '<MyButton label="Button" />',
}))
.add("Large", () => ({
components: { MyButton },
template: '<MyButton size="large" label="Button" />',
}));Configure Function
Configures how Storybook loads and processes stories from your project.
/**
* Configure storybook stories loading
* @param loader - Function or array of functions that load stories
* @param module - The module context
*/
function configure(loader: Addon_Loadable, module: NodeModule): void;
type Addon_Loadable = (() => void) | (() => void)[];Usage Example:
import { configure } from "@storybook/vue";
// Load all stories from the stories directory
function loadStories() {
const req = require.context("../stories", true, /\.stories\.(js|ts)$/);
req.keys().forEach((filename) => req(filename));
}
configure(loadStories, module);Force Re-render
Forces re-rendering of the current story, useful for debugging or manual refresh scenarios.
/**
* Force re-rendering of current story
*/
function forceReRender(): void;Usage Example:
import { forceReRender } from "@storybook/vue";
// In a story or addon
function refreshStory() {
forceReRender();
}Raw Story Access
Provides access to raw story data for advanced use cases and debugging.
/**
* Access raw story data
* @returns Raw story collection data
*/
function raw(): any;Usage Example:
import { raw } from "@storybook/vue";
// Get all story data
const allStories = raw();
console.log("Available stories:", allStories);Migration Notes
These legacy APIs are maintained for backwards compatibility but it's recommended to migrate to modern CSF (Component Story Format) for new projects:
From storiesOf to CSF
Legacy storiesOf:
storiesOf("Button", module)
.add("Primary", () => ({
components: { MyButton },
template: '<MyButton :primary="true" />',
}));Modern CSF:
export default {
title: "Button",
component: MyButton,
};
export const Primary = {
args: {
primary: true,
},
};Benefits of Modern CSF
- Better TypeScript support with automatic type inference
- Improved IDE experience with autocomplete and error checking
- More maintainable story organization
- Better integration with Storybook tools and addons
- Simplified story parameterization with args
Install with Tessl CLI
npx tessl i tessl/npm-storybook--vue