nuxt-i18n-composable
Composition API for @nuxtjs/i18n in Nuxt 2.x
Use this package to make use of the composition API while using Nuxt 2.x. This is heavily inspired by vue-i18n-composable (by Anthony Fu) and should only be used until there is an official solution by nuxt-i18n.
If you have to use nuxt-i18n (which got deprecated), please use version 0.1.1 of this package.
Install
npm i @nuxtjs/i18n nuxt-i18n-composable @nuxtjs/composition-api
Usage
Simply configure @nuxtjs/i18n as usual.
In components, you import useI18n from nuxt-i18n-composable.
<template>
<div>{{ t('language') }} or {{ language }}</div>
</template>
<script>
import { defineComponent, computed } from '@nuxtjs/composition-api'
import { useI18n } from 'nuxt-i18n-composable'
export default defineComponent({
setup() {
const i18n = useI18n();
const language = computed(() => i18n.t('language'));
return {
...useI18n(),
language,
// i18n.locale can be used as writable computed to modify locale
changeLanguage() {
i18n.locale.value = 'en';
}
}
}
})
</script>
<i18n>
{
"en": {
"language": "English"
},
"de": {
"language": "Deutsch"
}
}
</i18n>Tips
You can access the nuxt-i18n instance like this:
<script>
const { app } = useContext();
const locales = app.i18n.locales;
</script>
📄 License
MIT License © 2021 NBRX AG
