Usage

First, we need to add the stories for our components, by default @nuxtjs/storybook will look into ~/components/**/*.stories.js.

components/
  Link.vue
  Link.stories.js
pages/
  index.vue
nuxt.config.js

The example below assumes you have the components: true option set in nuxt.config. If not, you will need to import the components yourself.

<template>
  <nuxt-link to="https://nuxtjs.org">
    NuxtJs
  </nuxt-link>
</template>
export default {
  title: 'Link'
}

export const NuxtWebsite = () => '<Link />'

Then we can run the development command with npx nuxt storybook and go to http://localhost:3003, you will see our first story:

nuxt-storybook-screenshot

You can extend where @nuxtjs/storybook will load the stories in the stories option.

Learn more about writing stories for your Vue components on Storybook official documentation.

Edit this page on GitHub Updated at Wed, Apr 14, 2021