Vue Cheat Sheet

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

<template>
  <div>
    <h1>{{ message }}</h1>
    <p>Count: {{ count }}</p>
  </div>
</template>

<template>
  <!-- HTML comment -->
  <div>Content</div>
</template>

<script>
// JavaScript comment
</script>

import { ref } from 'vue'

const count = ref(0)
count.value++
console.log(count.value)  // 1

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'Vue'
})

state.count++

import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

console.log(doubled.value)  // 0

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newVal, oldVal) => {
  console.log(`Changed from ${oldVal} to ${newVal}`)
})

import { ref, watchEffect } from 'vue'

const count = ref(0)

watchEffect(() => {
  console.log(count.value)  // Runs immediately and on change
})

<img v-bind:src="imageSrc" />
<!-- Shorthand -->
<img :src="imageSrc" :alt="imageAlt" />

<button v-on:click="handleClick">Click</button>
<!-- Shorthand -->
<button @click="count++">Increment</button>

<input v-model="message" />
<p>{{ message }}</p>

<div v-if="isLoggedIn">
  Welcome back!
</div>
<div v-else>
  Please log in
</div>

<div v-show="isVisible">
  This toggles display CSS
</div>

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

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const title = ref('Hello Vue')
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

<script setup>
defineProps({
  title: String,
  count: {
    type: Number,
    required: true,
    default: 0
  }
})
</script>

<script setup>
const emit = defineEmits(['update', 'delete'])

function handleUpdate() {
  emit('update', { id: 1 })
}
</script>

<template>
  <MyComponent
    :title="pageTitle"
    :count="10"
    @update="handleUpdate"
  />
</template>

<script setup>
import MyComponent from './MyComponent.vue'
</script>

import { onMounted } from 'vue'

onMounted(() => {
  console.log('Component mounted')
})

import { onUpdated } from 'vue'

onUpdated(() => {
  console.log('Component updated')
})

import { onUnmounted } from 'vue'

onUnmounted(() => {
  console.log('Component unmounted')
})

import { onBeforeMount } from 'vue'

onBeforeMount(() => {
  console.log('Before mount')
})

// useCounter.js
import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++

  return { count, increment }
}

<script setup>
import { useCounter } from './useCounter'

const { count, increment } = useCounter()
</script>

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

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
})

<template>
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-view />
</template>

import { useRouter } from 'vue-router'

const router = useRouter()

function goToAbout() {
  router.push('/about')
}

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubled = computed(() => count.value * 2)
  const increment = () => count.value++

  return { count, doubled, increment }
})

<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
</script>

<template>
  <div>{{ counter.count }}</div>
  <button @click="counter.increment">Increment</button>
</template>