Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.js Single File Components++

kazupon
April 28, 2017

Vue.js Single File Components++

meguro.es x gotanda.js #1

kazupon

April 28, 2017
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

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

    View full-size slide

  2. Who are you ?

    View full-size slide

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

    View full-size slide

  4. Introduction

    View full-size slide

  5. • All in one file
    Single File Components
    .vue

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

    View full-size slide

  6. • Alternative language implementation
    Single File Components
    .vue

    View full-size slide

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

    {CSS}
    ({JS})

    View full-size slide

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


    View full-size slide

  9. So, Very useful!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Exciting feature!!

    View full-size slide

  13. Custom
    Blocks

    View full-size slide

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

    - - -
    title
    - - -
    bla bla bla …
    bla bla bla …

    View full-size slide

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

    View full-size slide

  16. Documentation
    .vue
    .vue
    .vue

    .md
    vue-loader

    extract

    View full-size slide

  17. Localization
    .vue

    plugin
    vue-loader

    bundling
    ({JS})
    hello
    run

    View full-size slide

  18. Unit Testing
    .vue
    vue-loader

    bundling
    ({JS})
    ✅ test1 : OK
    ✅ test2 : OK
    ❌ test3 : NG
    run

    View full-size slide

  19. Example Playground
    .vue
    vue-loader

    bundling
    ({JS})
    run
    playground
    runtime

    View full-size slide

  20. Custom Blocks
    Real World

    View full-size slide

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

    message: hello world !!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. configure webpack conf

    View full-size slide

  25. Available in Components
    • you need a custom loader

    View full-size slide

  26. configure custom loader

    View full-size slide

  27. Reference
    • vue-loader documentation

    https://vue-loader.vuejs.org

    View full-size slide

  28. 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 full-size slide

  29. One more thing …

    View full-size slide

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

    http://jp.vuejs.org


    View full-size slide

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

    https://genba.fm

    View full-size slide