Customizing translations for various domains in Vue-i18n

Our app has a global reach and our company is undergoing a rebranding process in certain markets.

For instance, we are currently known as "Acme Company" in the U.S. and Canada, but now we aim to be recognized as "Acme Company" in the U.S. and "Foo Company" in Canada.

As of now, our vue-i18n translation files are filled with instances of "Acme Company" within the translations. For example:

TITLE_WELCOME_MSG: 'Acme Company lorem ipsum dolor sit amet, consectetur adipiscing elit.'

The intention is to achieve something like this:

TITLE_WELCOME_MSG: '{companyBrand} lorem ipsum dolor sit amet, consectetur adipiscing elit.'

This entails updating the implementation of TITLE_WELCOME_MSG to pass companyBrand like so:

this.$t('TITLE_WELCOME_MSG', { companyBrand: getCompanyBrandBasedOnDomain() })

However, this would require making changes in numerous locations (apparently we mention our name quite a bit). It would be more efficient if I could simply provide companyBrand to the i18n instance during build time so that all translations automatically incorporate that variable without the need for updates in multiple places.

We want consistency across all locales, meaning viewers in Canada will consistently see "Foo Company." Additionally, ideally, I'd like to eliminate any references to "Acme Company" from the source code entirely.

Is there a method to set up variables within the vue-i18n instance so that they are uniformly translated without requiring adjustments in every implementation?

javascriptvue.jsvuejs2internationalizationvue-i18n

Answer №1

To ensure customized functionality, it is advised to create custom functions that cater to your specific needs instead of trying to adjust a third-party library that may not be designed for your particular use case.

vue-i18n functions come with variadic arguments, so some signatures can be omitted for simplicity in implementation. It is more organized to utilize a different function name to avoid conflict with existing library names, but they can still serve as seamless replacements:

Vue.use(VueI18n);
Vue.use({
  install() {
    Vue.prototype._orig$t = Vue.prototype.$t;
    Vue.prototype.$t = function (path, values = {}) {
      return this._orig$t(path, { companyBrand: '...', ...values };
    }
  }
);

The same approach applies for $tc, if necessary.

Another possibility could involve utilizing a formatter. However, since the base formatter is not publicly accessible, it would require reimplementation or extension from i18n.formatter, which may introduce complexities at this stage.

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

Unable to locate the "stage-2" preset in the specified directory

In my webpack.base.config.js, I am using the presets: ['stage-2']: { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: ['stage-2'] } }, However, an error occurs: Couldn ...

npmwebpackvue.js

Show off beautiful text using a styled pre component in a React application

I've been attempting to highlight specific text within a React pre element, but unfortunately, it doesn't seem to be working as expected. Instead of displaying the highlighted text, it shows [object Object]. const Text = styled.pre ` col ...

javascriptreactjs

Leveraging the useEffect hook in conjunction with the "async" keyword

Looking for a way to clean up react request in react hooks. I've heard about using AbortController in my hook, but I'm not sure how to implement it. I am currently working with next.js. What are some effective approaches to solve this issue? Also ...

javascriptreactjsfetchreact-hooksnext.js

Utilizing Vue Cli's Webpack Proxy feature

While working on a project using the vue-cli and the Webpack template, I am facing some difficulties with setting up a custom host. Currently, Webpack is listening to localhost:8080, but I need it to work with a custom domain like . Has anyone found a solu ...

proxynpmwebpackvue.jswebpack-dev-server

What is the process for setting environment variables in a Svelte project?

I'm brand new to working with Svelte and I want to incorporate environment variables like base_url into different components. I've read that I can set up a store to hold these values, for example: const DataStore = writable([ { base_url: & ...

javascriptsveltesvelte-store

What is the best way to deliver HTML and JavaScript content using Node.js from virtual memory?

Situation I'm currently developing an in-browser HTML/JS editor, utilizing memory-fs (virtual memory) with Webpack and webpack-html-plugin to package the files created by users in the editor. Storing the files in virtual memory helps avoid I/O operat ...

javascripthtmlnode.jsexpress

Django issue: A Tuple or struct_time argument is necessary

Currently, I am developing a code that deals with 2 variables - showdate and viewtype. Both of these variables are transferred via JavaScript using the POST method. viewtype = send an srt showdate = send a date from javascript Within this code snippet, ...

javascriptpythonjsondjangodjango-views

Using Gmail with Nodemailer is throwing an error: "Cannot add property 'mailer' on a string with value 'SMTP'."

I am facing an issue with sending data from a form to my Gmail account. Whenever I click the submit button, I encounter the same error message repeatedly. Despite researching various problems related to nodemailer, none of them match the specific problem t ...

javascriptnode.jspropertiesnodemailer

Struggling to integrate buttons into an h2 element with the use of createElement() and appendChild() in HTML/CSS/JS

As I work on developing a website, one of the features I've been implementing is the ability for users to add books to a list and then review or delete them. The process was smooth sailing until I reached the point of adding buttons for these actions. ...

javascripthtmlappendchildcreateelementcreatetextnode

Sending SQL data to a Node.js module upon receiving a client request

Currently, I am establishing a connection to a SQL database and retrieving data on the view by using res.json. The client initiates a request - my server employs an MSSQL driver and a connection string to establish a connection with the database and fetch ...

javascriptsqljsonnode.jsexpress

Tips for adjusting the size of an imported item in Three.js?

Currently, I am utilizing Three.js for my project and I am importing .OBJ file using OBJ LOADER () Everything has been working smoothly thus far, but I have come across an issue that has me stumped. I am trying to figure out how to change the width and he ...

javascript3dthree.js

Utilizing numerous 'select' HTML elements with Vue.js and Materializecss

I've been working on creating an HTML multiple select form element with Vue.js and encountered an interesting issue. Everything was functioning perfectly following the guidance provided in this resource. However, when I decided to incorporate the Mate ...

htmldrop-down-menuvue.jsvuejs2materialize

Updating the content of a list item on the fly using React

After spending all day on this, I am feeling a bit frazzled. Trying to achieve what would take 20 seconds in JQuery has proven to be quite the challenge in React ¯\_(ツ)_/¯ In my application, tags are ranked by importance from 1 to 9. Simple enoug ...

javascriptreactjs

Pausing until the user clicks the button again

I have implemented two buttons on this page - one with a class of 'arrow-up' and the other with a class of 'arrow-down'. Clicking on the 'arrow-down' button will smoothly scroll down to the next section, while clicking on the ...

javascriptreactjs

What is the process for inserting or removing a row with Javascript?

Currently, I am in the process of working on some HTML/PHP code which is displayed below. <h3 style="text-align:center;margin-top:45px;">Sitting Days</h3> <div class="sitting-days" style="display:flex; justify-content:center; margin-bottom ...

javascriptphpjqueryhtmljson

Looking to display a single Angular component with varying data? I have a component in Angular that dynamically renders content based on the specific URL path

I have a component that dynamically renders data based on the URL '/lp/:pageId'. The :pageId parameter is used to fetch data from the server in the ngOnInit() lifecycle hook. ngOnInit(){ this.apiHelper.getData(this.route.snapshot.params.pageId) ...

javascriptangulartypescriptangular-ui-routerangular13

Having difficulty accessing a PHP ajax post request

I've scoured every resource but can't seem to find a solution to this issue. I'm in the process of writing an ajax script, however, I am struggling to retrieve the correct value from the POST request. Here is the code I have so far: <t ...

javascriptphpjqueryarraysajax

Navigating to a parent URL where the Angular configuration is set can be achieved by following these steps

My application revolves around a webpage created with the use of node and angular. On the root URL (/), I have incorporated a signup and login form without the use of Angular. Upon successful login, Angular scripts and configuration files are loaded on the ...

javascripthtmlnode.jsangularjsangular-routing

Guide on making a button display an image, then switch back to the initial image when clicked again

Currently, I have this neat feature on my website where there's a button that toggles the image/background color - kind of like a dark mode switch. The background change is working fine, but I'm encountering some challenges with organizing the im ...

javascripthtmlcss

Is there a way to eliminate spaces from a string using react-native?

As a user of react-native, I've encountered an issue with inconsistent line breaks when inputting long strings on the screen. For example: https://i.sstatic.net/32RwW.jpg I aim to achieve consistent string wrapping as shown in the image below: htt ...

javascriptnode.jsreactjsreact-nativestyled-components