Speaker Deck
Speaker Deck Pro
Sign in
Sign up
for free
Vue.js + TypeScript + Firebase
nunulk
January 19, 2019
Technology
0
620
Vue.js + TypeScript + Firebase
nunulk
January 19, 2019
Tweet
Share
More Decks by nunulk
See All by nunulk
nunulk
0
160
nunulk
1
130
nunulk
0
56
nunulk
0
170
nunulk
1
820
nunulk
1
95
nunulk
1
1.1k
nunulk
0
210
nunulk
3
420
Other Decks in Technology
See All in Technology
kyonmm
1
1.9k
clustervr
0
180
ocise
0
110
clustervr
0
160
clustervr
0
210
kenya888
1
110
hacker2202
0
750
y0hgi
1
370
kaga
0
190
kurochan
0
530
110y
3
690
ama_ch
0
3.3k
Featured
See All Featured
rmw
11
740
sachag
267
17k
denniskardys
220
120k
cassininazir
347
20k
garrettdimon
287
110k
smashingmag
283
47k
tanoku
258
24k
malarkey
119
16k
sstephenson
144
12k
caitiem20
308
17k
lauravandoore
11
1.2k
trishagee
20
2k
Transcript
Vue.js + Firebase + TypeScript Ͱ ϦΞϧλΠϜνϟοτ nunulk #ReBuildCamp
Firebase • Google ͕ఏڙ͢Δ mBaaS • Cloud Firestore (Beta), Cloud
Storage, Cloud Functions, A/B Testing, Cloud Messaging
ٕͬͨज़ • Vue.js: 2.5.22 • TypeScript: 3.2.4 • Firebase: 0.3.7
• Element: 2.4.11
ೝূ͕ඞཁͳύεͷࢦఆ routes: [ { path: '/', name: 'home', component: Home,
meta: { requiresAuth: true } },
ϛυϧΣΞ router.beforeEach((to, from, next) => { const requiresAuth = to.matched.some(record
=> record.meta.requiresAuth) if (!requiresAuth) { next() } else { firebase.auth().onAuthStateChanged(function (user) { if (user) { next() } else { next({ path: '/signin', query: { redirect: to.fullPath } })
Component export default class ChatBoard extends Vue { user: User
= { id: null, email: '', avatar_image_url: '' } participants: User[] = [] messages: Message[] = [] message: Message = { room_id, sender_id: null, content: ‘', created_at: null, }
Component created(): void { const fireUser = firebase.auth().currentUser; if (!fireUser)
{ return; } this.user.id = fireUser.uid; this.user.email = fireUser.email; db.collection('users').doc(this.user.id).get() .then((doc) => {})
Component db.collection('messages') .onSnapshot((snapshot) => { const changes = snapshot.docChanges() if
(!changes) { return } changes.forEach((change) => { if (change.type === 'added') { const message = { room_id: change.doc.data().room_id, sender_id: change.doc.data().sender_id, content: change.doc.data().content, created_at: this.timestamp2String(change.doc.data().created_at) }; this.addMessageData(message); }
σϞ