@Akryum
Guillaume Chau
@Akryum
Vue.js Core Team
Why stories?
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
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
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
Thank you!
Histoire - Vue.js Amsterdam
By Guillaume Chau
