Vue.js Single File Components++

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Who are you ?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Introduction

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

• Alternative language implementation Single File Components .vue

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

So, Very useful!

Slide 10

Slide 10 text

Released new feature !! • In vue-loader v10.2, it was published https://github.com/vuejs/vue-loader/commit/7d3e005d56781e8e5e4ae8f90212f782e4b3a509

Slide 11

Slide 11 text

And from v11.3 later • It become available used in components! https://github.com/vuejs/vue-loader/commit/11cec30eb3925a144e1d484357b13c501d5fb3f9

Slide 12

Slide 12 text

Exciting feature!!

Slide 13

Slide 13 text

Custom Blocks

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Custom Blocks Real World

Slide 21

Slide 21 text

Localization with vue-i18n https://kazupon.github.io/vue-i18n/en/sfc.html message: hello world !!

Slide 22

Slide 22 text

Blog with ream (example) http://unvue-custom-block.surge.sh

Slide 23

Slide 23 text

vue-play (be planning) https://github.com/vue-play/vue-play/issues/5

Slide 24

Slide 24 text

DEMO

Slide 25

Slide 25 text

How to use

Slide 26

Slide 26 text

configure webpack conf

Slide 27

Slide 27 text

Available in Components • you need a custom loader

Slide 28

Slide 28 text

configure custom loader

Slide 29

Slide 29 text

Reference • vue-loader documentation  https://vue-loader.vuejs.org

Slide 30

Slide 30 text

Conclusion

Slide 31

Slide 31 text

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 !

Slide 32

Slide 32 text

One more thing …

Slide 33

Slide 33 text

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