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
Vue.js最新動向
kazupon
3
1.3k
Vue 3.4
kazupon
13
4.3k
Vue & Vite Rustify
kazupon
4
2k
Vue.jsエコシステム動向2023
kazupon
17
7.2k
Reactivity Transform
kazupon
1
1.2k
わたしのOSS活動
kazupon
1
970
Vue with Vite
kazupon
2
2.4k
State of Vue I18n
kazupon
3
520
まちにまった Vue.js 3
kazupon
14
5.4k
Other Decks in Programming
See All in Programming
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
ドメイン駆動設計の実践
masuda220
PRO
17
5.2k
【Go言語】ジェネリクス
tomo1227
0
170
CSC307 Lecture 13
javiergs
PRO
0
150
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Rust.Nagoya #1
codemountains
0
170
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
Featured
See All Featured
Code Review Best Practice
trishagee
58
16k
Become a Pro
speakerdeck
PRO
15
4.8k
Infographics Made Easy
chrislema
238
18k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
What's new in Ruby 2.0
geeforr
338
31k
Agile that works and the tools we love
rasmusluckow
325
20k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
The Cult of Friendly URLs
andyhume
75
5.9k
Documentation Writing (for coders)
carmenintech
63
4.2k
Teambox: Starting and Learning
jrom
130
8.6k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
RailsConf 2023
tenderlove
16
720
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!