Skip to content
MeloSkill

React · Any agent

Vue Agent Skill

Listed in the index, not on a short comparison list. Vue 3 Composition API and SFC patterns from the JetBrains-curated set. The React short list stays on web React; this listing is for Vue projects only.

Browse tasks · How to choose a skill

SKILL.md

The file starts with a description field. Agents keep that text in context and open the rest of the file only when the job matches.

name
vue
description
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.

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

Topic Description Reference
Script Setup & Macros <script setup>, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics script-setup-macros
Reactivity & Lifecycle ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables core-new-apis

Features

Topic Description Reference
Built-in Components & Directives Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives advanced-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'

More from JetBrains

More in React