nuxt-simple-stories v0.0.25

Nuxt Simple Stories

Simple stories for Nuxt. Work on your components in isolation with zero configuration. Also enabled in your Nuxt DevTools

• ✨  Release Notes
• 📖  Example

Getting Started

Installation

pnpm add -D nuxt-simple-stories

export default defineNuxtConfig({
  modules: [
    'nuxt-simple-stories'
  ],
  // optional configuration
  simpleStories: {
    // Set to false to deploy stories to production. (default: true)
    devOnly: true,
  }
})

Usage

Create a stories folder in the root of your Nuxt project. Create a *.story.vue file for each story you want to create. The name of the file will be used as the name of the story. Directories will be used to show a tree view in the UI.

<script setup lang="ts">
// this is just another Nuxt 3 component, so you can use all the same features like auto imports, Pinia store, etc.
</script>

<template>
  <Variant title="Base Button">
    <BaseButton variant="primary">
      Primary Button
    </BaseButton>
    <BaseButton variant="secondary">
      Secondary Buttton
    </BaseButton>
  </Variant>
  <Variant title="Disabled buttons">
    <BaseButton
      variant="primary"
      disabled
    >
      Primary Button
    </BaseButton>
    <BaseButton
      variant="secondary"
      disabled
    >
      Secondary Buttton
    </BaseButton>
  </Variant>
</template>

The Variant component can be used to group for example different states of a component. The title prop will be used as the name of the variant.