Nuxt.js项目中Storybook运行正常但无法显示Story该如何解决

问题概述 #

我尝试在Nuxt.js应用中集成Storybook，目前已成功启动Storybook服务，且已编写对应的index.vue组件文件和index.stories.ts配置文件，但Storybook界面未展示任何已编写的Story。

因此想要咨询如何配置才能正常显示Story。

相关代码 #

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配置文件./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);

解决方案 #

修改以下几处配置即可正常展示Story：

1. 补全Storybook主配置文件
   你当前使用的config.js是旧版Storybook的配置方式，6.x及以上版本的Storybook需要在.storybook目录下新增main.js文件，指定story文件的匹配规则：

module.exports = {
  stories: ['../components/**/*.stories.ts'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links']
}

2. 处理Nuxt内置组件识别问题
   nuxt-link是Nuxt专属组件，Storybook独立运行时没有对应的组件注册，你可以选择在Story中mock该组件，或者临时替换为原生a标签测试。如果要保留nuxt-link，需要在Storybook的预览配置（.storybook/preview.js）中全局注册模拟的nuxt-link：

import Vue from 'vue'
Vue.component('nuxt-link', {
  props: ['to'],
  template: '<a :href="to"><slot /></a>'
})

3. 调整Story导出格式（适配7.x及以上版本Storybook可选）
   如果你的Storybook版本为7.x及以上，需要将stories的导出格式调整为CSF3格式，修改index.stories.ts如下：

import Test from './index.vue'

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

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

4. 校验路径规则
   确认你的stories文件确实存放在components目录下，require.context的第一个路径参数是相对.storybook目录的相对路径，如果你调整过目录结构需要对应修改路径。

修改完成后重启Storybook服务即可在左侧导航栏的Components/Test分类下看到对应的组件预览。

内容的提问来源于stack exchange，提问作者jpskgc