What Is Vue.js? (Uses + 5 Website Examples)

Vue.js traces its origins back to 2013. A JavaScript developer working at Google, Evan You, made the first commits to the project in July 2013, and gave the framework its first official release in February 2014.

Inspired by the capabilities of AngularJS — another JavaScript framework that enabled two-way data binding and dynamic interfaces — Evan wanted to create something that offered the capabilities of AngularJS in a more lightweight format. To quote Evan: “I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight.”

In this post, we’ll explain the basics of Vue.js, including what it is, what you can do with it, and provide examples of sites and apps that run on this framework.

What is Vue.js?

Vue.js (or simply Vue) is a lightweight, JavaScript framework for building reactive web user interfaces. Vue extends standard HTML and CSS to create a suite of powerful tools for building the front end of interactive web applications.

Operating within the model-view-viewmodel (MVVM) framework, the main library of Vue focuses on the viewmodel layer, providing reactive synchronization between the model and view layers via two-way data binding. This simplifies the creation of modern web apps based on the single-page application (SPA) model.

Data binding allows Vue to dynamically update HTML elements that are “bound” to underlying Vue objects. This enables developers to create web applications that can run in a user’s browser and provide an interactive experience that doesn’t require refreshing the page. With the ability to update HTML and CSS displayed in the browser in response to events in the underlying JavaScript, developers can use Vue to create everything from live chats to animated video games within a web browser.

What can do with Vue.js?

Traditionally, creating interactive web applications has meant creating workarounds to the inherently static nature of webpages rendered in a browser. Prior to the advent of JavaScript frameworks like AngularJS (and eventually Vue and other frameworks such as React), the process of updating information in a browser without reloading the page required substantial JavaScript code.

With Vue, the Document Object Model (DOM) is linked to the view instance, creating the model-view piece of MVVM. This allows for the creation of highly interactive webpages and SPAs that can perform complex operations without ever reloading the page within the browser.

By linking the DOM and the model-view, specific areas of a webpage can be rendered and updated without affecting the entire page. This allows for interactive elements whether they are simple features, such as real-time chats that update as new messages come in, or more complex use cases like advanced animated GUIs that operate entirely within a web browser.

Leveraging two-way data binding, Vue allows the HTML presented in the view layer of the browser to change automatically on-the-fly to reflect changes in the underlying model. For example, a variable changing in the back end can automatically trigger a change in the interface.

Incremental Integration

One intriguing aspect of Vue is its ability to be incrementally integrated into an application. Since the original goal of Vue was to be as lean and lightweight as possible, it makes sense that it doesn’t burden you with an entire framework’s worth of potentially unnecessary features.

You can pick and choose what you need from Vue and quickly integrate it into your applications. In its most basic form, Vue consists of a single library that focuses on just the view layer. Supported by a cornucopia of other optional libraries, Vue can be adopted as an individual library, or as an entire framework of different capabilities depending on the use case. Developers have the option to progressively migrate to or adopt new Vue libraries as required by their projects.

Incremental integration is one of the primary differentiating factors that separate Vue from other JavaScript frameworks such as AngularJS and React. True to its original lightweight philosophy, Vue focuses on having a minimal footprint and being easy to get up and running.

How to Use Vue.JS

Let’s take a look at some very simple Vue code to understand how it interacts with HTML and transforms a static page into a dynamic and interactive one.

 
<html>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<body>

<div id="output">

  

</div>

<button onclick="button1()">Button 1</button>

<button onclick="button2()">Button 2</button>

<script>

var buttonObject = new Vue({

  el: '#output',

  data: {text: 'Click a button.'}

})

var buttonPresses1 = 0;

var buttonPresses2 = 0;

function button1() {

    buttonPresses1++;

        buttonObject.text = "You clicked button #1! You've clicked this button: " + buttonPresses1 + " times.";

   

}

function button2() {

        buttonPresses2++;

        buttonObject.text = "You clicked button #2! You've clicked this button: " + buttonPresses2 + " times.";

}

</script>

</body>

</html>

Vue has a very simple syntax that will be immediately familiar to anyone with experience working with JavasScript and HTML. In this example, we’ll create a simple page that allows the user to press one of two buttons and counts the number of times each button has been pressed.

Here’s how it works.

1. Define HTML.

First, we define some basic HTML. We create a div with an id of output. This tells Vue to create data binding between this div and a Vue object we’ll define later. Vue uses curly brackets —  — to enclose data from its two-way binding, so we add the  to create a div that will be dynamically updated as the underlying object changes.

2. Create two buttons.

Next, we create two buttons using HTML’s button function. We specify that when clicked, these should trigger JavaScript functions called button1() and button2().

3. Define a Vue object.

Beginning the JavaScript within the <script> tag, we define a Vue object called buttonObject. We use el to bind it to #output so that it will be linked to our existing HTML element defined in the div. Then we add some basic data to it in the form of text. For now, this will be a placeholder method.

4. Create variables to track button clicks.

We define two variables to track the number of times the buttons have been pressed and default them to zero presses.

Two functions are created: button1() and button(2). Each of these increments the relevant buttonPresses variable by one, then modifies the text in our buttonObject to let the user know which button they pressed and how many times they’ve pressed it.

Because we linked buttonObject.text to the div at the top of the script, each time a button is pressed the page automatically changes the text and displays the number of times the button was pressed to the user.

The app’s output should look like this:

This simple example illustrates the underlying capabilities of Vue. With data binding, we can update sections of the page in response to user inputs and changes in the underlying Javascript code.

Examples of Vue.js Apps

There is no shortage of popular web applications that rely on Vue to create strong user interfaces. Here are some of the most popular examples:

1. Netflix
2. Chess.com
3. GitLab
4. Grammarly
5. VICE Video

Expanding Your Horizons With Vue

Now that you understand what Vue is and what it does, you’re well on your way to creating dynamic SPAs and interactive web applications. Supported by an extensive ecosystem of libraries for specific functions, Vue provides capabilities for creating dynamic view layers through two-way data binding. Vue puts front-end developers on a fast track to creating everything from simple interactive web applications to complex GUIs for web applications of all descriptions.

Since Vue can be incrementally integrated, it’s easy to take what you like from Vue and add it to your next JavaScript project.

Whether you’re a veteran front-end developer hoping to dive in with a lightweight framework, or a newcomer to front-end development hoping to start in the shallows, Vue makes the journey simple and provides many shortcuts to getting started.