Vue 3 cheatsheet

Vue 3: Components

7 common Vue 3 tasks.

Declare props

Declare the props a component accepts, with types.

const props = defineProps<{ title: string; count?: number }>();

Declare the events a component emits, then emit one.

const emit = defineEmits<{ (e: "update", value: string): void }>();
emit("update", "hello");

Two-way bind an input to state.

<input v-model="name" />

Loop over an array and give each item a key.

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

Add or remove an element depending on a condition.

<p v-if="loading">Loading...</p>
<p v-else>Done</p>

Render content passed in by the parent, with fallback text.

<slot>Default content</slot>

Provide a value in one component and inject it deeper in the tree.

provide("theme", "dark");
const theme = inject("theme", "light");