Vue.js Single File Components++

Vue.js Single File Components++ Meguro.es x Gontanda.js #1 2017-04-28 @kazupon

Who are you ?

Vue.js Core Team member https://github.com/kazupon

Introduction

• All in one file Single File Components .vue <HTML>
{CSS} ({JS}) Scoped CSS CSS Modules ES2015 in template

• Alternative language implementation Single File Components .vue

Single File Components • Include from HTML/CSS/JS Files .vue <HTML>
{CSS} ({JS})

Provide oﬀicial some tools .vue vue-loader rollup-plugin-vue vueify bundling bundling
({JS})

So, Very useful!

Released new feature !! • In vue-loader v10.2, it was
published https://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!!

Custom Blocks

What’s Custom Blocks ? • Block of Single File Components
that defined with User. <blog> - - - title - - - bla bla bla … bla bla bla … </blog>

Custom Blocks Use cases • Documentation • Localization • Unit
Testing • Example playground • … etc

Documentation .vue .vue .vue .md vue-loader extract

Localization .vue ⚙ plugin vue-loader bundling ({JS}) hello run

Unit Testing .vue vue-loader bundling ({JS}) ✅ test1 : OK
✅ test2 : OK ❌ test3 : NG run

Example Playground .vue vue-loader bundling ({JS}) run playground runtime ⚙

Custom Blocks Real World

Localization with vue-i18n https://kazupon.github.io/vue-i18n/en/sfc.html message: 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

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 components with
custom blocks • Depending on your idea, you can make your single file components even more useful !

One more thing …

Vue.js community for Japanese • You can join via Vue.js
oﬀicial site  http://jp.vuejs.org   

genba.fm #1 • 2017/05 GW later, speak about Vue.js  https://genba.fm

Thanks!

Vue.js Single File Components++

Vue.js Single File Components++

More Decks by kazupon

Other Decks in Programming

Featured

Transcript