AgentSkillsCN

vue-patterns

掌握 Vue 与 Nuxt 的模式，包括使用 TypeScript 进行脚本设置、CSS 模块化、组件 Props，以及组合式编程模式。当需要创建或修改 Vue 组件、组合式逻辑、Nuxt 功能，或当用户提及 Vue、Nuxt、组件、Props、Emit、组合式逻辑、CSS 模块、v-model、响应式数据，或样式设计时，可调用此技能。

SKILL.md
--- frontmatter
name: vue-patterns
description: Vue and Nuxt patterns including script setup with TypeScript, CSS modules, component props, and composable patterns. Use when creating or modifying Vue components, composables, Nuxt features, or when user mentions Vue, Nuxt, components, props, emits, composables, CSS modules, v-model, reactivity, or styling.
license: Unlicense

Vue/Nuxt Patterns

Vue 3 and Nuxt 4 patterns with TypeScript.

Quick Reference

  • •Components: See components.md for props, emits, composables usage, and v-model
  • •Formatting: See formatting.md for Vue SFC formatting rules
  • •Styling: See styling.md for CSS modules, dynamic classes, and SCSS utilities
  • •Composables: See composables.md for state management and store patterns

Core Principles

  • •Always use <script lang="ts" setup> with strict typing
  • •Prefer CSS modules over scoped styles
  • •Named functions in composables (not arrow functions)
  • •useState for cross-component state
  • •Explicit emit types for better type safety
  • •Import types separately: import type { ... }
  • •Use computed for derived state
  • •SCSS utilities: @include media-sm, @include overflow-ellipsis