← All cheat sheets

Vue

📘 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

npm install 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)

npm install pinia

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

• 🧩 Vue DevTools
• 🧠 Volar for VSCode
• ⚡ Vite for fast dev environment

📚 18. Official Resources

• 📘 Vue Docs
• 🧭 Router Docs
• 📦 Pinia Docs
• 🧪 Composition API FAQ