Introduction

Website Link

Vue.js, commonly referred to as Vue, is an open-source front end JavaScript Framework used for building user interfaces (UIs) and single-page applications (SPAs). It is particularly known for its simplicity, flexibility, and ease of integration with other projects or libraries.

It was created by Evan You and was initially released in February 2014.

Why Vue?

Here are some reasons why many developers prefer Vue over other JavaScript frameworks:

Easy to Drop into Existing Projects

Vue makes it easy to add interactivity to an existing site without having to rebuild everything. You don’t need complex tooling or a build step to get started - just include Vue via a <script> tag and you’re ready to go. This is perfect for gradually upgrading older websites or experimenting without a full setup.

Component-Based Architecture

Vue uses a component-based structure, which lets you build UIs as small, reusable blocks of code. This makes your codebase easier to manage, test, and scale. It’s a modern and clean way to structure frontend applications.

Fast and Truly Reactive

Vue is performant by design. Its reactivity system is compiler-optimized, meaning it can update the DOM efficiently without needing much manual tweaking. Most of the time, it “just works,” and you rarely need to worry about performance bottlenecks.

Official Ecosystem for Common Needs

Vue’s core team provides official libraries for common app needs such as state management with Pinia (or Vuex), client-side routing with Vue Router, and even support for server-side rendering through tools like Nuxt. These tools are well-integrated, stable, and maintained alongside Vue itself.

Excellent Documentation

Vue is known for its clear, beginner-friendly documentation. The official docs walk you through concepts step-by-step, with practical examples and explanations that actually make sense—even if you're new to frameworks. It’s one of the reasons many developers pick Vue when learning frontend development.

Built and Maintained by an Independent Developer

Unlike frameworks backed by big tech companies, Vue was created and is actively maintained by Evan You, along with a dedicated core team. This gives Vue a unique community-first approach, focused on developer experience rather than corporate goals.

Vue 2 vs Vue 3

Vue 3 is the newer and faster version of Vue, with many improvements over Vue 2. It has a better reactivity system, smaller bundle size, and great TypeScript support. Vue 3 also introduces new features like the Composition API, fragments (multiple root nodes), and built-in tools like Teleport and Suspense. If you're starting a new project, Vue 3 is the way to go.

Options API vs Composition API

Vue provides two styles for writing components: the Options API (used in Vue 2 and still supported in Vue 3) and the Composition API (new in Vue 3).

The Options API is easier to learn and keeps your code grouped by what it is (data, methods, etc.). The Composition API is more flexible and better for organizing complex logic, especially in larger apps or when using TypeScript. If you're starting a new project, Composition API is recommended.

Options API

<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 handlers 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>

Composition API

NOTE

SFC, stands for Single-File Component in Vue.js, is a .vue file that contains everything a component needs (template, script, style) in a single file.

In Single-File Components (SFCs), Composition API is typically used with <script setup>. The setup attribute is a hint that makes Vue perform compile-time transforms that allow us to use Composition API with less boilerplate.

<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>