القائمة
Real-time features with Laravel Echo and WebSockets. Use when subscribing to channels, listening for events, implementing live updates, or managing channel subscriptions.
التثبيت باستخدام 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.
Creating custom Vue composables with proper patterns. Use when building reusable stateful logic, shared state management, or encapsulating feature-specific behavior.
| name | nuxt-realtime |
| description | Real-time features with Laravel Echo and WebSockets. Use when subscribing to channels, listening for events, implementing live updates, or managing channel subscriptions. |
WebSocket real-time updates via Laravel Echo.
realtime.md - Complete real-time patterns
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-laravel-echo'],
runtimeConfig: {
public: {
echo: {
key: undefined, // NUXT_PUBLIC_ECHO_KEY
host: undefined, // NUXT_PUBLIC_ECHO_HOST
scheme: undefined, // NUXT_PUBLIC_ECHO_SCHEME
port: undefined, // NUXT_PUBLIC_ECHO_PORT
},
},
},
})
const { privateChannel, presenceChannel, leaveChannel } = useRealtime()
// Subscribe to channel
const channel = privateChannel('posts.{id}', postId)
// Listen for events
channel.on('PostUpdated', (event) => {
refresh()
})
// Multiple events
channel.on(['PostCreated', 'PostUpdated', 'PostDeleted'], refresh)
// Cleanup
onUnmounted(() => {
leaveChannel('posts.{id}', postId)
})
// app/constants/channels.ts
export const Posts = 'posts'
export const Post = 'post.{post}'
// app/constants/events.ts
export const PostCreated = 'PostCreated'
export const PostUpdated = 'PostUpdated'