Vue.js - A versatile solution

Vue is a progressive javascript framework. Under the hood, it has a reactivity system with declarative rendering (one might say similar to what we have in React.js? Yes, you can say that). Vue is being called a framework, and very rightly too, because of all the add-ons it provides. It is an ecosystem that supports Server Side Rendering(SSR), Single Page Application(SPA), Static Site Generation(SSG); moreover, you can develop Progressive Web Apps(PWA) and Browser Extensions(BEX). There are add-ons like CLI, testing libraries, build toolchains, router, state management, and IDE tools built specifically to support Vue core. Let's take a dive in why we are calling Vue versatile.

Example Vue.js code


A .vue file signifies a component. It is just an extension to HTML, CSS, and Javascript. The example below illustrates an SFC - Single File Component, a defining feature of Vue.
Note: SFC requires a build step.

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>


Vue 3 provides two API preferences.


Options API


Below is a basic example of Options API in action.  This example can be found in the documentation as well. Those who prefer Object-Oriented programming find this API handy. What we are exporting in the script tag is called a "component instance".

<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event listeners in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
Counter Example - from Vue docs


Composition API


Composition API (newly introduced in Vue 3) uses more of a functional approach. The setup attribute allows the use of imports and top-level variables/functions ready to use in the template. Thus, reducing boilerplate code. A Combination of Composition API and SFC works well for full-fledged applications.

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
Counter Example - from Vue docs


We will take a look at what the ecosystem provides in detail below.

  • Vite: Vite (pronounced as "veet") is a lightweight build tool. It provides a dev server with fast Hot Module Replacement(HMR) and a build command for optimizing assets for production using Rollup bundler. Provides SFC support via @vitejs/plugin-vue. In Vite, SSR support is experimental. This tool is a good option for SPAs.
  • Vue CLI: It is a webpack-based toolchain and is now in maintenance mode. So, it is better to prefer Vite over this.
  • Vue Router: This is a core library for handling client-side routing. Out-of-the-box features include history modes(HTML, hash, memory), scroll control for each page, and automatic encoding.
  • Vuex: Inspired by Flux, Redux, Vuex is a global state management library tailored to Vue.js needs and commonly used in Vue 2.
  • Pinia: Pinia is a lightweight store library in Vue and works well with SPA and SSR. It could be called an extension to Vuex and is officially the state management library for Vue 3.
  • Vitepress: A Vue-powered static site generator. Its good use case is content-based websites such as documentation sites or blogs. Vitepress was known as Vuepress for Vue 2.
  • Quasar Framework: Allows creation of website/apps in almost all flavours(SSR, SSG, SPA, PWA, BEX, Mobile Apps, multi-platform Desktop apps) powered by quasar/cli with minimal configuration. It provides UI Library (that follows Material Design guidelines) out of the box.
  • Nuxt.js: Inspired by Next.js and Remix, it is ideal for creating SPA, SSR, and SSG. One can use a combination of SSR and SSG in their Nuxt App. While Nuxt 2 uses Vue 2, Nuxt 3 uses Vue 3, and the stable version will be soon rolling out.
  • IDE Setup: VSCode + Volar(Extension) works well. Volar provides code formatting for SFCs out of the box.
  • Other: Easily integrated to build desktop apps with Electron or Tauri. Mobile Apps with Ionic Vue. It also comes with Custom Renderer API targeting WebGL(ThreeJS) and terminal.

Stay tuned for more blogs on Vue.js!

Divyajyoti Ukirde

Divyajyoti Ukirde

Senior Software Engineer | Investing in knowledge | with Passion for building stuff