Skip to content

richardeschloss/nuxt-stories

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

npm npm NPM

📖 Release Notes

nuxt-stories

Painless (and now insanely fast) storybooking for Nuxt

Video overview

Features

  • Insanely fast configuration and usage (one install, one line in config, and you're good to go!)
  • Live markdown editing and previewing directly on the UI! Faster than Hot Module Reloading!
  • Stories that get written on the UI get auto saved back to the filesystem (local dev only)
  • Easily toggle the view mode in the stories header.
  • Instant compiling of vue components as you type them on the UI!
  • Ordering of stories using story frontMatter.
  • Instant updating of table of contents as you type the headers
  • Auto importing of components. Just place components in your components directory and just use them!
  • Emoji support! Don't believe it? Just look at this bulleted list!
  • Built-in json viewer. Just type <json :data="[your data]"/> to see the tree.
  • The perfect development tool for rapidly jotting down notes, gameplans, or even writing official documentation! Documentation that is also functional.
  • Built-in fetch. Quickly fetch on the client or server side, right in your story! (v2.0.13+)
  • Component-browser and style-editor with direct tie-in to Google fonts.

Demo

See it in ACTION: DEMO @ Netlify (Ctrl+Click for new tab)

Setup

  1. Add nuxt-stories dependency to your project
  • Nuxt 3.x
npm i -D nuxt-stories@next
  • Nuxt 2.x
npm i -D nuxt-stories

You may also need to install the following deps if they didn't get installed when you first created your nuxt app:

After installing, a postinstall script will run to "gently copy" sample stories, assets, and layout(s) to your workspace to get you setup asap. It will also create a "components" directory if it doesn't already exist.

  1. Add nuxt-stories to the buildModules section of nuxt.config.js
{
  buildModules: [
    'nuxt-stories'
  ],
  stories: {
    /* stories options here */
  }
}
  1. There is no step 3! You're good to go! Try it out!
npm run dev

Then view your stories running on your local dev server: http://localhost:3000/stories

All the stories that you edit there will get auto saved back to [project root]/stories/[language]. Read on to learn more. More explanation will follow.