vue3 auto import problem

[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',
                },
            }
        }
    }
}

[Didza]

Experiencing the same issue with Nuxt 3.

[IanVS]

Hi, I'm not very familiar with vue3 auto imports, or what the issue here is. Can someone please explain the problem, how it's supposed to work, and what's happening instead?

[productdevbook]

Hi, I'm not very familiar with vue3 auto imports, or what the issue here is. Can someone please explain the problem, how it's supposed to work, and what's happening instead?

we used, and add settings storybook settings. https://github.com/antfu/unplugin-auto-import https://github.com/antfu/unplugin-vue-components

[justMikhail]

Experiencing the same issue with Nuxt 3.

[JoJk0]

I use them both and have no issues with latest storybook vue 3 vite config. Maybe try adding separate vite.config.ts inside .storybook folder instead of using viteFinal property? It loads in the config automatically.

Also, alternatively you might have an issue with path of components as they point to components inside .storybook

        config.plugins.push(Components({
            dirs: ['components'],
            directoryAsNamespace: true,
            dts: '.storybook/components.d.ts',
        }))

So this:

            dirs: ['components'],

Can be changed to

            dirs: ['../src/components'],

Or wherever you keep the components.

You can also try adding

     ...
    AutoImport({
       ...
      dirs: [
        './src/components',
      ],
      vueTemplate: true,
       ...
    }),
     ...

in your vite config.

Let me know if any of these solutions work.

[IanVS]

It loads in the config automatically.

Note, this is only true in Storybook 7.0.