Vue.js

<template>
  <div class="app">
    <header>
      <h1>{{ appTitle }}</h1>
      <select v-model="currentLanguage" @change="changeLanguage">
        <option v-for="lang in languages" :key="lang.code" :value="lang.code">
          {{ lang.name }}
        </option>
      </select>
    </header>

    <main>
      <h2>{{ welcomeMessage }}</h2>
      <p>{{ description }}</p>
      <button>{{ ctaButton }}</button>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import StringBoot from '@stringboot/web-sdk';

const appTitle = ref('');
const welcomeMessage = ref('');
const description = ref('');
const ctaButton = ref('');
const currentLanguage = ref('en');
const languages = ref([]);

onMounted(async () => {
  // Initialize StringBoot
  await StringBoot.initialize({
    apiToken: import.meta.env.VITE_STRINGBOOT_TOKEN,
    baseUrl: 'https://api.stringboot.com',
    defaultLanguage: 'en'
  });

  // Load available languages
  languages.value = await StringBoot.getAvailableLanguages();

  // Load initial strings
  await loadStrings();
});

async function loadStrings() {
  appTitle.value = await StringBoot.get('app_title');
  welcomeMessage.value = await StringBoot.get('welcome_message');
  description.value = await StringBoot.get('description');
  ctaButton.value = await StringBoot.get('cta_button');
}

async function changeLanguage() {
  await StringBoot.changeLanguage(currentLanguage.value);
  await loadStrings();
}

// Watch for language changes
watch(currentLanguage, async (newLang) => {
  await StringBoot.changeLanguage(newLang);
  await loadStrings();
});
</script>

// plugins/stringboot.ts
import { App } from 'vue';
import StringBoot from '@stringboot/web-sdk';

export default {
  install(app: App, options: any) {
    // Initialize StringBoot
    StringBoot.initialize(options);

    // Add global properties
    app.config.globalProperties.$stringboot = StringBoot;

    // Add global mixin for easy access
    app.mixin({
      methods: {
        async $getString(key: string) {
          return await StringBoot.get(key);
        }
      }
    });
  }
};

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import stringbootPlugin from './plugins/stringboot';

const app = createApp(App);

app.use(stringbootPlugin, {
  apiToken: import.meta.env.VITE_STRINGBOOT_TOKEN,
  baseUrl: 'https://api.stringboot.com',
  defaultLanguage: 'en'
});

app.mount('#app');

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: ''
    };
  },
  async mounted() {
    // Access via global helper
    this.title = await this.$getString('page_title');
  }
};
</script>