Vue Firebase (Realtime Database)

ทดสอบการเชื่อม Vue กับ Firebase

ถ้าใครยังใช้ Vue ไม่คล่องลองดูที่บทความนี้ครับ

Vue คลิกๆ ตกแต่ง อัพขึ้น (Vue Cli + Router + Bootstrap + Github page)

เริ่มแรกก็สร้าง project vue ด้วย vue cli ขึ้นมา

จากนั้นลง vue router

ถ้าได้หน้าต่างประมาณนี้แสดงว่ามาถูกทางแล้ว

จากนั้นลง dependency ชื่อว่า firebase และ vuefire ทำตามบทความนี้เลยครับ

Vue.js กับ Firebase ที่เหมือนจะง่าย แต่ไม่ง่ายเลยนะครับ…

ที่ main.js ทำการเรียก vuefire และเรียกใช้

import VueFire from 'vuefire'
Vue.use(VueFire)

ไปที่ App.vue เพิ่มส่วนนี้เข้าไป

ทำการเชื่อม firebase พวก apikey ต่างๆ สามารถดูได้ที่ firebase console

ตั้งค่า firebase ให้เข้าถึงโดยไม่ต้อง login ดังรูปด้านล่าง

ทำการ refresh หน้าเว็บก็จะพบว่ามีการ push ข้อความ text: "hello" เข้าไปใน online-user

แล้วถ้าเราต้องการจะ push ในหน้า view อื่นหละ ใช้ this.$parent ครับ

this.$parent.$firebaseRefs.users.push({
  text: "hello"
});

โค้ดตัวอย่างหน้า Home.vue

ทำการกด ปุ่ม Add item ก็จะได้ hello ลงมาเรื่อยๆ

จบแล้วครับ ง่ายมั้ยครับ ลองนำไปประยุกต์ใช้กันดูนะครับ