Reactive Counter Card
Build a small counter component using `<script setup>` with `ref`. Add increment/decrement buttons and a computed label like 'Count: X'.
Frontend / Knowledge library
Vue
progressive framework for reactive web interfaces
Why learn Vue?
Vue helps teams build interactive front-end UIs with predictable reactivity, component reuse, and gradual adoption—from small widgets to full single-page applications.
Where it came from
2014: Evan You released Vue to simplify reactive UI development. 2016: Vue 2 popularized a lightweight component model with strong docs and ecosystem growth. 2020: Vue 3 launched with Proxy-based reactivity, Composition API, and better TypeScript support. 2023: Vue 2 reached EOL; Vue 3 became the primary production target for new projects.
- 2014: Evan You released Vue to simplify reactive UI development.
- 2016: Vue 2 popularized a lightweight component model with strong docs and ecosystem growth.
- 2020: Vue 3 launched with Proxy-based reactivity, Composition API, and better TypeScript support.
- 2023: Vue 2 reached EOL; Vue 3 became the primary production target for new projects.
Build your understanding
Work through these exercises in order. Try the task before opening a reference.
- Build a small counter component using `<script setup>` with `ref`. Add increment/decrement buttons and a computed label like 'Count: X'.
- Create a list with `v-for` and a search input bound with `v-model`. Use a computed property to filter items case-insensitively.
- Set up Vue Router with 3 routes (Home, Reports, Settings). Add navigation guards for a mock auth flag and lazy-load one route component.
- Move duplicated local state into a Pinia store. Keep components dumb and verify updates sync across two distant components.
- Instrument a component with `onMounted`, `watch`, and `onUnmounted` logs. Explain which events fire and why during route changes.
More ways to practice
Searchable Product List
Create a list with `v-for` and a search input bound with `v-model`. Use a computed property to filter items case-insensitively.
Mini Dashboard with Routing
Set up Vue Router with 3 routes (Home, Reports, Settings). Add navigation guards for a mock auth flag and lazy-load one route component.
Shared State Refactor
Move duplicated local state into a Pinia store. Keep components dumb and verify updates sync across two distant components.
Lifecycle Debug Drill
Instrument a component with `onMounted`, `watch`, and `onUnmounted` logs. Explain which events fire and why during route changes.
Documentation and sources
- Vue Official Docs (vuejs.org)
- Vue Guide: Introduction (vuejs.org)
- Reactivity Fundamentals (vuejs.org)
- Vue Router Docs (router.vuejs.org)
- Pinia Docs (pinia.vuejs.org)
Catalog research notes
- Vue 3.4 improved runtime performance and parser speed, reducing update overhead in many apps.
- `defineModel` and other `<script setup>` ergonomics reduced boilerplate for component two-way binding.
- Vue 2 reached official end of life (end of 2023), pushing teams toward Vue 3 migration.
- Tooling around Vite, Volar, Vue Router, and Pinia is now the standard default stack.
Connect the ideas
Explore next
Real World Example
Dynamic Inventory Dashboard for Boutique Retailers
Boutique retailers managing high-turnover, limited-stock inventory across multiple physical locations.
The business problem
Manual inventory tracking leads to stale data, causing staff to lose sales when items are sold in-store but remain marked as available in the digital catalog.
How this topic solves it
Implementing a reactive Vue interface allows the inventory dashboard to automatically synchronize state changes across the UI whenever a stock update event is received from the backend, ensuring the view layer always reflects the current source of truth.
- Initialize a Vue application instance to manage the inventory view state.
- Define reactive data properties using the reactivity system to track stock levels per item.
- Bind the reactive data to HTML templates to ensure the UI updates automatically when stock values change.
- Integrate event listeners to trigger state updates upon receiving real-time inventory adjustments.
- Mount the application to the DOM to render the live dashboard for store staff.
This flow illustrates how inventory updates propagate from the data source to the user interface.
Backend database or API
Reactive data object
HTML view layer
Rendered browser view
- Inventory Source → Push update → Vue State
- Vue State → Reactivity trigger → UI Template
- UI Template → DOM update → Staff Dashboard
Implementation example
This code demonstrates the reactive state management used to ensure the dashboard reflects current stock levels without manual DOM manipulation.
import { reactive } from 'vue';
// Define reactive inventory state
const inventory = reactive({ stockCount: 10 });
// Update state automatically triggers UI refresh
function updateStock(newVal) { inventory.stockCount = newVal; }Expected business outcome
Staff gain immediate visibility into accurate stock levels, reducing customer frustration and preventing overselling of limited inventory items.
Limitations and checks
The reactivity system can lead to excessive re-renders if the state is updated too frequently; check this by monitoring the browser's performance tab for long-running tasks during high-frequency data updates.