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