Skip to main content

Vue SDK - Coming Soon

The LiveI18n Vue SDK is currently in development and will provide seamless internationalization for Vue.js applications.

Expected Features​

Vue 3 Composition API Support​

<template>
  <div>
    <LiveText>{{ $t('Welcome to our application!') }}</LiveText>
    <LiveText :tone="'friendly'" :context="'greeting'">
      Hello, how can we help you today?
    </LiveText>
  </div>
</template>

<script setup>
import { LiveText } from '@livei18n/vue-sdk'
</script>

Reactive Translations​

<script setup>
import { ref } from 'vue'
import { useLiveI18n } from '@livei18n/vue-sdk'

const { translate, isLoading } = useLiveI18n()
const language = ref('auto')
const message = ref('Hello, world!')

const translatedMessage = await translate(message.value, {
  language: language.value,
  context: 'greeting'
})
</script>

Global Configuration​

import { createApp } from 'vue'
import LiveI18nPlugin from '@livei18n/vue-sdk'
import App from './App.vue'

const app = createApp(App)

app.use(LiveI18nPlugin, {
  apiKey: process.env.VUE_APP_LIVEI18N_API_KEY,
  customerId: process.env.VUE_APP_LIVEI18n_CUSTOMER_ID
})

app.mount('#app')

Planned Features​

🔄 Reactive System Integration​

Full integration with Vue's reactivity system for automatic updates when language preferences change.

🎯 Composition API First​

Built from the ground up with Composition API, with Options API support.

📱 SSR Support​

Server-side rendering support for Nuxt.js applications.

🛠 DevTools Integration​

Vue DevTools extension for debugging translations and cache inspection.

📦 TypeScript Support​

Complete TypeScript definitions for better developer experience.

🎨 Template Directives​

Custom directives for inline translations:

<template>
  <h1 v-live-text="'Welcome!'"></h1>
  <p v-live-text="{ text: 'Hello world', tone: 'friendly' }"></p>
</template>

Estimated Timeline​

  • Alpha Release: Q1 2025
  • Beta Release: Q2 2025
  • Stable Release: Q3 2025

Stay Updated​

Want to be notified when the Vue SDK is available?

  • ⭐ Star our GitHub repository for updates
  • 💬 Join our Discord for early access discussions
  • 📧 Subscribe to our newsletter for release announcements
  • 🔔 Follow us on Twitter for development progress

Alternative Solutions​

While waiting for the Vue SDK, you can:

Use the Direct API​

// Direct API integration
const translateText = async (text, options = {}) => {
  const response = await fetch('https://api.livei18n.com/api/v1/translate', {
    method: 'POST',
    headers: {
      'X-API-Key': process.env.VUE_APP_LIVEI18N_API_KEY,
      'X-Customer-ID': process.env.VUE_APP_LIVEI18N_CUSTOMER_ID,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      text: text,
      locale: options.language || 'auto',
      cache_key: generateCacheKey(text, options)
    })
  })
  
  const data = await response.json()
  return data.translated
}

Create a Simple Wrapper​

// Simple Vue 3 composable
import { ref, computed } from 'vue'

export function useLiveI18n() {
  const cache = new Map()
  
  const translate = async (text, options = {}) => {
    const cacheKey = `${text}-${JSON.stringify(options)}`
    
    if (cache.has(cacheKey)) {
      return cache.get(cacheKey)
    }
    
    try {
      const translated = await translateText(text, options)
      cache.set(cacheKey, translated)
      return translated
    } catch (error) {
      console.error('Translation failed:', error)
      return text // Fallback to original
    }
  }
  
  return { translate }
}

Contributing​

Interested in contributing to the Vue SDK development?

  • Beta Testing: Sign up for our beta testing program
  • Feedback: Share your Vue integration requirements
  • Code Review: Help review the SDK architecture
  • Documentation: Contribute to Vue-specific documentation

Questions?​

Have questions about the Vue SDK or want to discuss requirements?

  • GitHub Discussions: Share your ideas and requirements
  • Discord: Chat with the development team
  • Email: Contact our product team directly

Want to get started now? Try our React SDK for reference implementation patterns, or use our demo to test the API with your keys.