PetexSpace

Vue Cheatsheet

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.

📘 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

DirectivePurpose
v-bind / :
Bind attributes
v-model
Two-way binding
v-if / v-else
Conditional rendering
v-show
Toggle visibility
v-for
List rendering
v-on / @
Event handling
v-slot
Named/Scoped slot usage

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

📚 18. Official Resources

Adapted from Fechin/referenceGPL-3.0 licenseMarkdown sourceChanges and attribution