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 .

Link.vue

<template>
  <nuxt-link to="https://nuxtjs.org">
    NuxtJs
  </nuxt-link>
</template>

Link.stories.js

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.