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 { ref, computed, watch, onMounted } 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
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue';

// Watchers
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue';

// Lifecycle
import {
  onMounted,
  onUpdated,
  onUnmounted,
  onBeforeMount,
  onBeforeUpdate,
  onBeforeUnmount,
} from 'vue';

// Utilities
import { nextTick, defineComponent, defineAsyncComponent } from 'vue';

Source: xcvzmoon/kickstart-nuxt — distributed by TomeVault.