vue

Build Vue 3 components using the Composition API and script setup macros.

302|22|Updated Feb 12, 2026
One-click install
npx skills add https://github.com/JetBrains/skills --skill vue-jetbrains
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vue
Source: https://github.com/JetBrains/skills/tree/main/vue
Command: npx skills add https://github.com/JetBrains/skills --skill vue-jetbrains

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill guides developers in building Vue 3 components and applications using the Composition API and script setup macros, enabling faster creation of clean, maintainable SFCs with built-in features.

Core Features & Use Cases

  • Uses the Composition API, script setup, and defineProps/defineEmits/defineModel for strongly typed, reusable components.
  • Demonstrates working with core reactivity primitives and common built-in components such as Transition, Teleport, Suspense, KeepAlive.
  • Ideal for creating scalable Vue SFCs, component libraries, and UI patterns across projects.

Quick Start

Create a Vue SFC using script setup and defineProps/defineEmits to implement a simple reactive counter with a prop-driven label.

Frequently Asked Questions about vue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build Vue 3 components using the Composition API?

Build Vue 3 components by using the Composition API with script setup macros to define props, emits, and models. This approach enables strongly typed, reusable SFCs while managing reactivity primitives for maintainable UI patterns.

What is the best way to define props and emits in Vue SFCs?

The best way to define props and emits in Vue SFCs is using script setup macros like defineProps and defineEmits. These macros provide strongly typed component interfaces for scalable component libraries.

How does script setup work with Vue built-in components like Transition and Teleport?

Script setup works with Vue built-in components by composing UI patterns directly within the SFC. You can integrate Transition, Teleport, Suspense, and KeepAlive alongside reactivity primitives to manage complex UI states.

Can I use defineModel for two-way binding in Vue 3?

Yes, you can use the defineModel macro in Vue 3 script setup to establish two-way binding. It streamlines reactive component communication when building applications with the Composition API.

When do I need to use core reactivity primitives in Vue 3?

You need core reactivity primitives in Vue 3 when managing dynamic state across components and applications. They allow the Composition API to track dependencies and update the UI efficiently within script setup.

Composition API vs Options API for scalable Vue component libraries?

The Composition API is preferred for scalable Vue component libraries because it uses script setup to create clean, maintainable SFCs. It offers superior logic reuse and strongly typed definitions compared to the Options API.