Vue组件在使用@storybook/vue3在Nuxt 3中的Storybook面板中未呈现。

huangapple go评论104阅读模式
英文:

Vue components not rendering in Storybook panel with Nuxt 3 using @storybook/vue3

问题

以下是您要翻译的内容:

我目前正在开发一个组件,它内部使用了另一个组件,但子组件未在面板中呈现。我尝试在Nuxt配置中设置components: true,但没有奏效。

main.js

/** @type { import('@storybook/vue3-vite').StorybookConfig } */
module.exports = {
  stories: ['../components/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: '@storybook/vue3-vite',
  core: {
    disableTelemetry: true,
  },
  features: {
    storyStoreV7: true,
  },
};

preview.js

import '../assets/sass/global.sass';

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

我尝试在Nuxt配置中设置components: true,因为我看到了这个问题:https://github.com/nuxt-community/storybook/issues/233,但我认为这可能是Nuxt 3的错误。

英文:

I am currently working on a component that uses another within it, and the child component is not rendering in the panel. I tried setting components: true in nuxt config but it didn't work.

main.js

/** @type { import('@storybook/vue3-vite').StorybookConfig } */
module.exports = {
  stories: ['../components/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: '@storybook/vue3-vite',
  core: {
    disableTelemetry: true,
  },
  features: {
    storyStoreV7: true,
  },
};

preview.js

import '../assets/sass/global.sass';

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  
}

I tried setting components: true in nuxt config because i read this issue https://github.com/nuxt-community/storybook/issues/233 but i think it might be a nuxt 3 error.

答案1

得分: 1

你需要将 autoimportcomponents vite 插件添加到你的配置文件中。

.storybook/main.js 文件中,你需要添加以下导入语句:

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';

vite.config.ts 文件中,你已经包含了这些插件:

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';

请确保你的配置文件中包含这些插件以便正确运行。

英文:

You have to add autoimport and components vite plugins to your config.

npm i -D unplugin-auto-import unplugin-vue-components

.storybook/main.js

import path from 'path'
import { loadConfigFromFile, mergeConfig } from 'vite'

export default {
  stories: ['../components/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: '@storybook/vue3-vite',
  core: {
    disableTelemetry: true,
  },
  features: {
    storyStoreV7: true,
  },

  async viteFinal(baseConfig) {
    const { config: userConfig } = await loadConfigFromFile(
      path.resolve(__dirname, "../vite.config.ts")
    )

    return mergeConfig(baseConfig, userConfig)
  }
}

vite.config.ts

Separate config for vite. Unfortunately, I could not find a way how to use the built in vite config from nuxt.config.ts.

import { fileURLToPath } from 'url';
import { defineConfig } from 'vite';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router'],
      dirs: ['./composables'],
      vueTemplate: true,
    }),
    Components({
      dirs: ['./components/'],
      dts: true,
      directoryAsNamespace: true,
    }),
  ],
  resolve: {
    alias: {
      '~': fileURLToPath(new URL('./', import.meta.url)),
    },
  },
});

huangapple
  • 本文由 发表于 2023年4月13日 16:29:36
  • 转载请务必保留本文链接:https://go.coder-hub.com/76003291.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定