본문으로 건너뛰기
cccskills
무료GitHub에 공개

vue-router-best-practices

Helps troubleshoot Vue Router 4 navigation, including checks before changing pages, URL parameter changes, and component cleanup. Use it to investigate redirect loops, stale data, and asynchronous work during navigation.

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

원문원문 설명 보기

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

vuejs-ai/skills
설치 방법 보기

이럴 때 유용합니다

  • Investigating infinite redirect loops
  • Reviewing data updates when URL parameters change
  • Checking asynchronous API calls during navigation
  • Reviewing event listener cleanup when leaving a screen

포함된 파일(9)

  • SKILL.md1.5 KB
  • reference/router-beforeenter-no-param-trigger.md4.8 KB
  • reference/router-beforerouteenter-no-this.md4.9 KB
  • reference/router-guard-async-await-pattern.md5.8 KB
  • reference/router-navigation-guard-infinite-loop.md5.4 KB
  • reference/router-navigation-guard-next-deprecated.md4.2 KB
  • reference/router-param-change-no-lifecycle.md4.9 KB
  • reference/router-simple-routing-cleanup.md5.2 KB
  • reference/router-use-vue-router-for-production.md5.2 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Vue Router best practices, common gotchas, and navigation patterns.

Navigation Guards

Route Lifecycle

Setup

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

create-adaptable-composable

무료

Create reusable Vue composables, functions that share reactive logic, accepting plain values, refs, or getters. Choose input types for reading or writing and normalize values so reactive effects track changes consistently.

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

  • Build reusable Vue composables
  • Update a document title when its input changes
  • Create a counter with writable input
vuejs-ai/skills3.1천2026년 10월 20일 업데이트

vue-best-practices

무료

Guides Vue 3 development with TypeScript, covering state, component responsibilities, and data flow. Helps organize implementation and refactoring, then review performance once the required behavior works.

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

  • Building Vue 3 screens with TypeScript
  • Refactoring large components
  • Clarifying state ownership and data flow
vuejs-ai/skills3.1천2026년 10월 20일 업데이트

vue-debug-guides

무료

Diagnose Vue 3 problems through symptom-based references covering state updates, component events, asynchronous failures, and rendering errors. Includes server-rendered pages whose HTML does not match what the browser expects when it takes over.

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

  • Investigating a screen that no longer updates
  • Tracking duplicate or missing component events
  • Diagnosing asynchronous loading failures
vuejs-ai/skills3.1천2026년 10월 20일 업데이트

vue-jsx-best-practices

무료

Write JSX, an HTML-like syntax within JavaScript, for Vue by checking how it differs from React JSX. Covers attribute conventions and JSX plugin configuration, with guidance for code migration and attribute type errors.

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

  • Migrating React JSX code to Vue
  • Investigating JSX attribute type errors
  • Checking class and className usage
vuejs-ai/skills3.1천2026년 10월 20일 업데이트

vue-options-api-best-practices

무료

Guides maintenance of Vue 3 components written with Options API. Covers TypeScript typing, access to component data through this, lifecycle methods, and accidental sharing of state between component instances.

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

  • Adding types to Options API components
  • Investigating this binding in methods
  • Reviewing access to data in lifecycle hooks
vuejs-ai/skills3.1천2026년 10월 20일 업데이트

vue-pinia-best-practices

무료

Set up Pinia stores, the shared data containers used in Vue applications, and troubleshoot state updates. Covers startup errors, destructuring that breaks screen updates, method context, and using URLs for temporary filters.

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

  • Investigating Pinia startup errors
  • Fixing screen updates after destructuring store values
  • Checking state returned by setup stores
vuejs-ai/skills3.1천2026년 10월 20일 업데이트

vuejs-ai의 스킬 모두 보기

이 스킬의 문제 신고