How to insert a <a> tag or icon inside Vuetify internationalization?

Question

I'm currently working on a project based on Vuetify. I need to insert a <a> tag and icon inside an internationalization text. Generally, it is easy to insert a variable as below shows,

this.$vuetify.lang.$t('I'm {0}', varirable_name)

but in this way, I cannot insert <a> tag or an icon <v-icon>, how could I achieve it? Just like this,

`this.$vuetify.lang.$t('Here is an icon {0} and a {1}', <v-icon />, <a>link</a>)`

Answer 1

You can use v-html directive to output raw HTML. It will work for basic tags but won't work for Vuetify's v-tags (for example, v-icon).

new Vue({
  vuetify: new Vuetify(),
  data() {
    return {
      message: this.$vuetify.lang.t('Here is an bold {0} and a {1}', "<strong>text</strong>", "<a>link</a>")
    }
  }

}).$mount('#app')

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">


<div id="app">
  <v-app>
    <v-main>
      <v-container><span v-html="message"></span ></v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

I wouldn't recommend using Vuetify tags in composite format strings. Instead, translate the text inside of the tag.

<v-btn class="ma-2" color="primary" dark>
    Accept  // <- translate only this
    <v-icon dark right>
        mdi-checkbox-marked-circle
    </v-icon>
</v-btn>