script-setup

Simplify Vue 3 component scripts using script setup, defineProps, and defineEmits.

235|25|Updated Mar 24, 2026

Search Tags:#typescript #vue #vue3 #composition-api #script-setup #defineProps #single-file-component

Ready to run

npx skills add https://github.com/PatternsDev/skills --skill script-setup

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: script-setup
Source: https://github.com/PatternsDev/skills/tree/main/vue/script-setup
Command: npx skills add https://github.com/PatternsDev/skills --skill script-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Script setup in Vue 3 offers a concise way to use the Composition API, but teams may struggle with ergonomics and consistency. This guide helps adopt the pattern to reduce boilerplate and improve readability across components.

Core Features & Use Cases

Simplified component scripts: declare reactive state, props, and emits inside a single script setup block.
Automatic template bindings: top-level bindings are available in the template without an explicit return.
Type-safe props and events: use defineProps and defineEmits with optional withDefaults for TypeScript.
Best practices: guidelines for organizing composition logic and component structure.

Quick Start

Start by converting a typical Vue 3 component to use the <script setup> block and progressively adopt defineProps and defineEmits.

Frequently Asked Questions about script-setup

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

FAQPage Schema

How do I use Vue 3 script setup to simplify single-file components?▼

Vue 3 script setup streamlines single-file components by letting you declare reactive state, props, and emits inside a single block, reducing boilerplate and improving readability across your project.

How does script setup handle template bindings in Vue 3?▼

Script setup provides automatic template bindings, meaning top-level variables and functions declared in the block are instantly available in the template without needing an explicit return statement.

What is the best way to define type-safe props and emits with Vue 3 composition API?▼

Use defineProps and defineEmits within your script setup block to achieve type-safe props and events, applying withDefaults for TypeScript to ensure proper type safety and ergonomic composition.

Can I use script setup across standard Vue 3 projects without extra dependencies?▼

Yes, script setup applies to Vue 3 single-file components across standard projects without requiring additional dependencies, covering standard props, emits, and template bindings natively.

Why should I convert Vue 3 components to use script setup instead of the standard composition API?▼

Script setup reduces boilerplate and improves readability by offering a more concise syntax for the composition API, helping teams adopt consistent patterns and improve overall component ergonomics.

How do I organize composition logic when using script setup in Vue 3?▼

Follow best practices for organizing composition logic and component structure by declaring state, props, and emits cleanly inside the single script setup block to ensure maintainable single-file components.