@stringpush/vue

Vue 3 plugin and composable for @stringpush/sdk.

Install

pnpm add @stringpush/vue @stringpush/sdk vue

Usage

import { createApp } from "vue";
import { createTranslationPlugin } from "@stringpush/vue";
import App from "./App.vue";

const app = createApp(App);

app.use(
  createTranslationPlugin({
    applicationId: "<from admin>",
    environment: "staging",
    locale: "en",
    apiKey: "trt_…",
    apiBaseUrl: "https://api.platform.stringpush.com",
    origin: window.location.origin,
  }),
);

app.mount("#app");

Composition API

<script setup lang="ts">
import { useTranslation } from "@stringpush/vue";

const { t, locale, setLocale, isReady } = useTranslation();
</script>

<template>
  <p v-if="isReady">{{ t("common.greeting") }}</p>
  <p v-else>Loading…</p>
  <button type="button" @click="setLocale('fr')">Locale: {{ locale }}</button>
</template>

Options API

The plugin registers $t, $translationLocale, and $translationReady on globalProperties.

<template>
  <p v-if="$translationReady">{{ $t("common.greeting") }}</p>
</template>

Catalog and locale changes trigger re-renders via SDK callbacks and Vue reactivity.

Overlay / edit mode

Pass editLauncher, editToken, and related init() options into createTranslationPlugin. Import overlay helpers from @stringpush/vue or @stringpush/sdk.

Related

• Vue integration guide
• Integration hub

Report vulnerabilities to [email protected].