Nuxt Stories

Theme by Richardeschloss

|

Updated: 20 Jun 2023

|

91 Stars

Nuxt stories module -- Painless (and now insanely fast) storybooking for Nuxt

Categories

Overview:

The npmnpmNPM📖 Release Notesnuxt-stories is a tool that aims to provide painless and fast storybooking experience for Nuxt. It offers a range of features such as live markdown editing, instant compiling of Vue components, auto importing of components, and more. With npmnpmNPM📖 Release Notesnuxt-stories, developers can easily create and manage stories for their Nuxt projects.

Features:

• Insanely fast configuration and usage: One install and one line in the configuration is all it takes to start using npmnpmNPM📖 Release Notesnuxt-stories.
• Live markdown editing and previewing on the UI: Allows developers to edit and preview markdown directly on the UI, with faster performance than Hot Module Reloading.
• Auto saving of UI-written stories: Automatically saves stories written on the UI back to the filesystem (only in local development).
• Easily toggle view mode: Conveniently toggle the view mode in the stories header.
• Instant compiling of Vue components: Components are compiled instantly as developers type them on the UI.
• Ordering of stories using story frontMatter: Stories can be ordered using story frontMatter.
• Instant updating of table of contents: The table of contents is updated instantly as headers are typed.
• Auto importing of components: Components can be auto-imported by placing them in the components directory.
• Emoji support: Supports the use of emojis in the UI.
• Built-in json viewer: Provides a built-in json viewer to see the tree (using <json :data="[your data]"/>).
• Perfect development tool for notes and documentation: Ideal for jotting down notes, gameplans, or even writing official documentation that is functional.
• Built-in fetch: Comes with built-in fetch capability for quick data fetching, client-side or server-side, within the story (available from v2.0.13+).
• Component browser and style editor: Features a component browser and style editor with direct integration with Google fonts.

Installation:

To install npmnpmNPM📖 Release Notesnuxt-stories, follow these steps:

1. Add the nuxt-stories dependency to your project.
   • For Nuxt 3.x, use the following command:

     npm install nuxt-stories
     

   • For Nuxt 2.x, use the following command:

     npm install nuxt-stories@2.0.0
     

2. Install any additional dependencies if they were not installed during the initial creation of your Nuxt app.
3. Once installed, the postinstall script will run and copy sample stories, assets, and layouts to your workspace. It will also create a “components” directory if it does not already exist.
4. Add nuxt-stories to the buildModules section of your nuxt.config.js file.
5. You’re good to go! Try it out by viewing your stories running on your local dev server: http://localhost:3000/stories.

Summary:

The npmnpmNPM📖 Release Notesnuxt-stories is a powerful tool that simplifies storybooking for Nuxt projects. It offers a wide range of features such as live markdown editing, instant compiling of Vue components, auto importing of components, and much more. With its easy installation and convenient usage, npmnpmNPM📖 Release Notesnuxt-stories provides developers with an efficient and effective solution for creating and managing stories in Nuxt.