├── README.md ├── index.html └── messages-sample.json /README.md: -------------------------------------------------------------------------------- 1 | # Vue.js + Firebase Realtime Database 2 | [![](https://vueschool.s3.amazonaws.com/659be342fc5bfd9ee08598f8ac278383/vuejs-firebase-realtime-database-course.jpeg)](https://vueschool.io/courses/vuejs-firebase-realtime-database) 3 | 4 | This repository contains the example code for the [Vue.js + Firebase Realtime Database](https://vueschool.io/courses/vuejs-firebase-realtime-database) course. 5 | 6 | This course will teach you how to use Firebase Realtime Database in your vue.js applications. The example app is a realtime chat room, and our goal is to make sure all online users get updates in realtime whenever a message is added, edited or deleted. 7 | 8 | #### Topics covered: 9 | - How to set up and connect to a new Firebase Realtime Database 10 | - How to read, write, update and delete data 11 | - What it means that Firebase Realtime Database is event-driven 12 | - How to update a website when changes take place 13 | - How to implement notifications when other users make changes 14 | 15 | The course is free. [Enroll at Vue School!](https://vueschool.io/courses/vuejs-firebase-realtime-database) 16 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Vue School Chat Room 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Vue School Chat Room

14 | 15 |
16 |
17 | 18 |
{{ message.nickname }}
19 | 20 |

{{ message.text }}

21 | 22 | 23 |
24 | delete 25 | edit 26 |
27 |
28 | cancel 29 | update 30 |
31 |
32 |
33 | 34 |
35 | 36 |
37 |
38 | 39 | 40 |
41 |
42 | 43 | 44 |
45 | 46 |
47 |
48 | 49 | 50 | 131 | 132 | -------------------------------------------------------------------------------- /messages-sample.json: -------------------------------------------------------------------------------- 1 | { 2 | "messages" : { 3 | "-L8HkVXx_jUWUXDIVDlR" : { 4 | "text" : "Hey", 5 | "nickname": "guybrush" 6 | }, 7 | "-L8HkXz1C1Xyr9r9WLdE" : { 8 | "text" : "Hi, what's your name?", 9 | "nickname": "pirate1861" 10 | }, 11 | "-L8HkY9UXtLTRoGfnZr8" : { 12 | "text" : "My name is Guybrush Threepwood", 13 | "nickname": "guybrush" 14 | }, 15 | "-L8HkYMfiiEE0sQvBhJl" : { 16 | "text" : "Guybrush Threepwood? That's the most ridiculous name I’ve ever heard!", 17 | "nickname": "pirate1861" 18 | } 19 | } 20 | } --------------------------------------------------------------------------------