Summary

This is a very basic client-only contact manager app, built with Vue.js. This was my first experiment with Vue, made to both practice the basics of Vue.js and act as a practical assessment for an employment opportunity. I was given the choice of using any frontend framework of my choice, so I took the chance to try out Vue, since it was used by the company I was applying to.

I built this demo in about 20 hours, using Vue for the first time ever. While there were some frustrations, I would definitely like to use Vue on a larger app, especially with Nuxt.js.

The Experience

• I was a tad underwhelmed by the developer experience with using Vue, given all the hype. It seems like there are four different ways to do each thing, and each of those options permeate with each other. I had to take some time to make sure I was reading the docs correctly.
• I decided against using TypeScript, because I thought it would have been cumbersome while trying out a completely new UI framework. But I was wrong. TypeScript's features would have sped up development quite a bit, with all of the new Vue.js methods and features I was unfamiliar with.
• I'm thoroughly impressed with Pinia and its setup, compared to Redux (though I haven't really used Redux with Redux Toolkit just yet.)
• Minus two points for how annoying it is to work with reactive data in Vue. I still ahve to wrap my head around how to properly use ref()/watch()/computed()/etc.
• I liked how tightly integrated Vue's router and state management are to the default scaffolding tools. On the other hand, React's open ecosystem is what allows for the competition and innovation in the React ecosystem.
• Vite's LiveReload is impressively snappy. I kept hearing about it, but having it levels up the flow state to another level.

App Features & Capabilities

• Global state management featuring Pinia.
• Loads up dummy data automatically on initial load from randomuser.me.
• Data persistence between reloads with LocalStorage.
• Uses GitHub Actions to deploy to Surge.sh.
• Client-side routing with Vue Router.