English

Pushizo for Vue — Vue plugin for the Pushizo Web SDK. app.use(PushizoPlugin, options) initializes the shared SDK once in the browser (SSR safe); the usePushizo composable exposes reactive permission and push subscription state, and $pushizo is available in every component. Works with Vue 3 and Vue 2.7.

Status: @pushizo/vue 0.1.0 is not on npm yet; until then you can install the release archive from this repository. Durum: @pushizo/vue 0.1.0 henüz npm'de değil; o zamana kadar bu deponun sürüm arşivinden kurabilirsiniz.

Install from GitHub until then · O zamana kadar GitHub'dan kurulum:

npm install @pushizo/web --allow-remote=root https://github.com/pushizo/pushizo-vue/releases/download/v0.1.0/pushizo-vue-0.1.0.tgz

After publication · Yayından sonra:

npm install @pushizo/vue @pushizo/web

The detailed guide below is in Turkish; code samples are language-neutral. Full documentation: docs.pushizo.com/docs/integrations/vue · API reference: docs.pushizo.com/docs/api.

Türkçe

@pushizo/vue

Pushizo Web SDK'sı (@pushizo/web) için Vue eklentisi: app.use(PushizoPlugin, options) paylaşılan SDK örneğini tarayıcıda bir kez başlatır, usePushizo() composable'ı izin ve push abonelik durumunu reaktif olarak verir, bileşenlerde $pushizo global özelliği kullanılabilir.

• Vue 3 ve Vue 2.7 aynı pakettir (yalnızca iki sürümde ortak Composition API kullanılır).
• SSR güvenli: sunucuda (Nuxt, createSSRApp) init çağrılmaz, gözlemci bağlanmaz.
• Eklenti birden çok kez kurulsa da SDK bir kez başlatılır. Vue 3'te uygulama sökülünce gözlemciler kaldırılır; onNotificationClick dinleyicisi bileşen kapsamı bitince kaldırılır.

Kurulum

npm install @pushizo/vue @pushizo/web

Service worker site kökünde olmalıdır (public/PushizoSDKWorker.js):

// public/PushizoSDKWorker.js
const apiUrl = new URL(self.location.href).searchParams.get('apiUrl') || 'https://api.pushizo.com';
importScripts(`${apiUrl.replace(/\/$/, '')}/sdk-web/PushizoSDKWorker.js`);

Kullanım

// main.ts (Vue 3)
import { createApp } from 'vue';
import { PushizoPlugin } from '@pushizo/vue';
import App from './App.vue';

createApp(App).use(PushizoPlugin, { appId: 'app_…', serviceWorkerPath: '/PushizoSDKWorker.js' }).mount('#app');

// main.ts (Vue 2.7)
import Vue from 'vue';
import { PushizoPlugin } from '@pushizo/vue';

Vue.use(PushizoPlugin, { appId: 'app_…' });

<script setup lang="ts">
import { onNotificationClick, usePushizo } from '@pushizo/vue';

const { pushizo, ready, error, permission, pushSubscription } = usePushizo();
onNotificationClick(({ notification, result }) => {
  window.location.assign(result.url ?? notification.url ?? '/');
});
</script>

<template>
  <p v-if="error" role="alert">{{ error.message }}</p>
  <p v-else-if="!ready">Yükleniyor…</p>
  <p v-else-if="permission === 'unsupported'">Bu tarayıcı web push desteklemiyor.</p>
  <p v-else-if="permission === 'denied'">Bildirimler tarayıcı ayarlarından engellenmiş.</p>
  <button v-else-if="pushSubscription.optedIn" @click="pushizo.User.pushSubscription.optOut()">Bildirimleri kapat</button>
  <button v-else @click="pushizo.Notifications.requestPermission()">Bildirimlere izin ver</button>
</template>

Options API: this.$pushizo.User.addTags({ plan: 'pro' }).

API

| Ad | Açıklama | |----|----------| | PushizoPlugin | app.use(PushizoPlugin, options) / Vue.use(PushizoPlugin, options); Pushizo.init tarayıcıda bir kez. | | usePushizo() | { pushizo, state, ready, error, permission, pushSubscription } (salt okunur ref/computed). | | onNotificationClick(handler) | Bildirim tıklaması dinleyicisi; kapsam bitince kaldırılır, dönen işlevle elle de kaldırılır. | | $pushizo | Paylaşılan SDK örneği (tüm bileşenlerde). |

init hatası fırlatılmaz, error ref'ine yazılır. Vue 2.7'de uygulama düzeyinde söküm kancası olmadığından gözlemciler sayfa ömrü boyunca bağlı kalır. TypeScript'te $pushizo tipi Vue 3'ün ComponentCustomProperties arayüzüne eklenir.

Ayrıntılı rehber (Nuxt, login/logout, tag ve olaylar, bildirim kutusu): Vue rehberi.

Support · Destek

• Guide · Rehber: docs.pushizo.com/docs/integrations/vue
• API reference & OpenAPI · API referansı ve OpenAPI: docs.pushizo.com/docs/api · pushizo-openapi
• Bugs & ideas · Hata ve öneri: Issues
• Security · Güvenlik: please do not open public issues; email [email protected] · herkese açık issue açmayın, bu adrese yazın.
• Help · Destek: [email protected]

This repository is mirrored automatically from the Pushizo main repository on every release. Please open an issue instead of a pull request; fixes land in the main repository and ship with the next release. Bu depo her sürümde Pushizo ana deposundan otomatik yansıtılır. Pull request yerine issue açın; düzeltmeler ana depoda yapılır ve bir sonraki sürümle buraya gelir.

Released under the MIT License · MIT lisanslıdır — LICENSE.