Storybook: Decorators for Vue stories

[miljan-aleksic]

Hi, I wasn't able to make work decorators when using Vue Stories and the documentation only reference an react example.

Are those supported?

[kazupon]

WIP now.
https://github.com/storybooks/storybook/pull/1595

[kazupon]

close due to released v3.2.8
https://github.com/storybooks/storybook/releases/tag/v3.2.8

[smiller171]

@kazupon I can't find any documentation for how to actually _use_ decorators with Vue...

[adi-zz]

@smiller171, for decorators with Vue, try:

// .storybook/stories/index.js 

import YourButton from 'path/to/YourButton.vue'

function Reded() {
  return {
    template: '<div style="color: red;"><story/></div>',
  }
}

storiesOf('YourButton', module)
  .addDecorator(Reded)
  .add('default form', () => ({
    components: {YourButton },
    template:   '<YourButton  />',
  }))

[belvederef]

This should be added to the documentation. It was actually an effort to find this here.

For anyone looking for a solution similar to the one shown in the docs, I solved with:

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

// Decorator to center-align all stories
addDecorator(() => ({
  template: '<div style="textAlign: center"><story/></div>',
}));

[Inframatic]

@adi-zz This is good to add a decorator in my story but what about for pre-existing decorators in scss files.

For example, in Vue.js I have @import "~theme/colors.scss";, which returns me the error: Module parse failed: Unexpected character '@'