Getting Started

Getting Started

This page shows developers how to install @selldone/translate and load a language into a Vue 3 app with vue-i18n. If you want to improve a translation instead, go to Contributing Translations.

Prerequisites

• A Vue 3 app with vue-i18n and a bundler that can import .ts files (for example Vite).
• Optional: Selldone Components. Its components use these texts, and global/en.ts imports a helper from @selldone/components-vue, so install both in apps that use the global pack.

1. Install

npm install @selldone/translate

yarn add @selldone/translate

2. Create a language file

Combine the packs you need into one message object per language. This mirrors lang/en.ts in the Storefront:

// lang/en.ts
import global from "@selldone/translate/global/en";
import icons from "@selldone/translate/global/icons/ltr";
import countries from "@selldone/translate/global/countries/en";
import community from "@selldone/translate/global/community/en";
import pack from "@selldone/translate/shop/en";

export default {
  icons: icons,
  countries: countries,
  global: global,
  community: community,
  ...pack,
};

3. Create the i18n instance

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

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

app.use(i18n);

4. Use the texts

<template>
  <span>{{ $t("footer.privacy") }}</span>                     <!-- shop pack -->
  <span>{{ $t("product_info.return_in_days", { days: 30 }) }}</span>
</template>

product_info.return_in_days is "{days} Days Return Warranty" in shop/en.ts; vue-i18n replaces {days} with the value you pass.

Next steps

• Using the npm Package — load languages on demand, RTL icons, shop overrides.
• Translation Structure — what each folder contains.
• Storefront Translation