Skip to content

Commit

Permalink
chore(readme): add example
Browse files Browse the repository at this point in the history
  • Loading branch information
posva committed Jan 15, 2018
1 parent 2e4d61f commit 5128f99
Showing 1 changed file with 41 additions and 4 deletions.
45 changes: 41 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,57 @@
# 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)

> Vue.js 2 binding for Cloud Firestore
> Vue.js bindings for Cloud Firestore
VueFire makes it super easy to bind firestore collections and documents and keep your local data always up to date with their remote versions.

## Firebase Realtime database

If you are looking for Firebase realtime support, install v1 instead: `npm i vuefire@v1`

## Installation

```sh
npm i vuefire@next
```

<!-- TODO remove next when releasing v2 -->

## Usage

Check `test/*.spec.js` and `examples/` for some examples
```js
Vue.use(VueFire)

// initialize your firebase app
firebase.initializeApp({
projectId: 'YOUR OWN ID',
databaseURL: 'YOUR OWN URL'
})

// save a reference to the firestore database
// to access it in the future
const db = firebase.firestore()

new Vue({
data: {
todos: [],
currentTodo: null
},
firestore: {
todos: db.collection('todos'),
currentTodo: db.collection('todos').doc('1')
}
})
```

Always declare the initial properties like `todos` and `currentTodo:` in your `data`.

**Tips**:
- Use an empty array `[]` as the initial value for a property that holds a collection to make `v-for` always work.
- Use `null` for documents so you can wrap content with a simple `v-if` (ref vue guide)

## Data Normalization
## References Normalization

### Array Bindings
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.

## Contributing

Expand Down

0 comments on commit 5128f99

Please sign in to comment.