Minimal boilerplate. Readable components. Predictable reactivity.
Vue.js is designed to be incrementally adoptable. You can start small and scale up as needed. Whether you're adding interactivity to a static page or building a complex single-page application, Vue has you covered.
<div id="app">
<button @click="count++">Count: {{ count }}</button>
</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
const count = ref(1)
return { count }
},
}).mount('#app')
</script>
This renders as:
This makes Vue approachable for beginners, flattens the learning curve, and lets you focus on building your UI instead of assembling a complex toolchain.
Will it re-render? Should I memoize this function? These questions don't exist in Vue. The fine-grained reactivity system tracks dependencies automatically, making changes predictable and easy to reason about. No magic, no surprises.
<script setup>
import { computed, ref, watchEffect } from 'vue'
const price = ref(25)
const quantity = ref(3)
const total = computed(() => price.value * quantity.value)
watchEffect(() => {
console.log(`Total price is now: $${total.value}`)
})
quantity.value += 2 // Console: Total price is now: $125
</script>
Want to share stateful logic between components? Just extract it to a plain function (a composable) and reuse it anywhere. Yes, it's that simple. Vue's reactivity works everywhere. Nothing more to learn.
import { computed, ref } from 'vue'
export function useCounter() {
const count = ref(0)
function inc() {
count.value += 1
}
return { count, inc }
}
Use the reactivity system directly, without ceremony. Your code stays clean, readable, and easy to maintain. Readable in and out of components.
Vue.js syntax is HTML-compatible. There's no need to learn a new templating language. Just use standard HTML with special attributes (directives) to bind data and react to events. With this familiar syntax, Vue's Single-File components (SFCs) let you create clean, encapsulated, and reusable components with minimal boilerplate. that's easy to read and maintain.
<script setup>
import { ref } from 'vue'
const name = ref('Vue')
</script>
<template>
<label class="text-muted text-sm">
Name
<input v-model="name" class="border rounded px-2 py-1" />
</label>
<p class="mt-2">Hello, {{ name }}!</p>
</template>
SFCs keep your components organized and easy to understand, with clear separation of concerns. There's no need to write an infinity of components in a single file.
Parent-child communication is at the heart of our UIs. Making it intuitive and you're assured a smooth development experience. Vue.js takes is seriously. Accept data (props) from parents and emit events (emits) to notify them of changes. Exactly like standard HTML elements.
<script setup>
const props = defineProps({
title: String,
})
const emits = defineEmits(['close'])
</script>
<template>
<div class="modal">
<h2>{{ props.title }}</h2>
<button @click="emits('close')">Close</button>
</div>
</template>
Even better, you can pass templates (slots) to compose complex components from simple building blocks.
<template>
<div class="modal">
<slot />
</div>
</template>
<template>
<Modal>
<h2>Welcome</h2>
<p>This is a simple modal dialog.</p>
</Modal>
</template>
Clear boundaries make components easy to understand and reuse. Simple, elegant and HTML-compatible syntax keeps the learning curve flat.
To scale up, Vue ecosystem provides both official and community libraries that follow the same mental model, making them easy to learn and use together.
There's no need create meetings to discuss which router or state management library to use. Vue's official libraries are designed to work together seamlessly, following the same mental model.