Nonstop Pajama Models

    vue-i18n-fetch
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.1 • Public • Published

    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)

    Install

    npm i vue-i18n-fetch

    DownloadsWeekly Downloads

    3

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    12.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • klarkc