Vue 3 Cheatsheet

Setup

• Create an app — Scaffold a Vue project with Vite. Choose TypeScript, Router and Pinia when prompted.
• Install and start — Install dependencies and start the dev server.
• Build for production — Create an optimized build in the dist folder.
• Component skeleton — A single-file component with script setup, a template and scoped styles.

Reactivity

• Create reactive state — Wrap a value in ref and read or write it with .value in script.
• Create a reactive object — Make an object deeply reactive.
• Derive a value — Cache a value computed from other state.
• React to a change — Run code when a source changes.
• Run an effect with automatic tracking — Run immediately and re-run when any reactive value it reads changes.
• Run code after mounting — Use lifecycle hooks such as onMounted and onUnmounted.

Components

• Declare props — Declare the props a component accepts, with types.
• Declare events — Declare the events a component emits, then emit one.
• Bind a form input — Two-way bind an input to state.
• Render a list — Loop over an array and give each item a key.
• Render conditionally — Add or remove an element depending on a condition.
• Accept child content — Render content passed in by the parent, with fallback text.
• Share data with descendants — Provide a value in one component and inject it deeper in the tree.

Router and Pinia

• Install Vue Router — Add the official Vue router.
• Link to a route — Navigate without reloading the page.
• Read the current route — Access route params and query values.
• Install Pinia — Add the official state management library.
• Define a store — Create a store with state and actions using the setup syntax.

Related cheatsheets

• Angular 22 cheatsheet — Angular CLI commands and standalone component, signals, template, routing, HTTP and forms snippets.
• Astro cheatsheet — Build fast content sites with Astro: components, layouts, routing, content collections, islands, endpoints and deployment.
• Django 6 cheatsheet — Create projects, run migrations, test and deploy Django apps, plus the ORM queries you use every day.
• .NET and ASP.NET Core 10 cheatsheet — The dotnet CLI for creating, building, testing and publishing projects, plus common ASP.NET Core and EF Core code.
• Express 5 cheatsheet — Build HTTP servers and APIs with Express 5 on Node.js.
• FastAPI 0.115 cheatsheet — Install, run, test and deploy FastAPI apps from the command line.

Browse all cheatsheets