CODEWITHSUNDEEP
vue.jsnuxt.jsstorybook
jpskgc
jpskgc

Reputation: 777

How to display Story in Storybook

Summery

I"ve tried to implement Storybook in Nuxt.js application.
I successed to run Storybook. And I wrote index.vue and index.stories.ts.
But Storybook does not show any Story.

enter image description here

So I want to know how to actually display Story.

Show some code

index.vue

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

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({})
export default class TestComponent extends Vue {}
</script>

index.stories.ts

import Test from './index.vue'

export default {
  component: Test,
  title: 'Components/Test'
}

export const Component = () => ({
  components: { Test },
  template: '<Test />'
})

Also I wrote ./storybook/config.js for settings.

import { configure } from '@storybook/vue';

const req = require.context('../components', true, /.stories.ts$/);
function loadStories() {
  req.keys().forEach(filename => {
    return req(filename)
  });
}

configure(loadStories, module);

Here is the actual repository. Please check. https://github.com/jpskgc/nuxt-sample/tree/storybook-error

Upvotes: 1

Views: 721

Answers (1)

jpskgc
jpskgc

Reputation: 777

I resolved this problem by adding .storybook/main.js instead of .storybook/config.js.

module.exports = {
  stories: ['../components/**/*.stories.ts'],
};

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-configure

Upvotes: 1

Related Questions