Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.js Single File Components++
Search
kazupon
April 28, 2017
Programming
8
1.7k
Vue.js Single File Components++
meguro.es x gotanda.js #1
kazupon
April 28, 2017
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
490
Vapor Revolution
kazupon
3
3.5k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.7k
Vue & Vite Rustify
kazupon
4
2.3k
Vue.jsエコシステム動向2023
kazupon
17
7.8k
Reactivity Transform
kazupon
1
1.4k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.6k
Other Decks in Programming
See All in Programming
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
39
14k
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
140
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
690
リッチエディターを安全に開発・運用するために
unachang113
1
230
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
130
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
210
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
480
Caude codeで爆速開発
codelynx
0
100
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.1k
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
2
1.2k
AI Ramen Fight
yusukebe
0
110
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
630
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Typedesign – Prime Four
hannesfritz
42
2.7k
A Tale of Four Properties
chriscoyier
160
23k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Building an army of robots
kneath
306
45k
How STYLIGHT went responsive
nonsquared
100
5.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Making Projects Easy
brettharned
116
6.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Transcript
Vue.js Single File Components++ Meguro.es x Gontanda.js #1 2017-04-28 @kazupon
Who are you ?
Vue.js Core Team member https://github.com/kazupon
Introduction
• All in one file Single File Components .vue <HTML>
{CSS} ({JS}) Scoped CSS CSS Modules ES2015 in template
• Alternative language implementation Single File Components .vue
Single File Components • Include from HTML/CSS/JS Files .vue <HTML>
{CSS} ({JS})
Provide official some tools .vue vue-loader rollup-plugin-vue vueify bundling bundling
({JS})
So, Very useful!
Released new feature !! • In vue-loader v10.2, it was
published https://github.com/vuejs/vue-loader/commit/7d3e005d56781e8e5e4ae8f90212f782e4b3a509
And from v11.3 later • It become available used in
components! https://github.com/vuejs/vue-loader/commit/11cec30eb3925a144e1d484357b13c501d5fb3f9
Exciting feature!!
Custom Blocks
What’s Custom Blocks ? • Block of Single File Components
that defined with User. <blog> - - - title - - - bla bla bla … bla bla bla … </blog>
Custom Blocks Use cases • Documentation • Localization • Unit
Testing • Example playground • … etc
Documentation .vue .vue .vue .md vue-loader extract
Localization .vue ⚙ plugin vue-loader bundling ({JS}) hello run
Unit Testing .vue vue-loader bundling ({JS}) ✅ test1 : OK
✅ test2 : OK ❌ test3 : NG run
Example Playground .vue vue-loader bundling ({JS}) run playground runtime ⚙
Custom Blocks Real World
Localization with vue-i18n https://kazupon.github.io/vue-i18n/en/sfc.html message: hello world !!
Blog with ream (example) http://unvue-custom-block.surge.sh
vue-play (be planning) https://github.com/vue-play/vue-play/issues/5
DEMO
How to use
configure webpack conf
Available in Components • you need a custom loader
configure custom loader
Reference • vue-loader documentation https://vue-loader.vuejs.org
Conclusion
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 !
One more thing …
Vue.js community for Japanese • You can join via Vue.js
official site http://jp.vuejs.org
genba.fm #1 • 2017/05 GW later, speak about Vue.js https://genba.fm
Thanks!