如何在 Storybook 中显示 Story

Question

夏天

我已经尝试在 Nuxt.js 应用程序中实现 Storybook。
我成功了运行 Storybook。我写了 index.vue 和 index.stories.ts.
但是 Storybook 没有显示任何故事。

所以我想知道如何实际显示故事。

显示一些代码

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 />'
})

设置我也写了./storybook/config.js

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);

这是实际的存储库。请检查。 https://github.com/jpskgc/nuxt-sample/tree/storybook-error

Answer 1

我通过添加 .storybook/main.js 而不是 .storybook/config.js 解决了这个问题。

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

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

如何在 Storybook 中显示 Story

How to display Story in Storybook

vue.js

nuxt.js

storybook

夏天

显示一些代码