Vue.js Cheat Sheet

Getting started

The recommended build tool is Vite.

npm create vite@latest

Common commands

npm install
npm run dev
npm run build

Script setup

• Use <script setup> for concise components.
• Top-level variables/functions are exposed to the template.
• Reactive state: ref, reactive, computed.
• Refs auto-unwrap in templates.

const count = ref(0)

Components & props

• Basics: Component guide
• Props are custom attributes on a component.
• Dynamic component: <component :is="flag ? Foo : Bar" />

Events

• Emit: <button @click="$emit('save')">Save</button>
• Listen: <MyComponent @save="handler" />
• Modifiers: capture, passive, once

Event modifiers

Template basics

• Text: <span>{{ msg }}</span>
• HTML: <span v-html="rawHtml"></span>
• Attributes: <div :id="dynamicId"></div>
• Directives: v-if, v-on, v-bind
• Modifiers: <form @submit.prevent="onSubmit">...</form>

Template syntax