Why Vue.js 3?
Vue.js 3 is a progressive JavaScript framework for building user interfaces. Its Composition API provides a more flexible and powerful way to organize logic compared to the Options API.
With Vue's reactivity system, your UI automatically updates when your state changes—no manual DOM manipulation needed!
Reactivity System
Component Architecture
Composition API
Performance Optimized
Reactive Counter
Composition API
Demonstrates Vue's reactivity with ref() and reactive data.
{{ counter }}
import { ref } from 'vue'
const counter = ref(0)
function increment() {
counter.value++
}
function decrement() {
counter.value--
}
Use Case:
Shopping carts, form validation counters, pagination controls
Reactive Todo List
v-model & v-for
Shows two-way binding and list rendering with Vue directives.
- {{ todo }}
<input v-model="newTodo" />
<ul>
<li v-for="todo in todos">{{ todo }}</li>
</ul>
const newTodo = ref('')
const todos = ref([])
function addTodo() {
if (newTodo.value) {
todos.value.push(newTodo.value)
newTodo.value = ''
}
}
Use Case:
Task managers, shopping lists, comment sections, dynamic forms
Conditional Rendering
v-if & v-show
Demonstrates conditional rendering based on reactive state.
This content is conditionally rendered!
Vue only adds/removes it from the DOM when needed.
<div v-if="showMessage">
Conditional content
</div>
const showMessage = ref(false)
function toggleMessage() {
showMessage.value = !showMessage.value
}
Use Case:
Modals, notifications, feature toggles, loading states