Storybook: Cannot add property components, object is not extensible

[samit4me]

Describe the bug
Installed @storybook/addon-info to work with a Vue app, but I've been unable to get it working as it seems to break storybook as it renders the error Cannot add property components, object is not extensible.

I've tried to use addDecorator in config.js (breaks all stories) and also inside a single story (breaks just that story).

Also uninstall all other addon's and went back to a clean storybook install but still running into the same issue.

Screenshots

Code snippets

// .storybook/config.js

import '@storybook/addon-console';
import { addDecorator, configure } from '@storybook/vue';
import { withInfo } from '@storybook/addon-info';

// Import plugins.
import Vue from 'vue';
import Vuex from 'vuex';

// Install plugins.
Vue.use(Vuex);

// Storybook Info Addon
// https://github.com/storybooks/storybook/tree/master/addons/info#storybook-info-addon
addDecorator(withInfo);

// Load stories, display order determined by import order.
const req = require.context('../src', true, /.stories.js$/);
function loadStories() {
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);

// my.stories.js

import { storiesOf } from '@storybook/vue';

import Button from './button';

storiesOf('Components/Atoms/Button', module)
  .add('default', () => ({
    template: `
      <Button @onClick="onClick">Default Button</Button>
    `,
    components: { Button },
  }));

// button.vue

<template>
  <Component
    :is="element"
    :class="buttonClasses"
    v-bind="attributes"
    @click="$emit('onClick')"
  >
    <slot />
  </Component>
</template>

<script>
export default {
  name: 'Button',
  props: {
    href: { type: String, default: '' },
    primary: { type: Boolean, default: false },
  },
  computed: {
    element() {
      return this.href ? 'a' : 'button';
    },
    buttonClasses() {
      return {
        button: true,
        primary: this.primary,
        secondary: !this.primary,
      };
    },
    attributes() {
      return {
        ...(this.href ? { href: this.href, target: '_blank' } : {}),
      };
    },
  },
};
</script>

System:

• OS: MacOS
• Device: Macbook Pro 2018
• Browser: chrome
• Framework: vue
• Addons: addon-info
• Version: 4.0.4

Would absolutely ❤️ to use this plugin as it's one of the main attractions to storybook for us. Please let me know if there is anything I can to do to help.

[igor-dv]

The official addon-info is platform specific, and currently has only React implementation
https://github.com/storybooks/storybook/blob/next/ADDONS_SUPPORT.md

But you can use this one https://github.com/pocka/storybook-addon-vue-info =)

[samit4me]

Oh, so sorry about that, I thought I checked that table too. Is there any plans on supporting vue or should I close this issue? Thanks for the other suggestion 👍

[igor-dv]

We have this - #4341 that should replace the addon-info. No ETA though. Currently, there is no interest/focus of the maintainers to support the addon-info for each framework, but it's opened for PRs of course 😉

[lloydjatkinson]

I think this needs to be noted somewhere in the docs - spent a few hours debugging this not realising it didn't support Vue.

[hipstersmoothie]

@lloydjatkinson seems like a good opportunity for a tiny PR! Don't worry they get merged quick round here