@notifyon/vue

@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