|
1 | 1 | # Vuefire [](https://circleci.com/gh/vuejs/vuefire) [](https://www.npmjs.com/package/vuefire) [](https://codecov.io/github/vuejs/vuefire)
|
2 | 2 |
|
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` |
4 | 10 |
|
5 | 11 | ## Installation
|
6 | 12 |
|
7 | 13 | ```sh
|
8 | 14 | npm i vuefire@next
|
9 | 15 | ```
|
10 | 16 |
|
| 17 | +<!-- TODO remove next when releasing v2 --> |
| 18 | + |
11 | 19 | ## Usage
|
12 | 20 |
|
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) |
14 | 51 |
|
15 |
| -## Data Normalization |
| 52 | +## References Normalization |
16 | 53 |
|
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. |
18 | 55 |
|
19 | 56 | ## Contributing
|
20 | 57 |
|
|
0 commit comments