Why Vue.js Is Great For Everyone

Recently, during a hackathon organized by my company, I implemented a prototype application with a framework by the name of Vue.js.

Going into the hackathon, I was basically a complete Vue newbie. The entirety of my Vue experience was obtained from tutorials. This meant I had learn on the run. Amazingly, and much to the credit of Vue, I achieved a lot more than I expected. I learned how to implement components, how to properly handle events, as well as how to create some fascinating animations.

What really surprised me about Vue was just how easily it was learned by multiple types of developers. For example, I ran into my ex-roomate — an Erlang programmer with very little front-end experience — who was able to create an application utilizing Vue in as little as a week. After witnessing my previous room mate’s expedited learning process I came to the conclusion and belief that Vue can be easily learned by backend and front-end developers a-like.

My experiences with Vue obtained from my company’s hackathon definitely shed some light on the potential for utilizing Vue for your own prototyping and your own applications.

1. You don’t need to learn any new technologies

For example, Angular utilizes TypeScript and React utilizes JSX. In the previous examples you can obviously write your application without the extensions, but it definitely make your code a lot longer and much messier when you leave out TypeScript or JSX respectively.

Now don’t get me wrong. I’m not saying you shouldn’t use TypeScript or JSX. They definitely go a long ways to clean up your code — especially for bigger applications. I believe strict type systems are always good and that JSX has a great syntax to create elements.

However, the time needed to learn these tools is quite extensive. This is one of the reasons I am recommending Vue. Vue doesn’t force you to use something extra. You don’t need TypeScript or JSX to make Vue code beautiful. To start Vue, all you need to learn is Vue’s directives on HTML and Vue instances in the JavaScript. So, you can start Vue with basic knowledge of HTML, CSS, and JavaScript to make your Application!

2. Vue CLI and Vue Hot Reload Tools to Improve Your Productivity

Vue-cli is a terminal/command scaffolding tool usable in Vue projects. It provides a dev server as well as an extremely simple setup for you.

The development server also provides hot reloading, an extremely useful feature that allows your webpage to update without you having to reload your browser. All you have to do is save your code in your text-editor and bam!

Your browser automatically reloads allowing you to immediately see your changes live. Let’s say you’re trying to update CSS to change the font-size of an element. Normally, you’ll go to Chrome’s Inspector and change the font-size on the debugger, right? Not anymore. Update the styles in your .vue file, and it immediately reflects the updates in the browser without breaking the application state.

Vue’s hot reload feature is quite useful in instances similar to when you need to change a font-size in a vue modal. Normally, updating any file takes multiple steps and then you have to completely reload the file in your browser.

With vue however, you can just make the changes and when you save the file you can immediately see the updates in your browser without reloading the page. This not only works for CSS style changes but also for JavaScript and HTML updates. When you update the Vue components JavaScript, the component is actually completely destroyed and re-created. When the component is destroyed and re-created it has no affect on any other component or aspect of the webpage — allowing for hot-fixes without reloading on the JavaScript part of the applications!

3. Simple Component Structure

That being said, if I’m being honest I did not like the code structure at first because I was so used to managing component parts throughout multiple files. I wanted to run a linter script for each .js and .css file — but how it it possible to run a linter if everything is in a single file?

It turns out that I never had to, and you don’t need to, worry about simple inconveniences like this. Vue has an option to run eslint for .vue files. On top of that, vue-cli sets all of this up for you! The only other concern I had was that my text editor(Visual Studio Code) didn’t look very good on .vue files at all. To fix this problem, all I had to do was install a plugin so that my text editor recognized .vue files and was able to highlight/syntax them just like any other file! Almost all text editors will have a Vue plugin.

Since linting and file syntax are no longer an issue, why not put all of the code into the same file? It makes everything simpler. So far, I have not had any problems with this layout. In fact, it makes things much quicker. You don’t have to open extra files to see styles or scripts. Everything for the given Vue template is in the same file.

If your .vue file becomes bloated, then it’s time to think about splitting the code into another Vue component. This is in comparison to adding 3 extra files(HTML, JS, CSS) for a new component of your application. When using the amazing framework of Vue, the cost to create a new component is extremely low and simple — making your job much more easier!

Full Stack Developer, London, Japanese