I love building applications in Vue.js and here's why I think the future is looking bright for the framework and its community.
1. No build step required
A critical aspect of the Vue philosophy is it be easy to get started. Unlike some other popular frameworks, it's not necessary to use a complex build tool like Webpack to build an application with it. Just include a script tag pointing to the latest release for development or production, and you have access to the Vue runtime.
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
Having a low barrier to entry makes Vue a worthy consideration as a first JS framework to learn.
2. A world-class command line interface
Of course, many developers are looking for advanced development features like ES or TypeScript transpilation, hot module replacement, and tree-shaking, made possible by build tools. Vue has you covered there as well.
npm install -g @vue/cli
vue create my-project
This past year, the Vue core team re-wrote their command line interface from the ground up, resulting in Vue CLI 3. It's designed in such a way to promote best practices and a full-featured default Webpack configuration that should be easier to extend without making it difficult to upgrade, i.e., "no need to eject." Vue CLI provides a ton of useful additional features, including an interactive project initialization wizard (available through the terminal or a web-based UI), a plugin system to support generators and configuration for community add-ons, and the ability to specify alternative build targets, like web components or as libraries.
3. Friendly learning curve
A common criticism I hear about Vue is that its API has a larger surface area than some other popular frameworks and I agree up to a point (depending on the framework). Ironically, another thing I hear over and over is Vue is easy to learn. Though subjective and anecdotal, this has held for folks I've heard from regardless of previous experience with JavaScript frameworks and JavaScript in general.
One reason, I believe, is that Vue is a "progressive JavaScript framework."
No need to learn the whole API to get started with Vue, no need to learn a new syntax like JSX; only basic HTML, CSS, and JS knowledge is required to get started.
4. A solid ecosystem
Before Vue, I've gotten frustrated with the fractured nature of learning best practices beyond the basics. What client-side router should I use? Which data management/Flux implementation should I use? How do I test my components? How should I configure my build system? Over time, answering these questions has gotten easier, depending on the community, but I've liked Vue's approach since the start.
Vue provides official support for several essential add-ons, including vue-router for client-side routing, vuex for managing state, vue-test-utils for unit testing components, the vue-devtools browser extension for debugging, Vue CLI as described earlier. None of these tools are required Vue can work quite well with alternatives for these libraries, like redux or mobx instead of vuex, or another router. The critical point is that the community assists developers by supporting a set of very good recommended defaults, something that a backend framework like Ruby on Rails has traditionally done very well.
5. The Vue instance
The most potent aspect Vue is its reactivity system. We can tap into it through the Vue instance.
new Vue({
el: "#app",
})
This invocation is how every Vue application is initialized. It also creates a fully-reactive root component of the application. A Vue instance can also be used as an event bus or for tracking dependency changes separately from the application component tree, say, as an implementation detail of a Vue plugin.
Vue's reactivity system is beautiful in its simplicity. Playing with the Vue instance is an excellent way to understanding how the reactivity system works and level up one's Vue, and JavaScript, skills in general.
6. Vue 3 lands this year
Speaking of Vue's reactivity system, Vue 3 is expected to ship this year. Among some architectural and performance improvements and minor API changes, Vue 3 provides a new Proxy-based implementation of its reactivity system.
The Proxy-based system solves some of the known caveats with Vue change detection:
In Vue 2, Vue cannot:
- Detect property addition, e.g.,
vm.b = 2 - Detect array modification through indexing or modifying length, e.g.,
arr[0] = 2
- The workound: use
Vue.set, e.g.,Vue.set(vm, 'b', 2)
Vue 3 Proxy-based reactivity makes these annoying issues go away.
7. An amazing community
Since I've started using Vue, I've been fortunate to learn from a variety of Vue developers through forums, on Twitter and GitHub, and at local meetups. Vue has a distributed, hard-working core team, who are continually improving the framework without over-burdening developers with a bunch of fringe features or painful upgrades. The Vue forums is a great way to get insight from experts on tricky issues. Vue conferences, like VueConf.us and Vue Amsterdam, a great way to connect with other members of the community and attend more in-depth workshops, are already taking place all over the world. There's also Vue Vixens, an organization that provides safe environments for people who identify as women to learn Vue.js.
Bonus. It's just plain fun
I got my start in web development just as the Ruby and the Rails framework was taking off. One thing I have always loved about Ruby is creator Yukihiro Matsumoto's explicit (and, dare I say, audacious) goal of inventing a language optimized for developer happiness.
I get these same feelings when I build interfaces with Vue.js. I was spending less time wrestling with configuration and APIs and more time building and having fun doing it.
While I don't know that Vue.js was created so explicitly in the name of developer happiness, for, it has and continues to be fulfilling to that end. It's something I hear from many others who've taken time to learn the framework and probably the most important reason I'll recommend Vue.js in 2019.
So what are you waiting for? Best of luck with your Vue.js journey in the coming year.
Did you like this post? Subscribe to my newsletter on rossta.net and I'll send you an occasional email about web development with Vue.js
Top comments (23)
Great little article. I've been using Vue for an easy way to build reactive WordPress plugins, and I love it. I also just started building a blog with nuxt. The future is looking bright for Vue. Cheers!
Is it possible to use wp plugins when using Vue with WordPress? I mean if you use Vue can you install and use wp plugins functionalities if you need any plugin to install for any specific needs?
I suppose it depends what you need to do. If you use Vue you can use it to do ajax calls through a rest API endpoint you set up with WordPress and php. Then you can do database manipulation, call other WordPress plugs or basically do anything else through this API. Vue essentially is just front end so you still need to wire it up to the back end somehow
How can I change frontend without vue? Is there any other options
In wordpress everything is ran server side with PHP, and you can use php to write template files, and markup very easily. There are also other libraries like handlebars you could use to render templates from data as well. Just depends on what you are familiar with and what kind of data you are displaying.
Cool! Using Vue for Wordpress plugins is a use case I hadn't thought of before. Have you written about it or posted code anywhere?
I haven't written about it yet, but this is a starter that I forked, and use for wordpress plugins.
github.com/tareq1988/vue-wp-starter
It comes with a pretty bare bones front end and back end app. The front end is based off a short-code so you can throw it anywhere on a site.
I replaced less for sass and a few other things. I'll have to put together a quick tutorial on it here soon.
Nice one mate, good to see more Vue in WP.
It's a shame React did a back-flip on their license when they realized the world's largest CMS was about to drop it in favor of Vue (the second-contender at the time).
Vue will always be my first framework love. Before I became a JS dev, I was doing Drupal, and it was SUPER easy to set up in a Drupal module (which says a lot hahaha)
Number 1 was one of the inital reasons for me to start with Vue.js (a while ago already). At that time I wasn't really prepared for WebPack, etc..., because my (long-established) workflow was completely different.
I was also flashed by the reactivity and the ability to throw JSON-structures at Vue, so it turned out (very fast) to get my favorite framework, because of it's simplicity and elegancy.
I remember the days where I was writing simple things in Angular - but most often it felt as using Angular for simple things is just an overkill (both in terms of workflow and speed).
Vue.js came to the rescue and allowed me to incrementally learn and apply the new stuff immediately, without the need to dig into documentation for every simple problem.
So I absolutely agree: Take Vue.js for a spin - it's easy and fun. (...and fast as well - if that matters)
You didn't mention a TypeScript support in Vue, to put it mildly, it's not ready for TS. Tons of libraries doesn't have type declarations, so you need to write your own, or use generic
declare module 'asd/asd'. Vuex with TS is nightmare.I see many devs, who likes to use Vue, don't know fundamental things about JS (i keep silent about TypeScript), that's why so much love it has, lower entry barrier = more love.
I'm using both now, but i like React more, because it has less abstractions over JS, than Vue or Angular. But, when Vue 3 will be released, things might change because of composition API (similar to React hooks, but with lifecycles).
Great article !!! I'll begin to learn Vue.js, in Visual Studio Code is easy to use with .NET Core, I saw a lot of tutorial around, I hope Microsoft put it in Visual Studio soon like Angular and React , and I believe that is gonna happen very soon ... Thanks by the article man, was very good :))
I'm super stoked about the release targeted for this year, but the caveats are still going to be in place for organizations that need to continue to support IE.
Your #1 point cannot be overstated. Being able to use Vue in the browser without a build step (or in-browser transpilation) makes it the most approachable framework out of the big 3. Good post!
Thanks, Denny! Great point about the fact that the Proxy-based getters and setters won’t work for everyone, but at least the old style will still be supported..
Nice article and many good points but I dont like that it picks on other frameworks like React and Angular. It says JSX is a new syntax but from my learning experience, JSX felt very natural and Vue was hard because of its directives (new syntax to learn?) and api. I believe this attitude in telling creates a distasteful feeling.
I am already in love with VueJs since last year and you made me crazy with your easy explanation. Your words are really inspiring.
I started write my Vue components in last december and I'm super excited!
Super easy to learn, super simple to write, super readable to debug.
Yup, you're right.
VueJS(vue-router,vuex)+Bootstrap Grid only ( Bootstrap is jQuery dependent. So, I don't want to use jQuery anymore.)+Vanilla CSS+Laravel = 😎😎😎😍😍😍🤩🤩🤩