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

Encountering an issue with Nuxt 3.5.1 during the build process: "ERROR Cannot read properties of undefined (reading 'sys') (x4)"

I am currently working on an application built with Nuxt version 3.5.1. Here is a snippet of the script code: <script lang="ts" setup> import { IProduct } from './types'; const p = defineProps<IProduct>(); < ...

Can dynamic object properties be utilized in Firestore?

Is it possible to save dynamic variables, such as a timestamp, as a property in Firestore? I attempted the code below but encountered an error (error: 'timeStamp' is assigned a value but never used) var timeStamp = new Date() db.collection(&apos ...

Accessing the 'comment' property within the .then() function is not possible if it is undefined

Why does obj[i] become undefined inside the .then() function? obj = [{'id': 1, 'name': 'john', 'age': '22', 'group': 'grA'}, {'id': 2, 'name': 'mike', &apo ...

What is causing the issue of the page overflowing in both the x and y axis while also failing to center vertically?

I've been trying to align the <H4> styled component to the center of the page using flex-box, but it's not working as expected. I also attempted using margin:0 auto, but that only aligned the H4 horizontally. Additionally, I'm investi ...

What could be causing my Apollo useLazyQuery to be triggered unexpectedly within a React hook?

import { useLazyQuery } from '@apollo/client'; import { useEffect, useState } from 'react'; import { ContestSessionResponseInfoObject, GetSessionDocument, HasAccessToRoundDocument, } from '@/graphql/generated/shikho-private- ...

What is the correct way to import the THREE.js library into your project?

I recently added the three library to my project via npm. Within the node_modules directory, there is a folder named three. However, when I tried to import it using: import * as THREE from 'three'; I encountered the following error: ReferenceEr ...

How to update the state of a component in the root layout from its child components in Next JS 13 with the app router?

I am in the process of upgrading a Next JS app project to utilize the App Router. Within the layout.js (the root layout), there is a Logo component that will be visible on all routes. Within the RootLayout, I am managing a state variable to modify the ap ...

Establish a global variable within a TypeScript file

I am currently facing an issue where I need to add an event to the browser inside the CheckSocialMedia function. However, it keeps saying that it could not find the name. So, my question is how do I make the 'browser' variable global in the .ts ...

Utilizing a form on numerous occasions prior to its submission

As a newcomer to JavaScript, I am exploring the best approach for a specific task. The task involves a form with checkboxes representing different music styles and a selector for names of people. The goal is to allow users to select music styles for mult ...

Combining arrays using checkboxes in React.js

As someone completely new to coding, my current endeavor involves learning React by developing a flashcard app for studying Japanese. The concept revolves around incorporating a series of checkboxes that facilitate the selection of either Hiragana or Kat ...

Tips for exporting data to a JSON file using the Google Play Scraper in NodeJS

Recently, I've been exploring the Google Play Scraper and I'm in need of a complete list of all appIds using NodeJS. The issue I'm facing is that it only outputs to console.log. What I really require is to save this output to JSON and then c ...

What is the best way to store a range object obtained from getSelection in order to recreate it on a separate page load?

My goal is to develop a web application that enables users to highlight selected text on a webpage with the click of a button. I want these highlights to persist even when the user returns to the page. So far, I have achieved: var selectedRange = documen ...

The properties of a JSON object are not explicitly defined

When I make an AJAX call, I receive a JSON object and log it using this code: console.log(response); This is the response that gets logged in the console: {"filename":"new.jpg","orientation":"vertical"} However, when I try to access the orientation pro ...

What could be preventing me from updating data using a Vuex module?

Hello, this is my custom component code: methods:{ ...mapActions(['updateUsers']), Update(userID){ let formData = new FormData(); formData.append('new_name',this.editUser.new_name); ...

Selenium Tips: Ensuring RemoteDriver Remains Connected to the Active Browser Tab

Currently working on a unique Windows application that utilizes voice commands to control web browsers. I am trying to figure out the best approach when users add tabs and modify the selected tab as needed. Unfortunately, RemoteDriver only supports swi ...

"Attempting to dynamically include Components for SSR bundle in React can result in the error message 'Functions are invalid as a React child'. Be cautious of this

When working with my express route, I encountered an issue trying to pass a component for use in a render function that handles Server-Side Rendering (SSR). Express Route: import SettingsConnected from '../../../client/components/settings/settings-c ...

What is the best approach for presenting MySQL data on an HTML div through Node.js?

When working with Node.js, I prefer using Express as my framework. Here is the AJAX code I have on my member.ejs page: function load_member(){ $.ajax({ url: '/load_member', success: function(r){ console.lo ...

Selenium Assistance: I'm encountering a scenario where on a webpage, two elements share the same Xpath, making it difficult to differentiate them based on even

At index [1], both elements are identified, but at index [2], nothing is identified. The key difference between the two is that one has display:none, and the other has display:block. However, their involvement in determining these fields is minimal due to ...

Using AngularJS to prevent HTML injection in input fields

Is there an effective method to prevent HTML injection in input fields? As an example, if I have a search input field: <input id="search" type="text" ng-model="search" placeholder="search..."> I want to ensure that any attempts to input malicious c ...

Toggle the sidebars to slide out and expand the content division using JavaScript

I am looking to achieve a smooth sliding out effect for my sidebars while expanding the width of the middle content div. I want this action to be toggled back to its original state with another click. Here's what I've attempted so far: $(' ...