Localize labels in Vue.js

Overview

Sitefinity supports multiple languages and the Vue SDK is integrated into this. A wide range of labels are exposed for translation via the Sitefinity localization feature and any configured language can be used to translate the widgets interface.

Goal

This document provides insight on Vue.js powered templates localization features.

Prerequisite

Configured Hawksearch box or results widget using the Vue template

https://hawksearch.atlassian.net/wiki/spaces/CON/pages/605618600/Configuring%2BHawksearch%2Bbox%2BWidget

Enable Vue.js for Hawksearch box widget

Configuring Hawksearch results widget

Translations mapping

Each of the Hawksearch widgets comes with a JSON array that defines the mappings of exposed labels from the Vue SDK to the Sitefinity resources. It defines how these labels are translated and is a finite list of label keys. Any new labels that are created for the interface are added to the array and it usually doesn’t require any additional configuration.

Label translations

<script data-translations="vue-translations" type="application/json">
    {
        "Narrow Results": "@Html.HtmlSanitize(Html.Resource("NarrowResults", "HawkWidgetsResources"))",
        "Search Results": "@Html.HtmlSanitize(Html.Resource("SearchResults", "HawkWidgetsResources"))",
        "Search Results for": "@Html.HtmlSanitize(Html.Resource("SearchResultsFor", "HawkWidgetsResources"))",
        "Sort By": "@Html.HtmlSanitize(Html.Resource("SortBy", "HawkWidgetsResources"))",
         ...
    }
</script>

The inclusion of this array is required for enabling translations. Removing it will prevent the system to modify any of the labels and fallback to its default language. The default language is English.