Seamless Integrations

# ==============================================
# 🎯 Vue 3 + vue-i18n Integration with Laravel API
# ==============================================

# STEP 1: Install dependencies
# ----------------------------------------------
# npm install vue-i18n@9


# STEP 2: Create src/plugins/i18n.js
# ----------------------------------------------
import { createI18n } from 'vue-i18n'

export const i18n = createI18n({
    legacy: false,          # Use Composition API style
    locale: 'en',           # Default language
    fallbackLocale: 'en',
    messages: {},           # Will be loaded dynamically
})


# STEP 3: Create src/utils/loadTranslations.js
# ----------------------------------------------
export async function loadTranslations(locale) {
    try {
        const response = await fetch(`https://localizerx.test/api/translations?language=${locale}`)
        if (!response.ok) throw new Error('Failed to fetch translations')

        const messages = await response.json()

        # Optional: Cache for faster reloads
        localStorage.setItem(`translations_${locale}`, JSON.stringify(messages))

        return messages
    } catch (error) {
        console.error('Translation API Error:', error)
        return {}
    }
}


# STEP 4: Initialize in src/main.js
# ----------------------------------------------
import { createApp } from 'vue'
import App from './App.vue'
import { i18n } from './plugins/i18n'
import { loadTranslations } from './utils/loadTranslations'

async function bootstrap() {
    # 1️⃣ Load translations from Laravel API
    const messages = await loadTranslations('en')

    # 2️⃣ Register them to vue-i18n
    i18n.global.setLocaleMessage('en', messages)

    # 3️⃣ Create and mount the app
    const app = createApp(App)
    app.use(i18n)
    app.mount('#app')
}

bootstrap()


# STEP 5: Use in a Vue Component (e.g. App.vue)
# ----------------------------------------------
<template>
<div class="p-6">
<h2>{{ $t('auth.login') }}</h2>
<p>{{ $t('auth.logout') }}</p>

<div class="space-x-4 mt-4">
<button @click="switchLanguage('en')" class="bg-blue-600 text-white px-3 py-1 rounded">English</button>
<button @click="switchLanguage('es')" class="bg-green-600 text-white px-3 py-1 rounded">Español</button>
</div>
</div>
</template>




# STEP 6: Optional LocalStorage Caching
# ----------------------------------------------
# Modify loadTranslations.js like this:

export async function loadTranslations(locale) {
    const cached = localStorage.getItem(`translations_${locale}`)
    if (cached) return JSON.parse(cached)

    const response = await fetch(`https://localizerx.test/api/translations?language=${locale}`)
    const messages = await response.json()

    localStorage.setItem(`translations_${locale}`, JSON.stringify(messages))
    return messages
}


# STEP 7: Usage anywhere in Vue
# ----------------------------------------------
# 
{{ $t('auth.login') }}
# 
{{ $t('auth.logout') }}

# ==============================================
# ⚛️ React + i18next Integration with Laravel API
# ==============================================

# STEP 1: Install dependencies
# ----------------------------------------------
# npm install i18next react-i18next


# STEP 2: Create src/i18n.js
# ----------------------------------------------
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'

# Initialize i18next with no default messages yet
i18n
.use(initReactI18next)
.init({
    lng: 'en',                  # Default language
    fallbackLng: 'en',
    interpolation: {
        escapeValue: false,       # React already escapes values
    },
    resources: {},              # We'll load from Laravel API dynamically
})

export default i18n


# STEP 3: Create src/utils/loadTranslations.js
# ----------------------------------------------
export async function loadTranslations(locale) {
    try {
        const response = await fetch(`https://localizerx.test/api/translations?language=${locale}`)
        if (!response.ok) throw new Error('Failed to fetch translations')

        const messages = await response.json()

        # Optional: cache for performance
        localStorage.setItem(`translations_${locale}`, JSON.stringify(messages))

        return messages
    } catch (error) {
        console.error('Translation API Error:', error)
        return {}
    }
}


# STEP 4: Initialize translations before rendering app
# ----------------------------------------------
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import i18n from './i18n'
import { I18nextProvider } from 'react-i18next'
import { loadTranslations } from './utils/loadTranslations'

async function bootstrap() {
    const messages = await loadTranslations('en')

    i18n.addResources('en', 'translation', messages)

    ReactDOM.createRoot(document.getElementById('root')).render(
        <React.StrictMode>
        <I18nextProvider i18n={i18n}>
        <App />
        </I18nextProvider>
        </React.StrictMode>
    )
}

bootstrap()


# STEP 5: Use translations inside components
# ----------------------------------------------
import React from 'react'
import { useTranslation } from 'react-i18next'

export default function Example() {
    const { t, i18n } = useTranslation()

    const switchLanguage = async (lang) => {
        const response = await fetch(`https://localizerx.test/api/translations?language=${lang}`)
        const messages = await response.json()
        i18n.addResources(lang, 'translation', messages)
        i18n.changeLanguage(lang)
    }

    return (
        <div className="p-6">
            <h2>{t('auth.login')}</h2>
            <p>{t('auth.logout')}</p>

            <div className="space-x-4 mt-4">
                <button onClick={() => switchLanguage('en')} className="bg-blue-600 text-white px-3 py-1 rounded">
                    English
                </button>
                <button onClick={() => switchLanguage('es')} className="bg-green-600 text-white px-3 py-1 rounded">
                    Español
                </button>
            </div>
        </div>
    )
}


# STEP 6: Optional - Auto detect browser language
# ----------------------------------------------
import i18nextBrowserLanguageDetector from 'i18next-browser-languagedetector'

# Add this before .init()
i18n
.use(i18nextBrowserLanguageDetector)
.use(initReactI18next)
.init({
    fallbackLng: 'en',
    resources: {},
})

# i18next will auto-detect the user's browser language


# STEP 7: Usage anywhere in React
# ----------------------------------------------
# import { useTranslation } from 'react-i18next'
# const { t } = useTranslation()
# 
{t('auth.login')}
# 
{t('auth.logout')}