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

Want more?

38bee248082f6071230de65e9d74a944?s=48 kazupon
3
310
38bee248082f6071230de65e9d74a944?s=48 kazupon
35
12k
38bee248082f6071230de65e9d74a944?s=48 kazupon
18
5.1k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
3
190
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
94
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
83
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
5
170
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
5
170
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
2
230
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
2
450
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
120
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
210

Transcript

  1. 1.

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

  2. 2.

    Who are you ?

  3. 3.

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

  4. 4.

    Introduction

  5. 5.

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

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

    • Alternative language implementation Single File Components .vue

  7. 7.

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

    {CSS} ({JS})
  8. 8.

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

    ({JS})
  9. 9.

    So, Very useful!

  10. 10.

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

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

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

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

    Exciting feature!!

  13. 13.

    Custom Blocks

  14. 14.

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

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

    Custom Blocks Use cases • Documentation • Localization • Unit

    Testing • Example playground • … etc
  16. 16.

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

  17. 17.

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

  18. 18.

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

    ✅ test2 : OK ❌ test3 : NG run
  19. 19.

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

  20. 20.

    Custom Blocks Real World

  21. 21.

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

  22. 22.

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

  23. 23.

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

  24. 24.

    DEMO

  25. 25.

    How to use

  26. 26.

    configure webpack conf

  27. 27.

    Available in Components • you need a custom loader

  28. 28.

    configure custom loader

  29. 29.

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

  30. 30.

    Conclusion

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

    One more thing …

  33. 33.

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

    official site
 http://jp.vuejs.org
 

  34. 34.

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

  35. 35.

    Thanks!