Vue on Storybook

38bee248082f6071230de65e9d74a944?s=47 kazupon
June 27, 2017

Vue on Storybook

Node gakuen #26 in Japan

38bee248082f6071230de65e9d74a944?s=128

kazupon

June 27, 2017
Tweet

Transcript

  1. Vue on Storybook Node Gakuen #26 2017-06-28 @kazupon

  2. Who are you ?

  3. kazupon Vue.js Core Team Vue.js japan users group organizer vue-i18n,

    vue docs maintainer CUUSOO SYSTEM CTO @kazu_pon kazupon
  4. [PR]

  5. 2017-07-07

  6. Vue.js v-meetup #4 https://vuejs-meetup.connpass.com/event/58071/

  7. Reporting about VueConf https://conf.vuejs.org

  8. We are hiring!! Front-end engineer Wanted!! 
 Let’s building Open

    Innovation Platform!! http://www.cuusoo.co.jp
  9. Introduction ⛩

  10. What’s Storybook?

  11. None
  12. Oops! I’m so sorry!

  13. What’s Storybook? https://storybook.js.org

  14. Storybook histories • Apr 2016 : Release “React Storybook” (Storybook

    1.0) • Sep 2016 : Release as “Storybook” (Storybook 2.0) • Dec 2016 : Kadira Shut Down • Jan 2017 : Storybook development Idle • Mar 2017 : Provocative GitHub Issue #731 • Apr 2017 : Kick-off Commutiby based Open Source Project • May 2017 : Release Storybook 3.0 https://medium.com/storybookjs/the-storybook-story-dd3c1ab0d2ce
  15. For Vue.js ?

  16. vue-play • Inspired by Storybook https://github.com/vue-play

  17. 2017-05-28

  18. Posted issue #64 on vue-play https://github.com/vue-play/vue-play/issues/64

  19. None
  20. Other Frameworks or Libraries !?

  21. Saw Roadmap of Storybook

  22. None
  23. None
  24. WoW!! That’s interesting!!

  25. Feature Request on Storybook https://github.com/storybooks/storybook/issues/1262

  26. Need to help! https://twitter.com/left_pad/status/874273519764463618

  27. Joined as Collaborator

  28. How to support Vue on Storybook

  29. Storybook Architecture Preview (iframe) Manager 2 Entry Points !! podda

    (store) store
  30. Render preview via postMessage Preview (iframe) Manager podda (store) store

    3. postMessage 1. Select 2. handle story 4. get story 5. render component
  31. How to render Vue Components in Preview

  32. Replace React to Vue Preview (iframe) Manager podda (store) store

  33. So that’s it?

  34. Preview for React error-display root

  35. Preview for Vue error-display root

  36. https://twitter.com/kazu_pon/status/876482321578303488

  37. DEMO

  38. Addon are supported? • Current Support addons: • addon-actions •

    addon-links • addon-knobs • addon-notes • In other addons, will be supported since 3.2
  39. Storybook 3.2 Coming soon …

  40. Conclusion

  41. Conclusion • Since Storybook 3.2, you'll be able to use

    the Vue components. • You’ll be able to accelerate development efficiency. • I have some ideas of Storybook for Vue. • I’ll try to contribution as Storybook team member.
  42. Thanks!