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.

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 great work
• Bulma A modern CSS framework based on Flexbox
• vue-admin for laying the foundations
• VuexFire for work integrating Vuex & Firebase
• vee-validate for making form validation in Vue so easy
• Firebase

vuexfire-admin's Issues

Set Password fields not validating correctly

The set password fields are not validating confirm field correctly.

Setup .env usage for sensitive firebase config

Tabs rendering misaligned

Brand new download, can't run

Downloaded the repo, configured the firebase config file, did the fix on the "Cannot Get /" page because I also ran into that issue, and now I'm confronted with this error:

113:130 Uncaught SyntaxError: Invalid or unexpected token
    at Object.<anonymous> (app.js:733)
    at __webpack_require__ (vendor.js:694)
    at fn (vendor.js:115)
    at eval (TransportManager.js?07a4:14)
    at Object.<anonymous> (app.js:1579)
    at __webpack_require__ (vendor.js:694)
    at fn (vendor.js:115)
    at eval (Connection.js?9ebd:18)
    at Object.<anonymous> (app.js:726)
    at __webpack_require__ (vendor.js:694)

Notes component not dispatching initNotesRef() on mount() ie. Notes lists not displaying

User's notes & completed notes are currently not displaying. Push to database working OK.

Cannot GET /

I went through the installation guide and did 'npm run dev' while still using the default firebase config,
On localhost:8080 I got:
Cannot GET /

Migrate components & views

I want to help with Documentation

I love this and would like to contribute starting with creating a documentation on gitbooks :-D

Sidebar not rendering all menu items from store

Test with a fresh Firebase environment

2 small errors:

1. client/App.vue
   import Notifications from 'components/strong/UI/Notifications'
   should be:
   import Notifications from 'components/ui/Notifications'

2. node_modules/bulma/sass/utilities/mixins.sass
   misses the first line:
   @import "initial-variables"

Tried to use the current version without this bug, but then I'm getting even more dependency problems.