Vue on Storybook

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!