@notifyon/vue

Vue 3 SDK for NotifyOn - Real-time notifications for your Vue applications.

Installation

npm install @notifyon/vue
# or
yarn add @notifyon/vue
# or
pnpm add @notifyon/vue

Usage

Composition API

<template>
  <NotifyOn 
    :public-key="publicKey"
    :user-id="userId"
  />
  <!-- Your app components -->
</template>

<script setup>
import { NotifyOn } from '@notifyon/vue';

const publicKey = 'pk_your_public_key';
const userId = 'user_123';
</script>

Options API

<template>
  <NotifyOn 
    public-key="pk_your_public_key"
    user-id="user_123"
  />
  <!-- Your app components -->
</template>

<script>
import { NotifyOn } from '@notifyon/vue';

export default {
  components: {
    NotifyOn
  }
}
</script>

Global Registration

// main.js
import { createApp } from 'vue';
import { NotifyOn } from '@notifyon/vue';
import App from './App.vue';

const app = createApp(App);
app.component('NotifyOn', NotifyOn);
app.mount('#app');

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | public-key | String | Yes | Your NotifyOn public key | | user-id | String | Yes | The user ID to receive notifications |

SSR Support

The component automatically handles server-side rendering in Nuxt.js and other SSR frameworks. It only initializes on the client side.

Nuxt.js Usage

For Nuxt.js applications, wrap the component with <ClientOnly>:

<template>
  <ClientOnly>
    <NotifyOn 
      public-key="pk_your_public_key"
      user-id="user_123"
    />
  </ClientOnly>
</template>

<script setup>
import { NotifyOn } from '@notifyon/vue';
</script>

License

MIT