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

Vue.js Single File Components++

Avatar for kazupon kazupon
April 28, 2017
Programming
8
1.7k

Vue.js Single File Components++

meguro.es x gotanda.js #1

Avatar for kazupon

kazupon

April 28, 2017
Tweet

More Decks by kazupon

See All by kazupon
わたしのOSS活動
Avatar for kazupon kazupon
3
530
Vapor Revolution
Avatar for kazupon kazupon
3
3.7k
Vue.js最新動向
Avatar for kazupon kazupon
3
1.6k
Vue 3.4
Avatar for kazupon kazupon
13
4.7k
Vue & Vite Rustify
Avatar for kazupon kazupon
4
2.4k
Vue.jsエコシステム動向2023
Avatar for kazupon kazupon
17
8k
Reactivity Transform
Avatar for kazupon kazupon
1
1.4k
わたしのOSS活動
Avatar for kazupon kazupon
1
1k
Vue with Vite
Avatar for kazupon kazupon
2
2.6k

Other Decks in Programming

See All in Programming
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
Avatar for N Akita nakita628
0
300
『毎日の移動』を支えるGoバックエンド内製開発
Avatar for yutautsugi yutautsugi
2
270
pnpm に provenance のダウングレード を検出する PR を出してみた
Avatar for mattsuu ryo_manba
1
150
Pythonに漸進的に型をつける
Avatar for Nealle nealle
1
110
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
Avatar for GENIEE ,Inc geniee_inc
0
120
One Enishi After Another
Avatar for Koji SHIMADA snoozer05
PRO
0
150
AIと人間の共創開発！OSSで試行錯誤した開発スタイル
Avatar for mae616 mae616
2
780
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
Avatar for Samuel Williams ioquatix
4
2.5k
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
Avatar for nrs nrslib
3
420
コードとあなたと私の距離 / The Distance Between Code, You, and I
Avatar for YAMAOKA Hiroyuki hiro_y
0
190
チームの境界をブチ抜いていけ
Avatar for tokai235 tokai235
0
210
タスクの特性や不確実性に応じた最適な作業スタイルの選択（ペアプロ・モブプロ・ソロプロ）と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
Avatar for yuki honyanya
3
190

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
27
2.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.1k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
8.9k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
54k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
15k

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!