Vue JS i18next: Handling Single Translation String Fallbacks

Recently, I've been utilizing i18next, and I decided to set a fallback value for some translated strings in case they are not available in the selected language. Here's an example:

en:
  base.json
    "yes": "yes"
    "no": "no"

fr:
  base.json
    "yes": "oui"
     "no: ""

The behavior I expect is that when the app is running on FR and I try to access {{ i18n.t('base:no' }}, the output should be no instead of an empty string.

Here's what I have attempted so far:

Initialization:

i18next
    .use(languageDetector)
    .init({
      fallbackLng: 'en',
      load: 'languageOnly',
      detection: {
        order: ['querystring', 'navigator']
      }
    })

When trying to output: 

{{ i18n.t('base:no', {lng: 'en'} }}
, all I get is an empty string.

I also tried loading the fallback language during initialization, but it didn't seem to work.

Has anyone encountered this issue before? Any help would be greatly appreciated!

javascriptvue.jsinternationalizationi18next

Answer №1

Upon further examination, it appears that the translation for "no" in French is an empty string, which is considered a valid translation by default.

To prevent empty strings from being accepted as valid translations, you can set returnEmptyString: false during initialization. Here's more information on how to configure this setting: https://www.i18next.com/configuration-options.html#translation-defaults

Answer №2

It appears that in your initialization, you are not passing in translations or loading them. For more information, you can visit: https://www.i18next.com/add-or-load-translations.html

Have you checked the result of 

console.log(i18next.services.resourceStore.data);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Webpack 4 combines the power of Vue with the versatility of Typescript classes and JavaScript code simultaneously

Currently, I am in the process of migrating JS files to Typescript with the objective of being able to utilize both JS and Typescript classes within Vue. While I understand that I can convert Vue scripts into Typescript, I prefer not to do so at this momen ...

typescriptvue.jswebpackwebpack-4

What sets apart toBeInTheDocument from getBy* in @testing-library/react?

Can you distinguish between these two methods in react-testing-library? expect(screen.queryByText('<something>')).toBeInTheDocument(); And screen.getByText('<something>'); (The specific getBy* and queryBy* operation are no ...

javascriptreactjstestingjestjsreact-testing-library

Error: Unspecified process.env property when using dotenv and node.js

I'm encountering an issue with the dotenv package. Here's the structure of my application folder: |_app_folder |_app.js |_password.env |_package.json Even though I have installed dotenv, the process.env variables are always u ...

javascriptnode.jsnpmenvironment-variables

Decoding GeoJSON: Extracting a feature from an array

I am currently working on a map project where I am drawing polygons with properties pulled from a JSON file. Each polygon is colored based on feature values in the JSON file. Here's an example of a feature in the JSON file: { "type": "Feature", " ...

javascriptjsonopenlayers-3geojson

How can you use v-if condition in HTML with minimal code?

Trying to determine whether to create a <button> or <a> based on the href attribute. Unable to share the actual code due to the use of custom components, but a simplified version looks like this: <a v-if="href" class="btn" v-on:click="click ...

vue.js

What is the method for specifying a JSON object within a DOM element's `data` attribute?

In an attempt to store JSON data within a dataset attribute, I encountered the following HTML structure: The appearance of the HTML is as follows <div data-switch="true" data-json="{'key1': 'value 1'}, {'key2': 'valu ...

javascriptjqueryhtmljson

Modifying the Position of the Search Box within DataTables by Manipulating DOM Elements

As a newcomer to the jQuery datatables plugin, I am still learning how to use it effectively. I have connected the plugin to my tables using the following code: $(document).ready(function() $('#table_id').dataTable({ }); }); ...

javascriptjquerycssdatatables

Combining URLs in Angular 6 - A Step-by-Step Guide

How can I concatenate the commonUrl from CommonClass in Angular 6 for category.service.ts? common-class.ts export class CommonClass { constructor(public commonUrl : string = 'http://localhost:3000'){}; } category.service.ts import { CommonC ...

javascriptstringtypescript

Leveraging the Wikia API

I've been attempting to utilize the X-men API on Wikia in order to gather the name and image of each character for use in a single page application using JavaScript. You can find the link to the wiki page here: Despite my efforts, I am struggling to ...

javascriptapiwikia

Exploring the World of Micro-Frontends with the Angular Framework

I am conducting research on the best methods for transitioning a large single-page application into a micro-frontend architecture. The concept: The page is made up of multiple components that function independently Each component is overseen by its own ...

javascripthtmlangularmicroservices

issue with useReducer not functioning as expected

I encountered an issue with my customized Select component. It includes a select and options while listening for onChange events. Additionally, I am using a useReducer function that initializes some variables. However, even after selecting an option, the s ...

javascriptreactjs

Sorting the output with gulp and main-bower-files (gulp-order is not functioning)

Hello, I'm a Java engineer diving into the world of Javascript for the first time. Apologies in advance if my information is lacking or incorrect! I am currently working on a gulp build script and utilizing bower to manage dependencies for my JS fron ...

javascriptjqueryangularjsgulpbower

Validating minimum and maximum values with Angular 2 FormBuilder

I am currently developing a form using Angular 2 Formbuilder and I want to ensure that users can only input positive values into the amount field (with a minValue of 0 and maxValue of 100). How can I go about implementing minimum and maximum value validati ...

javascriptangularangular2-formbuilder

Conflicts in routing between Node.js and AngularJS

Currently, my setup involves NodeJS, gulp, and Angular with ui-router. However, I have encountered an issue when configuring Angular to remove the tag (#) from the routes. The problem arises as Angular's routes do not seem to work properly, and the na ...

javascriptangularjsnode.jsexpressangular-ui-router

Find the frequency of a specific string within a JSON array

My current task involves working with a stringified array: JSON.stringify(arr) = [{"x":9.308,"y":6.576,"color":"yellow","restitution":0.2,"type":"static","radius":1,"shape":"square","width":0.25,"height":0.25},{"x":9.42,"y":7.488,"color":"yellow","resti ...

javascriptarraysjsonstring

Insert the <span> element within the <a> element with the help of Jquery

I am attempting to insert a span tag inside .block-leftnav ul li .parent a, however, instead of adding the tag after only the .parent a, jQuery is adding the span tag after every href tag on my page. Below is the code I am using to achieve my desired outc ...

javascriptjqueryhtmlcss

angular data binding returning the identifier instead of the content

I have been dealing with managed fields retrieved from a web server in the following format: { "fields":{ "relationshipStatus":[ { "fieldId":4, "name":"Committed" }, { "fieldId":2, ...

javascriptangularjsjsonangular-template

Passing data from an API in Vue.js to a different page

I'm a beginner with Vue Js and I'm looking for guidance on how to send data between two components. Currently, I am working on a Vue app that fetches a list of users from an API and displays them. My goal is to transfer data between these compone ...

javascriptvue.jsvue-componentvue-routervuejs3

Issue with JavaScript function loading website homepage solely is functioning only for the first time

I am in the process of creating my own personal website. To ensure seamless navigation, I added a "home" button that, when clicked, triggers a JavaScript function called loadhomepage() to load the homepage. While this function works perfectly upon initial ...

javascriptjqueryhtmlcss

Transmit the JSON Data file through an AJAX request

I am encountering an issue where the HttpPostedFileBase is null when trying to send an image file to a Controller. I have attempted entering image: image outside of JSON.stringify({}), but it did not work. Additionally, I tried changing the contentType f ...

javascriptjqueryajaxasp.net-mvc