Learning how to use the $t function in i18n translation files

Currently, I am utilizing Vue.js 3, Quasar 2, and vue-i18n for my translations. I have encountered an issue while trying to use $t or $tc in the translation file. The error message "$tc is not defined" keeps popping up.

export default {
  survey: {
    name: 'Questionnaire' || 'Questionnaires',
    new: 'Nouveau ' + $tc('survey.name', 1) || 'Nouveaux ' + $tc('survey.name', 2),
    wd: 'Un ' + $tc('survey.name', 1) || 'Des ' + $tc('survey.name', 2),
    mine: 'Mon ' + $tc('survey.name', 1) || 'Mes ' + $tc('survey.name', 2),
    show: 'Voir le ' + $tc('survey.name', 1) || 'Voir les ' + $tc('survey.name', 2)
}
javascriptvue.jsinternationalizationquasar-frameworkvue-i18n

Answer №1

To achieve this functionality, consider utilizing "Linked Locale Messages" ()

An example of a messages file structure could be:

const messages = {
  en: {
    message: {
      item: 'Item | Item',
      linked: 'I have got {n} @:message.item'
    }
  }
}

To implement this, you can use:

<div>{{ $t('message.linked', 10) }}</div>

The value will then be inserted into the linked key as specified.

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

Utilize a Loader with excessively rapid request

Can anyone offer advice on how to handle requests that are too fast to display a loader properly? I currently have a submit button that displays a loader until Firebase responds (ajax request). However, the response time from Firebase is extremely quick ( ...

javascriptajaxapirequestloader

Avoiding Multiple Ajax Requests: Tips and Techniques

After spending 2 days trying to find a solution, it seems that StackOverflow does not have the correct answer for my issue. The problem involves having 2 ajax functions where the first one loads values onload: $.ajax({ url: 'http://localhost/movi ...

javascriptjqueryajax

Switching from "Straight Quotes" to "Curly Quotes"

Looking for a solution to convert regular straight quotes into curly quotes in a Javascript-based rules engine application. Rather than just using a simple string.replace for ["], I need a method that will insert the correct curly quote depending on its po ...

javascriptregexquotessmart-quotes

Using JavaScript, verify if the user is connected to a network

Does anyone know of a simple method to verify if the user is able to access our website? Determine if they are not receiving a connection error. ...

javascriptjquery

Passing a variable from a child template to App.vue in VueJS

I've been researching how to pass variables from child to parent using the $emit method, but I'm still struggling to fully understand it. In my App.vue file, I have a <header/> component for the page header that includes a button to toggle ...

vue.jsvue-component

Ensure to verify the presence of a specific element in an array prior to examining the rest in Javascript

I am currently working with an array of objects and I need to check if any of the objects have a title of 'food' before checking for any other titles. However, my current code checks sequentially. Below you will find the code snippet: let db = ...

javascriptarrays

Unable to show JSON data on the console

I am attempting to retrieve a large array of JSON objects from a remote server. The server-side is based on Node.js + redis. Here is my ajax query: $.ajax({ crossDomain: true, type:"GET", contentType: "application/json", url: "http://****. ...

javascriptjqueryajaxjson

Tips for incorporating Javascript in an innerHTML inline css situation

I'm just starting to learn about html5 and php. I'm curious about how to incorporate javascript into my existing code. Currently, I have data from a database displayed in an HTML table. My goal is to align the output of the last cell more toward ...

javascriptphphtmlcss

Ensure AngularJS ng-show and ng-hide are more secure

When using AngularJS, my goal is to conceal an element so that only authenticated users can access it. Although the ng-hide directive works, there is a vulnerability where someone could modify the class assigned to the element (ng-hide) using Developer To ...

javascriptangularjsnode.jsmean-stackmean

Can the discriminator be preprocessed in a zod discriminated union?

Is it possible to convert string formatted numbers to numbers before using a value in z.discriminatedUnion? Here is an example code snippet: import { z } from "zod"; const BrushColorEnum = z.enum( ["BLUE_SILVER", "GREEN_SILVER&q ...

javascripttypescriptvalidationzod

Can we dynamically apply a class to the body depending on the domain in the window's URL?

Currently, I am developing a website for a company that has operations in both New Zealand and Australia. They have domains pointed to the same website with both .co.nz and .com.au extensions. I have written the following code to assign the class "austral ...

javascriptjquery

Context Provider executing SetInterval twice

For some reason, the below code in global.js is running twice when I run my react app, but I can't figure out why. I have used setInterval to test, and the intervals are always running two times. Perhaps I am not initializing correctly. Even after rem ...

javascriptreactjs

In the process of testing for rejected promises, receiving the message "is not a thenable" is a common occurrence when using Mocha in conjunction with chai-as-promised

Thank you in advance for any help with this! I've been struggling to test promise rejections using Mocha, Chai, and Chai as Promised. I initially attempted to do this with async/await but didn't succeed, so I decided to start from scratch. I wa ...

javascriptnode.jspromisemocha.jschai

Django form submission triggers Jquery modal to confirm object deletion

I'm currently working with Django and Crispy forms while also utilizing the Shopify Embedded Apps SDK. My goal is to implement a modal window that prompts the user to confirm the deletion of an object. My progress code is attached below. Although I h ...

javascriptjquerypythondjangoshopify

Leveraging jQuery and Ajax for extracting and transmitting parameters within href links

Here is my HTML link code: <div id="message"></div> <a href="cats.php?id=60&color=brown&name=kitty" id="petlink"> Click here </a> I want to use jQuery and Ajax to send these parameters when the link is clicked: id=60 colo ...

javascriptjqueryajax

Transfer data from distinct arrays to separate variables

I have 2 arrays structured like this: let dataA = [{"id": "a1", "name": "Alpha"}, {"id": "a2", "name": "Beta"}, {"id": "a3", "name": "Gamma&quo ...

javascriptarraysjsonobjectarray-merge

Attaching to directive parameters

I've been working on creating a draggable div with the ability to bind its location for further use. I'm aiming to have multiple draggable elements on the page. Currently, I've implemented a 'dragable' attribute directive that allo ...

javascriptangularjs

"Bringing in a Nunjucks Macro - How to Easily Use It

I've been working on a script that renders a nunjucks contact.html template with the following code: let fs = require('fs'); let nj = require('nunjucks'); var contact = fs.readFileSync('./src/contact.html',&a ...

javascripthtmlnode.jsnunjucks

Counting Characters in a Text Area and Adding Tabs Using JavaScript

As users visit my website to update their profile bio, a character counter written in JavaScript displays the number of characters remaining. When they create a new bio or make changes to their existing one, their current bio is fetched from the database ...

phpjavascripthtmltextarea

What is the best method for saving a chosen radio button into an array?

I am currently developing an online examination system where questions are retrieved from a database using PHP and displayed through AJAX. I am facing an issue where I am unable to capture the selected radio button value and store it in an array. Despite e ...

javascriptphphtmlajax