imports for storybook stories #365
Description
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
}