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
2
300
Vapor Revolution
kazupon
3
3.1k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.6k
Vue & Vite Rustify
kazupon
4
2.2k
Vue.jsエコシステム動向2023
kazupon
17
7.6k
Reactivity Transform
kazupon
1
1.3k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.5k
Other Decks in Programming
See All in Programming
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
790
WebDriver BiDiとは何なのか
yotahada3
1
150
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
110
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.4k
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
800
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
130
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
Lottieアニメーションをカスタマイズしてみた
tahia910
0
130
DROBEの生成AI活用事例 with AWS
ippey
0
140
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
660
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Producing Creativity
orderedlist
PRO
344
39k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
GraphQLとの向き合い方2022年版
quramy
44
13k
Building Applications with DynamoDB
mza
93
6.2k
Building an army of robots
kneath
303
45k
Documentation Writing (for coders)
carmenintech
67
4.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Done Done
chrislema
182
16k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Designing for humans not robots
tammielis
250
25k
The Language of Interfaces
destraynor
156
24k
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!