A few weeks ago, I decided to take my very basic knowledge of Vue.js and apply it towards learning to do basic operations against a Firebase Cloud Firestore NoSQL database. The result of that project can be found on GitHub at https://github.com/bcswartz/fcf-vue-users. It’s a web application that allows you to create and authenticate user accounts and documents via Firebase's email/password-based authentication API and the Cloud Firestore document and document collection API.
Credit where credit is due: many of the techniques used in the app were borrowed from a very well-written post about using Vue.js with Firestore - https://savvyapps.com/blog/definitive-guide-building-web-app-vuejs-firebase. My project would have taken a lot longer to develop without the information and example code in that post.
Writing the app gave me some basic experience with popular Vue.js tools: the Vue Router, the Vuex data store, and the Vue CLI. Even though it’s a small application, it includes two reusable components - an error message display and a reauthentication modal - and contains an example of using Vue's event broadcasting system.
That reauthentication modal component wasn’t part of my original design plan. While the Cloud Firestore API calls for retrieving and managing documents and documents collections are pretty straightforward, the authentication API calls for performing operations related to user accounts only work if you have a fresh set of credentials (in this case, email address and password) for the user account you want to modify.
That can be quite a restriction. The reauthentication modal allows the current user to update their own email address and password even if their authentication session has grown stale, but I didn’t see any way for the current user to make email/password changes to another user’s account. So that’s something to keep in mind if you want user management features in your application.
Anyway, if you’re interested in getting your feet wet with Vue.js, or Firebase, or both, and are looking for a sample application, check out the repo. More details about what’s in the application can be found in the README file and in the src/views/Notes.vue file within the app.
