imports for storybook stories

[Sam Blowes]

Should storybook stories work by just adding the files to the include option in the config?

I tried the following, and whilst I can see the components.d.ts file correctly, and unplugin-vue-components is working correctly from within the .vue components, I'm not getting any auto imports working from within my stories themselves.

Please see example below

PGrid.stories.ts

import type { Meta, Story } from '@storybook/vue3'
import PGrid from './PGrid.vue'

export default {
  title: 'Portal/Grid',
  component: PGrid,
  args: {
    items: [{
        id: 1
        }]
  },
} as Meta

const Template: Story<Props> = args => ({
  components: { }, // <== note im not adding PGrid
  setup() {
    return {
      ...args,
    }
  },
  template: `
    <PGrid 
        :items="items"
    />
  `,// <== not working, PGrid not imported / loaded
})

webpack.config.js

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
module.exports = ({config, mode}) => {
  config.plugins.push(AutoImport({
    imports: [
      'vue',
      'vue-router',
      'vue-i18n',
      'vue/macros',
      '@vueuse/head',
      '@vueuse/core',
    ],
    dts: '.storybook/auto-imports.d.ts',
  }))
  config.plugins.push(Components({
    dirs: ['src/components', '.storybook/common'],
    extensions: ['vue'],
    include: [/\.vue$/, /\.vue\?vue/, /\.stories\.js$/, /\.stories\.ts$/],
    dts: '.storybook/components.d.ts',
  }))
  return config
}

[Yinzi]

I have the same issue. Are there any solutions?

[Ludwig Hubert]

@blowsie Did you manage to fix this?