Bedtime

Bedtime is a Nuxt module for creating component stories.

Inspired by Histoire's excellent Story/Variant components.

This is work in progress, expect breaking changes ahead of versioned releases.

Check the playground for a working example.

• ✨  Release Notes
• 🏀 Online playground

Goals

• Excellent DX
• Fast HMR
• Idiomatic Vue/Nuxt syntax
• Thinnest possible implementation
• Ensure compatibility across the Nuxt module ecosystem
• Escape hatches for complex/unusual use cases

Features

• Supports Nuxt layers
• Supports stories co-located with components or in a dedicated stories directory
• Copy Story/Variant templates to clipboard for easy implementation

Usage

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['nuxt-bedtime'],

  bedtime: { // optional config, with defaults shown below
    enabled: true,
    stories: {
      directories: ['./stories', './components'],
      glob: '**/*.story.vue',
    },
    viewer: {
      enabled: true,
      route: '/stories',
      theme: 'default',
    },
    classes: {
      story: {
        container: '',
        title: '',
        content: '',
      },
      variant: {
        container: '',
        title: '',
        content: '',
      },
    },
  }
})

Open in Editor

Set the LAUNCH_EDITOR environment variable to your editor of choice:

LAUNCH_EDITOR=cursor pnpm dev

See launch-editor for more details.

Note: this does not currently work in the playground, due to nuxt dev playground overriding the rootDir.

Contribution

Local development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release