Skip to content

Commit 5128f99

Browse files
committed
chore(readme): add example
1 parent 2e4d61f commit 5128f99

File tree

1 file changed

+41
-4
lines changed

1 file changed

+41
-4
lines changed

README.md

+41-4
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,57 @@
11
# Vuefire [![Build Status](https://img.shields.io/circleci/project/vuejs/vuefire/firestore.svg)](https://circleci.com/gh/vuejs/vuefire) [![npm package](https://img.shields.io/npm/v/vuefire/next.svg)](https://www.npmjs.com/package/vuefire) [![coverage](https://img.shields.io/codecov/c/github/vuejs/vuefire.svg)](https://codecov.io/github/vuejs/vuefire)
22

3-
> Vue.js 2 binding for Cloud Firestore
3+
> Vue.js bindings for Cloud Firestore
4+
5+
VueFire makes it super easy to bind firestore collections and documents and keep your local data always up to date with their remote versions.
6+
7+
## Firebase Realtime database
8+
9+
If you are looking for Firebase realtime support, install v1 instead: `npm i vuefire@v1`
410

511
## Installation
612

713
```sh
814
npm i vuefire@next
915
```
1016

17+
<!-- TODO remove next when releasing v2 -->
18+
1119
## Usage
1220

13-
Check `test/*.spec.js` and `examples/` for some examples
21+
```js
22+
Vue.use(VueFire)
23+
24+
// initialize your firebase app
25+
firebase.initializeApp({
26+
projectId: 'YOUR OWN ID',
27+
databaseURL: 'YOUR OWN URL'
28+
})
29+
30+
// save a reference to the firestore database
31+
// to access it in the future
32+
const db = firebase.firestore()
33+
34+
new Vue({
35+
data: {
36+
todos: [],
37+
currentTodo: null
38+
},
39+
firestore: {
40+
todos: db.collection('todos'),
41+
currentTodo: db.collection('todos').doc('1')
42+
}
43+
})
44+
```
45+
46+
Always declare the initial properties like `todos` and `currentTodo:` in your `data`.
47+
48+
**Tips**:
49+
- Use an empty array `[]` as the initial value for a property that holds a collection to make `v-for` always work.
50+
- Use `null` for documents so you can wrap content with a simple `v-if` (ref vue guide)
1451

15-
## Data Normalization
52+
## References Normalization
1653

17-
### Array Bindings
54+
In Could Firestore you can reference other documents inside of documents (TODO add link). By default VueFire will automatically bind up to one nested references. TODO make sure this is the right choice.
1855

1956
## Contributing
2057

0 commit comments

Comments
 (0)