Top strategies for handling large amounts of text in HTML using Vue I18n

When working on my views, I often find myself needing to include large amounts of text that are tagged in HTML format.

With Vue l18n, I currently have an en.json file structured like this:

{
  "ok": "Ok",
  "cancel": "Cancel",
  "error_alert_title": "Oops...",
  …
}

To translate a word or single line, I simply use $t('cancel') in my component and it works perfectly!

However, when it comes to translating big chunks of text into .vue files, putting it all in the JSON file becomes unmanageable.

"mytext": "<p style="text-align: left;">Lorem ipsum dolor sit amet... </p>"

Do you have any effective and easy-to-maintain solutions for handling large text translations?

Thank you!

Answer №1

Why embed HTML elements in a language JSON file when you can simply translate the content directly within the HTML template?

The English translation file, en.json:

{
    'p1Text': 'Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo',
    'p2Text': '{strongText} odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Duis mollis',
    'p2StrongText': 'sit amet risus. Donec sed',
    'p3Text': 'est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.Curabitur blandit',
    'p4Text': 'tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.'
}

The template would then appear as follows:

<p style="text-align: left;">{{ $t('p1Text') }}</p>
<i18n path="p2Text" style="text-align: left;" tag="p">
  <template v-slot:strongText>
    <strong>{{ $t('p2StrongText') }}</strong>
  </template>
</i18n>
<p style="text-align: left;">{{ $t('p3Text') }}</p>
<p style="text-align: left;">{{ $t('p4Text') }}<br/><br/></p>

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

Ways to organize a highly nested object structure

I have an object structured like this: var list = [ { category:'CATEGORY 1', label:'Item 1', children:[{ category:'CATEGORY 2', label:'Item 1', childre ...

Utilize a single WebAssembly instance within two separate Web Workers

After compiling a wasm file from golang (version 1.3.5), I noticed that certain functions using goroutines are not supported. When these functions are called, they run in the current thread and slow down my worker significantly. To address this issue, I w ...

What is the best way to implement an AppBar that fades in and out when scrolling within a div?

I'm trying to implement a Scrollable AppBar that hides on scroll down and reappears when scrolling up. Check out this image for reference To achieve this functionality, I am following the guidelines provided by Material-UI documentation export defa ...

Conceal player controls for HTML videos on iOS devices

How can I hide the video player controls in Windows and Android, they are hidden but still visible on iOS. I have tried different methods but can't seem to hide them. Here is what it looks like on iOS: https://i.sstatic.net/Uwrg3.png Here is my code ...

verifying the string's value within the ng-if condition

Currently, I am trying to assess the value of a property within an object and comparing it with string data. <div ng-if="results.dataType === 'textTable'"> The content is meant for display in a table. </div> At present, all d ...

I'm experiencing an issue where the graph seems to vanish whenever I dynamically add edges using vis-network.js. What could

I've encountered a strange issue in my Vue project while using vis-network.js - the graphics disappear when I dynamically add edges, but dynamic updates and deletes work fine. To further investigate, I created a test page where I included vis-network ...

Shading rows based on a specific field value in the Angular UI Grid

Is it possible to color rows based on their field values in the latest angular-ui-grid when all columns are generated dynamically and row selection is enabled? I have come across suggestions to use a rowTemplate for this purpose. Here is an example of a r ...

The function did not receive the parameter when ng-submit was executed

I created a function called reset(username) to log whatever is entered into the input field with ng-model="username". However, I am not seeing anything in the console. Why is that happening? Here is my function: $scope.reset = function (username) { co ...

How to create a calendar selection input using PHP?

Before I start writing the code myself, I am searching to see if there is already a solution available or if someone has previously outsourced the code. Below is an example of my date selection: https://i.sstatic.net/KqIDH.png I want to create a feature ...

My Ionic app displays a blank nested view

Below are the route configurations in app.js: .state('signup', { url: '/signup', templateUrl: 'templates/signup.html', controller: 'signupCtrl' }) .state('profile', { url: ' ...

Tips for resolving a 404 error in a Node.js Express application

While working on my project with node.js in vs code, I encountered an issue with the API not functioning properly. When trying to run it in Postman and Insomnia, I got the following error: Error 404 ::ffff:127.0.0.1 - - [19/Oct/2022:04:07:36 +0000] " ...

Updating data from an API within a div using AJAX calls in a React application

I have designed a React template to showcase live football scores in the following manner: const LiveScore = () => { const {direction} = useThemeProvider(); const [selectedDay, setSelectedDay] = useState(parseInt(dayjs().format('DD'))); retur ...

Bootstrap relies on jQuery for its JavaScript functionality, so jQuery must be loaded before using Bootstrap's JavaScript

I encountered an issue while trying to load the Bootstrap library, consistently receiving this error message: Uncaught Error: Bootstrap's JavaScript requires jQuery Even though I have ensured that jQuery is loaded before attaching the Bootstrap li ...

Retrieve JSON information from an external JavaScript source

Looking to utilize vanilla JavaScript to retrieve data from the MeetUp API. The code snippet being used on the website is as follows: function addScript(src) { console.log(src); var s = document.createElement( 'script' ); s.setAttri ...

Exploring the functionality of the instanceof operator in Javascript

I'm currently developing a Node.js application and the project structure is as follows: [Project Folder] | |---[plc] | |--- plc.js | |--- scheduler.js | |---[source] | |--- source.js | |---[test] |--- test.js Th ...

Is there a way to switch the sorting order on a Bootstrap page using a button without having to refresh the page?

I'm currently working on a template for an app that already exists and would like to add a button to change the sort order of displayed elements on a webpage. The page is styled using Bootstrap 5.3, so I have access to jQuery and other Bootstrap featu ...

Activate or deactivate a text box within a table based on the checkbox's status

I am seeking assistance with jQuery to enable or disable a textbox within a table when a checkbox is checked. Below is the code snippet from my edit.cshtml file. <table id="scDetails" class="dataTable"> <thead> & ...

Use javascript/ajax to create a dynamic dropdown menu

I have successfully retrieved data from an ajax and JSON request on another php page. Using json parse, I was able to extract two array strings. JAVASCRIPT: if (xmlhttp.readyState==4 && xmlhttp.status==20 { var data = JSON.parse(xmlhttp.respon ...

What is the reason that prototypes are not passed down through inheritance?

Can anyone shed light on why Validator.js is structured the way it is initialized (as shown in the first code snippet) and the reason behind the inability to call the validate method (as demonstrated in the second snippet)? I am currently experimenting wi ...

The toggle remains on even when the status is off

I'm working with both Angular and jQuery. Currently, I have a toggle button that is set to remain active when the page initially loads, even if the status has been changed and saved as inactive. Is there a way to ensure that the toggle button remains ...