Локализация с помощью Framework7 и Vue

Создавая приложение с Framework7, я хотел иметь возможность локализовать строки для поддержки других языков. Я нашел пакет Vue I18n, и на самом деле его довольно легко применить к проекту Framework7 Vue.

Ниже вы найдете шаги для этого. Я предполагаю, что вы уже создали приложение Vue Framework7. Если нет, следуйте инструкциям по установке.

Установить Vue I18n

В терминале (из папки вашего приложения) выполните следующую команду, чтобы установить vue-i18n.

npm install vue-i18n

Измените свой app.js

Затем в `src / js / app.js` обязательно импортируйте vue-i8n, как это, сразу после vue-import.

import VueI18n from 'vue-i18n';

Затем сразу после этого вы добавляете это:

Vue.use(VueI18n);

Далее нам нужно создать экземпляр VueI18n. Мы даем этим экземплярам переводы и текущую локаль. Во-первых, давайте быстро создадим объект, содержащий наши переводы.

const messages = {
  en: {
    message: {
      hello: 'Mark Knopfler is awesome'
    }
  },
  nl: {
    message: {
      hello: 'Mark Knopfler is te gek!'
    }
  }
};

Теперь давайте создадим экземпляр VueI18n:

const i18n = new VueI18n({
  locale: 'nl', // set locale
  messages, // set locale messages
});

Внизу вашего app.js вы найдете основной экземпляр Vue вашего приложения. Нам нужно добавить i18n к этому экземпляру, например:

new Vue({
    el: '#app',
    render: (h) => h(App),
    components: {
        app: App
    },
    i18n
});

Использование переводов в ваших компонентах

Теперь в ваших компонентах (наши страницы - это компоненты) вы можете получить свои переводы следующим образом:

{{ $t("message.hello") }}

Отдельный файл для переводов

По мере того, как ваш объект сообщений становится больше, вы можете поместить их в отдельный файл. Вы можете сделать это, например, создав файл messages.js в своей js-папке. Этот файл будет выглядеть примерно так:

const messages = {
  en: {
    message: {
      hello: 'Mark Knopfler is awesome'
    }
  },
  nl: {
    message: {
      hello: 'Mark Knopfler is te gek!'
    }
  }
};
export { messages };

Затем в своем app.js вы можете импортировать такие сообщения (до экземпляра Vuei18n):

import { messages } from './messages.js'

Надеюсь, это кому-нибудь поможет!