CODEWITHSUNDEEP
vue.jsnuxt.jsvue-i18n
drtob
drtob

Reputation: 373

How to use Vue I18n translation in component attribute/property

How do I translate the passed-in attribute/property of a component? For instance, I have a card component with a title and description prop defined like this.

<!-- my-card  component -->
    <template>
      <div>
        <h2>{{title}}</h2>
        <span>{{description}}</span>
      </div>
    </template>

    <script>
      export default {
        props: {
          title: String,
          descritpion: String
        }
      }
    </script>

Then using the my-card component in another page/component like this

  

  <template>
      <div>

        <header>Page header</header>
        <my-card :title="the best card title" :description="the best description" />
        <footer>Page footer</footer>
      </div>
    </template>

How do I us vue I18n to translate the component props?

  

  <template>
      <div>

        <header>Page header</header>
        <my-card :title="{{ $t('myCard.title')}}" :description="{{$t('myCard.description')}}" />
        <footer>Page footer</footer>
      </div>
    </template>

I can't seem to get the translation to work with passed-in props.

PS: I know I could add the translation in the place I defined my-card component but the issue here is that the components are third-party components from NPM library.

I know some packages in React.js has this feature.

Upvotes: 6

Views: 6479

Answers (2)

Zeeshan Siddique
Zeeshan Siddique

Reputation: 77

You can use I18n translation in component props like this.

<my-card 
:title="$t('myCard.title')"
:description="$t('myCard.description')" 
/>

Upvotes: 2

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Just bind the translation without using {{}} :

 <my-card :title="$t('myCard.title')" :description="$t('myCard.description')" />

Upvotes: 16

Related Questions