I am trying to import component from Nuxt3 project to another which has Storybook
Button.vue component
// /projects/marketplace/components/Button.vue
<template>
<a-button type="button" :class="classes">{{ label }}</a-button>
</template>
//a-button is an Ant Design Vue UI Framework component
<script>
//imports
export default {
name: 'my-button',
props: { ... },
setup() { ... },
};
</script>
Button.stories.js component
// /projects/shared_components/src/stories/Button.stories.js
import MyButton from '../../../marketplace/components/Button.vue';
export default {
title: 'Example/Button',
component: MyButton,
argTypes: {
backgroundColor: { control: 'color' },
onClick: {},
size: {
control: { type: 'select' },
options: ['small', 'medium', 'large'],
},
},
};
const Template = (args) => ({
components: { MyButton },
setup() {
return { args };
},
template: '<my-button v-bind="args" />',
});
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Button',
};
When I run Storybook it does not render button.vue component.
In browser console shows a warning resolveComponent can only be used in render() or setup(). and
runtime-core.esm-bundler.js:38 [Vue warn]: Invalid VNode type: Symbol(Text) (symbol)
at <MyButton primary=true label="Button" onClick=fn<mockConstructor> >
at <Anonymous>
at <Anonymous>
at <App>