Vue.js Single File Components++

meguro.es x gotanda.js #1

Transcript

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

   View Slide

2. Who are you ?
   
   

   View Slide

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

   View Slide

4. Introduction
   
   

   View Slide

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

   View Slide

6. • Alternative language implementation
   Single File Components
   .vue
   

   View Slide

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

   View Slide

8. Provide official some tools
   .vue
   vue-loader
   rollup-plugin-vue vueify
   bundling
   bundling ({JS})
   
   
   

   View Slide

9. So, Very useful!
   
   

   View Slide

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

    View Slide

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

    View Slide

12. Exciting feature!!
    
    

    View Slide

13. Custom
    Blocks
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. Custom Blocks
    Real World
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. DEMO
    
    

    View Slide

25. How to use
    
    

    View Slide

26. configure webpack conf
    

    View Slide

27. Available in Components
    • you need a custom loader
    

    View Slide

28. configure custom loader
    

    View Slide

29. Reference
    • vue-loader documentation

    https://vue-loader.vuejs.org
    

    View Slide

30. Conclusion
    
    

    View Slide

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 !
    

    View Slide

32. One more thing …
    
    

    View Slide

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

    http://jp.vuejs.org

    

    

    View Slide

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

    https://genba.fm
    

    View Slide

35. Thanks!
    

    View Slide