meguro.es x gotanda.js #1
Vue.jsSingle File Components++Meguro.es x Gontanda.js #12017-04-28@kazupon
View Slide
Who are you ?
Vue.js Core Team memberhttps://github.com/kazupon
Introduction
• All in one fileSingle File Components.vue{CSS}({JS})Scoped CSSCSS ModulesES2015in template
• Alternative language implementationSingle File Components.vue
Single File Components• Include from HTML/CSS/JS Files.vue{CSS}({JS})
Provide official some tools.vuevue-loaderrollup-plugin-vue vueifybundlingbundling ({JS})
So, Very useful!
Released new feature !!• In vue-loader v10.2, it was publishedhttps://github.com/vuejs/vue-loader/commit/7d3e005d56781e8e5e4ae8f90212f782e4b3a509
And from v11.3 later• It become available used in components!https://github.com/vuejs/vue-loader/commit/11cec30eb3925a144e1d484357b13c501d5fb3f9
Exciting feature!!
CustomBlocks
What’s Custom Blocks ?• Block of Single File Components thatdefined with User.- - -title- - -bla bla bla …bla bla bla …
Custom Blocks Use cases• Documentation• Localization• Unit Testing• Example playground• … etc
Documentation.vue.vue.vue.mdvue-loaderextract
Localization.vue⚙pluginvue-loaderbundling({JS})hellorun
Unit Testing.vuevue-loaderbundling({JS})✅ test1 : OK✅ test2 : OK❌ test3 : NGrun
Example Playground.vuevue-loaderbundling({JS})runplaygroundruntime⚙
Custom BlocksReal World
Localization with vue-i18nhttps://kazupon.github.io/vue-i18n/en/sfc.htmlmessage: hello world !!
Blog with ream (example)http://unvue-custom-block.surge.sh
vue-play (be planning)https://github.com/vue-play/vue-play/issues/5
DEMO
How to use
configure webpack conf
Available in Components• you need a custom loader
configure custom loader
Reference• vue-loader documentation https://vue-loader.vuejs.org
Conclusion
Conclusion• You can extend the single file componentswith custom blocks• Depending on your idea, you can make yoursingle file components even more useful !
One more thing …
Vue.js community for Japanese• You can join via Vue.js official site http://jp.vuejs.org
genba.fm #1• 2017/05 GW later, speak about Vue.js https://genba.fm
Thanks!