How to use the @storybook/vue.addDecorator function in @storybook/vue

import { addDecorator, configure } from '@storybook/vue'
import { withOptions } from '@storybook/addon-options'
import { withKnobs } from '@storybook/addon-knobs'

function requireAll (requireContext) {
  return requireContext.keys().map(requireContext)
}

function loadStories () {
  requireAll(require.context('..', true, /^((?![\\/]node_modules|vendor[\\/]).)*\.story\.js?$/))
}

// Option defaults:
addDecorator(
  withOptions({
    /**
     * name to display in the top left corner
     * @type {String}
     */
    name: 'Podlove Components',
    /**
     * URL for name in top left corner to link to
     * @type {String}
     */
    url: '#',
    /**
     * show story component as full screen
     * @type {Boolean}
     */
    goFullScreen: false,

}
})

// Require all the .stories.js files from all components
const req = require.context('@/components', true, /.stories.js$/)

function loadStories () {
  req.keys().forEach((filePath) => {
    const componentName = filePath.replace(/^.+\/([^/]+)\/index.stories.js/, '$1')
    const component = req(filePath)
    Vue.component(componentName, component)
    return component
  })
}

addDecorator(StoryRouter())

configure(loadStories, module)

import { configure, setAddon, addDecorator } from '@storybook/vue';
import { setOptions } from '@storybook/addon-options';
import VueInfoAddon from 'storybook-addon-vue-info';
import Vue from 'vue';
import Carvue from '../components';

addDecorator(VueInfoAddon);

Vue.config.productionTip = false;

Vue.use(Carvue);

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.js$/);
function loadStories() {
  req.keys().forEach((filename) => req(filename));
}

// Option defaults:
setOptions({
  /**
   * name to display in the top left corner
   * @type {String}

import { configure, addDecorator } from '@storybook/vue'
import { setOptions as masterOptions } from '@storybook/addon-options'
import { setDefaults as infoOptions } from '@storybook/addon-info'
import { withDocs, withReadme } from 'storybook-readme'
import { withConsole } from '@storybook/addon-console'
import { withKnobs } from '@storybook/addon-knobs/dist/vue'

// import centered from '@storybook/addon-centered'

import Readme from '../README.md'
import Footer from '../FOOTER.md'

// const optionsCallback = (options) => ({ panelExclude: [...options.panelExclude, /Warning/] })
// addDecorator((storyFn, context) => withConsole(optionsCallback)(storyFn)(context))

addDecorator(withReadme(Readme))
withDocs.addFooter(Footer)

/** WIP: @since https://github.com/storybooks/storybook/issues/2560 so wait to resolve 
@func addDecorator(withKnobs)
*/

// addDecorator(centered) // BUG: Cannot add property components, object is not extensible (Vue Component not supported)
masterOptions({
  name: 'vue-authoring-template',
  url: '#',
  showLeftPanel: true,
  downPanelInRight: true,
  hierarchySeparator: /\/|\./
})

/** BUG: Vue Component not yet supported

import Vue from 'vue';
import { configure, addDecorator } from '@storybook/vue'; // eslint-disable
import apolloStorybookDecorator from '../../src';
import typeDefs from '../schema/typeDefinitions';
import mocks from '../schema/mocks';

addDecorator(
  apolloStorybookDecorator({
    typeDefs,
    mocks,
    Vue,
  })
);

function loadStories() {
  require('../stories/index.js'); // eslint-disable
}

configure(loadStories, module);

import { configure, addDecorator } from '@storybook/vue'
import { withA11y } from '@storybook/addon-a11y'
import { withKnobs } from '@storybook/addon-knobs'
import { withTemplate } from '~storybook/addon-show-vue-markup'
import { withVuetify } from '~storybook/addon-vuetify'

addDecorator(withA11y)
addDecorator(withKnobs)
addDecorator(withTemplate)
addDecorator(withVuetify)

configure(require.context('../stories', true, /\.stories\.js$/), module)

import { configure, addDecorator } from '@storybook/vue'
import { withA11y } from '@storybook/addon-a11y'
import { withKnobs } from '@storybook/addon-knobs'
import { withTemplate } from '~storybook/addon-show-vue-markup'
import { withVuetify } from '~storybook/addon-vuetify'

addDecorator(withA11y)
addDecorator(withKnobs)
addDecorator(withTemplate)
addDecorator(withVuetify)

configure(require.context('../stories', true, /\.stories\.js$/), module)

import { configure, addDecorator } from '@storybook/vue'
import { withA11y } from '@storybook/addon-a11y'
import { withKnobs } from '@storybook/addon-knobs'
import { withTemplate } from '~storybook/addon-show-vue-markup'
import { withVuetify } from '~storybook/addon-vuetify'

addDecorator(withA11y)
addDecorator(withKnobs)
addDecorator(withTemplate)
addDecorator(withVuetify)

configure(require.context('../stories', true, /\.stories\.js$/), module)

import { withA11y } from "@storybook/addon-a11y";

import theme from "./theme";

import "../../src/css/_all.scss";

const req = require.context("../../src/", true, /.stories.js$/);

function PaddingDecorator() {
  return {
    template: '<div style="padding: 20px"></div>'
  };
}

addDecorator(PaddingDecorator);
addDecorator(withA11y);

addParameters({
  options: {
    brandTitle: "StorefrontUI",
    showPanel: true,
    isToolshown: true,
    theme,
    sortStoriesByKind: true
  }
});

function loadStories() {
  require("./home/home.js");
  req.keys().forEach(filename =&gt; req(filename));
}

import Vue from 'vue'
import { Button } from 'evergarden'
import { addDecorator } from '@storybook/vue'
import { action } from '@storybook/addon-actions'
import { withKnobs, text, select, boolean } from '@storybook/addon-knobs'

addDecorator(withKnobs)

const variantColors = {
  label: 'Variants',
  options: ['green', 'red', 'cyan', 'orange', 'blue'],
  defaultValue: 'green'
}

const sizes = {
  label: 'Sizes',
  options: ['xs', 'sm', 'md', 'lg'],
  defaultValue: 'md'
}

export default { title: 'Button' }

export const basic = () => ({