vue-i18n-fetch

Async store and load vue-i18n messages

Requeriments

Currently this package is only compatible with Vue I18n v9

Installation

NPM

npm install --save vue-i18n-fetch

Yarn

yarn add vue-i18n-fetch

PNPM

pnpm add vue-i18n-fetch

Usage

Loading messages asynchronously

Just decorates i18n with changed behavior.

<template>
  <div>
    <button @click="setLocale()">
        Load standard (english)
    </button>
    <button @click="setLocale('pt-br')">
        Load portuguese
    </button>

    <h1>
        {{ t('title') }}
    </h1>

    <p>
        {{ t('lorem') }}
    </p>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
import withMessagesFetch from 'vue-i18n-fetch';

const fetchMessages = (locale) => Promise.resolve({
  title: 'Server gathered title',
  lorem: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
})

const i18n = useI18n();
const { t } = withMessagesFetch(i18n, fetchMessages);
const setLocale = (locale) => {
  i18n.locale.value = locale;
};
</script>

Storing messages asynchronously

You can submit default messages to somewhere, this way CI/CD pipelines can extract added/updated messages.

<!-- App.vue -->
<template>
  <div>{{ t('title') }}</div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
import withMessagesFetch from 'vue-i18n-fetch';
import fetch from 'cross-fetch';

const i18n = useI18n({
  locale: en,
  messages: {
    en: {
      default: 'My Title'
    }
  }
})

/* ... */

/*
  submitMessages is called for every
  locale defined in useI18N 
*/
const submitMessages = (locale, messages) => {
  if(typeof window === 'undefined') {
    /* submit locale messages */
  }
};

const { t } = withMessagesFetch(
  i18n,
  fetchMessages,
  submitMessages,
);
const setLocale = (locale) => {
  i18n.locale.value = locale;
};
</script>

Then render the server side application, more info.

/* main.js */
import { createSSRApp } from 'vue';
import { renderToString } from '@vue/server-renderer';
import App from './App.vue';

const app = createSSRApp(App)

const appContent = await renderToString(app)