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
520
Vapor Revolution
Avatar for kazupon kazupon
3
3.6k
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.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
意外と簡単！？フロントエンドでパスキー認証を実現する WebAuthn
Avatar for teamLab teamlab
PRO
2
770
より安全で効率的な Go コードへ： Protocol Buffers Opaque API の導入
Avatar for shoyan shwatanap
2
460
@Environment(\.keyPath)那么好我不允许你们不知道！ / atEnvironment keyPath is so good and you should know it!
Avatar for Elvis Shi lovee
0
120
CloudflareのChat Agent Starter Kitで簡単！AIチャットボット構築
Avatar for syumai syumai
2
510
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
Avatar for Takahashi Ikki takahashiikki
1
110
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
Avatar for Takumi Abe east_takumi
0
400
AIコーディングAgentとの向き合い方
Avatar for kmuto eycjur
0
280
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
Avatar for Andrey Chernov inetand
0
2.4k
奥深くて厄介な「改行」と仲良くなる20分
Avatar for おぐえもん oguemon
1
560
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
Avatar for nokomoro3 nokomoro3
0
210
テストコードはもう書かない：JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
Avatar for makun makun
0
440
AIでLINEスタンプを作ってみた
Avatar for kmuto eycjur
1
230

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
330
21k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.4k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
920
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.9k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
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!