Getting Started

Vue.js Introduction

Discover Vue.js — the progressive JavaScript framework that is approachable, performant, and versatile.

What is Vue.js?

Vue (pronounced like "view") is a JavaScript framework for building user interfaces. It is built on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model.

Why Vue.js?

Approachable: Builds on HTML, CSS, and JS — easy to learn
Performant: Truly reactive and compiler-optimized rendering system
Versatile: A flexible framework that scales from simple enhancements to full SPAs
Batteries included: Has official solutions for routing and state management

Options API vs Composition API

Vue.js supports two styles of writing components:

Options API: Traditional Vue style, organized by options (data, methods, computed)
Composition API (Vue 3): Logic organized by feature, more flexible, similar to React hooks

This tutorial uses the Composition API with the <script setup> syntax.

Example

javascript

<!-- Single File Component (.vue) -->
<template>
  <div class="app">
    <h1>{{ message }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

// Reactive state
const message = ref('Hello, Vue!');
const count = ref(0);

// Methods
function increment() {
  count.value++;
}
</script>

<style scoped>
.app {
  text-align: center;
  padding: 2rem;
}
</style>

Try it yourself — JAVASCRIPT