Cover image by Clément H on Unsplash
I recently started working with Vue.js, and so far it has been one of the most enjoyable frameworks to learn. It’s very easy to set up and you can build something simple very quickly. I have had a so much fun with it recently, and felt the need to write this post and share some of the reasons I think people should give it a try!
Simplicity
Adding Vue to an existing web project is relatively simple. You can start coding very quickly without having to know anything about JSX, ES2015, or build systems to get started. As long as you are familiar with HTML and JavaScript, you can read their guide and build something basic within a day, which is a big advantage in a fast-paced development team where you may have to pick up something quickly.
Flexibility
With Vue, you can write an app very quickly and run it straight from the browser, or you can build a complex application using ES6, JSX, components, routing, bundling etc if you want to.
It can handle the many different ways in which you might want to use it. It is also flexible enough that it accommodates for different ways of writing your code, for example, you can write a template in HTML, or in Javascript, or you can use JSX.
It gives you the freedom to structure your application in a way that suits you, there is no ‘right’ way.
Comprehensive documentation
The Vue documentation is very detailed, easy to understand, and includes various code examples. It also has a good, growing community of developers that can offer help when needed.
Can be used for simple and complex applications
For larger, more complex applications you can use Vuex for state management and routing. A key difference between using Vuex and using Redux/Flux with React for example, is that Vue’s companion libraries are officially supported and kept up to date with the core library. Redux and Flux came from the React community and is not tied to React.
Transition effects
During the transition process, Vue adds and removes classes on components/elements. It has 6 different classes which you can then customise in Sass to handle timing, and the start/ end styles of the transition.
It is fun!
I have personally had so much fun learning to use Vue. Coding can be frustrating at times, but with Vue whenever I learn how to do something new it is exciting. They have made learning a JavaScript framework incredibly enjoyable and rewarding.
Summary (TL;DR)
In summary, here are some of the advantages of using Vue.js:
- It is a stable progressive framework
- Easy to learn and understand
- Simple and flexible
- Uses MVVM architecture
- Comprehensive documentation available
- Focus on organisation / project architecture
- Can be used for simple and complex applications
- State management is simple and intuitive
- Provides a number of ways to use transition effects
- It is a lightweight framework in comparison to React or Angular (around 20-30kb in size)
- It is fun!
Originally posted on http://www.lynnefinnigan.com/blog/
Oldest comments (26)
Yeah totally agree with you, on all points.
At some point i got really bored with coding, and a couple of months ago i decided to check out Vue.Js and how it looks like, i was fascinated and coding was fun again.🙂
Adding the Vue Dev tools i was able to see what pages were made with Vue.
I was pleasantly surprised to see that 9gag is one of them.
I was exactly the same, after a while things become very normal/mundane. Learning Vue has been the most fun I've had with coding in a while!
Really? I didn't know that. That's pretty cool :)
Thank you for your article I was going to spend the time to learn React since i was looking for something new to use at work but it seemed like alot of work to implement in an existing application. Vue has definitely sparked my interest, good article
Thanks :) For an existing application, Vue is definitely worth investigating! Good luck!
Totally agree!
I recently started learning and it is indeed easy and fun to get started. And the possibilities are endless!
It feels to me that Vue is to React what Flask is to Django: more lightweight, less opinionated, easier to learn, more simple but also powerful.
Exactly! React seemed overkill for what we needed from it. Vue does all the things we need, and it was easy to integrate. Much more flexible. :)
Nice i want to learn
Enjoy! :)
That's great! I definitely agree, the beauty in it is that it doesn't get in your way and isn't the main focus.
thanks you its very useful post
Way to often I hear this sentence when someone talks about a framework. Why? This is not a useful metric. I can write a static HTML in no time too, does it providr any useful information for me creating an actual app? No. Most of the time you get neat frameworks that a fast to get going, but fall apart with larger stuff
It's just getting across the point that it is quick to learn, you don't have to spend hours to throw up something basic. If you have no experience in React, getting a React app running would be much more daunting than using Vue for example.
I could not agree more! :) I also love all the available dev tools (vu-devtool, vue-cli, vetur, etc...) which make developing so enjoyable
"Adding Vue to an existing web project is relatively simple. You can start coding very quickly without having to know anything about JSX, ES2015, or build systems to get started."
This part needs to be stressed more and more in my mind and is the biggest problem with so many JavaScript frameworks/libraries right now. So many frameworks force you to jump through so many hoops to make sure you have the build system they chose setup correctly. Force you to run their project template setups.
I sometimes just want to quickly prototype something. Linking to one JS file, writing like a couple lines of code without the need of a huge boilerplate is was has me sold on Vue more than any other framework right now.
I completely agree, this is the thing that I struggle with the most and I expected the same with Vue.
At times I find myself overcomplicating things in Vue if anything, just because I expected it to be harder to do than it is!
I agree! I've been learning Vue.js because someone is using it at work. I highly recommend loading up Node and trying the Vue-cli package. To me, that's where it really shines. The only problem is that going back to traditional JS coding is hard after you've used a framework like this. :)
It's hi time I give vue a try.
Thanks for the article
Great post. I have to add another thumbs up for VueJs.
I chose to use it on our current work project due to how intuitive it was to learn and how it wouldn't mean the team having to wrap their heads around yet another way of doing things.
It's been such a natural framework to learn and as we've used it we've found that it's really facilitated with keeping code neatly organised.
Like others have commented it's also been a surprisingly joyful experience. I've found myself on a few occasions thinking it'll never handle this and low and behold, bang, it's all hooked together and just working. Brilliant!
I completely agree! So much fun :)
Indeed Vue has been a great 'breath of fresh air' with regard to making coding fun and exciting again.
I'm also diving head first into GraphQL with Vue as well. Vue is definitely fun to work with.
Sounds like a fun project! Enjoy :)
It is maintained by a single person (practically). What do you think of that? Maybe I'm paranoid, but I worry a bit each time I check the repository and I see that only Evan is coding 😥
So you're more worried of who developed it than how it was developed?
*sarcasm* You sound interesting.
Vue is very nice, but his community only says "It's very easy to use" and I do not see anyone contributing to it. That's what I was trying to say. Anyway, I lost the track to Vue for a few months, maybe that change or surely will.
Just because you only see one person committing on the repository doesn't mean that only one person is working on it. And also, vue doesn't only have 1 repo, it has many repos dedicated for each official plug-in/modules which it uses (vue-router, vuex, vue-18n, etc...).
See the team: vuejs.org/v2/guide/team.html
You can also check this link dev.to/ankitkapoor5821/top-vuejs-w...