@Akryum

Guillaume Chau

@Akryum

github.com/sponsors/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

histoire.dev

github.com/sponsors/Akryum

Thank you!

Copy of Histoire - Vue.js Amsterdam

By tunecom

Source: Guillaume Chau

Copy of Histoire - Vue.js Amsterdam

  • 324

More from tunecom

  • Copy of How (Not) to Measure Quality
    tunecom
    320
  • Copy of State of Drupal 10 readiness, June 1, 2022
    tunecom
    288
  • Copy of How to scale and improve your NLP pipelines with spaCy.
    tunecom
    335