Introduction

This project’s goal was to create a simple task management tool.

I developed it using Vue.js as the frontend framework and Firebase as the backend. This project was a personal endeavor driven by my desire to revisit Vue.js and compare the developer experience with my recent work using Next.js on Vercel.

Vue.js 3 and Vuex

One significant improvement in Vue.js 3 was the introduction of the composition API, which significantly reduces the amount of boilerplate code needed.

However, incorporating certain Vuex helpers such as mapActions or mapState within <script setup> was not possible. Reverting back to using generic <script> tags, would have required additional boilerplate code and was not a worthwhile trade-off for this project.

Meta Tags and SEO Considerations

When it came to meta tags, I opted to manually add them to the index.html file rather than adding another dependency, as I don’t need dynamic meta tags. While I must acknowledge that Nuxt.js provides out-of-the-box support for SEO, having built-in support in Vue.js itself would have been nice to have.

Vuetify

During my journey, I elected to use Vuetify for components and styling in the project. However, throughout the development process, I found myself missing the ease of use and extensive features offered by Tailwind, especially preset colors and gradient support. The developer experience with Vuetify was lacking compared to Tailwind. Nevertheless, not using Vuetify would have required writing a significant amount of boilerplate code. Additionally, one notable challenge was the lack of documentation for Vuetify. To understand how to properly use the navigation drawer component, I had to resort to reverse-engineering a third-party website. Through this process, I discovered the need to use an overlay in conjunction with the navigation drawer to prevent interaction with the rest of the page when the drawer was open.

Firebase

Setting up Firebase and integrating their authentication and database it into the frontend an easy straightforward process. One significant benefit of using Firebase was the elimination of a separate backend infrastructure. Additionally, the performance of Firebase as the backend and hosting provider was excellent The Firebase CLI’s integration with GitHub Actions for automatic deployment of new versions added a notable convenience. Furthermore, one of the standout advantages of Firebase was its cost-effectiveness, as it provided all the necessary features for free. Unless more complex features are required, I strongly recommend using Firebase for similar projects.

However, it would have been beneficial to have prebuilt components similar to those offered by clerk.dev, which I had previously used with Next.js.

Conclusion

In conclusion, revisiting Vue.js and Firebase provided valuable insights and experiences. Both technologies offer an easy and beginner-friendly starting point for development projects. It is important, however, to recognize the limitations of these tools and platforms. For more complex projects that require additional features and capabilities, considering alternatives such as Nuxt.js or Next.js, and platforms like Vercel, may be more suitable.

Vue.js and Firebase are best suited for small projects with simple features, where their ease of use and beginner-friendly nature can be fully leveraged. Overall, the journey of exploring these technologies highlighted the importance of choosing the right tools for the specific requirements of a project.