@Akryum

Guillaume Chau

@Akryum

github.com/sponsors/Akryum

Vue.js Core Team

Why stories?

A story is a small number of components mounted in an isolated environment

Why stories?

Organize and document components for other developers

Why stories?

Organize and document components for other developers

Showcase features and components

Why stories?

Organize and document components for other developers

Showcase features and components

Develop components in isolation

Why stories?

Organize and document components for other developers

Showcase features and components

Develop components in isolation

Tests components

Why stories?

Organize and document components for other developers

Showcase features and components

Develop components in isolation

Tests components

Visual regression

Design system

Component library

Writing stories

Improve the Developer Experience

Writing stories

Improve the Developer Experience

Make stories feel 'native' to the project

Writing stories

Improve the Developer Experience

Make stories feel 'native' to the project

Meet the developer where he is

Writing stories

Improve the Developer Experience

Make stories feel 'native' to the project

Meet the developer where he is

Customizable and polished

Writing stories

Improve the Developer Experience

Make stories feel 'native' to the project

Meet the developer where he is

Be fast

Customizable and polished

Writing stories

<!-- Meow.story.vue -->
<template>
  <Story>
    🐱
  </Story>
</template>

Writing stories

<!-- Meow.story.vue -->
<template>
  <Story title="🐱 Meow">
    🐱
  </Story>
</template>

Writing stories

<!-- Meow.story.vue -->
<script setup>
import Meow from './Meow.vue'
</script>

<template>
  <Story>
    <Meow/>
  </Story>
</template>

Writing stories

<!-- Cars.story.vue -->
<template>
  <Story title="Cars">
    <Variant title="default">
      🚗
    </Variant>
    <Variant title="Fast">
      🏎️
    </Variant>
    <Variant title="Slow">
      🚜
    </Variant>
  </Story>
</template>

Vite Native

Reuse the same build pipeline

Less time and effort setting up

Fast boot and instant HMR

Histoire

Native to Vite projects

Idiomatic

Fast and light

Customizable

Great User Experience

Why Histoire?

Vite dev server

Vite node server

Collect stories and variants

Virtual modules

Packed with features!

⚡ Dynamic source

🍱 Variant grids

📖 Markdown docs

🌔 Dark theme

📱 Responsive testing

🎹 Flexible controls

📷 Visual regression testing

🎨 Automatic design tokens

🔍 Fast fuzzy search

More to come...

Try it now!

Out of early access

histoire.dev

github.com/sponsors/Akryum

Thank you!