Vue.js Single File Components++

38bee248082f6071230de65e9d74a944?s=47 kazupon
April 28, 2017
Programming
8
1.5k

Vue.js Single File Components++

meguro.es x gotanda.js #1

38bee248082f6071230de65e9d74a944?s=128

kazupon

April 28, 2017
Tweet

More Decks by kazupon

See All by kazupon
38bee248082f6071230de65e9d74a944?s=48 kazupon
14
3.9k
38bee248082f6071230de65e9d74a944?s=48 kazupon
3
480
38bee248082f6071230de65e9d74a944?s=48 kazupon
36
13k
38bee248082f6071230de65e9d74a944?s=48 kazupon
18
5.3k
38bee248082f6071230de65e9d74a944?s=48 kazupon
2
740
38bee248082f6071230de65e9d74a944?s=48 kazupon
4
1.5k
38bee248082f6071230de65e9d74a944?s=48 kazupon
2
500
38bee248082f6071230de65e9d74a944?s=48 kazupon
15
5.1k
38bee248082f6071230de65e9d74a944?s=48 kazupon
2
400

Other Decks in Programming

See All in Programming
D3be793aaf76ed1915295001712ce0f1?s=48 jrfk
0
1.6k
1a1d418bdf51cbf8fce1317f6c80a907?s=48 satoshi0212
3
110
55517518e318b28906211d115c24208b?s=48 clyang
0
480
9ec05c5a1b9b0ce9cd53ec3a63838b9a?s=48 yuuu
2
160
Bfb93c5dc0fde76ddac605bba0e1b642?s=48 sucitw
0
130
A760a90c9afd981004343b9861f1e8b4?s=48 daipresents
1
180
9e014a8c38462fcaf2c136e65837b348?s=48 free_world21
1
470
5ad0bb268dd2605b09165d464308cb7e?s=48 igaiga
2
120
19d7ae634445d4bd9b10c7961a462260?s=48 shu223
8
620
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
2
360
Da1305e5281b5208da85d14a356d01f3?s=48 taka1068
4
130
C61a5036d6b7b0529dcac43b411ead62?s=48 minaminao
2
120

Featured

See All Featured
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
284
110k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
164
18k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
769
190k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
196
19k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
202
35k
78b475797a14c84799063c7cd073962f?s=48 holman
287
130k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
84
7.7k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
60
2.4k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
281
46k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
326
35k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
53
6k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
478
150k

Transcript

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

  2. Who are you ?

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

  4. Introduction

  5. • All in one file Single File Components .vue <HTML>

    {CSS} ({JS}) Scoped CSS CSS Modules ES2015 in template

  6. • Alternative language implementation Single File Components .vue

  7. Single File Components • Include from HTML/CSS/JS Files .vue <HTML>

    {CSS} ({JS})

  8. Provide official some tools .vue vue-loader rollup-plugin-vue vueify bundling bundling

    ({JS})

  9. So, Very useful!

  10. Released new feature !! • In vue-loader v10.2, it was

    published https://github.com/vuejs/vue-loader/commit/7d3e005d56781e8e5e4ae8f90212f782e4b3a509

  11. And from v11.3 later • It become available used in

    components! https://github.com/vuejs/vue-loader/commit/11cec30eb3925a144e1d484357b13c501d5fb3f9

  12. Exciting feature!!

  13. Custom Blocks

  14. What’s Custom Blocks ? • Block of Single File Components

    that defined with User. <blog> - - - title - - - bla bla bla … bla bla bla … </blog>

  15. Custom Blocks Use cases • Documentation • Localization • Unit

    Testing • Example playground • … etc

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

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

  18. Unit Testing .vue vue-loader bundling ({JS}) ✅ test1 : OK

    ✅ test2 : OK ❌ test3 : NG run

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

  20. Custom Blocks Real World

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

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

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

  24. DEMO

  25. How to use

  26. configure webpack conf

  27. Available in Components • you need a custom loader

  28. configure custom loader

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

  30. Conclusion

  31. 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 !

  32. One more thing …

  33. Vue.js community for Japanese • You can join via Vue.js

    official site
 http://jp.vuejs.org
 


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

  35. Thanks!