nuxt 3 component witdh storybook no components found

[productdevbook]

[unplugin-vue-components] no components found

const path = require('path')
const Components = require('unplugin-vue-components/vite')
const AutoImport = require('unplugin-auto-import/vite')
const { loadConfigFromFile, mergeConfig } = require('vite')

module.exports = {
    stories: [
        '../stories/**/*.stories.mdx',
        '../stories/**/*.stories.ts',
        '../components/**/*.stories.ts',
    ],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        'storybook-dark-mode',
        {
            name: '@storybook/addon-postcss',
            options: {
                cssLoaderOptions: {
                    importLoaders: 1,
                },
                postcssLoaderOptions: {
                    implementation: require('postcss'),
                }
            }
        }
    ],
    core: {
        builder: 'storybook-builder-vite'
    },
    async viteFinal(config, { configType }) {
        config.plugins = config.plugins ?? []
        config.plugins.push(AutoImport({
            imports: [
                'vue',
                'vue-router',
            ],
            dts: '.nuxt/auto-imports.d.ts',
        }))
        config.plugins.push(Components({
            extensions: ['vue'],
            include: [/\.vue$/, /\.vue\?vue/],
            dts: '.nuxt/components.d.ts',
        }))
        return {
            ...config,
            resolve: {
                alias: {
                    '@': `${path.resolve(__dirname, '..')}/`,
                    '@/': `${path.resolve(__dirname, '..')}/`,
                    'vue': 'vue/dist/vue.esm-bundler.js',
                },
            }
        }
    }
}

[antfu]

You'd better specify the dirs explicitly with absolute paths. Probably something relates to storybook's root integration

[productdevbook]

dirs is problem fixed. Thank you. If nuxt reads the output components.d.ts file, it always creates itself. How do I do this?

[productdevbook]

const path = require('path')
const Components = require('unplugin-vue-components/vite')
const AutoImport = require('unplugin-auto-import/vite')
const { loadConfigFromFile, mergeConfig } = require('vite')

module.exports = {
    stories: [
        '../stories/**/*.stories.mdx',
        '../stories/**/*.stories.ts',
    ],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        'storybook-dark-mode',
        '@storybook/addon-a11y',
        {
            name: '@storybook/addon-postcss',
            options: {
                cssLoaderOptions: {
                    importLoaders: 1,
                },
                postcssLoaderOptions: {
                    implementation: require('postcss'),
                }
            }
        }
    ],
    framework: "@storybook/vue3",
    core: {
        builder: 'storybook-builder-vite'
    },
    async viteFinal(config, { configType }) {
        config.plugins = config.plugins ?? []
        config.plugins.push(AutoImport({
            imports: [
                'vue',
                'vue-router',
            ],
            dts: '.storybook/auto-imports.d.ts',
        }))
        config.plugins.push(Components({
            dirs: ['components'],
            directoryAsNamespace: true,
            dts: '.storybook/components.d.ts',
        }))
        return {
            ...config,
            resolve: {
                alias: {
                    ...config.resolve.alias,
                    '@': `${path.resolve(__dirname, '..')}/`,
                    'vue': 'vue/dist/vue.esm-bundler.js',
                },
            }
        }
    }
}

[medairbit]

@productdevbook did you find a workaround for this?

[productdevbook]

@productdevbook did you find a workaround for this?

No