Technical reference

Vue Cheatsheet

Progressive framework for web interfaces

Must Know

html

Composition API

<script setup lang="ts">
import { ref, computed } from 'vue';
const count = ref(0);
const doubled = computed(() => count.value * 2);
</script>

typescript

Props and Events

const props = defineProps<{ title: string }>();
const emit = defineEmits<{ save: [id: string] }>();
emit('save', '42');

Important Patterns

html

List Rendering

Always use a stable, unique key.

<li v-for="user in users" :key="user.id">{{ user.name }}</li>

typescript

Watch Async State

Cancel stale work when dependencies change.

watch(query, async (value, _, onCleanup) => {
  const controller = new AbortController();
  onCleanup(() => controller.abort());
  results.value = await search(value, controller.signal);
});

Useful Recipes

typescript

Composable

Composables package reusable stateful logic.

export function useToggle(initial = false) {
  const value = ref(initial);
  const toggle = () => value.value = !value.value;
  return { value, toggle };
}

typescript

Async Component

Load large or uncommon features on demand.

const AdminPanel = defineAsyncComponent(() => import('./AdminPanel.vue'));

Pitfalls & Production

typescript

Reactivity Rules

Plain destructuring can disconnect reactive properties.

const state = reactive({ count: 0 });
const { count } = toRefs(state);

html

Security

Vue escapes interpolation; raw HTML needs sanitization.

<div>{{ userContent }}</div>
<!-- Avoid v-html with untrusted content -->