Nuxt Events

Nuxt Events for global events

• ✨  Release Notes

Features

• Global Events
• Composable
• Typescript support

Quick Setup

1. Add @skmd87/nuxt-events dependency to your project

# Using pnpm
pnpm add -D @skmd87/nuxt-events

# Using yarn
yarn add --dev @skmd87/nuxt-events

# Using npm
npm install --save-dev @skmd87/nuxt-events

2. Add @skmd87/nuxt-events to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@skmd87/nuxt-events'
  ]
})

Usage

<template>
  <div>
    <h1>Events</h1>  
    <div>
      <button
        color="primary"
        variant="elevated"
        @click="emit('test-event', 'from useEvent')"
      >
        Send Event (from useEvent)
      </button>
      <button
        color="primary"
        variant="elevated"
        @click="$emit('test-event', 'from useNuxtApp')"
      >
        Send Event (from
        useNuxtApp)
      </button>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
declare module "#NuxtEvents" {
	interface Events {
		'test-event': string;
	}
}
const { emit, on } = useEvents()

const { $emit } = useNuxtApp()

on('test-event', (v) => alert(`test-event received ${v}`))

</script> 

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release