Vue.js Cheat Sheet
Quick reference for Vue.js 3 — Composition API, reactivity, directives, components, lifecycle hooks, and computed properties. All in one page.
Setup & Project
Composition API (setup)
Template Directives
Components
Vue Router
Pinia State Management
Setup & Project
| npm create vue@latest | Create new Vue project (official) |
| npm create vite@latest my-app -- --template vue | Create with Vite |
| import { createApp } from "vue" | Import createApp |
| createApp(App).mount("#app") | Mount app to DOM |
| app.use(router) | Install Vue Router plugin |
| app.use(pinia) | Install Pinia state management |
Composition API (setup)
| <script setup> | Shorthand for setup() in SFC |
| const count = ref(0) | Reactive primitive value |
| const state = reactive({ name: "Vue" }) | Reactive object |
| const doubled = computed(() => count.value * 2) | Computed property |
| watch(count, (newVal, oldVal) => { }) | Watch single ref |
| watchEffect(() => console.log(count.value)) | Auto-tracking watcher |
| onMounted(() => { }) | Lifecycle: component mounted |
| onUnmounted(() => { }) | Lifecycle: component destroyed |
| const { data } = toRefs(props) | Convert props to refs |
Template Directives
| {{ message }} | Text interpolation |
| v-bind:href="url" or :href="url" | Bind attribute |
| v-on:click="handler" or @click="handler" | Event listener |
| v-model="inputValue" | Two-way data binding |
| v-if="condition" | Conditional rendering |
| v-else-if="other" | Else-if branch |
| v-else | Else branch |
| v-show="condition" | Toggle visibility (CSS display) |
| v-for="item in items" :key="item.id" | List rendering |
| v-slot:header or #header | Named slot |
Components
| defineProps({ title: String }) | Declare props (setup) |
| defineEmits(["update", "delete"]) | Declare events (setup) |
| const emit = defineEmits(["submit"]) | Get emit function |
| emit("submit", payload) | Emit event with data |
| defineExpose({ method }) | Expose to parent via ref |
| <slot /> | Default slot outlet |
| <slot name="header" /> | Named slot outlet |
| provide("key", value) | Provide to descendants |
| const val = inject("key") | Inject from ancestor |
Vue Router
| const router = createRouter({ history: createWebHistory(), routes }) | Create router |
| { path: "/users/:id", component: UserView } | Dynamic route |
| <RouterLink to="/about">About</RouterLink> | Navigation link |
| <RouterView /> | Route outlet |
| const route = useRoute() | Access current route |
| const router = useRouter() | Access router instance |
| router.push("/dashboard") | Navigate programmatically |
| route.params.id | Access route parameters |
Pinia State Management
| export const useStore = defineStore("main", () => { }) | Define store (setup syntax) |
| const store = useStore() | Use store in component |
| const { count } = storeToRefs(store) | Destructure with reactivity |
| store.$reset() | Reset state to initial |
| store.$patch({ count: 10 }) | Batch state updates |
Step-by-Step Guide
Read Guide →