Introduction to the VueJs Framework

This is a VueJs beginner series based on Vue.js v3.0, codename "One Piece"

Introduction

Vue (pronounced /vjuː/, like view) is a progressive JavaScript framework for building web user interfaces.
It provides tools to help make websites and apps faster and more dynamic.

Built on standard HTML, CSS, and Javascript Vue is lightweight and utilizes the Virtual DOM to modify the HTML markup making it quite fast.

Why is Vue called "the progressive framework"?

Vue is progressive as you can use it anywhere from a simple drop-in feature within an existing web app to add some interactivity to a fully-featured framework for a large-scale app such as social media or a video streaming web app.

Vue is incrementally adaptable with numerous libraries inside its ecosystem beyond the core library and is flexible enough to support external libraries enabling you to create more sophisticated multi-featured apps.

Quick Start

To use Vue you can link its library in a script tag within your existing web app as demonstrated below, or use it with the support of build tools (a topic we will get into in a later post).

<script src="https://unpkg.com/vue@3"></script>
<div id="app"></div>
<script>
  let app = Vue.createApp({}).mount("#app");
</script>

You then define a HTML block whose selector preferably an id you pass inside the mount function of the Vue instance.

A simple Vue application

The anatomy of a Vue application consists of two parts, a template which is in HTML and a Vue instance.

In our case after having linked our Vue library from unpkg, we should follow suit by placing a HTML block that will serve as the part where the visible part of our app (the template) resides and the Vue instance which is the invisible part of our app where most of the logic is expected to be placed.

Let's break down the two parts.

The Template

The template of a Vue application is a HTML block that has a unique selector attribute that we ought not to use on any other part down the DOM tree lest our Vue app produces unexpected results.

  <div id="app"> {{ greetings }} </div>

The double curly braces surrounding the variable greetings is what is known as a "Mustache" syntax. The Mustache is a prominent delimiter in many templating languages used to allow text interpolation into the final markup of the templates.
In simple terms, Vue replaces everything inside the curly braces with the corresponding JavaScript expression applied to the enclosed variable in the final markup, this will be carried out only if the variable has been declared inside the Vue instance, else Vue will throw an error.

The Vue Instance

The second part of our app is the Vue instance. A new Vue instance is initiated with Vue.createApp() then is attached to the template by passing the special selector from our template in the mounted function, rendering everything inside our template part of the Vue app.

<script>
  let app = Vue.createApp({
    return{
      return {
        message: "Hello there, my name is Mr. Noob"
      }
    }
  }).mount("#app");
</script>

The data property that returns an Object which contains our greetings variable is one of the properties of the Vue instance that provides reactive data for us to work with inside a Vue app.
More on variables and reactivity in Vue will be covered in future posts.

Below is an example of a simple Vue app that when run will display the message "Hello there, my name is Mr. Noob" on the resulting HTML page.

<script src="https://unpkg.com/vue@3"></script>

<div id="app"> {{ message }} </div>

<script>
  let app = Vue.createApp({
    data(){
      message: "Hello there, my name is Mr. Noob"
    }
  }).mount("#app");
</script>

Vue supports running multiple instances on the same page, in the example above we can add a new Vue instance as follows.

<script src="https://unpkg.com/vue@3"></script>

<div id="app"> {{ message }} </div>

+ <div id="app-two"> {{ message }} </div>

<script>
  let app = Vue.createApp({
    data(){
      message: "Hello there, my name is Mr. Noob"
    }
  }).mount("#app");

+ let secondApp = Vue.createApp({
+   data(){
+     message: "Hi, I am Jr, Mr. Noob's son, running from another Vue app instance."
+   }
+ }).mount("#app-two");
</script>

So, you can have multiple Vue apps in a single webpage carrying out different tasks, or adding multiple features.
In a real world scenario one instance could be displaying a slideshow of images while another could be submitting newsletter e-mails to a remote database via HTTP API calls.

Vue Use Cases

Vue has a wide range of use cases that span the whole scale of front-end development.
We can use it to add a bit of dynamism into an existing web app, such as adding a simple carousel or content that changes on user interaction e.g mouse movements or text input to creating complex web apps such as e-commerce stores with multiple categories and product pages supporting routing, browser-based data storage via Vue's own libraries such as the vue-router and vuex with features such as a cart, external API call requests and so forth.

Vue enables developers to start small on using it and supports incremental addition of its features without the need for total demolition of existing apps just to accommodate it.

Whether one chooses to use "vanilla" Vue to create apps or use one of the many battle-tested Vue frameworks is down to use cases and preferences.

The following is a list of some popular Vue frameworks.

• NuxtJs
• Gridsome
• VuePress
• Quasar Framework