Appearance

Mitt Plugin ​

File Information ​

  • Path: app/plugins/mitt.client.ts
  • Purpose: Set up global event bus for component communication
  • Type: Client-only (runs only in browser)
  • Load Order: 8

Overview ​

The Mitt plugin creates a global event bus using the mitt library. This allows components to communicate with each other through events without direct dependencies. The event bus is available globally as $mittBus.

Key Features ​

  1. Global Event Bus

    • Single event emitter instance
    • Available throughout the application
    • Type-safe event handling

  2. Component Communication

    • Emit events from any component
    • Listen to events from any component
    • Decoupled component communication

  3. Simple API

    • on() - Listen to events
    • off() - Remove listeners
    • emit() - Emit events

Code Structure ​

typescript
import mitt, { type Emitter } from 'mitt'

export default defineNuxtPlugin((nuxtApp) => {
  const emitter: Emitter<any> = mitt<any>()

  // Provide globally as $mittBus
  nuxtApp.provide('mittBus', emitter)
})

Usage Examples ​

Emit Event ​

typescript
const { $mittBus } = useNuxtApp()

// Emit event with data
$mittBus.emit('event-name', { data: 'value' })

Listen to Event ​

typescript
const { $mittBus } = useNuxtApp()

// Listen to event
$mittBus.on('event-name', (data) => {
  console.log('Event received:', data)
})

Remove Listener ​

typescript
const { $mittBus } = useNuxtApp()

// Remove specific listener
const handler = (data) => {
  console.log('Event received:', data)
}

$mittBus.on('event-name', handler)
$mittBus.off('event-name', handler)

Remove All Listeners ​

typescript
const { $mittBus } = useNuxtApp()

// Remove all listeners for event
$mittBus.off('event-name')

Component Example ​

vue
<script setup>
const { $mittBus } = useNuxtApp()

// Listen on mount
onMounted(() => {
  $mittBus.on('user-updated', handleUserUpdate)
})

// Clean up on unmount
onUnmounted(() => {
  $mittBus.off('user-updated', handleUserUpdate)
})

function handleUserUpdate(user) {
  console.log('User updated:', user)
}

function updateUser() {
  // Emit event
  $mittBus.emit('user-updated', { id: 1, name: 'John' })
}
</script>

Common Use Cases ​

Download Events ​

typescript
// Emit download complete
$mittBus.emit('download-all-folder')
$mittBus.emit('download-file-folder', assetId)
$mittBus.emit('download-file-collage', assetId)

Profile Updates ​

typescript
// Emit profile updates
$mittBus.emit('profile-name-updated', name)
$mittBus.emit('profile-image-updated', imageUrl)

Workspace Changes ​

typescript
// Emit workspace changes
$mittBus.emit('workspace-changed', workspaceId)

API Reference ​

on(type, handler) ​

Listen to an event.

Parameters:

  • type: string - Event type
  • handler: Function - Event handler function

Returns: void

off(type, handler?) ​

Remove event listener(s).

Parameters:

  • type: string - Event type
  • handler?: Function - Optional specific handler to remove

Returns: void

emit(type, data?) ​

Emit an event.

Parameters:

  • type: string - Event type
  • data?: any - Optional event data

Returns: void

Type Safety ​

The plugin uses TypeScript with Emitter<any> type. For better type safety, you can define event types:

typescript
type Events = {
  'user-updated': { id: number; name: string }
  'download-complete': { fileId: string }
}

const emitter: Emitter<Events> = mitt<Events>()

Best Practices ​

  1. Clean Up Listeners: Always remove listeners in onUnmounted
  2. Event Naming: Use descriptive, consistent event names
  3. Data Structure: Use consistent data structures for events
  4. Avoid Overuse: Don't use event bus for everything (props/emits are better for parent-child)

Dependencies ​

  • mitt - Tiny event emitter library

Notes for Development ​

  • Client-only plugin (.client.ts suffix)
  • Available globally as $mittBus
  • Simple and lightweight event system
  • No built-in persistence or history
  • Events are synchronous