Vue 3 Cheat Sheet

# Pake npm
npm create vue@latest
 
# Pake pnpm
pnpm create vue@latest
 
# Via CDN
<script src="https://unpkg.com/vue@3"></script

import { createApp } from 'vue'
import App from './App.vue'
 
createApp(App).mount('#app')

<template>
 <p>{{ message }}</p>
 <p>{{ count + 1 }}</p>
 <p>{{ ok ? 'YES' : 'NO' }}</p>
 <p>{{ message.split

<template>
 <!-- v-bind - Attribute binding -->
 <img v-bind:src="imageUrl" />
 <

<script>
import { ref, reactive } from 'vue'
 
export default {
 setup() {
  const count = ref(0)
  const user = reactive({
   name: 'Budi'

<script setup>
import { ref, reactive } from 'vue'
 
// Gak perlu return, auto-exposed ke template
const count = ref(0)
const user = reactive({
 name: 'Budi',
 age: 

<script setup>
import { ref } from 'vue'
 
// Reactive reference
const count = ref(0)
const message = ref('Hello')
 
// Access value dengan .value
console.

<script setup>
import { reactive } from 'vue'
 
// Reactive object
const state = reactive({
 count: 0,
 message: 'Hello'
})
 
// Akses langsung, gak pake .value
state.count

<script setup>
import { ref, computed } from 'vue'
 
const firstName = ref('Budi')
const lastName = ref('Santoso')
 
// Computed property

<script setup>
import { ref, watch, watchEffect } from 'vue'
 
const count = ref(0)
const user = reactive

<script setup>
import {
 onBeforeMount,
 onMounted,
 onBeforeUpdate,
 onUpdated,
 onBeforeUnmount,
 onUnmounted
} from 'vue'
 
// Before component is mounted
onBeforeMount

<!-- MyComponent.vue -->
<script setup>
import { ref } from 'vue'
 
const count = ref(0)
</script>
 
<template>
 <button @click

<script setup>
// Define props
const props = defineProps({
 title: String,
 count: {
  type: Number,
  default: 0,
  required: true
 },
 user: Object,
 tags: Array

<script setup>
// Define emits
const emit = defineEmits(['update', 'delete'])
 
// Dengan validation
const emit = defineEmits({
 update: (

<!-- Parent -->
<template>
 <CustomInput v-model="text" />
</template>
 
<!-- CustomInput.vue -->
<script setup>
const props = defineProps

<!-- Parent -->
<template>
 <Card>
  <template #header>
   <h1>Title</h1>
  </template>
 
  <template #

<!-- Parent -->
<template>
 <UserList>
  <template #default="{ user }">
   <p>{{ user.name }} - {{ user.email }}</p>
  </template>

// useCounter.js
import { ref, computed } from 'vue'
 
export function useCounter(initialValue = 0) {
 const count = ref(initialValue)
 
 const doubled = computed(() =>

<script setup>
import { useCounter } from './composables/useCounter'
 
const { count, doubled, increment, decrement, reset } = useCounter(10)
</

// useFetch.js
import { ref } from 'vue'
 
export function useFetch(url) {
 const data = ref(null)
 const error

npm install pinia

// main.js
import { createPinia } from 'pinia'
 
const pinia = createPinia()
app.use(pinia)

// stores/counter.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
 
export const useCounterStore = defineStore('counter', () => {
 // State

<script setup>
import { useCounterStore } from '@/stores/counter'
 
const counter = useCounterStore()
 
// Access state
console.log(counter.count)
 
// Access getters
console.log(counter.doubled)
 

npm install vue-router@4

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
 
const routes = [
 {
  path: '/',

<script setup>
import { useRouter, useRoute } from 'vue-router'
 
const router = useRouter()
const route = useRoute()
 
// Navigate
function goToAbout

<template>
 <!-- v-text -->
 <span v-text="message"></span>
 
 <!-- v-html (hati-hati XSS!) -->
 <div v-html="htmlContent"></div>
 

<script setup>
// Directive definition
const vFocus = {
 mounted(el) {
  el.focus()
 }
}
 
const vColor = {
 mounted(el

<template>
 <!-- Teleport ke body -->
 <Teleport to="body">
  <div class="modal">
   <p>Modal content</p>
  </div>
 </Teleport>

<template>
 <Suspense>
  <!-- Component yang async -->
  <template #default>
   <AsyncComponent />
  </template>
 
  <!-- Loading state -->
  <template #fallback>

<script setup>
import { ref, computed } from 'vue'
 
const count = ref(0)
 
// Computed - cached, cuma re-evaluate kalo dependencies berubah
const doubled = computed(() => count.value 

<script setup>
// 1. Imports
import { ref, computed, onMounted } from 'vue'
import MyComponent from './MyComponent.vue'
 
// 2. Props & Emits
const props = defineProps(['title'])
const

<script setup>
import { shallowRef, shallowReactive } from 'vue'
 
// Shallow reactivity - cuma top-level yang reactive
const state = shallowReactive({
 foo: 1,
 nested: {
  bar: 2
 }
})
 

<script setup>
// Set component options
defineOptions({
 name: 'MyComponent',
 inheritAttrs: false
})
</script>