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

What is preventing me from concealing my input field when its type is set to "file"?

I've been attempting to conceal my input field of a file type, but even with the hidden attribute, it refuses to hide. Interestingly, once I remove type="file", the code successfully hides itself Does anyone have insight on how I can hide ...

How to add a subtle entrance animation to text (demonstration provided)

Apologies for the brevity, but I could really use some assistance with replicating an effect showcased on this particular website: My understanding is that a "fadeIn" can be achieved using jQuery, however, I am at a loss as to how to implement the 3D effe ...

Ways to reset the selected option when the user chooses a different option using either Jquery or Vanilla JavaScript

I am currently working on a functionality to clear the select option when a different brand is selected. The issue I am facing is that when I choose another brand, the models from the previous selection are not cleared out. For example, if I select BMW, I ...

Issue with MUI DataGridPro failing to sort the email field

I am facing an issue with the sorting functionality in the email field while creating a table using MUI DataGridPro. The sorting works fine for all other fields except for the email field. Adding some random text here to ensure my question is published. Pl ...

Is it possible to line up Ajax request in Javascript?

I am seeking a way to schedule an Ajax request to occur every second. The code I currently have in place functions flawlessly. window.onload = function () { setTimeout(doStuff, 1000); // Wait before continuing } function doStuff() { ...

Tips for importing the mongoose-long plugin using the ES6 method

How can I rewrite the given import syntax into ES6 import format? import mongoose from 'mongoose'; import 'mongoose-long'(mongoose); import { Types: { Long } } from mongoose; ...

The functionality of a basic each/while loop in jQuery using CoffeeScript is not producing the desired results

I've been experimenting with different methods to tackle this issue. Essentially, I need to update the content of multiple dropdowns in the same way. I wanted to use an each or a while loop to keep the code DRY, but my experience in coffeeScript is li ...

In Chrome, the $http GET request fails to send the JSESSIONID, but it functions properly on Firefox with AngularJS

Here is the code snippet I am working with: $http({ 'method': 'GET', 'url': 'http://www.example.com', 'withCredentials': true, headers: { 'Content-type': &apo ...

Update the JSON data following deletion

I have received the following JSON data: "memberValidations": [ { "field": "PRIMARY_EMAIL", "errorCode": "com.endeavour.data.validation.PRIMARY_EMAIL", "createdDateTime": null }, ...

Enhancing Plotly Graphs with Custom Node Values

Encountering an issue while attempting to assign values to nodes on a plotly graph. Code: <html> <head> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <style> .graph-container { ...

Problems with Ajax calls are preventing Internet Explorer9 and Internet Explorer10 from functioning properly

I am facing an issue with displaying item pages using Ajax. The function works perfectly in Chrome, but not in Internet Explorer. <script type="text/javascript"> function obtainInfo(str) { if (str=="") { document. ...

Revamping Vue file with real-time updates using Laravel Echo Pusher Notifs

Over the last few days, I've been attempting to create a template that auto-reloads whenever there are new updates in the "Notifications" section. This could be due to a new entry being added or a notification being marked as read. Currently, I' ...

Can Cell be rendered into a targeted element?

Can a Cell from CellJS be rendered into a specific HTML element? For example, including a Cell alongside some static HTML that is not managed by cell. Or having two separate Cell apps on a single page. <!DOCTYPE html> <html> <header> ...

Mongoose: Unable to fetch item using its specific identification - Error 404

I've been attempting to fetch objects from MongoDB using Mongoose, but I keep encountering a 404 error. router.get('/blogs/:id', function(req, res){ console.log('trying to get one blog post by id'); Blog.findOne({ _id: req.para ...

Having trouble loading a chart with amcharts after sending an ajax request

I have integrated amcharts to create a pie chart. When I click a button, an AJAX request is triggered to fetch data from MySQL in JSON format. After receiving the JSON array, I pass the data to amcharts but the chart doesn't display. Oddly, if I redi ...

How to use jQuery to select an element by using 'this' on a button

I have a total of 5 divs, each containing 5 different texts. <div class="text"> <%= theComment.text %> </div> I am working with node.js, MongoDB, and Mongoose. In addition to the divs, I also have a button labeled EDIT with a cl ...

In jqGrid's gridComplete event, we can use the getRowData method to retrieve the value of a

Seeking guidance on extracting variables from jqGrid getRowData method While iterating through rows, I simply want to retrieve the ID and Phrase column values into separate variables gridComplete: function () { var allRowsInGrid = $('#list'). ...

Managing user access and permissions using JavaScript on the front end

I find myself in a situation where I am working on developing a single page application: The majority of the operations rely on ajax requests. Depending on the user's login status (admin, regular user, visitor), different components need to be displ ...

unable to retrieve element values using class names

I have created multiple h1 elements with the same class names listed below. <h1 class="h1">One</h1> <h1 class="h1">Two</h1> <h1 class="h1">Three</h1> <h1 class="h1">Four</h1> I have also added a button that ...

The wrapAll() method can be used to wrap list items within two columns

I am looking to group multiple li elements within two div containers by using jQuery's wrapAll method. The challenge lies in the fact that these items are rendered within a single <ul> element via a CMS. Here is the current setup: <ul> ...