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
500
Vapor Revolution
Avatar for kazupon kazupon
3
3.6k
Vue.js最新動向
Avatar for kazupon kazupon
3
1.5k
Vue 3.4
Avatar for kazupon kazupon
13
4.7k
Vue & Vite Rustify
Avatar for kazupon kazupon
4
2.3k
Vue.jsエコシステム動向2023
Avatar for kazupon kazupon
17
7.9k
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
パスタの技術
Avatar for Yusuke Wada yusukebe
1
350
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
Avatar for アカツキゲームス_Tech akatsukigames_tech
0
120
PHPカンファレンス関西2025　基調講演
Avatar for SUGIMOTO Kei sugimotokei
6
1.1k
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
Avatar for shunghsiyu shunghsiyu
0
390
構文解析器入門
Avatar for ydah ydah
7
2.1k
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
Avatar for sushi-cat sushi0120
0
280
Reactの歴史を振り返る
Avatar for つちのこ tutinoko
1
180
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
Avatar for Mirrativ mirrativ
1
170
SwiftでMCPサーバーを作ろう！
Avatar for giginet giginet
PRO
2
230
Gemini CLIの"強み"を知る！ Gemini CLIとClaude Codeを比較してみた！
Avatar for Kota Hisafuru kotahisafuru
3
980
画像コンペでのベースラインモデルの育て方
Avatar for tattaka tattaka
3
1.6k
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
Avatar for ktr ktr_0731
0
240

Featured

See All Featured
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.8k
Scaling GitHub
Avatar for Zach Holman holman
461
140k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
19k
It's Worth the Effort
Avatar for 3n 3n
185
28k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
251
21k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k

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!