Utilizing Vue-i18n for language translations directly within a JavaScript file, rather than using

Is there a way to utilize the .js file for translations instead of the .json file?

I attempted changing:

const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)

to

const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.js$/i)

However, this approach did not yield the desired result. Any suggestions on how to make it work?

Answer №1

Upon my research, I stumbled upon a solution that could potentially aid others in the future. To customize the root directory i18n.js file in vue-cli 3, you can modify the function loadLocaleMessages:

function loadLocaleMessages () {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.js$/i)
  const messages = {}

  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)

    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key).default
    }
  })

  return messages
}

Also, make sure to include locales/en.js:

const translations = { /* translations here */ }
export default translations

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

Use a combination of the reduce and map functions in JavaScript to transform a one-dimensional array into a multi-dimensional array

Below is an array containing mySQL results: [ {"eventId":"84","shootId":"72","clubEventId":"253","clubId":"7"}, {"eventId":"84","sh ...

Hiding BottomTabNavigator on specific screens using React Navigation (4.x)

Looking for a way to hide the bottom tab navigator specifically in the 'Chat' screen of my React Native and React Navigation app. Here is what I have so far: const UserNavigation= createStackNavigator({ Profile:{screen:Profile}, Search:{ ...

Incorporating a new method into the Object prototype to provide universal access across all modules

I've been delving into Typescript experimentation and I'm attempting to enhance the Object prototype by adding a property that can be accessed by all objects within my modules. Here's what I've developed so far: In a Common.ts file O ...

Conceal the href element within a designated UL using JavaScript

Is there a way to only hide the href element in a specific UL element, rather than hiding all href elements with the same class name? Let's consider an example HTML code: <ul class="UL_tag"> <li>Text 1</li> <li>Text 2< ...

Problem encountered while trying to publish a post using Iron Router

I'm encountering some difficulties when trying to create a route that allows me to respond to comments (.../comments/:_id/reply) and publish the related post. Below is the code snippet: Publications Meteor.publish('commentUser', function(c ...

Issue with Angular JS orderBy when sorting by numerical fields is not functioning as expected

Within my controller, I implemented code to convert the rank into a Float data type. details.rank = ''; $scope.order = function (predicate) { $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false; if (predicate == & ...

Using jQuery, is it possible to retrieve the product name and image dynamically?

I'm currently working on implementing an add to cart functionality using jQuery. When the add to cart button is clicked, the product name and image should be displayed. I can achieve this statically but I need help figuring out how to dynamically retr ...

jQuery failing to append code after being removed

I need some assistance with an issue I've run into while using jQuery's .remove(). Here is a snippet of code that showcases the problem: $( '.video-button span.glyphicon-play' ).click(function() { $( '#video-player' ).ap ...

Angular only allows click events to trigger during a push

Is there a way to reveal the password without requiring a click, but simply by pushing on an eye icon? My code HTML <input [formControlName]="'password'" [type]="isShow ? 'text' : 'password'" class=&qu ...

The displayed value in the text field remains constant even when the object's attribute is modified

My issue involves the Date Text Field component of Material UI. Whenever I pass an attribute from an object, the displayed value in the Text Field does not update even when the object attribute changes. const [data, setData] = useState({ title: new Da ...

The Open Graph feature in Vue 3 is only functioning properly on the homepage, with issues occurring on other routes

My VueJS website is up and running on GitHub pages, but I have encountered a problem with the open graph settings. They are placed in the <head> section inside /index.html. Here's a snippet of the code: <head> <meta name="descrip ...

Bizarre String Behavior in jQuery JSON Through Ajax Request

Something unusual is occurring: whenever I try to send the string "??" to the server using AJAX $.ajax({ type: 'POST', url: path, dataType: 'json', data: JSON.stringify({ text: "??" }) }); it consistently results in send ...

How can one transform a json object into a json string and leverage its functionalities?

I recently encountered an issue with a JSON object that contains a function: var thread = { title: "my title", delete: function() { alert("deleted"); } }; thread.delete(); // alerted "deleted" thread_json = JSON.encode(thread); // co ...

Utilizing Laravel's URL::asset method in conjunction with a JavaScript variable

Having a go at creating an HTML tag using the Jquery snippet below $("<option />",{ 'data-src':"{{ asset(my-javascript-variable) }}", id:'my_id').appendTo($('#image')); An option tag is being added to a select element. ...

Can jQuery UI modal dialog interfere with clicking events?

I am encountering an issue with a button that is supposed to display a popup when clicked. In my layout.jspx file, I have the following code: <div class="menuBtn"> <div class="search"> <span></span ...

Incorporating a full-page background into a specific view using AngularJS

In order to implement a fullscreen CSS background for a specific view in my app, I attempted adding a class to the body. However, this approach caused the background to persist in the cache and remain visible when switching views. The challenge arises fro ...

Delayed callback on blur

I am developing an AutoComplete feature in React that displays a list of suggested completions as the user types into a text box. When a suggestion is clicked, it should trigger a callback function, and the dropdown should disappear when the text box loses ...

Utilizing RxJS finalize in Angular to control the frequency of user clicks

Can someone provide guidance on using rxjs finalized in angular to prevent users from clicking the save button multiple times and sending multiple requests? When a button click triggers a call in our form, some users still tend to double-click, leading to ...

Showing or hiding child content based on the selected state of a radio button

This is a follow-up question from a previous one on changing check boxes to radio buttons. Now, I need to display child radio buttons and change the background color when the parent radio button is active. The child radio buttons should be hidden and the b ...

Traversing the nested arrays, processing column by column

Below is an array of subarrays const array = [ [0, 1, 2, 3], // Going from top to bottom? [4, 5, 6, 7, 8, 9], // | [10, 11, 12, 13, 14], // | [15, 16, 17, 18, 19], // | ] // V My goal is to achieve the fol ...