Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Vue on Storybook
kazupon
June 27, 2017
Programming
4
4k
Vue on Storybook
Node gakuen #26 in Japan
kazupon
June 27, 2017
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
1
240
Vue with Vite
kazupon
2
1.9k
State of Vue I18n
kazupon
3
260
まちにまった Vue.js 3
kazupon
14
4.9k
Native-ESM powered web dev build tool
kazupon
4
910
まもなくやってくる Vue.js 3
kazupon
38
18k
Vue.js 3 に向けた Vue.js 入門
kazupon
19
6.1k
Vue I18n 向けに ESLint プラグインを作った
kazupon
1
1.1k
Vue Fes Japan 2018 舞台裏について
kazupon
4
1.8k
Other Decks in Programming
See All in Programming
Update from the Elixir team - 2022
whatyouhide
0
200
書籍『良いコード/悪いコードで学ぶ設計入門』でエンジニアリングの当たり前を変える
minodriven
3
1.2k
LegalForceの契約データを脅かすリスクの排除と 開発速度の向上をどうやって両立したか
aibou
0
600
Jetpack Compose 頑張らないPreviewParameterProvider
horie23
0
110
Named Document って何?
harunakano
0
610
mrubyを1300円のボードで動かそう
yuuu
0
190
既存画面の Jetpack Composeでの書き換え: FAANSでの事例紹介 / Case study of rewriting existing screens with Jetpack Compose
horie1024
0
360
Cloud-Conference-Day-Spring Cloud + Spring Webflux: como desenvolver seu primeiro microsserviço reativo em Java?
kamilahsantos
1
170
[RailsConf 2022] The pitfalls of realtime-ification
palkan
0
370
Licences open source : entre guerre de clochers et radicalité
pylapp
2
380
OSS Forward Workshop
giginet
2
460
About Type Syntax Proposal
quramy
1
1.2k
Featured
See All Featured
KATA
mclloyd
7
8.6k
Facilitating Awesome Meetings
lara
29
3.9k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1k
Building an army of robots
kneath
299
40k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
Infographics Made Easy
chrislema
233
17k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
Code Reviewing Like a Champion
maltzj
506
37k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Transcript
Vue on Storybook Node Gakuen #26 2017-06-28 @kazupon
Who are you ?
kazupon Vue.js Core Team Vue.js japan users group organizer vue-i18n,
vue docs maintainer CUUSOO SYSTEM CTO @kazu_pon kazupon
[PR]
2017-07-07
Vue.js v-meetup #4 https://vuejs-meetup.connpass.com/event/58071/
Reporting about VueConf https://conf.vuejs.org
We are hiring!! Front-end engineer Wanted!! Let’s building Open
Innovation Platform!! http://www.cuusoo.co.jp
Introduction ⛩
What’s Storybook?
None
Oops! I’m so sorry!
What’s Storybook? https://storybook.js.org
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
For Vue.js ?
vue-play • Inspired by Storybook https://github.com/vue-play
2017-05-28
Posted issue #64 on vue-play https://github.com/vue-play/vue-play/issues/64
None
Other Frameworks or Libraries !?
Saw Roadmap of Storybook
None
None
WoW!! That’s interesting!!
Feature Request on Storybook https://github.com/storybooks/storybook/issues/1262
Need to help! https://twitter.com/left_pad/status/874273519764463618
Joined as Collaborator
How to support Vue on Storybook
Storybook Architecture Preview (iframe) Manager 2 Entry Points !! podda
(store) store
Render preview via postMessage Preview (iframe) Manager podda (store) store
3. postMessage 1. Select 2. handle story 4. get story 5. render component
How to render Vue Components in Preview
Replace React to Vue Preview (iframe) Manager podda (store) store
So that’s it?
Preview for React error-display root
Preview for Vue error-display root
https://twitter.com/kazu_pon/status/876482321578303488
DEMO
Addon are supported? • Current Support addons: • addon-actions •
addon-links • addon-knobs • addon-notes • In other addons, will be supported since 3.2
Storybook 3.2 Coming soon …
Conclusion
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.
Thanks!