CODEWITHSUNDEEP
vuejs2localizationvue-i18n
nsukhi singh
nsukhi singh

Reputation: 39

Display translation on a component in Vuejs

I want to show a translation on the title of a component. Here is the HTML code:

   <user-card
      :totalUser="totalUsers"
      color="primary"
      icon="UserIcon"
      user-title="Total users"
  />

On my user-card component I have this:

  <b-card class="text-center">
    <b-avatar
        :variant="`light-${color}`"
        class="mb-1"
        size="45"
    >
      <feather-icon
          :icon="icon"
          size="21"
      />
    </b-avatar>
    <div class="truncate">
      <h2 class="mb-25 font-weight-bolder">
        {{ totalUser}}
      </h2>
      <span>{{ user-title }}</span>
    </div>
  </b-card>

And to use translation I have this syntax where I get the translated terms from the JSON file:

{{$t("Total users")}}

How can I implement this on the user-title?

Upvotes: 0

Views: 418

Answers (2)

zcoop98
zcoop98

Reputation: 3089

Just use v-bind and pass the expression to your user-card component directly:

<user-card
    ...
    :user-title="$t('Total users')"
/>

You're actually already using this syntax in multiple places, this directive just tells Vue to "dynamically bind one or more attributes, or a component prop to an expression", which is exactly what you're looking for here.

This will evaluate $t('Total users') as an expression and then pass the result to your component as a prop.

Upvotes: 1

Mohsin Amjad
Mohsin Amjad

Reputation: 1209

Have a look at this, I have tried to replicate your scenario in code sandbox.

sample app

What you are doing wrong is that $t is a function that accepts variable name which has an actual message in it, first you have to define a variable e.g totalUserTitle: 'Total users' for multiple languages like I did in index.js, and then you can use it as $t(totalUserTitle).

Upvotes: 1

Related Questions