Vue

Vue is a community skill for building web applications with Vue.js, covering the Composition API, reactive state management, component architecture, template syntax, and lifecycle hooks for progressive JavaScript framework development.

What Is This?

Overview

Vue provides guidance on building interactive web applications using the Vue.js framework. It covers the Composition API that organizes component logic using composable functions with ref and reactive primitives for explicit reactivity, reactive state management that automatically tracks dependencies and updates the DOM when data changes without manual intervention, component architecture that structures applications into reusable single-file components with template, script, and style sections, template syntax that binds data to HTML using directives for conditional rendering, list iteration, event handling, and two-way binding, and lifecycle hooks that execute code at specific component stages from creation through mounting, updating, and unmounting. The skill helps developers build reactive web interfaces with clear component structures.

Who Should Use This

This skill serves frontend developers building Vue.js applications, teams migrating from Options API to Composition API patterns, and developers choosing a progressive framework for new projects.

Why Use It?

Problems It Solves

Managing UI state manually with vanilla JavaScript becomes unmaintainable as application complexity grows. Options API scatters related logic across different component options making large components hard to maintain. Sharing stateful logic between components requires mixins that cause naming conflicts and hidden dependencies. Template reactivity needs explicit dependency tracking to update efficiently.

Core Highlights

Composition API organizes logic with composable reactive functions. Reactivity system tracks data dependencies and updates DOM automatically. Component model structures UI into reusable single-file components. Template engine binds data to HTML with expressive directives.

How to Use It?

Basic Usage

<script setup lang="ts">
import {
  ref, computed
} from 'vue';

const count = ref(0);
const doubled = computed(
  () => count.value * 2);

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

<template>
  <div class="counter">
    <p>Count: {{ count }}</p>
    <p>Doubled: {{ doubled }}
    </p>
    <button @click=
      "increment">
      Add
    </button>
  </div>
</template>

<style scoped>
.counter {
  padding: 1rem;
}
button {
  padding: 0.5rem 1rem;
}
</style>

Real-World Examples

<script setup lang="ts">
import {
  ref, watch, onMounted
} from 'vue';

interface User {
  id: number;
  name: string;
  email: string;
}

const users = ref<User[]>([]);
const search = ref('');
const loading = ref(false);

async function fetchUsers() {
  loading.value = true;
  const resp = await fetch(
    '/api/users');
  users.value =
    await resp.json();
  loading.value = false;
}

watch(search, (val) => {
  console.log(
    'Search:', val);
});

onMounted(fetchUsers);
</script>

<template>
  <input v-model="search"
    placeholder="Search" />
  <div v-if="loading">
    Loading...</div>
  <ul v-else>
    <li v-for="u in users"
      :key="u.id">
      {{ u.name }}
    </li>
  </ul>
</template>

Advanced Tips

Extract reusable logic into composable functions that return reactive state and methods for sharing across components. Use provide and inject for deep dependency passing without prop drilling through intermediate components. Apply shallowRef for large objects that do not need deep reactivity tracking to improve performance.

When to Use It?

Use Cases

Build a reactive dashboard with real-time data updates and filtered views. Create a form-heavy application with two-way binding and validation. Develop a component library with reusable single-file components and composables.

Related Topics

Vue.js, Composition API, reactivity, single-file components, TypeScript, Vite, and frontend development.

Important Notes

Requirements

Node.js with Vue 3 and Vite for building and serving Vue applications with hot module replacement. TypeScript optionally for type-safe component development with enhanced IDE support and autocompletion. Single-file component support through Vite plugin for processing .vue files.

Usage Recommendations

Do: use the Composition API with script setup for concise and type-safe component definitions. Extract shared logic into composable functions prefixed with use for clear naming. Use computed properties for derived values instead of watchers.

Don't: mutate props directly since Vue enforces one-way data flow from parent to child components. Use reactive for primitive values since ref is the correct primitive wrapper. Create deeply nested reactive objects when flat state structures are simpler to manage and debug.

Limitations

Reactivity tracking does not detect property additions on plain objects that bypass the reactive proxy. Template expressions are limited to single expressions and cannot contain statements or complex logic. Vue ecosystem libraries may lag behind framework releases creating temporary compatibility gaps.