'vue' 검색 결과

Vue.js 3와 Nuxt 화면 구현을 컴포넌트 설계부터 상태 관리, 화면 이동, 테스트까지 지원합니다. 구체적인 예제로 코드 구성과 데이터 갱신 방식을 검토합니다.

• Vue 컴포넌트 구성 검토하기
• 컴포넌트 간 재사용 로직 분리하기
• Pinia로 공유 상태 설계하기

Build Vue 3 interfaces from JSON specifications, including AI-generated layouts. The skill covers component registration, named content areas, synchronized form values, conditional visibility, validation, actions, and connections to external state management.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Display AI-generated JSON interfaces in Vue 3
• Build forms with synchronized values and validation
• Switch visible content based on application state

Build Vue 3 applications using JavaScript and JSDoc comments that describe data types. Create components and reusable logic, configure Vite, routing, and state management, and check annotations and behavior with ESLint and Vitest.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build Vue 3 interfaces using JavaScript
• Add JSDoc type hints to components and shared logic
• Migrate Vue 2 Options API code to Composition API

여러 화면 디자인 이미지를 Vue 3 페이지와 공통 컴포넌트로 일괄 변환합니다. Vant 등 UI 라이브러리 연결과 화면 이동의 초기 코드 생성도 다룹니다.

• 디자인 이미지를 Vue 3로 변환
• 목록과 로딩 상태를 한 페이지로 통합
• 반복 화면 영역을 공통 컴포넌트로 추출

Build Vue 3 components and reusable logic, manage shared application data with Pinia, and configure Nuxt 3 projects. Supports mobile apps, offline web features, TypeScript checks, component tests, and Vite build optimization.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build Vue 3 components and reusable logic
• Manage shared application data with Pinia
• Configure Nuxt 3 server rendering and static generation

Develop and modify the Handsontable wrapper for Vue 3 with guidance on component structure, settings updates, column configuration, and shared data references. It also explains the build order and tests used to check wrapper changes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Fix settings updates in the Vue 3 wrapper
• Modify per-column configuration
• Investigate how array changes reach the grid

Migrate Vue applications from Table v8 to v9 by checking table creation, rendering, and reactive state updates. Combine Vue-specific changes with the shared core migration checklist, then verify types and affected feature behavior.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Upgrading Vue tables from v8 to v9
• Reviewing table creation and rendering changes
• Fixing reactive state updates after migration

Add and configure an inspection panel for Vue json-render apps. This skill guides setup and troubleshooting so you can inspect UI definitions, edit state, review action and stream timelines, browse catalogs, and select page elements.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding an inspection panel to a Vue app
• Inspecting UI definitions and editing state
• Reviewing action and stream timelines

State management decision tree for Vue 3 SPAs: ref/reactive locally, composables for shared logic, Pinia for app-wide state, provide/inject for DI, TanStack Query Vue for server state. Vuex pointer for Vue 2 legacy. Use this skill to: - Pick the right state tool for the data shape (local / shared / server / form). - Implement a Pinia store (Setup syntax preferred). - Use provide/inject correctly with InjectionKey<T>. - Set up TanStack Query Vue for server state. - Migrate from Vuex (with caution; only if BA asks). Do NOT use this skill for: - General SFC conventions (see vue-conventions). - Form state (see vue-forms — vee-validate handles that). - Routing state (see vue-routing — use vue-router useRoute). - Testing stores (see vue-testing).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Build GSAP animations in Vue, Svelte, and related frameworks with clear setup and cleanup patterns. Scope element selection to each component, start animations after elements exist, and remove animations when the component is destroyed.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding GSAP animations to Vue or Svelte components
• Keeping animations scoped to one component
• Cleaning up animations when components are removed

Implement and review GSAP animations in Vue, Nuxt, Svelte, and SvelteKit. It explains when to start animations, how to limit element selection to one component, and how to clean up when that component is removed.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding GSAP animations to Vue or Svelte
• Reviewing animation cleanup when components are removed
• Keeping animations scoped to one component

Build and render Table v9 tables in Vue with guidance on keeping data updates reactive, reusing shared table components, and connecting TanStack Query for data fetching or TanStack Virtual for displaying large tables.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building a Table v9 table in Vue
• Keeping tables in sync with changing data
• Reusing shared table components and settings

Read and control TanStack Table v9 state in Vue while keeping updates synchronized with the interface. Covers reactive reads, externally controlled state, update callbacks, shared state containers, and component boundaries for rendering.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Controlling pagination with Vue refs
• Displaying table state through computed values
• Investigating state synchronization failures

Connect Vue Table v9 to Devtools and troubleshoot missing tables. Covers unique table keys, reactive references that track table replacement, cleanup when targets change, and the development settings that determine whether the integration runs.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Connect a Vue table to Devtools
• Investigate a missing table target
• Keep registration updated when a table reference changes

Add GSAP animations to Vue, Nuxt, Svelte, and SvelteKit components with guidance on when animations should start, which elements they affect, and how to remove animations and restore styles when components are removed.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding animations to Vue components
• Reviewing animation cleanup in Svelte
• Limiting animations to elements within a component

Vue Router v4 (Vue 3 default) — route configuration, nested routes, dynamic segments, navigation guards, lazy loading, typed routes, route meta, programmatic navigation. Vue Router v3 (Vue 2) pointer only. Use this skill to: - Configure routes with createRouter + createWebHistory. - Use useRoute / useRouter composables in components. - Lazy-load route components for code splitting. - Implement auth guards via meta + beforeEach. - Type route params for safer access. Do NOT use this skill for: - General Vue conventions (see vue-conventions). - State management (see vue-state-management). - Forms (see vue-forms). - Testing routes (see vue-testing).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Vue 3 SFC structure, Composition API + <script setup>, file naming, project layout, props/emits/slots typing, defineModel, composables, lifecycle, watchers, UI library detection. Vue 2 fallback notes. Use this skill to: - Structure a new SFC with `<script setup>`, template, scoped styles. - Type props/emits/slots correctly via macros. - Pick `ref` vs `reactive` (prefer `ref`). - Build composables that compose cleanly. - Apply lifecycle hooks correctly. - Detect UI library (Vuetify/Quasar/PrimeVue/Naive UI/Element Plus/shadcn-vue) and mirror its patterns. Do NOT use this skill for: - State management lib choice (see vue-state-management). - Routing (see vue-routing). - Forms (see vue-forms). - Testing (see vue-testing).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use for Vue 3 testing best-practices review and recommendations — designing and auditing Vitest + Vue Test Utils tests for components, composables, Pinia stores, Vue Router, async/Suspense, Teleport, forms, and accessibility, plus Playwright E2E test-design strategy. Advisory/review only — recommends patterns and flags test smells; does not run tests. Complements mk:vue-best-practices (feature code). Invoke for "review my Vue tests", "how should I test this component/composable/store", or "Vue test best practices".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Create Handsontable documentation examples for JavaScript, TypeScript, React, Angular, and Vue. The skill explains source files, generated JavaScript, required imports and license settings, embedding examples in guides, and checking that each framework version displays correctly.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding a code example to a feature guide
• Preparing examples for multiple frameworks
• Generating JavaScript examples from TypeScript

MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Testing Vue 3 SPAs: Vitest + @vue/test-utils, RTL-style alternatives, Pinia testing via createTestingPinia, composable testing, msw for network mocks, Cypress component testing, Playwright e2e. Use this skill to: - Set up Vitest for Vue 3 with jsdom + @vue/test-utils. - Pick mount vs shallowMount. - Test components by props/emits/slots contract. - Mock Pinia stores in tests. - Test composables in isolation. - Set up Playwright or Cypress for end-to-end. Do NOT use this skill for: - General Vue conventions (see vue-conventions). - State patterns (see vue-state-management). - Form-specific patterns (see vue-forms).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Build micro-frontends with qiankun 3.x, combining separate web apps inside a host app. The skill covers creating host and child apps, converting existing Vite apps, and connecting loading behavior in React or Vue.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating a host app that loads separate web apps
• Creating a child app for qiankun 3.x
• Converting an existing Vite app into a child app

Vue 3 form patterns: native v-model, vee-validate + zod (most common), VueUse helpers, defineModel for custom inputs, controlled vs uncontrolled, field arrays, multi-step wizards. Use this skill to: - Wire vee-validate with a validation schema (zod / yup). - Build custom form components with defineModel (Vue 3.4+). - Implement multi-step forms. - Handle async validation. - Integrate forms with TanStack Query mutations or Pinia actions. Do NOT use this skill for: - General SFC conventions (see vue-conventions). - State management (see vue-state-management). - Routing (see vue-routing). - Testing forms (see vue-testing).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.