Storybook Addon vue-playroom

Usage

1.install

npm install --save-dev storybook-addon-vue-playroom

// .storybook/main.js
export default {
  addons: ['storybook-addon-vue-playroom']
};

2.configuration

// *.stories or global preview

interface Playroom {
  code: string; // 'you code';
  url: string; // 'playroom url';
  delay?: 1000; // init delay, default: 1000;
  mode?: 'dark' | 'light';
}

parameters: {
  playroom: Playroom;
}

3.compile vue-playroom && set playroom url

• clone vue-playroom to local

• set importMap and init files

• complie

  • npm run build | dev

  • default url -> /playroom

tips

• In the prod env, Copy the build file to your storybook build directory

• In the dev env, Browser same-origin policy must be turned off or The storybook must be on the same domain port as Vue-playroom

  chrome | edge: "xxxx\msedge" --disable-web-security --user-data-dir="xxx"

other

• disable playroom tab:

parameters: {
  previewTabs: {
    ['storybook/vue-playroom-addon/tab']: {
      hidden: true
    }
  }
}