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