DE
Kostenlos starten
Zurück zu allen Dokumentationen

Diese Integrationsanleitung ist nur auf Englisch verfügbar.

BeMyWords with Vue

Integration guide for Vue 3 applications using vue-i18n.

Shape of the integration:

  1. At build time, fetch translations from BeMyWords into JSON resource files.
  2. Configure vue-i18n to load them at app init.
  3. Use $t() / useI18n() in components.

Prerequisites

  • A Vue 3 project (Vite-based assumed).
  • vue-i18n installed: npm install vue-i18n@latest.
  • A BeMyWords workspace, project, namespace, API key.

1. Environment variables

.env.local:

BEMYWORDS_BASE_URL=https://www.bemywords.org
BEMYWORDS_PROJECT_ID=<your-project-uuid>
BEMYWORDS_API_TOKEN=<your-api-token>
BEMYWORDS_NAMESPACE=app

Do not prefix BEMYWORDS_API_TOKEN with VITE_ — it must stay server-side.

2. Fetch script

scripts/fetch-translations.mjs:

import { writeFileSync, mkdirSync } from "node:fs";
import { join, dirname } from "node:path";
import { fileURLToPath } from "node:url";

const __dirname = dirname(fileURLToPath(import.meta.url));
const OUTPUT_DIR = join(__dirname, "..", "src", "locales");

const BASE_URL = process.env.BEMYWORDS_BASE_URL || "https://www.bemywords.org";
const PROJECT_ID = process.env.BEMYWORDS_PROJECT_ID;
const API_TOKEN = process.env.BEMYWORDS_API_TOKEN;
const NAMESPACE = process.env.BEMYWORDS_NAMESPACE || "app";

const LANGUAGES = ["en", "nb"];

async function fetchLanguage(lang) {
  const url = `${BASE_URL}/api/${PROJECT_ID}/latest/${lang}/${NAMESPACE}`;
  const res = await fetch(url, { headers: { Authorization: `Token token=${API_TOKEN}` } });
  if (!res.ok) throw new Error(`${lang}: HTTP ${res.status}`);
  return res.json();
}

async function main() {
  mkdirSync(OUTPUT_DIR, { recursive: true });
  if (!PROJECT_ID || !API_TOKEN) {
    console.warn("BEMYWORDS_* env vars not set.");
    return;
  }
  for (const lang of LANGUAGES) {
    const data = await fetchLanguage(lang);
    writeFileSync(join(OUTPUT_DIR, `${lang}.json`), JSON.stringify(data, null, 2) + "\n");
  }
}

main().catch((e) => { console.error(e); process.exit(1); });

3. Configure vue-i18n

src/i18n.ts:

import { createI18n } from "vue-i18n";
import en from "./locales/en.json";
import nb from "./locales/nb.json";

export default createI18n({
  legacy: false, // Composition API mode
  locale: "en",
  fallbackLocale: "en",
  messages: { en, nb },
});

src/main.ts:

import { createApp } from "vue";
import App from "./App.vue";
import i18n from "./i18n";

createApp(App).use(i18n).mount("#app");

4. Use in components

Composition API:

<script setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
</script>

<template>
  <h1>{{ t("home.hero.title") }}</h1>
  <p>{{ t("home.hero.subtitle") }}</p>
</template>

Options API / templates-only:

<template>
  <h1>{{ $t("home.hero.title") }}</h1>
</template>

BeMyWords returns flat dot-keys. vue-i18n reads dot notation natively — no conversion needed.

5. Hook into build

package.json:

{
  "scripts": {
    "predev": "node scripts/fetch-translations.mjs",
    "prebuild": "node scripts/fetch-translations.mjs",
    "dev": "vite",
    "build": "vite build"
  }
}

Pluralization and interpolation

vue-i18n uses pipe-separated plurals and {name} interpolation:

{
  "apples": "no apples | 1 apple | {count} apples",
  "greeting": "Hello, {name}!"
}

Store these strings verbatim in BeMyWords. Enable placeholder validation in project settings.

API reference

See Astro integration guide.

Status

This guide is a best-effort draft — not yet verified in a production Vue deployment. Please test before relying on it and report corrections.

Was kostet BeMyWords?

Kostenloser Start: 5.000 gespeicherte Wörter, 1 Website, keine Karte. Bezahlte Tarife beginnen bei 199 kr pro Monat – 1.990 kr pro Jahr – und werden nach gespeicherten Wörtern berechnet – die Quelle plus jede Übersetzung davon – niemals nach Sitzplätzen, Seitenaufrufen oder einer Begrenzung der Anzahl der Sprachen, die Sie betreiben. Bringen Sie Ihren eigenen KI-Schlüssel mit und es kostet pauschal 199 kr pro Monat ohne Wortlimit.

Welche Preisstufe das ist, hängt davon ab, wie viele Wörter Ihre Website enthält. Fügen Sie Ihre Adresse ein und wir lesen sie aus und sagen es Ihnen.

Jeder Tarif und was er enthält Größe Ihrer Website ermitteln

Installiere es auf dem Projekt, über das du gerade gelesen hast.

Der kostenlose Tarif reicht aus, um eine Landing-Page zu übersetzen und die Ausgabe selbst zu beurteilen. Keine Karte erforderlich.

Kostenlos starten