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

Vue.js Single File Components++

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for kazupon kazupon
April 28, 2017
Programming
8
1.8k

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
Oxlint JS plugins
Avatar for kazupon kazupon
1
1.2k
gunshi
Avatar for kazupon kazupon
1
180
Nitro v3
Avatar for kazupon kazupon
2
460
わたしのOSS活動
Avatar for kazupon kazupon
3
590
Vapor Revolution
Avatar for kazupon kazupon
3
4k
Vue.js最新動向
Avatar for kazupon kazupon
3
1.6k
Vue 3.4
Avatar for kazupon kazupon
13
4.8k
Vue & Vite Rustify
Avatar for kazupon kazupon
4
2.4k
Vue.jsエコシステム動向2023
Avatar for kazupon kazupon
17
9k

Other Decks in Programming

See All in Programming
RAGでハマりがちな"Excelの罠"を、データの構造化で突破する
Avatar for harumi harumiweb
9
2.7k
Go Conference mini in Sendai 2026 : Goに新機能を提案し実装されるまでのフロー徹底解説
Avatar for Takahito Yamatoya yamatoya
0
560
Ruby x Terminal
Avatar for Akira Matsuda a_matsuda
7
590
grapheme_strrev関数が採択されました（あと雑感）
Avatar for てきめん tekimen youkidearitai
PRO
1
210
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
490
Agent Skills Workshop - AIへの頼み方を仕組み化する
Avatar for Gota gotalab555
15
8.4k
DevinとClaude Code、SREの現場で使い倒してみた件
Avatar for karia/Y.Hisamatsu karia
1
1k
Geminiの機能を調べ尽くしてみた
Avatar for yosshi naruyoshimi
0
200
Rで始めるML・LLM活用入門
Avatar for wakama1994 wakamatsu_takumu
0
170
2026年は Rust 置き換えが流行る！ / 20260220-niigata-5min-tech
Avatar for girigiribauer girigiribauer
0
230
AI時代のシステム設計：ドメインモデルで変更しやすさを守る設計戦略
Avatar for 増田 亨 masuda220
PRO
5
770
S3ストレージクラスの「見える」「ある」「使える」は全部違う ─ 体験から見た、仕様の深淵を覗く
Avatar for ya_ma23 ya_ma23
0
280

Featured

See All Featured
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.4k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.5k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.5k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
11k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
150
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Docker and Python
Avatar for Tania Allard trallard
47
3.8k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4k

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!