codeboom.io

Vue CHEAT SHEET

A Vue 3 cheat sheet with the most important concepts, reactivity, component system, routing, and more. Updated for the latest version and perfect for both beginners and advanced users.

vueweb
19
Sections
10
Cards

#📘 Vue.js 3 Cheatsheet – Beginner to Advanced

The ultimate reference for mastering Vue 3.

#⚙️ 1. Setup

CDN (Quick Start)
<script src="https://unpkg.com/vue@3"></script>
<div id="app">{{ message }}</div>
<script>
  Vue.createApp({
    data() {
      return { message: "Hello Vue!" };
    }
  }).mount("#app");
</script>
Vite + Vue
npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

#🧠 2. App Structure

src/
├─ components/
├─ views/
├─ App.vue
├─ main.js

#📦 3. Data, Methods, Template

data() {
  return {
    count: 0,
    message: "Welcome!"
  };
},
methods: {
  increment() {
    this.count++;
  }
}

<h1>{{ message }}</h1>
<button @click="increment">+</button>

#🧰 4. Directives

Example
<input v-model="name" />
<p v-if="name">Hi, {{ name }}!</p>
<ul>
  <li v-for="item in list" :key="item.id">{{ item }}</li>
</ul>

#🪝 5. Lifecycle Hooks

created() {},
mounted() {},
updated() {},
unmounted() {}

#🎯 6. Events

<button @click="sayHi">Click</button>
<input @keyup.enter="submit" />

#🔁 7. Computed & Watch

computed: {
  reversed() {
    return this.message.split('').reverse().join('');
  }
},
watch: {
  count(newVal, oldVal) {
    console.log(`Count changed from ${oldVal} to ${newVal}`);
  }
}

#🧱 8. Components

Register + Use
app.component("Greeting", {
  props: ["name"],
  template: `<h1>Hello, {{ name }}!</h1>`
});

<Greeting name="Sumangal" />

#🔗 9. Props & Emits

Props
props: {
  title: String,
  age: {
    type: Number,
    default: 18
  }
}
Emit
this.$emit("custom-event", payload);

#🔄 10. v-model with Components

props: ['modelValue'],
emits: ['update:modelValue']

<input
  :value="modelValue"
  @input="$emit('update:modelValue', $event.target.value)"
/>

#⚒ 11. Composition API

import { ref, computed } from "vue";

export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);

    const increment = () => count.value++;

    return { count, double, increment };
  }
};

#🌐 12. Vue Router

router.js
import { createRouter, createWebHistory } from "vue-router";
import Home from "./views/Home.vue";
import About from "./views/About.vue";

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About }
];

export default createRouter({
  history: createWebHistory(),
  routes
});
main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);
app.use(router).mount("#app");

#📦 13. Pinia (Vuex Alternative)

store/counter.js
import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

const counter = useCounterStore();
counter.increment();

#🎨 14. Slots

<!-- Default -->
<slot></slot>

<!-- Named -->
<slot name="header"></slot>

<!-- Scoped -->
<slot :user="user"></slot>

#🧪 15. Testing

Vitest + Vue Test Utils
npm install vitest @vue/test-utils

import { mount } from "@vue/test-utils";
import MyComponent from "@/components/MyComponent.vue";

test("renders", () => {
  const wrapper = mount(MyComponent);
  expect(wrapper.text()).toContain("Hello");
});

#🧼 16. Best Practices

  • Use ref() for primitives, reactive() for objects
  • Use <script setup> syntax in SFCs
  • Break UI into small, reusable components
  • Always define key in v-for
  • Use slots for flexible composition

#🛠 17. Dev Tools

#📚 18. Official Resources