Vuejs-Cheatsheet

👋 Hello Vue

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">{{ message }}</div>

  <script>
  const { createApp } = Vue
  createApp({
    data() {
      return { message: 'Hello Vue 3!' }
    }
  }).mount('#app')
  </script>
</body>
</html>

💡 Tip: Vue 3 uses createApp() instead of the global new Vue() constructor.

📦 Data & Methods

<div id="app">
  <p>{{ count }}</p>
  <button @click="increment">+1</button>
</div>

<script>
const { createApp } = Vue
createApp({
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}).mount('#app')
</script>

💡 Tip: All reactive data must be returned from the data() function.

🔧 Directives

<div v-if="isVisible">Visible!</div>
<div v-else>Hidden</div>

<ul>
  <li v-for="(item, i) in items" :key="i">{{ item }}</li>
</ul>

<input v-model="text">
<button @click="logText">Log</button>

💡 Tip: Common directives: v-if, v-for, v-bind, v-model, v-on.

🧩 Components

<div id="app">
  <user-card name="Alice"></user-card>
</div>

<script>
const { createApp } = Vue

const UserCard = {
  props: ['name'],
  template: `<div>User: {{ name }}</div>`
}

createApp({
  components: { UserCard }
}).mount('#app')
</script>

💡 Tip: Use props for parent → child communication, emit for child → parent.

🧠 Composition API

<script setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

💡 Tip: ref() creates reactive data; reactive() for complex objects.

⏳ Lifecycle Hooks

<script setup>
import { onMounted, onUpdated, onUnmounted } from 'vue'

onMounted(() => console.log('Mounted!'))
onUpdated(() => console.log('Updated!'))
onUnmounted(() => console.log('Unmounted!'))
</script>

💡 Tip: Hooks replace mounted(), updated() etc. from Options API.

🔍 Watchers & Computed

<script setup>
import { ref, computed, watch } from 'vue'

const name = ref('Maxon')
const greet = computed(() => `Hello ${name.value}!`)

watch(name, (newVal) => console.log('Changed to', newVal))
</script>

<template>
  <input v-model="name">
  <p>{{ greet }}</p>
</template>

💡 Tip: computed() caches values; watch() reacts to data changes.

🧭 Vue Router

import { createRouter, createWebHistory } from 'vue-router'
import Home from './Home.vue'
import About from './About.vue'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

💡 Tip: Wrap your app in <router-view> to render active routes.

💾 State Management (Pinia)

import { defineStore } from 'pinia'

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

💡 Tip: Pinia is the official Vue 3 store, replacing Vuex. Easier and TypeScript-ready.

🎞 Animations & Transitions

<transition name="fade">
  <p v-if="show">Hello Animation</p>
</transition>

<style>
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>

💡 Tip: Transitions apply automatically when elements enter/leave the DOM.

🧱 Slots

<!-- Parent -->
<alert-box>Something went wrong!</alert-box>

<!-- Child Component -->
<template>
  <div class="alert"><slot></slot></div>
</template>

💡 Tip: Use <slot> for content projection; supports named slots too.

Maxoncodes