Vue is a modern front-end framework that can help anybody build a website or web app. It’s lightweight, flexible, and easy to get started with. But it’s also a full, rich framework that can grow to meet the needs of the most advanced web app builder.
Let’s look at Vue.js and what you need to know to start using it.
Vue is the most versatile framework currently available for JavaScript. It’s also the easiest to understand for programmers and non-programmers alike.
Vue is easy to learn for people who are new to website development. Almost everyone who has worked with HTML has hit a wall where they want to do something that HTML can’t.
For example, what if you wanted to add a switch to change your website theme from light to dark mode? How about adding a simple menu hidden behind a hamburger button? That’s when you may need to learn some Javascript.
These are tasks that are pretty easy to do in JavaScript. You can add a snippet of JavaScript to a script tag, and you’re all set. This is what inserting text looks like with vanilla JavaScript:
The way that JavaScript references page elements can be confusing to beginners. Adding JavaScript with Vue is just as easy as adding vanilla JavaScript. But with Vue, you get more functionality and access to modern JavaScript techniques. This is how you insert text with Vue:
Let’s dissect those examples a bit. In JavaScript, the code had to look for the element, choose an aspect of it, and change it. In Vue, we told the HTML where to expect variable text. Then we created a JavaScript object, assigned it to the element, and set the variable text.
This simple example illustrates an important point. It’s best to keep your code decoupled from your HTML. In the Vue example, Vue doesn’t manipulate the HTML directly. It only manages its own business. And it gave HTML more functionality without adding code to it.
If you’re familiar with other frameworks, you may be aware that they usually need you to build an app from the ground up using their technology. This usually involves creating an app from the command line and starting a server. But in the previous example, we added Vue to a static website without all of that complexity.
Vue is a framework, though. On its introduction page, it says: “Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.” That means that you can use as little or as much of the power of Vue as you want in your apps.
You can use Vue to manage an image slideshow, or you can build a full single-page app with all the bells and whistles. That includes testing, routing, state management, security, and much more.
Due to its power and versatility, Vue appeals to a wide audience.
JavaScript is a rapidly changing ecosystem with lots of churn. It’s possible to dedicate yourself to a collection of tools and see them grow obsolete two years later. JavaScript also adds complexity to websites on its own. Installing a framework and a huge wobbly stack of Node packages only makes it worse.
Some people prefer to stick with the basics for that reason. HTML works fine, CSS has its quirks, and JavaScript is kind of funky. But they’re all rock-solid! They continue to change and evolve, but slowly and steadily. Many frameworks end up adding changes that will break your code.
However, there are a few scripts, like jQuery and Handlebars, that make your life as a front-end programmer easier. jQuery starts great, but turns into spaghetti when your code-base gets too complex. Handlebars is also nice, but doesn’t do much to make JS itself easier to use.
Vue can replace both of those tools and solve their problems. And it does so without completely taking over your website. It introduces modern JavaScript practices without the modern JavaScript headaches.
Vue is a lightweight framework with the functionality of much heavier frameworks. If you have experience with front-end web development, you can learn Vue in a few days. If you don’t, you can start with only as much as you need.
One of the main reasons to use a framework is that the tools they give you to make development faster and easier. For example, a progressive web app relies on programmatic navigation, custom layout, and structure that changes on the fly. Front-end frameworks make this challenge almost trivial. And Vue is no exception.
You can now finish projects that used to take months in weeks, thanks to modern frameworks. And because Vue is so lightweight and easy to work with, you can finish prototypes in hours or days.
Developers have come to expect certain benefits from modern front-end frameworks. String replacement for HTML, component-based architecture, and tooling are good examples. Vue has all of those benefits, as well as the ones mentioned in the framework section above.
Web-app developers often want to make their products available as a mobile app. Traditionally, they did this by hiring extra developers to build for iOS and Android. Then they’d have to find a way to coordinate between the three platforms. But today, there are other options.
One option is to use NativeScript to build mobile apps, which lets developers build for Android and iOS with the same JavaScript code. Nativescript developers can even port their web code to mobile without having to hire new developers. And it has great support for Vue.
Vue, Angular, and React are the three most popular frameworks according to the 2019 State of JS survey. Here are some points to consider about them:
- Angular was the first big-name front-end web framework. It’s published by Google and has been around since 2010. It introduced the world to dynamic HTML via directives and three-way data binding that makes code magically update on the page without a refresh.
- React was first released in 2013 by Facebook and is a more approachable alternative to Angular. React is best known for using JSX and components.
- Vue was released in 2014 by Evan You, a former Google employee. Vue didn’t introduce anything too groundbreaking. But it did introduce a much better and cleaner way of working.
Benefits of The Big Three
- Angular is an enterprise-grade beast of a framework. It’s been around the longest and is built and maintained by Google.
- React has been the most widely adopted of the big three frameworks, according to the 2019 State of JavaScript. It’s known as easy to work with and flexible.
- Vue is subjectively the easiest framework to learn and implement. And it stays as easy as it is without sacrificing a rich and powerful feature set.
Criticisms of The Big Three
Angular
Angular has been notoriously hard to learn in the past. Version 1 (AngularJS) used a lot of college-level computer science jargon in its documentation. Version 2 (Angular) simplified and streamlined a lot, though.
- When Google released Angular, it kept the higher-level concepts from AngularJS. Butthe company changed the details so much that many developers still found it confusing.
- There was a lot of churn in the early days of Angular, with code-breaking changes in almost every release. Angular is better now, but it’s still very formal, rigid, and hard to learn for some developers.
React
One of the best and yet most challenging aspects of React is JSX. It condenses HTML, CSS, and JS into one language. This makes everything simpler for developers, but harder for designers.
- JSX also makes working with existing libraries more difficult. Also, it’s considered an anti-pattern to put design, layout, and code in the same place. Doing so can create messy, unreadable code.
- React handles this gracefully by using components to separate code. But it’s up to individual developers to use components properly.
- React is technically a framework. But it lacks some important features like navigation and app-wide state management.
Vue
Vue solves all of the issues mentioned about the other big two. Unlike Angular, it is easy to learn. And unlike JSX, Vue components separate HTML, CSS, and JS.
- It’s much easier for designers to work in a Vue component. And keeping everything clean isn’t entirely up to the developer.
- The biggest challenges facing Vue are relatively low adoption and a lack of “killer apps.” Quite a few companies use Vue, but arguably, none of them have name-brand recognition.
Is Vue Another Fad?
Even though Vue has been around for several years, it’s still the new kid on the block. It also doesn’t have the corporate backing of the other two. And as mentioned already, there are no killer apps that showcase what it can do.
What Vue lacks in enterprise-level backing, it makes up for with passion and grassroots support. Evan You runs a Patreon campaign to support himself and one other developer. In a sense, Vue is democratically run. As long as there is enough interest in Vue that companies are willing to support it, Vue will stay around.
The Best Parts of Vue
Vue offers the best parts of the other front-end frameworks, plus many more features that are unique to Vue. Here’s just a partial list:
- Vue uses component-based architecture for structure and reusability.
- It keeps HTML, CSS, and JS separate in its components.
- Vue will look and feel familiar to developers and designers alike.
- It offers a full GUI to serve, build, and create projects.
- Vue uses hot reloading when it’s run as an app. Hot reloading updates only what has changed on a page without a refresh.
Vue is a privately owned project without the corporate overhead and politics. That may make it less desirable for enterprise ventures. But it’s easy to learn and fun to play with, making it great for edgy startups.
Maybe the best feature is that it’s designed by pragmatism, not by committee, which is what open source software is all about.