Skip to content
On this page

Getting started with Histoire


Histoire is the French word for "Story" and is pronounced /is.twaʁ/, like "is·twar"

Histoire is a tool to generate stories applications (or "books").

Learn more about Histoire here »

(Demo links currently only available for Vue 3)


Histoire is an Open-Source project supported by our sponsors - thank you!

See our sponsors »


Install the histoire and @histoire/plugin-vue2 packages into your project:

pnpm i -D histoire @histoire/plugin-vue2
# OR
npm i -D histoire @histoire/plugin-vue2
# OR
yarn add -D histoire @histoire/plugin-vue2

Create an histoire.config.js or histoire.config.ts file in your project root to enable the Vue plugin:

import { defineConfig } from 'histoire'
import { HstVue } from '@histoire/plugin-vue2'

export default defineConfig({
  plugins: [

Command Line Interface

Histoire provides the following commands:

  • histoire dev: starts a development server with hot-reload
  • histoire build: builds the app for production
  • histoire preview: starts an HTTP server that serves the built app

You can add these to your package.json like this:

  "scripts": {
    "story:dev": "histoire dev",
    "story:build": "histoire build",
    "story:preview": "histoire preview"

And then run them with npm run story:dev or npm run story:build.

You can specify additional CLI options like --port. For a full list of CLI options, run npx histoire --help in your project.


Learn more about configuring Histoire here.


If you have questions or need help, reach out to the community at Discord and GitHub Discussions.

Released under the MIT License.