https://github.com/vue-bulma/vuexfire-admin
A Vue / Vuexfire app with Firebase auth. Based on vue-admin, using vuex, vuexfire, vue-router and firebase as the backend.
https://github.com/vue-bulma/vuexfire-admin
bulma firebase vue vue-admin vuexfire vuexfire-admin
Last synced: 4 months ago
JSON representation
A Vue / Vuexfire app with Firebase auth. Based on vue-admin, using vuex, vuexfire, vue-router and firebase as the backend.
- Host: GitHub
- URL: https://github.com/vue-bulma/vuexfire-admin
- Owner: vue-bulma
- License: mit
- Created: 2017-08-07T00:57:32.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-10T09:45:26.000Z (over 7 years ago)
- Last Synced: 2024-04-14T05:19:17.769Z (about 1 year ago)
- Topics: bulma, firebase, vue, vue-admin, vuexfire, vuexfire-admin
- Language: Vue
- Homepage:
- Size: 251 KB
- Stars: 58
- Watchers: 11
- Forks: 16
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vuexfire-admin
A Vue.js 2 admin app, based on vue-admin, using vuex, vuexfire, vue-router and firebase as the backend.
This project aims to be a template for using Firebase as a backend, and vue-admin as a frontend.
A lot of work has been done in a private repository and I'm currently in the progress of migrating this across to this public repo.
### Current features developed:
- Vuexfire for Firebase integration
- Firebase auth
- Ability to set a password (including Firebase reauth flow handling)
- Ability to link multiple auth providers
- Frontend Notification dispatching system (ie. not integrated with Cloud Messaging) and default notifications
- Protected Routes
- A User dashboard
- A basic User Notes taking feature, where completed / incompleted notes are shown on the User dashboard. Along with new note form that accepts a title, and wysiwyg body field (Quill)
### Installation
**NOTE: This app assumes you have a working Firebase instance with at least one of the auth providers; Google, Facebook, Github or Password enabled.**
1. Update `config/firebase.env.js` with your firebase config variables
2. `npm install`
3. `npm run dev`
### Firebase Rules
This app requires the following firebase rules (for notes facility)
``````
{
"rules": {
// ".read": true,
// ".write": false,
"users": {
".indexOn": "ID",
"$uid": {
".validate": "$uid === auth.uid",
// grants write access to the owner of this user account
// whose uid must exactly match the key ($uid)
".write": "$uid === auth.uid",
".read": "auth != null && auth.uid == $uid"
}
},
"notes": {
".indexOn": "uid",
".read" : "data.child(auth.uid).exists()",
"$uid": {
".write": "$uid == auth.uid",
}
}
}
}
``````
### WARNING !!!
THIS APP **SETS** FIREBASE REFS `/users` AND `/notes` !!!!
If you already have data at these refs, be sure to change the ref names in the file `/client/firebase-setup/ref-types.js`. Otherwise, it will most likely be overwritten.
### Additional work
I have a companion node.js server app that runs on heroku. It watches the firebase database and performs database actions using firebase-admin sdk.
I will aim to make this app publicly available too, but optional (ie. not required for vuexfire-admin to work).
---
### Credits
This project is inspired or powered by these people or projects so I want to thank them
- [Vue](https://github.com/vuejs/vue) great work
- [Bulma](https://github.com/jgthms/bulma) A modern CSS framework based on Flexbox
- [vue-admin](https://github.com/vue-bulma/vue-admin) for laying the foundations
- [VuexFire](https://github.com/posva/vuexfire) for work integrating Vuex & Firebase
- [vee-validate](https://github.com/baianat/vee-validate) for making form validation in Vue so easy
- [Firebase](https://firebase.google.com/)