Using the npm Package

Using the npm Package

@selldone/translate is published to npm so Vue apps can import Selldone texts directly. This page covers import paths, building vue-i18n messages, loading languages on demand, right-to-left icons, and how shop-level overrides are merged. The examples follow the Storefront source.

Install

npm install @selldone/translate

yarn add @selldone/translate

The package ships TypeScript source files (no build step, no runtime dependencies). Your bundler compiles the files you import.

Import paths

import shop from "@selldone/translate/shop/de";                 // shop/de.ts
import dashboard from "@selldone/translate/dashboard/de";       // dashboard/de.ts
import global from "@selldone/translate/global/de";             // global/de.ts
import community from "@selldone/translate/global/community/de";
import countries from "@selldone/translate/global/countries/en"; // available for selected languages
import icons from "@selldone/translate/global/icons/ltr";        // or .../icons/rtl
import LanguagesRepository from "@selldone/translate/repository/LanguagesRepository.ts";

Each language module has a default export with the messages object.

Build messages for a language

The Storefront builds one module per language. Shop texts are spread at the root, and shared packs are mounted under their own keys:

// lang/fa.ts (right-to-left language)
import global from "@selldone/translate/global/fa";
import icons from "@selldone/translate/global/icons/rtl";
import community from "@selldone/translate/global/community/fa";
import pack from "@selldone/translate/shop/fa";
import { fa } from "vuetify/locale";

export default {
  icons: icons,         // $t("icons.arrow_back")
  global: global,       // $t("global.commons.…")
  community: community, // $t("community.…")
  ...pack,              // $t("footer.privacy")
  $vuetify: fa,         // Vuetify's own component texts
};

Load languages on demand

Bundle only English up front and import other languages when the user switches. This is a shortened version of lang/i18n_shop.ts in the Storefront:

import { createI18n } from "vue-i18n";
import en from "./en";

export const i18n = createI18n({
  legacy: false,
  locale: "en",
  fallbackLocale: "en",
  messages: { en },
});

const loaded = ["en"];

export async function loadLanguage(lang: string) {
  if (!loaded.includes(lang)) {
    const messages = await import(`./${lang}.ts`); // or a switch with one import() per language
    i18n.global.setLocaleMessage(lang, messages.default);
    loaded.push(lang);
  }
  i18n.global.locale.value = lang;
}

With LanguagesRepository

To load a single pack directly from the package:

import LanguagesRepository from "@selldone/translate/repository/LanguagesRepository.ts";

const shop = await new LanguagesRepository(LanguagesRepository.SHOP).load("de");
const global = await new LanguagesRepository(LanguagesRepository.GLOBAL).load("de");

i18n.global.mergeLocaleMessage("de", { ...shop.default, global: global.default });

load(lang) returns the dynamic import() promise for <folder>/<lang>.ts, or null for an unknown pack.

Right-to-left languages

Use global/icons/rtl for right-to-left languages (for example Arabic and Persian) and global/icons/ltr for the rest. The icon packs swap direction-dependent icon names such as arrow_back and arrow_next. Text direction for Vuetify components follows the active locale when you use the Vuetify instance from Components (VuetifyInstance(i18n)), which links Vuetify to vue-i18n.

Shop-level overrides

Merchants can override the global and shop packs for their own shop (LanguagesRepository.PACKAGES_SHOP_OVERRIDE). When the language changes, the Storefront fetches the overrides with window.$storefront.shop.language.fetchLanguagePack(locale) from the Storefront SDK and merges them on top of the package messages:

import merge from "lodash-es/merge";

const { global, shop } = await window.$storefront.shop.language.fetchLanguagePack(locale);
const current = i18n.global.getLocaleMessage(locale);

i18n.global.setLocaleMessage(locale, merge({}, current, { global: { ...global }, ...shop }));

Backend files

backend/lang/<code>/*.php are Laravel language files (return [ ... ]; with :placeholder variables). They are used by the Selldone backend for emails, invoices, notifications and errors, and are not imported by frontend apps.

Next steps

• Translation Structure
• Storefront Translation
• Components wiki
• FAQ