It has been a while since my learning bucket list started overflowing, and I have been lacking the motivation to pick up new things. I also believe in this philosophy: once I have a project or something to work on, only then will I get the motivation to learn new things. Here is the list of my goals with their duration.

The right opportunity did come along, and I received a project that needed to be developed in Vue. I was kind of the lead front-end developer, and the project needed to be started from scratch. The whole decision about libraries, versions, and the project setup was mine. But I had worked with Vue 2 on many projects in the past. It was easy for me to make the project in Vue 2 since I was already familiar with it, but I took the other road (and I'm glad I made this decision). I picked as many new technologies as I could from my bucket list and started incorporating them into the project. So finally, the tech stack was

• Vue 3 - Composition API

• Typescript

• Tailwind

• Nuxt 3

• Pinia

Vue 3 - Composition API

I do remember the first time I saw and read about the composition API. My first reaction was, Why the hell in this world did they do this? I liked the way we used to write code in Vue, like data, methods, and computations, in separate blocks, and now we have to write everything in one single script. At that time, It felt like it was becoming more like React (though I never worked on it—I hate JSX). Then I dug deeper into it and understood a lot of problems with the old vue patterns, how it lacks typescript support, and how mixins are a problem at scale. It’s been some time since I got used to the composition API and felt it was not that bad. Some of the best features I found useful were its reactivity and the idea of composables.

Typescript

Since I learned JavaScript, it's been more than 5 years. I always have this vague idea about typescript: is it a new language? a tool or compiler. Why so much hype? When I actually sat down to learn it. The simplest and best definition of typescript is "It helps you catch errors in your IDE even before compiling the code," as @hiteshchoudhary said. I added TypeScript to the project, but I'm still figuring out when and how to utilize it. It actually feels good when you get an error when the prop doesn't exist in the object and when it gives suggestions on which props are available in the object.

Here is the video that helped me learn the basics. Link

Tailwind

I hadn't come across Tailwind until I started seeing it mentioned in every LinkedIn job description and noticed that some tech YouTubers were making videos about it. Where I have used Bootstrap Vue, Vuetify, Buefy, and many frontend libraries. But Tailwind was like the new hot girl in town. It offers utility classes to write CSS, But the idea was vague in my mind about what it actually does. When I integrated it into the project, It felt like a superpower; I was able to write CSS so much faster and better. The best part about Tailwind was handling dark themes and creating skins to use globally in the project.

Nuxt 3

I have been working with Nuxt 2 for quite a while. Nuxt has been a lifesaver in creating production-ready applications and SEO-friendly websites. Nuxt 3 was released, and I began the project three to four months later. I was skeptical at first about picking it up, as it was new and I could get stuck in many places. There was a certain kind of trust in the Vue community, so I took a chance. It turned out well. Nuxt 3 is a game changer, and it truly gives you the experience of writing only the required code. The feature I love the most about Nuxt 3 is its auto-imports. Using any package is like installing it and putting it in the Nuxt.config file, and that's it. You are good to go. The way routing is managed and how easy it is to use one component with another is commendable.

Pinia

Pinia is a state management tool for Vue. The documentation is straightforward and easy to understand. It hardly took me 1-2 days to get familiar with it. Pinia did a great job of taking all the good parts of Vex and making it a solid, lightweight statement management machine. The things I love the most about Pinia are that it has no mutations (now it feels like why we needed it in the first place) and that you invoke store methods like functions. Previously in Vuex, we used to have weird syntaxes like store.getters['modules/NAME_OF_THE_GETTER], but now it is simply like MODULE_name.GETTER_NAME.

It has been a rollercoaster ride for me, diving into so many new things all at once. I must say, ChatGPT has been a tremendous help. Now that I look back, I’m glad that I took this decision to make the project in the new stack and learn as many things as I can, because making the project in Vue 2, which I knew and was familiar with, was easy, and it was my comfort zone. I feel that’s what they say—get out of your comfort zone. It worked pretty well for me.