vue-docs

Vue.js — The Progressive JavaScript Framework

Version: Vue 3.x (latest) | Source: vuejs.org

Vue (pronounced /vjuː/, like "view") is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative, component-based programming model that helps you efficiently develop user interfaces of any complexity.

Core Features

• Declarative Rendering: Vue extends standard HTML with a template syntax that allows you to declaratively describe HTML output based on JavaScript state
• Reactivity: Vue automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen
• Component-Based: Build UIs from reusable, composable components
• Progressive: Use Vue as little or as much as you need — from enhancing static HTML to full SPAs with SSR

The Progressive Framework

Vue can be used in different ways depending on your use case:

• Enhancing static HTML without a build step
• Embedding as Web Components on any page
• Single-Page Application (SPA)
• Fullstack / Server-Side Rendering (SSR)
• Jamstack / Static Site Generation (SSG)
• Targeting desktop, mobile, WebGL, and even the terminal

API Styles

Options API

Uses an object of options (data, methods, computed, watch) to define component logic:

export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() { this.count++; }
  },
  template: `<button @click="increment">{{ count }}</button>`
};

Composition API

Uses imported API functions to define component logic:

<script setup>
import { ref } from 'vue';

const count = ref(0);
function increment() { count.value++; }
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

Which to Choose?

• Options API: Easier to understand for beginners, good for smaller projects
• Composition API: Better for larger projects, better TypeScript support, better logic reuse via composables
• Both styles can be used in the same project; components are compatible