histoire

library1.0.0-beta.1jsnpmunverified

Histoire is a fast, Vite-powered interactive storybook for Vue components, currently in v1.0.0-beta.1. It offers a lightweight alternative to Storybook with first-class Vite integration and zero-config setup. Released under active development with frequent beta updates, it supports Vue 3, Nuxt 4, and includes features like style isolation, CommonJS support, and a plugin API. Unlike Storybook, Histoire leverages Vite's native dev server for instant HMR and faster builds. Ships TypeScript types.

web-framework testing devops

npm install histoire

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · HISTOIRE

histoire

web-frameworkjavascriptv1.0.0-beta.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

defineStory

✓ import { defineStory } from 'histoire'

✗ const { defineStory } = require('histoire')

ESM-only; CJS not available for this symbol. defineStory is the main export for defining stories.

setupStory

✓ import { setupStory } from 'histoire'

✗ import { defineSetupStory } from 'histoire'

setupStory is used for shared story setup. Define functions are named differently.

Story

✓ import { Story } from 'histoire/client'

✗ import { Story } from 'histoire'

Story component is exported from 'histoire/client' for use in story files.

Variant

✓ import { Variant } from 'histoire/client'

Variant component for defining story variants, also from 'histoire/client'.

Quickstart showing installation, a basic story file with Story and Variant components, and dev server command.

// Install npm install -D histoire // Create a story file: stories/HelloWorld.story.vue <template> <Story title="Hello World"> <Variant title="Default"> <div>Hello, World!</div> </Variant> </Story> </template> // Run dev server npx histoire dev

histoire --version

Debug

Known issues

breakingBreaking changes between v0.x and v1.0.0-beta: Story file structure changed, new client exports.

fix

Update imports to use 'histoire/client' for Story/Variant components, adjust story definitions.

affects: >=1.0.0-alpha.1

gotchaCommonJS support is limited; some exports like defineStory are ESM-only.

fix

Use ESM imports (import { defineStory } from 'histoire') instead of require().

affects: >=1.0.0-alpha.4

gotchaVite peer dependency must be installed separately; histoire does not bundle Vite.

fix

Run 'npm install vite --save-dev' if not already present.

affects: >=0.0.0

deprecatedOld story API from v0.x (e.g., defineSetupStory) is deprecated.

fix

Migrate to setupStory and defineStory.

affects: >=1.0.0-alpha.1

Errors

Common errors & fixes

Cannot find module 'histoire/client'

Using version <1.0.0-alpha.1 where client exports were not separated.

fix

Update histoire to v1.0.0-beta.1 or later, or use import from 'histoire' directly (but client exports may be missing).

defineStory is not a function

Using CommonJS require on an ESM-only export.

fix

Switch to ES module syntax: import { defineStory } from 'histoire'. If project is CJS, consider using dynamic import().

Failed to resolve import "histoire" from "src/...story.vue"

histoire is not installed or Vite cannot locate it.

fix

Run 'npm install -D histoire' and ensure it's in package.json devDependencies.

Upgrade

Version history

1.0.0-beta.1latest on npm

Audit

Dependencies

viterequiredPeer dependency required for Vite integration; version ^7.3.0 for this release

Agent activity

13 hits · last 30 days

node

Resources

githubhttps://github.com/Akryum/histoire ↗

packagehttps://www.npmjs.com/package/histoire ↗

homepagehttps://histoire.dev ↗