Vue.js API Reference & Cheatsheet

npm create vite@latest my-app -- --template vue
cd my-app && npm install && npm run dev
npm install vue-router@4 pinia

@click.stop          <!-- stopPropagation — stops event from bubbling up -->
@click.prevent       <!-- preventDefault — prevents form submission, etc. -->
@click.once          <!-- fire once — event listener removed after first click -->
@keyup.enter         <!-- key alias — fires only on Enter key -->
@keyup.ctrl.enter    <!-- modifier + key — Ctrl+Enter combination -->

v-model.lazy         <!-- sync on change instead of keystroke -->
v-model.number       <!-- coerce input to number type -->
v-model.trim         <!-- trim leading/trailing whitespace -->

export default {
  name: "ComponentName",
  components: {},               // Local component registration
  props: {                      // Props: parent → child data
    title: String,
    count: { type: Number, default: 0 }
  },
  emits: ["update", "delete"],  // Declared events the component fires
  data() { return { msg: "Hello" }; },  // Reactive state (must be function)
  computed: {                   // Cached derived values
    reversed() { return this.msg.split("").reverse().join(""); }
  },
  watch: {                      // Side effects on data changes
    count(n, o) { /* n = new value, o = old value */ }
  },
  methods: {                    // Functions attached to the component
    handleClick() { this.count++; }
  },
  // Lifecycle — runs in this order:
  beforeCreate() {},            // Instance initialized, nothing reactive yet
  created() {},                 // Reactive data ready, no DOM
  beforeMount() {},             // About to render
  mounted() {},                 // DOM in page — safe for API calls
  beforeUpdate() {},            // Data changed, about to re-render
  updated() {},                 // DOM re-rendered
  beforeUnmount() {},           // About to destroy component
  unmounted() {},               // Cleanup timers, listeners
  errorCaptured(err, instance, info) {},  // Catches child errors
};

<script setup>
// All imports are available directly — no export default needed
import { ref, reactive, computed, watch, onMounted, provide, inject, nextTick } from "vue";

const count = ref(0);                // ref() wraps any value, use .value in script
const state = reactive({ key: "value" });  // reactive() for objects, no .value
const double = computed(() => count.value * 2);  // Computed: caches until deps change
watch(count, (n, o) => {});          // Watcher: runs function on change
onMounted(() => {});                 // Lifecycle: onMounted, onUnmounted, etc.

provide("key", value);               // Provide data to all descendants
const val = inject("key", "default"); // Inject data from ancestor

await nextTick();                    // Wait for DOM update after state change

// Async setup — works inside Suspense
const data = await fetch("/api/data").then(r => r.json());
</script>

const a = ref(0);           // primitive → a.value to read/write
const b = ref({});          // object → b.value.key
const c = reactive({});     // object → c.key (no .value)

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(),   // Clean URLs without #
  routes: [
    { path: "/", component: Home },
    { path: "/:pathMatch(.*)*", component: NotFound }  // Catch-all 404
  ],
  scrollBehavior() { return { top: 0 }; }  // Scroll to top on navigation
});

// In component:
this.$router.push("/path");       // Navigate (adds history entry)
this.$router.replace("/path");    // Navigate (replaces current entry)
this.$router.go(-1);              // Back one step
this.$route.params.id;            // Route parameter
this.$route.query.search;         // Query string (?search=...)

router.beforeEach((to, from) => {});   // Global — runs on every route
router.afterEach((to, from) => {});    // Global — runs after navigation
// Per-route: beforeEnter in route config
// In-component: beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

import { defineStore } from "pinia";
import { ref, computed } from "vue";

export const useStore = defineStore("name", () => {
  const state = ref(initialValue);
  const getter = computed(() => state.value * 2);
  function action() { state.value++; }
  return { state, getter, action };
});

// In component:
const store = useStore();
store.state;          // read
store.state++;        // mutate (allowed directly in Pinia)
store.action();       // call action

<input ref="input" />
<p v-for="item in list" :ref="setItemRef" />

// Options API
this.$refs.input.focus();

// Composition API
const input = ref(null);    // ref name must match template ref name
onMounted(() => input.value?.focus());

<div :class="{ active: isActive, 'text-danger': hasError }" />
<div :class="[baseClass, activeClass]" />
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }" />
<div :style="[baseStyles, overrides]" />

import { h } from "vue";
h("div", { class: "box", style: { color: "red" } }, [
  h("h1", "Title"),
  h("p", "Content")
]);

app.directive("highlight", {
  mounted(el, binding) { el.style.background = binding.value; },
  updated(el, binding) { el.style.background = binding.value; }
});

const app = createApp(App);
app.component("name", Comp);             // Register global component
app.directive("name", directive);         // Register global directive
app.use(plugin);                          // Install plugin (router, pinia)
app.provide("key", value);                // Provide data globally
app.config.errorHandler = (err, instance, info) => {};  // Global error handler
app.config.globalProperties.$api = axios;  // Make available in all components

// ❌ Bad — all instances share the same state
data: { count: 0 }

// ✅ Correct — each instance gets its own copy
data() { return { count: 0 }; }

// router.push throws if you navigate to the current route
try {
  await router.push("/same-page");
} catch (e) {
  if (e.name !== "NavigationDuplicated") throw e;
}

<!DOCTYPE html>
<html>
<head>
  <title>Vue Reference Sandbox</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    body { font-family: sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px; }
    .demo-box { border: 2px dashed #42b883; padding: 16px; border-radius: 8px; margin: 12px 0; }
    input, button { padding: 8px; margin: 4px; border: 1px solid #ddd; border-radius: 4px; }
    button { background: #42b883; color: white; cursor: pointer; }
    .active { background: #e8f5e9; }
  </style>
</head>
<body>
  <div id="app">
    <h1>Vue Reference Playground</h1>

    <div class="demo-box">
      <h3>v-model + computed</h3>
      <input v-model="name" placeholder="Enter name">
      <p>Uppercase: <strong>{{ upperName }}</strong></p>
    </div>

    <div class="demo-box">
      <h3>v-if / v-show</h3>
      <button @click="show = !show">Toggle</button>
      <p v-if="show">v-if: I appear/disappear from DOM</p>
      <p v-show="show">v-show: I'm hidden with CSS</p>
    </div>

    <div class="demo-box">
      <h3>v-for with :key</h3>
      <input v-model="newItem" @keyup.enter="addItem" placeholder="Add item">
      <button @click="addItem">Add</button>
      <ul>
        <li v-for="(item, i) in items" :key="i">
          {{ item }} <button @click="items.splice(i, 1)">✕</button>
        </li>
      </ul>
    </div>
  </div>

  <script>
    const { createApp, ref, computed } = Vue;
    createApp({
      setup() {
        const name = ref("Vue");
        const upperName = computed(() => name.value.toUpperCase());
        const show = ref(true);
        const items = ref(["Directive", "Component", "Reactivity"]);
        const newItem = ref("");

        function addItem() {
          if (newItem.value.trim()) {
            items.value.push(newItem.value.trim());
            newItem.value = "";
          }
        }

        return { name, upperName, show, items, newItem, addItem };
      }
    }).mount("#app");
  </script>
</body>
</html>