Import component from NUXT3 project directory to another in monorepo

Viewed 204

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>
0 Answers
Related