Framework & Platform Integrations

// Install
npm install react-i18next i18next

// Configure
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './messages/en.json';
import es from './messages/es.json';

i18n.use(initReactI18next).init({
  resources: { en: { translation: en }, es: { translation: es } },
  lng: 'en',
  fallbackLng: 'en',
});

// Use in components
import { useTranslation } from 'react-i18next';

function Welcome() {
  const { t } = useTranslation();
  return <h1>{t('common.welcome')}</h1>;
}

// Install
npm install next-intl

// next.config.js
const withNextIntl = require('next-intl/plugin')();
module.exports = withNextIntl({});

// i18n.ts
import { getRequestConfig } from 'next-intl/server';

export default getRequestConfig(async ({ locale }) => ({
  messages: (await import(`./messages/${locale}.json`)).default
}));

// Use in components
import { useTranslations } from 'next-intl';

export default function Welcome() {
  const t = useTranslations('common');
  return <h1>{t('welcome')}</h1>;
}

// Install
npm install vue-i18n

// main.js
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import en from './messages/en.json';
import es from './messages/es.json';

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  messages: { en, es }
});

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

// Use in components
<template>
  <h1>{{ $t('common.welcome') }}</h1>
</template>

# .github/workflows/sync-translations.yml
name: Sync Translations

on:
  push:
    branches: [main]

jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Sync translations
        run: npx intlpull sync
        env:
          INTLPULL_API_KEY: ${{ secrets.INTLPULL_API_KEY }}

      - name: Commit changes
        uses: stefanzweifel/git-auto-commit-action@v5
        with:
          commit_message: 'chore: sync translations'

# .gitlab-ci.yml
sync-translations:
  stage: prepare
  image: node:20
  script:
    - npx intlpull sync
  artifacts:
    paths:
      - messages/
  only:
    - main