$30 off During Our Annual Pro Sale. View Details »

Vue.js Single File Components++

kazupon
April 28, 2017
Programming
8
1.6k

Vue.js Single File Components++

meguro.es x gotanda.js #1

kazupon

April 28, 2017
Tweet

More Decks by kazupon

See All by kazupon
Reactivity Transform
kazupon
1
690
わたしのOSS活動
kazupon
1
700
Vue with Vite
kazupon
2
2k
State of Vue I18n
kazupon
3
340
まちにまった Vue.js 3
kazupon
14
5k
Native-ESM powered web dev build tool
kazupon
5
1k
まもなくやってくる Vue.js 3
kazupon
38
18k
Vue.js 3 に向けた Vue.js 入門
kazupon
19
6.2k
Vue I18n 向けに ESLint プラグインを作った
kazupon
1
1.2k

Other Decks in Programming

See All in Programming
Navigating the Streaming Landscape
dunithd
0
230
Micro Frontends with Module Federation: Beyond the Basics
manfredsteyer
PRO
0
270
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
20
6.5k
レガシーフロントエンドからNext.jsへの段階移行を可能にするAWS構成
tamizuma
10
3.1k
E2Eテストから負荷試験シナリオを作ってみた / Why do we make a scenario of load testing from E2E testing scenarios
mackee
0
730
オブザーバビリティを高めよう
yuhta28
2
150
Hono - Ultrafast web framework for Cloudflare Workers, Deno, Bun, and Node.js
yusukebe
2
3.3k
Neo4j-Migrations: The lean way of applying database refactorings to Neo4j
michaelsimons
0
390
よくあるケースから学ぶ！AWS で想定外のコスト増につながるような実装や設計
track3jyo
PRO
9
610
AWS発デザインシステム「Cloudscape」を使ってUI爆速開発
j_3woo86
1
110
Amazon S3 Selectで実現するサーバーレス高負荷対応サイト
seike460
PRO
2
560
XR技術をめちゃくちゃ流行らせるためにちゅらデータが取り組んでいること
mo84dan5
0
110

Featured

See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
14k
Teambox: Starting and Learning
jrom
124
7.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
23
4.4k
Scaling GitHub
holman
453
140k
Visualization
eitanlees
126
12k
Code Reviewing Like a Champion
maltzj
508
38k
Building Applications with DynamoDB
mza
84
4.9k
Agile that works and the tools we love
rasmusluckow
320
19k
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
The Cult of Friendly URLs
andyhume
68
5k
How to Ace a Technical Interview
jacobian
269
21k
Building a Scalable Design System with Sketch
lauravandoore
451
30k

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!