Vue JS

I recently had the pleasure in building a Vue ecommerce website for a large company in Australia. I was pretty appraensive about using it, mainly because all my frontend experience is in React and React Native. This whole Vue thing was quite a mystery and to be quite honest I really didn't see the point in learning or using anything that wasn't React because React is just so darn good. However, I was wrong as usually because it's a fantastic framework, one that I would highly recommend to anyone creating any sort of browser based frontend. My only drawback is that although its 90% as good as React and in some ways it is simpler and easier to use, I would still recommend React first and Vue second.

Pros

Ease of use

Vue is simply HTML, Javascript and CSS in one file. You don't have to have it in one file but for me I think this is the best approach and it is recommended by Vue themselves. It simply guides you in making small reusable components which contain everything you need in the one file. If you're file is getting to big this is usually a code smell which requires either the breaking up of sections into smaller components or the removal of logic if its duplicated either in the component or across multiple components. The moment I found myself saying "Hey this file is annoyingly big" I find its time refactor.

Simply concepts performed simply

Everything in Vue is aimed at being simple. To often in the early days of my React learning I found that it was just a little to convoluted, or too complicated. In recent years React has done a better job at simplifying things, such as Hooks. However, the simple fact remains that Vue is easier to pick up, I don't know if its the docs or the syntax or the philosophy but it just clicks easier. If I was going to tell a graduate developer what frontend technology to use, I would pick Vue over React simply because its easier and faster to pick up.

I do think it partly comes back to its similar to HTML and CSS nature. Because you are encouraged to keep everything in one file and because it's very close to raw HTML and CSS and for that matter JS, there is less of an overhead of learning a new thing.

Simple data passing

Passing data around your application is going to happen. Vue makes it very easy to pass both to a child and to a parent.

Passing data to a child is as simple as passing it as a prop on the component

<CustomComponent text="This is text"/>

Passing data to a parent is usually a lot more work but in Vue its actually very simple, mainly because it was seen as a common use case they decided to add emit which allows a child component to call a function and the parent component listen to that function call, reacting accordingly.

Helpful utilities

Vue has a number of really cool additions to what would typically be raw HTML. The most useful I have found are loops and if statements.

V-if

Adding conditional logic in Vue is dead simple, all you need to do is add v-if to any HTML tag and give it a value to work with and it will conditionally render that element. It’s incredibly easy to use, it’s also widely used as conditional rendering is often a very common thing to do. It’s fantastic that it’s built into the framework.

<div class="container" v-if="showTextContainer">
		<p>{{text}}</p>
</div>

Above we have a div that checks if the boolean showTextContainer is true, if it is we will show the text variable inside the p tag if not, it won't render.

V-for

The same goes for looping your data structures. This is another very common task that Vue makes very simple. All you need to do is provide a data structure set, add the directive

<div class="library">
		<a v-for="book in library" :key="book.id" :href="book.link"/>
</div>

And you have a loop that renders whatever you want inside it. The above code will create a div and inside that div loop over the library data structure pulling out each element into a book object in which it will create an a tag. I love how simple it is as well as how it just looks like its another HTML attribute.

The time saving, not to mention the cleaner code as a result is a real Vue seller!

Cons

Tooling

The biggest problem I have with Vue is it’s lack of tooling. Sure there are great tools but it’s just not the same as React. You can absolutely get by as there are some great tools, but if you want the best of the best, React wins hands down in that area. However, don’t let that put you down as I have personally built enterprise level ecommerce websites with Vue and it’s tooling, I just wish it was to Reacts level. I think I’ve been somewhat spoilt in that regard.

TS support

Vue 3 was built from the ground up with Typescript which means it’s supper is pretty good. Now what I’m about to say is from my Vue 2 experience which has very poor Typescript support. Now you might say well just use Vue 3, unfortunately Vue 2 is still readily used in fact although the enterprise site I built was brand new as of 2021 we were forced to use Vue 2 because of some dependencies only using Vue 2. This meant we had very spotty typescript support.

Most of the time when using TS in Vue 2 it just feels forced, it doesn’t work smoothly. Vue 3 is much better but it still has worked to be done as I found there were times where typescript gave strange messages or didn’t properly check prop types. I’m sure it’s only minor or I was doing something wrong but it was enough to be annoying.

Not as widely used

If I was to tell you what frontend tool that you can learn to get a job it would be React. With that one library you have access to the most frontend positions out of any technology. Furthermore, with some further study you can pick up React Native as the underlying principals are the same well at least the react side. Vue simply doesn’t have as many jobs and doesn’t have a mobile framework to compete with React.

However, I say this and Vue is rapidly picking up steam, it’s rapidly gaining in popularity and I would not be surprised if it eventually did overtake React.

No real mobile framework

As I mentioned before vue doesn’t have a competing mobile framework like React does. Knowing React is highly transferable to React Native. You kill one and a half birds with one stone. There’s still a lot of native mobile to understand and some of the react changes but for the most part it’s the same concepts carried over in a mobile way.

Learning Vue does put you behind in this regard.

Final thoughts

When it comes to learning vue it’s simple are you learning your first frontend system? Or are you going to build a new application and you’re wondering if you should use Vue or continue with React.

If you are new to frontend libraries/frameworks then React it simply has more jobs, more opportunities and more knowledge that can be transfered to places like mobile using React native.

However, if you are wondering if you should build you’re next web application in it, then yes by all means vue 3 with Nuxt the server side framework that sits on top of Vue is a fantastic option, you won’t be let down and ever major tool that is build for React exists for Vue.

Lastly Nuxt 3 just came out in Beta which solves quite a few issues such as server side hot code reloading and better Typescript support. I am really looking forward to seeing that in general availability!

I didn’t know what to think at the start of 2021 but after 12 months of using it in my day job I think it’s a fantastic option.