{"id":21434,"library":"histoire","title":"Histoire","description":"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.","status":"active","version":"1.0.0-beta.1","language":"javascript","source_language":"en","source_url":"https://github.com/Akryum/histoire","tags":["javascript","typescript"],"install":[{"cmd":"npm install histoire","lang":"bash","label":"npm"},{"cmd":"yarn add histoire","lang":"bash","label":"yarn"},{"cmd":"pnpm add histoire","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for Vite integration; version ^7.3.0 for this release","package":"vite","optional":false}],"imports":[{"note":"ESM-only; CJS not available for this symbol. defineStory is the main export for defining stories.","wrong":"const { defineStory } = require('histoire')","symbol":"defineStory","correct":"import { defineStory } from 'histoire'"},{"note":"setupStory is used for shared story setup. Define functions are named differently.","wrong":"import { defineSetupStory } from 'histoire'","symbol":"setupStory","correct":"import { setupStory } from 'histoire'"},{"note":"Story component is exported from 'histoire/client' for use in story files.","wrong":"import { Story } from 'histoire'","symbol":"Story","correct":"import { Story } from 'histoire/client'"},{"note":"Variant component for defining story variants, also from 'histoire/client'.","symbol":"Variant","correct":"import { Variant } from 'histoire/client'"}],"quickstart":{"code":"// Install\nnpm install -D histoire\n\n// Create a story file: stories/HelloWorld.story.vue\n<template>\n  <Story title=\"Hello World\">\n    <Variant title=\"Default\">\n      <div>Hello, World!</div>\n    </Variant>\n  </Story>\n</template>\n\n// Run dev server\nnpx histoire dev","lang":"typescript","description":"Quickstart showing installation, a basic story file with Story and Variant components, and dev server command."},"warnings":[{"fix":"Update imports to use 'histoire/client' for Story/Variant components, adjust story definitions.","message":"Breaking changes between v0.x and v1.0.0-beta: Story file structure changed, new client exports.","severity":"breaking","affected_versions":">=1.0.0-alpha.1"},{"fix":"Use ESM imports (import { defineStory } from 'histoire') instead of require().","message":"CommonJS support is limited; some exports like defineStory are ESM-only.","severity":"gotcha","affected_versions":">=1.0.0-alpha.4"},{"fix":"Run 'npm install vite --save-dev' if not already present.","message":"Vite peer dependency must be installed separately; histoire does not bundle Vite.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Migrate to setupStory and defineStory.","message":"Old story API from v0.x (e.g., defineSetupStory) is deprecated.","severity":"deprecated","affected_versions":">=1.0.0-alpha.1"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Update histoire to v1.0.0-beta.1 or later, or use import from 'histoire' directly (but client exports may be missing).","cause":"Using version <1.0.0-alpha.1 where client exports were not separated.","error":"Cannot find module 'histoire/client'"},{"fix":"Switch to ES module syntax: import { defineStory } from 'histoire'. If project is CJS, consider using dynamic import().","cause":"Using CommonJS require on an ESM-only export.","error":"defineStory is not a function"},{"fix":"Run 'npm install -D histoire' and ensure it's in package.json devDependencies.","cause":"histoire is not installed or Vite cannot locate it.","error":"Failed to resolve import \"histoire\" from \"src/...story.vue\""}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}