CtrlK
BlogDocsLog inGet started
Tessl Logo

vue

Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.

SKILL.md
Quality
Evals
Security

Vue

Based on Vue 3.5, generated at 2026-09-25. 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

TopicDescriptionReference
Script Setup & Macros<script setup>, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, genericsscript-setup-macros
Reactivity & Lifecycleref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composablescore-new-apis

Features

TopicDescriptionReference
Built-in Components & DirectivesTransition, Teleport, Suspense, KeepAlive, v-memo, custom directivesadvanced-patterns

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'
Repository
onmax/nuxt-skills
Path

skills/vue/SKILL.md

Commit

46aaca0

Last updated
First committed

Also appears in

popey/nuxt-skills
Stale

last in sync Mar 5, 2026

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill