I’m certain that the rise of Vue.js isn’t just a trend. It’s now what I think becoming the norm of what the future of web development may be like. I have been learning and using Vue for the past 7 months. I can say that now it has usurped React to become my favorite framework to work with and here’s why.
(Note: the following is based on my experience with using both React and Vue.js actively in my software development career)
Easy to Learn
Vue.js is very easy to use. Each file you create will have an extension ending in .vue. Within that file is the reusable component that you can make for use later in your app. Every file uses a <template>, <script>, and <style> tag exactly as you might expect.
The <template> tag takes the plain HTML you expect to work with but adds enhancements like isolated updating, and props.
The <script> tag is where you will add all of your logic and here you can use a functional style of programming or even class-based a class-based style if you’re using Typescript.
Lastly, you can use the <style> tag to add your CSS styles. You’re not limited to CSS either, you can use SCSS, SASS, CSS modules, and more.
All of this means that inside your file, you have everything in one place. There is no need to constantly worry about cross-referencing CSS styles accidentally or what tags, ids, or elements you make use of because everything is encapsulated in that file. Even if you used that component somewhere else, it won’t be affected by its parent.
Support
I personally believe that Vue.js learners will have an easy time with the language because of its excellent documentation. Evan You, the creator of Vue.js took the time in Vue’s early stages to build documentation that was easy to understand. You, who worked at Google previously. This shows how Google rubbed off on him because the quality of the explanations of the framework’s concepts is phenomenal.
Not only is Vue.js’s documentation easy to understand, but there has been a constant flow of developer tools offered. Tools such as Volar, Vite, Pinia, and Nuxt. These tools have solved several problems with Vue and made things simpler.
The Vue.js community is great, and the constant flow of questions from Stack Overflow and other forums has helped stretch the framework’s reach. I have been able to solve many of my common problems because of this fact.
Readability
This maybe falls in line with the ease of use but deserves a separate distinction because of how truly readable this framework is. For example, since you’re mainly using HTML elements and CSS. You can focus more on adding logic through the <script> tag and not have to worry about how HTML should be handled or how to maintain reactivity. Just follow the normal web development rules for accessibility and carry on.
I like the simplicity Vue.js offers. I find it easier than say React because there is less boilerplate code that is needed overall since Vue.js does the work for us.
Pinia, A Simple State Management Tool
Vue.js has its own version of the React Redux store. Pinia is a state management tool that offers a simple API to mutate and maintain the state. What I like the most about Pinia when compared to React Redux is that it doesn’t have a lot of boilerplate code.
The API is very simple in that, you can set up a state store, use it in your app, and then use the store actions to do things with the state as you need them. The setup is very easy, and if used with the composition API the syntax ends up being simpler to write out. Not only that but Pinia has multi-store capabilities, this is perfect for when you need to group states like user data or todo items. You can make a store for those pieces of state and avoid a massive store file to keep track of.
Pinia is actively supported and supports Typescript as well.
High Performance
Vue.js offers unique optimizations for when components should be updated and how they’re updated. Because of this, it has allowed Vue.js to perform better than its counterparts like Angular or React. Vue does these optimizations by automatically tracking the dependencies of a component on render.
The system would then know exactly which dependency was updated and only update it then. Preventing the entire component from rendering. Simply put, Vue will render only the piece of data that is changed and whatever is associated with that data. Everything else will not be touched.
With the release of Vue 3, the performance of Vue is enhanced while making the code more lightweight and slimming down the code needed to be written.
Vite, a frontend development tool, is a development environment that typically comes out of the box when creating a Vue project through the CLI is extremely fast.
It does hot module replacement in a blink and you’ll find that you’re slow to realize that the state was updated because of that fact. Vite can optimize your builds and slim down your projects so you can feel better about adding more features to your app and not bog it down.
Flexibility
Vue.js is very flexible, in that there is wide support for several types of tools to enhance your development. For example, for HTML templates, you can use Pug to create templates faster.
You can use SASS for CSS styling, and inside of the <style> tag you can even make the CSS scoped to a component, therefore, avoiding the need to write a different name for each class or id you want to create.
As for the <script> you can use typescript to make class-based components or strictly type your functional components, choose any way you like. When I use Vue.js for development, I have not found places where Vue.js couldn’t handle the design I anticipated. Or if you prefer to cut out the <template> tag, you can even use JSX since it is supported by Vue.js, therefore if you’re coming from React you can get the best of both worlds.
From emitting events, prop handling, state management, and routing. All of it is well thought out to make the experience of developing with the framework so much easier. You can control the lifecycle of your component and let Vue.js handle the rest by keeping track of the state for you.
Try it out
If all of this sounds enticing, I will implore you to go out and try to write your own app and see how you feel about the framework. Vue.js’s documentation is very good and should you have any questions it’s likely to have been answered there, or on StackOverflow. Pick your favorite and have fun!
