Vue

by onmax008232b5d7a5No license719 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 2 days ago

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.

Instructions onlySoftware Development

AI-generated overview

Guides writing Vue 3 components with the Composition API, script setup macros, reactivity, and built-in components.

What it does: This skill provides reference guidance for authoring Vue 3 single-file components, covering script setup macros such as defineProps, defineEmits and defineModel, the reactivity system including ref, shallowRef, computed and watchers, and built-in components like Transition, Teleport, Suspense and KeepAlive. It states preferences such as TypeScript, script setup with lang ts, and Composition API over Options API, and includes a component template and key import lists. It produces code guidance rather than files or scripts.
When to use it: Use it when writing or reviewing Vue single-file components, defining props, emits or models, working with watchers and lifecycle hooks, or using built-in components and directives. It is aimed at Vue 3.5 and later with the Composition API.
Requirements: No scripts or tools are required; it is instructions and reference documents only. The guidance assumes a Vue 3 project and TypeScript.

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

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

Features

Quick Reference

Component Template

vue

<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>

<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

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

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

Source and attribution

Source:onmax/nuxt-skillsinskills/vueat commit008232b

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Vue

Vue

Preferences

Core

Features

Quick Reference

Component Template

Key Imports

Source and attribution

More from onmax/nuxt-skills

Nuxt Ui

Nuxt Modules

Nuxt I18n

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices