Internationalization

The SpartanAuth widgets support four languages out of the box. Set the locale attribute to switch the UI language.

Supported locales

Code	Language
en	English (default)
fr	French
es	Spanish
ja	Japanese

Setting the locale

<spartan-login
  locale="fr"
  domain="https://api.spartanauth.com"
  sector="your-sector-id">
</spartan-login>

Auto-detecting the browser locale

const locale = navigator.language.slice(0, 2) || 'en';
// e.g. "en", "fr", "es", "ja"

Fall back to 'en' for any unsupported language codes.

Changing locale at runtime

The widget reads its locale once at initialization. Changing the locale attribute after the widget is mounted has no effect. To switch languages, you must force the widget to remount.

Vue 3

const locale = ref(navigator.language.slice(0, 2) || 'en');
const widgetKey = ref(0);

// Force a remount whenever locale changes
watch(locale, () => { widgetKey.value++; });

<spartan-login :key="widgetKey" :locale="locale" ...></spartan-login>

React

const [locale, setLocale] = useState(navigator.language.slice(0, 2) || 'en');
const [widgetKey, setWidgetKey] = useState(0);

function changeLocale(newLocale: string) {
  setLocale(newLocale);
  setWidgetKey(k => k + 1); // forces remount
}

<spartan-login key={widgetKey} locale={locale} ...></spartan-login>

Language switcher example (Vue 3)

<template>
  <div>
    <select v-model="locale">
      <option value="en">English</option>
      <option value="fr">Français</option>
      <option value="es">Español</option>
      <option value="ja">日本語</option>
    </select>

    <spartan-login
      :key="widgetKey"
      :locale="locale"
      domain="https://api.spartanauth.com"
      sector="your-sector-id">
    </spartan-login>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const locale = ref('en');
const widgetKey = ref(0);

watch(locale, () => { widgetKey.value++; });
</script>