Vue

Vue

Based on Vue 3.5. Always use Composition API with <script setup lang="ts">.

Preferences

• Prefer TypeScript over JavaScript
• Prefer <script setup lang="ts"> over <script>
• For performance, prefer shallowRef over ref if deep reactivity is not needed
• Always use Composition API over Options API
• Discourage using Reactive Props Destructure

Core

Features

Quick Reference

Component Template

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'

const props = defineProps<{
  title: string
  count?: number
}>()

const emit = defineEmits<{
  update: [value: string]
}>()

const model = defineModel<string>()

const doubled = computed(() => (props.count ?? 0) * 2)

watch(
  () => props.title,
  (newVal) => {
    console.log('Title changed:', newVal)
  }
)

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

<template>
  <div>{{ title }} - {{ doubled }}</div>
</template>

Key Imports

// Reactivity
// Watchers

// Lifecycle

// Utilities
import {
  computed,
  defineAsyncComponent,
  defineComponent,
  nextTick,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  onWatcherCleanup,
  reactive,
  readonly,
  ref,
  shallowRef,
  toRef,
  toRefs,
  toValue,
  watch,
  watchEffect,
  watchPostEffect
} from 'vue'

Source: onderwijsin/buitenkans — distributed by TomeVault.