القائمة
Creating custom Vue composables with proper patterns. Use when building reusable stateful logic, shared state management, or encapsulating feature-specific behavior.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Form request validation and comprehensive validation testing. Use when creating or modifying form requests, validation rules, or validation tests.
Feature module pattern organizing domain logic into queries, mutations, and actions. Use when implementing data fetching with filters, API mutations with loading states, business logic with UI feedback, or organizing domain-specific code.
File-based routing with page patterns for lists, details, and navigation. Use when creating pages, defining page meta (permissions, layouts), implementing list/detail patterns, or setting up breadcrumbs and headers.
Foundational architecture for Nuxt 4 + Vue 3 + Nuxt UI applications. Use when starting new projects, understanding project structure, or making architectural decisions about directory organization, technology choices, and pattern selection.
Vue component patterns with Composition API and script setup. Use when creating components, understanding script setup order convention, organizing component directories, or implementing component patterns like slideovers, modals, and tables.
Form handling with XForm component and useFormBuilder. Use when creating forms, handling validation errors, managing form state, or building form-based slideovers and modals.
| name | nuxt-composables |
| description | Creating custom Vue composables with proper patterns. Use when building reusable stateful logic, shared state management, or encapsulating feature-specific behavior. |
Creating reusable stateful logic via Vue Composition API.
composables.md - Patterns, naming, state management, best practices
multi-step-state.md - SSR-safe shared state across routes via useState, deriving step from route.path, submit-with-side-effects, why caller owns loading
State defined outside function persists across all callers:
// app/composables/useUser.ts
let user = ref<User>() // Singleton - shared across app
export default function useUser() {
const setUser = (data: BaseEntity) => {
user.value = User.hydrate(data)
}
const clearUser = () => { user.value = undefined }
return { user, setUser, clearUser }
}
State defined inside function - new instance per call:
// app/composables/useCounter.ts
export default function useCounter(initial = 0) {
const count = ref(initial) // Fresh per call
const increment = () => count.value++
const decrement = () => count.value--
return { count, increment, decrement }
}
| Convention | Example |
|---|---|
| File name | useUser.ts, useCategories.ts |
| Function | export default function useUser() |
| Return | Always object { state, methods } |
| Refs | Reactive: user, not userRef |