@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!

Copy of Copy of Histoire - Vue.js Amsterdam

By danielnotcake

Copy of Copy of Histoire - Vue.js Amsterdam

  • 112