Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nigeltiany/vuefire
https://github.com/nigeltiany/vuefire
firebase firebase-database firebase-storage vuefire vuejs vuex
Last synced: 7 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/nigeltiany/vuefire
- Owner: nigeltiany
- Created: 2017-07-22T17:59:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-28T14:51:34.000Z (almost 7 years ago)
- Last Synced: 2024-10-15T10:31:56.644Z (about 1 month ago)
- Topics: firebase, firebase-database, firebase-storage, vuefire, vuejs, vuex
- Language: JavaScript
- Size: 1.33 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[Firebase](https://firebase.google.com/docs/web/setup) for [VueJS](https://vuejs.org/)
## Install
```bash
npm install @vuefire/vuefire --save
```
## Usage
#### Configuration
```js
import VueFire from '@vuefire/vuefire'
Vue.use(VueFire, {
project: {
apiKey: "",
authDomain: ".firebaseapp.com",
databaseURL: "https://.firebaseio.com",
storageBucket: ".appspot.com",
messagingSenderId: "",
projectId: '',
}
})
// In components
methods: {
this.$firebase.database().ref('/users')
this.$firebase.auth()
}
```
### Using Mixins
#### Apply mixins to firebase
```js
Vue.use(VueFire, {
project: {
// ...
},
mixins: [
function specialFirebaseAction({firebase}, params){
// What will you create ?
console.log(params + ' I see you')
return firebase.auth().currentUser
}
]
})
// in components
computed: {
user() {
this.$firebase.specialFirebaseAction('params')
}
}
```
#### Supply vuex actions a second parameter that is firebase
```js
import VueFire from '@vuefire/vuefire'
Vue.use(VueFire, {
project: {
apiKey: "",
authDomain: ".firebaseapp.com",
databaseURL: "https://.firebaseio.com",
storageBucket: ".appspot.com",
messagingSenderId: "",
projectId: '',
},
vuex: {
namespaces: ['firebase'],
store: store
}
})
```
```js
// firebase namespaced module
export default {
namespaced: true,
/**
* ...your state, getter, and mutations are here
*/
actions: {
// and now the magic
saveToFirebase ({commit, rootState, state}, {firebase, database}, payload) {
// firebase.database() or just
database().ref('a/path/on/firebase'). // you know the rest
}
}
}
```
```js
// just add 'root' to namespaces array to have your root action have a firebase parameter
vuex: {
namespaces: ['root', 'firebase'],
store: store
}
```
```text
firebase components coming soon
- [ ] firebase-app
- [ ] firebase-auth
- [x] firebase-document
- [ ] firebase-messaging
- [ ] firebase-query
- [ ] firebase-storage
```