英文:
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
你需要将 autoimport 和 components 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)),},},});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论