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

Vue.js Single File Components++

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for kazupon kazupon
April 28, 2017
Programming
1.8k
8

Vue.js Single File Components++

meguro.es x gotanda.js #1

Avatar for kazupon

kazupon

April 28, 2017

More Decks by kazupon

See All by kazupon
プラグインで拡張される Context をtype-safe にする難しさと設計判断
Avatar for kazupon kazupon
2
1.2k
Oxlint JS plugins
Avatar for kazupon kazupon
1
1.4k
gunshi
Avatar for kazupon kazupon
1
240
Nitro v3
Avatar for kazupon kazupon
2
570
わたしのOSS活動
Avatar for kazupon kazupon
3
630
Vapor Revolution
Avatar for kazupon kazupon
3
4.3k
Vue.js最新動向
Avatar for kazupon kazupon
3
1.6k
Vue 3.4
Avatar for kazupon kazupon
13
4.9k
Vue & Vite Rustify
Avatar for kazupon kazupon
4
2.5k

Other Decks in Programming

See All in Programming
Claude CodeとAgentCore Gatewayを繋ぐ際の認証認可 / Authentication and authorization when connecting Claude Code with AgentCore Gateway
Avatar for Har1101 har1101
1
250
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
Avatar for k.goto gotok365
3
2.8k
今さら聞けない .NET CLI
Avatar for tkym htkym
0
180
その節約、円になってますか？
Avatar for isamu asakawa isamumumu
1
700
自動化したのに回らないテスト運用の壁ーAI時代の品質責任と生産性
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
130
「寝てても仕事が進む」Claude Codeで組む第二の脳
Avatar for t-fujita24 tomoyafujita2016
0
300
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
Avatar for Gota gotalab555
4
1.5k
仕様駆動開発の消費期限
Avatar for watany watany
14
6.4k
Terraform標準の組織で AWS CDKをどう使うか
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
1
490
ITヒヤリハットを整理してみた ～ライフサイクルと原因から考える再発防止策～
Avatar for kouki.miura koukimiura
1
140
仕様駆動開発へのトライを機に チームに適合する手法を模索し続けている話
Avatar for freee freee
PRO
0
440
AI時代に設計が 最大の生産性レバーになる 意図駆動開発とデータを消さない設計｜Don't Delete Your Data or Your Intent — Design as the Deepest Lever in the AI Era
Avatar for Tomohisa Takaoka tomohisa
1
710

Featured

See All Featured
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
370
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
540
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.6k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
520
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.4k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
170
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.1k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
440

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!