В настоящее время я работаю над компонентом, который использует другой внутри него, и дочерний компонент не отображается на панели. Я попытался установить компоненты: true в конфигурации nuxt, но это не сработало.
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,
},
};
предварительный просмотр.js
import '../assets/sass/global.sass';
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
Я попытался установить компоненты: true в конфигурации nuxt, потому что я читал этот выпуск https://github.com/nuxt-community/storybook/issues/233, но я думаю, что это может быть ошибка nuxt 3.
Вы должны добавить плагины autoimport и components vite в свою конфигурацию.
npm i -D unplugin-auto-import unplugin-vue-components
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 из 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)),
},
},
});