How Does Vue.js Work?

There’s a good chance that you ended up on this page researching Javascript frameworks or how to use Vue.js. Vue.js is a progressive Javascript framework used for creating single-page applications quickly.  

Let’s talk about what Vue.js is, how Vue.js works, and whether Vue.js is the right javascript framework for you. 

Learn Vue.js with CBT Nuggets

If you work with frameworks or plan to, learning Vue.js is a smart bet. Develop and hone the skills you need to leverage the Vue.js framework with our Vue.js Essentials Online Training course. Sign up for a free 7-day trial to start training now!

What does "progressive" in progressive framework mean?

The progressive part of that statement means that with Vue.JS you start small and build on the application as needed. That’s a loaded statement. 

First, Vue is small. It builds only with components and libraries the app needs to run. Vue weighs in at 18Kb in size. It’s that tiny. Because of how Vue works, as soon as the primary components of the page are downloaded to the client’s device, the core page can start being displayed. This contrasts with other frameworks like React, where the entire application must download before executing. 

Second, Vue is designed to work with other frameworks and tools. Just because your project is three years into development doesn’t mean you can’t use Vue. Vue.JS can be incorporated into existing projects gradually as project maintainers see fit. 

What is a Javascript framework?

A Javascript framework is like an architectural blueprint and language combined to create the scaffolding for rapid application prototyping and deployment. That’s a mouthful.

If you’re familiar with the world of Linux, here’s a better analogy. A Javascript framework is like Arch of the Linux world. You can build Linux from scratch (in the same way you can build a web app with pure javascript), but it’s a laborious pain. On the other hand, you could use Arch as a base Linux framework and build your own version of Linux like SteamOS or Manjaro. 

In this example, Vue.JS would be like Arch, while your web app would be like SteamOS. If you’re wondering where Node fits into this, Node would be like Debian for Ubuntu (back in the old days). 

What is a single-page application?

A single-page application is a web app that uses a framework where components are replaced in the object model of that webpage without loading new pages. 

Basically, if you navigate to the Contact Me section of a single-page app from the home page, only the middle of the webpage is replaced instead of loading an entirely new webpage. 

How Does Vue.JS Work?

In the first part of the article, we explained the academic version of how Vue.JS works. This section will paint a broader picture of how you would build a Vue.JS app from a developer's point of view. 

A Vue app is created much in the same way as a React app. First, the Vue.JS packages must be installed via NPM or Node Package Manager. Once the Vue.JS packages are installed, a command is run in the command line to create and initialize a bare Vue project. 

Like other Javascript frameworks, Vue also comes with routers, stores, and state management. Though these concepts are implemented differently, the ideas are the same. A router instructs the app on which components to load, the state stores global keys with values, and state management tracks what’s happening in the app at any given time. 

Where Vue diverts from other Javascript frameworks is how files are written. Each Vue file has three parts. The first part is an HTML template. This template holds all of the HTML for the component. The second part is Javascript. The third part is the CSS styling for the page. 

Because Vue uses plain old HTML to handle the visual objects in the code, it’s super easy to write. However, Vue incorporates unique HTML ‘tags’ to handle things like state management and display. So, for example, you can bind data from the app’s store to the HTML, or you can display objects based on an if statement. 

The Javascript portion primarily consists of an object that is returned to the core of the app. This object has special sections to hold the local store, the objects functions, a mounted section used to execute commands when the component mounts in the app, and more. 

CSS is standard fare in Vue. Any CSS added to each component is local to that component only. 

Each component of the app is created in this way. There are a variety of ways that you can organize and call components, too. It depends on which method you prefer to use. Either way, these components are used to build on top of each other to create the app. 

The Vue store can be used throughout the entirety of the app. Data can be passed via props between children and parent components, but it’s nice not to have to worry about that sometimes. 

Because of how you interact with Vue — creating files for it — as explained above, makes it easy to learn and use. Looking back at the time it took me to pick up and learn React and Vue; I spent far less time learning Vue.JS.