Composable useI18n et fonction t()
useI18n(), t('key'), $t dans les templates, changement avec locale.value et détection de la locale
Composable useI18n et fonction t() est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Traduire dans script setup
En mode API de composition, les composants accèdent aux outils de traduction grâce au composable useI18n(). Celui-ci renvoie notamment la fonction t et une référence réactive locale.
Appeler useI18n
Appelez useI18n() dans <script setup> et déstructurez ce dont vous avez besoin.
import { useI18n } from "vue-i18n"
const { t, locale } = useI18n()La fonction t
t(key) renvoie la chaîne traduite dans la locale active. C’est l’équivalent côté script de $t dans les modèles.
const { t } = useI18n()
const title = t("greeting") // "Hello" when locale is enInterpolation avec t
Passez un objet de valeurs nommées comme deuxième argument pour remplir les espaces réservés, exactement comme dans les modèles.
const { t } = useI18n()
const msg = t("welcome", { name: "Alice" })
// message "Welcome, {name}!" => "Welcome, Alice!"Utiliser t pour les chaînes dynamiques
Comme t est une fonction ordinaire, vous pouvez l’utiliser n’importe où dans la logique du script : pour construire des messages toast, des libellés calculés ou du texte de validation.
import { computed } from "vue"
const { t } = useI18n()
const label = computed(() => t("nav.home"))La référence locale
locale est une référence réactive qui contient le code de la langue actuelle. Sa lecture vous indique la langue active.
const { locale } = useI18n()
console.log(locale.value) // "en"Changer globalement de langue
Attribuer une valeur à locale.value modifie la langue active pour toute l’app. Chaque appel à t et chaque $t dans les modèles sont réaffichés de manière réactive dans la nouvelle langue.
function switchToTurkish() {
locale.value = "tr"
}
// All translated text updates automatically.Un sélecteur de langue
Un sélecteur simple relie une liste de sélection à locale. Comme il est réactif, le choix d’une option modifie instantanément toute l’interface.
<template>
<select v-model="locale">
<option value="en">English</option>
<option value="tr">Turkce</option>
</select>
</template>
<script setup>
import { useI18n } from "vue-i18n"
const { locale } = useI18n()
</script>$t ou t
Ils font la même chose dans deux contextes :
$t— disponible automatiquement dans les modèles, sans importation.t— fourni paruseI18n(), utilisé dans le script et la logique réactive.
Préférez t pour calculer des chaînes dans le code.
Messages à portée locale ou globale
useI18n() peut recevoir des options pour utiliser des messages propres au composant. Sans option, il utilise l’instance globale — le choix courant pour les traductions de toute l’app.
const { t } = useI18n() // global messages
// component-scoped (advanced):
// const { t } = useI18n({
// messages: { en: { ok: "OK" }, tr: { ok: "Tamam" } }
// })Conserver le choix
La langue est une préférence de l’utilisateur : conservez-la. Lisez la valeur enregistrée au démarrage et écrivez-la chaque fois que locale change à l’aide d’un observateur.
import { watch } from "vue"
const { locale } = useI18n()
watch(locale, (val) => localStorage.setItem("lang", val))Vérification rapide
Vérifiez votre compréhension de useI18n.
Récapitulatif
Vous avez appris l’API de traduction à l’exécution :
useI18n()renvoietet une référence réactivelocale.t(key)traduit ;t(key, { name })effectue l’interpolation des espaces réservés.- Utilisez
tdans la logique du script et les valeurs calculées ; utilisez$tdans les modèles. - Définissez
locale.valuepour changer globalement et réactivement de langue. - Conservez le choix avec un
watchsurlocale.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « Composable useI18n et fonction t() » est-elle gratuite ?
Oui — le texte complet de « Composable useI18n et fonction t() » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Composable useI18n et fonction t() » ?
useI18n(), t('key'), $t dans les templates, changement avec locale.value et détection de la locale Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Composable useI18n et fonction t() » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configurer vue-i18n et les fichiers de messages
- Composable useI18n et fonction t()
- Pluralisation et messages liés
- Formatage des nombres, dates et devises