Vue

i1n SDK या vue-i18n के साथ ब्रिज मोड का उपयोग करके i1n को Vue.js के साथ एकीकृत करें।

सेटअप

अपने Vue प्रोजेक्ट में __VAR_1__ i1n init चलाएँ। CLI, यदि मौजूद हो तो vue-i18n को ऑटो-डिटेक्ट करता है और आपके locales/ डायरेक्टरी में नेस्टेड JSON फॉर्मेट को कॉन्फ़िगर करता है।

आप i1n SDK को स्टैंडअलोन मोड में उपयोग कर सकते हैं या ब्रिज मोड के माध्यम से इसे vue-i18n से कनेक्ट कर सकते हैं।

स्टैंडअलोन मोड

i1n से init, t, और setLocale इम्पोर्ट करें। अपने ट्रांसलेशन रिसोर्स लोड करें और सीधे अपने कंपोनेंट्स या टेम्प्लेट्स में t() का उपयोग करें।

यह दृष्टिकोण पूरी तरह से vue-i18n को बदल देता है। अपने एप्लिकेशन में रिएक्टिव लोकेल स्विचिंग प्रदान करने के लिए एक Vue प्लगइन या कंपोज़ेबल का उपयोग करें।

vue-i18n के साथ ब्रिज मोड

यदि आपकी परियोजना vue-i18n का उपयोग करती है, तो इसे एक पंक्ति से कनेक्ट करें: registerI1n((key, params) => i18n.global.t(key, params))। i1n t() फ़ंक्शन सख्त प्रकार की जाँच प्रदान करते हुए vue-i18n को सौंपता है।

i1n JSON फ़ाइलों, AI अनुवाद और टाइप जनरेशन का प्रबंधन करता है। vue-i18n रनटाइम लोडिंग, $t() टेम्प्लेट हेल्पर और useI18n() कंपोज़ेबल को संभालना जारी रखता है। शून्य माइग्रेशन लागत।

परिनियोजन

अपने बिल्ड स्टेप में i1n पुल जोड़ें। यह Vite-आधारित Vue प्रोजेक्ट्स और Nuxt दोनों के साथ काम करता है।

i1n पुल द्वारा उत्पन्न अनुवाद फ़ाइलें vue-i18n की फ़ाइल-आधारित लोडिंग के साथ पूरी तरह से संगत हैं।

src/App.vue

<template>
  <h1>{{ $t('welcome') }}</h1>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

Bridge Mode — src/i18n.ts

import { registerI1n } from 'i1n'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({ /* ... */ })
registerI1n((key, params) => i18n.global.t(key, params))

Vue

सेटअप

स्टैंडअलोन मोड

vue-i18n के साथ ब्रिज मोड

परिनियोजन

संबंधित

डैशबोर्ड

ब्रिज मोड