Language of the nuvo importer

language

Type	"en", "de", "es", "pt", "pl", "fr", "it", "nl', or "sv"
Default	en
Description	This feature enables you to choose the default language for the nuvo Importer, which can be tailored to your particular requirements. Additionally, you have the option to switch languages dynamically before initializing the importer. We currently offer support for a variety of languages, including English, German, Spanish, Portuguese, Polish, French, Italian, Dutch, and Swedish.

Below, you can see an example of how to use it.

React

<NuvoImporter
  licenseKey="Your License Key"
  settings={{
    developerMode: true,
    identifier: "product_data",
    language: "de"
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ],
  }}
>
  Select File
</NuvoImporter>

Angular

licenseKey!: string
settings!: SettingsAPI;

ngOnInit(): void {
  this.licenseKey = "Your License Key"
  this.settings = {
    developerMode: true,
    identifier: "product_data",
    language: "de"
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ]
  };
}

Vue.js 2

export default {
  name: "App",
  components: {
    NuvoImporter,
  },
  data: () => {
    return {
      licenseKey: "Your License Key",
      settings: {
        developerMode: true,
        identifier: "product_data",
        columns: [
          {
            label: "Product ID",
            key: "product_id",
          },
          {
            label: "Article Name",
            key: "article_name",
          },
        ],
        language: "de",
      },
    };
  },
};

Vue.js 3

export default {
  name: "App",
  components: {
    NuvoImporter,
  },
  setup() {
    const settings = {
      developerMode: true,
      identifier: "product_data",
      columns: [
        {
          label: "Product ID",
          key: "product_id",
        },
        {
          label: "Article Name",
          key: "article_name",
        },
      ],
      language: "de",
    };
    return { settings };
  },
  data: () => {
    return {
      licenseKey: "Your License Key",
    };
  },
};

JavaScript

<script type="text/javascript">

  const settings = {
    developerMode: true,
    identifier: "product_data",
    language: "de",
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ],
  };

</script>

---

i18nOverrides

The i18nOverrides feature in the NuvoImporter enables you to customize the application's default language keys according to your unique requirements. You can override the language keys for each language by using the i18nOverrides option in the settings of the NuvoImporter.

Below, you can see an example of how to use it.

React

<NuvoImporter
  licenseKey="Your License Key"
  settings={{
    developerMode: true,
    identifier: "product_data",
    i18nOverrides: {
      txt_page_upload_desc: "Hi there 🙏",
    },
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ],
  }}
>
  Select File
</NuvoImporter>

Angular

licenseKey!: string
settings!: SettingsAPI;

ngOnInit(): void {
  this.licenseKey = "Your License Key"
  this.settings = {
    developerMode: true,
    identifier: "product_data",

    i18nOverrides: {
      "txt_page_upload_desc": "Hi there 🙏"
    }

    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ]
  };
}

Vue.js 2

export default {
  name: "App",
  components: {
    NuvoImporter,
  },
  data: () => {
    return {
      licenseKey: "Your License Key",
      settings: {
        developerMode: true,
        identifier: "product_data",
        columns: [
          {
            label: "Product ID",
            key: "product_id",
          },
          {
            label: "Article Name",
            key: "article_name",
          },
        ],
        i18nOverrides: {
          txt_page_upload_desc: "Hi there 🙏",
        },
      },
    };
  },
};

Vue.js 3

export default {
  name: "App",
  components: {
    NuvoImporter,
  },
  setup() {
    const settings = {
      developerMode: true,
      identifier: "product_data",
      columns: [
        {
          label: "Product ID",
          key: "product_id",
        },
        {
          label: "Article Name",
          key: "article_name",
        },
      ],
      i18nOverrides: {
        txt_page_upload_desc: "Hi there 🙏",
      },
    };
    return { settings };
  },
  data: () => {
    return {
      licenseKey: "Your License Key",
    };
  },
};

JavaScript

<script type="text/javascript">

  const settings = {
    developerMode: true,
    identifier: "product_data",

    i18nOverrides: {
      "txt_page_upload_desc": "Hi there 🙏"
      }

    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ],
  };

</script>

Multilingual application

The i18nOverrides feature also works with multilingual applications. You can easily customize the language keys for each language, ensuring a consistent user experience across all languages.

Here is an example of how to use i18nOverrides inside a multilingual application:

i18nOverrides: {
  "de": {
    "txt_upload_data": "Hochladen",
    "txt_allow_data_type": "Datei zum Hochladen hierher ziehen",
    "txt_select_files": "Datei auswählen"
  },
  "en": {
    "txt_upload_data": "Upload",
    "txt_allow_data_type": "Drop your file here",
    "txt_select_files": "Select file"
  },
  "es": {
    "txt_upload_data":"Subir",
    "txt_allow_data_type":".xls, .xlsx, .csv, .xml y .json archivo aceptado.",
    "txt_select_files":"Seleccione Archivo"
  }
}

In the example code above, we have defined i18n overrides for English (en), German (de), and Spanish (es). By following the same pattern, you can easily add more language overrides to meet your specific needs.

It's worth noting that the overrides will automatically be applied to the default language defined in the settings of the NuvoImporter. This means that any language key that is not overridden will be displayed in the default language. With this level of customization, you can ensure a consistent and tailored user experience for all users, regardless of their language preferences.

i18n keys

To help you finding the correct i18n keys faster, you can take a look at our default translation templates below:

Translations	Download
English	download
German	download
Dutch	download
Italian	download
Swedish	download
Portuguese	download
Polish	download
French	download
Spanish	download

---

If you have any questions or your language still needs to be included inside the language property, please get in touch with us at [email protected].