nuxt-stories
nuxt-stories copied to clipboard
Nuxt stories module -- Painless (and now insanely fast) storybooking for Nuxt
nuxt-stories
Nuxt stories module -- Painless (and now insanely fast) storybooking for Nuxt
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!
- ✅ Vue in Markdown or Markdown in Vue! You're in complete control! (I prefer Vue-in-Markdown ;))
- ✅ 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. - ✅ Dynamic import feature for rapidly importing components (v2.0.14+)
- ✅ 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+)
(Demonstration video placeholder)
Demo
See it in ACTION: DEMO (Ctrl+Click for new tab)
Setup
- Add
nuxt-stories
dependency to your project
yarn add --dev nuxt-stories # or 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:
npm i -D glob pify @nuxt/utils bootstrap bootstrap-vue dompurify gently-copy gray-matter highlight.js marked nuxt-socket-io node-sass sass-loader
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.
- Add
nuxt-stories
to thebuildModules
section ofnuxt.config.js
{
buildModules: [
'nuxt-stories'
],
stories: {
/* stories options here */
}
}
Also make sure you have Vuex enabled the "Nuxt way", since nuxt-stories will register a vuex module for persisting stories, table of contents and selected view mode. After you install nuxt-stories, a postinstall script will automatically try to create the following for you, if your store hasn't yet been enabled:
store/index.js:
export const state = () => ({})
If this already exists, it won't get overwritten.
- 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.