Obtaining the translated text from the script in Vue JS using Vue Translate

My code currently looks something like this:

<template>
  <div>
    {{ text }}
  </div>
</template>

<script>
  export default {
    data: () => ({
      text: 'Hello world'
    })
  }
</script>

I am trying to access the translated string for "Hello world" inside the script tag, but I'm not sure how to achieve that. I attempted the following:

<script>
  export default {
    data: () => ({
      text: t('hello_world')
    })
  }
</script>

This t('hello_world') function is supposed to fetch the translated string from another file where all translations are stored.

Answer №1

Utilizing Vue external functions directly is a feasible approach just as you have shown. Below is a concise working illustration:

new Vue({
  el: '#content',
  data: {
    text: t('welcome_message')
  }
})

function t(text) {
  return 'Welcome Message' // simulating output for demonstrative purposes
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="content">
  {{ text }}
</div>

Answer №2

In my opinion, utilizing Vue-i18n would be a great solution for resolving your issue.

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

Error in React JS: SyntaxError - "Unexpected token '?'"

Following the guidelines on this website, I successfully set up a new reactJS application, proceeded to run npm i && npm run dev and encountered the following error message: /home/www/node_modules/next/dist/cli/next-dev.js:362 showAll ...

Troubleshooting problem with jwPlayer resizing in Firefox and Opera browsers

<script type="text/javascript" src="js/jwplayer/jwplayer.js"></script> <div id="myElement"">Loading the player...</div> <script type="text/javascript"> jwplayer("myElement").setup({ file: "video/mosk.mp4", ...

transforming JSON information into tables on a webpage

Can someone help me with the challenge of incorporating a massive JSON file into an HTML table? I am encountering an issue where I continuously receive the error message Uncaught TypeError: v.forEach is not a function. Any guidance would be greatly appreci ...

Adding a marker to Google Maps in React that displays the user's current location

I successfully integrated Google Maps into my website and now I want to add a marker for the user's location. The first file is Map.js, and the second one is MapContainer.js. In MapContainer.js, I have all the necessary data for map rendering, includi ...

Sending messages to all sockets in socket.io except the one who sent it

I'm currently working on integrating a chat feature into my app using socket.io. The process involves sending an API request to the server each time a user sends a message, which is then stored in the database. Only after this data storage step is com ...

multiple elements sharing identical CSS styling

For each component, I made separate CSS files and imported them accordingly. However, despite the individual styling efforts, all components seem to have the same appearance. I specifically worked on styling an image differently for two components, but w ...

I'm receiving a 404 error on my API route in next.js - what could be causing this

What could be causing the error message "GET http://localhost:3000/api/db/getRideTypes 404 (Not Found)" when attempting to fetch data from the sanity client? Here is a snippet of code from Rideselector.js: //"use client"; import Image from &apo ...

Is it possible to expand the Angular Material Data Table Header Row to align with the width of the row content?

Issue with Angular Material Data Table Layout Link to relevant feature request on GitHub On this StackBlitz demo, the issue of rows bleeding through the header when scrolling to the right and the row lines not expanding past viewport width is evident. Ho ...

"Retrieve the position of a contenteditable element while also considering HTML

I've been exploring a method to generate annotations within HTML text using JavaScript. The approach involves the user clicking on a contenteditable <div> and obtaining the cursor's position based on their click. Subsequently, when insertin ...

Exploring the contrast between an amd.js file and a main.js file within the dist directory of a JavaScript node project

Looking into a JavaScript project utilizing Node and Webpack, I've noticed that within the node_module directory there is a lib folder containing an xyz.js file. Additionally, in the dist folder of the node_module, there are xyz.amd.js, xyz.main.js, a ...

Library for Nodejs that specializes in generating and converting PDF/A files

Is there a library available that can convert/create a PDF/A file? I've been searching for solutions but the existing answers suggest using an external service or provide no response at all. I heard about libraries in other languages like ghostscriptP ...

ExpressJS, defining routes, locating controllers, and documenting APIs

Utilizing expressJS 4.X and nodeJS 6.x In the past, I was defining my routes in this manner : /** * @api {get} /users/:userId Get a user * @apiName GetUser * @apiGroup User * * @apiParam {Integer} userId Users unique ID. * * @apiSuccess (Success 2 ...

Updating Angular.js scope after a variable has been modified

On my website, I have implemented a search bar that communicates with a controller receiving JSON responses from the server. The response is stored in a global variable called assetResult. It works as expected initially; however, subsequent searches do no ...

Setting up gulp-typescript for Angular 2: A comprehensive guide

Right now I am utilizing the tsc compiler with the watch flag in the command prompt. It functions correctly, loading all definition files and successfully compiling each angular2 file. However, it is quite cumbersome to use via the shell window. My object ...

The integration of VueJS with Axios and the Google Maps API

Currently following [this][1] guide to develop a Google Map and now I am looking to execute a GET request with Axios: axios.get("http://localhost:8080/mapjson").then(function(response) { }) in order to integrate the information from my JSON file into the ...

SVG: Altering the dy attribute has no impact on the overall height of the bounding rectangle for the parent text

We are striving to align a group of tspan elements both vertically and horizontally. However, the parent container is not taking into consideration dy values. This lack of consideration is leading to alignment issues. If you adjust the dy values in this ...

A guide on detecting overflow in a React functional component

I am in search of a way to determine if a div contains overflowing text and display a "show more" link if it does. While researching, I came across an insightful Stack Overflow answer on checking for overflow in a div. The answer suggests implementing a fu ...

How can I add styling to materializecss chip elements?

When working with tags on a web page, Materializecss makes it easy. However, I have a requirement where the tags need to be of different colors based on their types. Although this is feasible, another complication arises when supporting Materializecss keyb ...

Fixing the issue of scrollbars not working in existing divs while creating new jscrollpane divs in jQuery

Utilizing the jquery.uploadfile.min.js plugin to upload multiple files results in creating a div of jscrollpane class each time a file is uploaded. However, there seems to be an issue where only the scrollbars in the last created div are functioning proper ...

Discovering repeated values and verifying the value range within table columns can be achieved through the use

Within my table, I have two columns labeled Min Range and Max Range. My objective is to identify duplicate values within these columns while ensuring that no row definition overlaps another. The image below illustrates this concept: https://i.sstatic.net/ ...