Vue components not rendering in Storybook panel with Nuxt 3 using @storybook/vue3

Question

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.

Answer 1

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)),
    },
  },
});