One of my sentences which I localized with i18n contains an anchor tag, and this element should trigger another modal. But, when I use @click or v-on:click localization gets broken.

Below is my resources.js file where I create i18n instance:

import { createI18n } from "vue-i18n";
import store from "../../store/index.js";

const activeLocale = store.getters.languageId;

const resources = createI18n({
    locale: activeLocale,
    fallbackLocale: "tr",
    messages: {
        en: {
            expiredAccountPanel: {
                info: "You have {accountCount} social media account(s) which needs to be reconnected. Please contact with your administrator. Click <a @click="openExpiredAccountsModal" style='color:#0D4BA0'>here</a> to view respective social media account(s)."
            }
        }
    }
});

export default resources;

I imported this on my main.js as per below:

import resources from "./configs/localization/resources";

const app = createApp(App);

app.use(resources);
app.mount("#app");

I inject the texts to be localized to my custom warning-panel-base component like this:

<warning-panel-base
    class="home_warning_panel" 
    :page-warning="true" 
    :show="hasExpiredAccounts" 
    :text="$t('expiredAccountPanel.info', { accountCount: expiredAccoutsCount })"
    @close-warning-modal="closeWarningModal"
></warning-panel-base>

Finally, this is my respective custom component:

<template>
    <transition name="panel">
        <div 
            v-if="show" class="warning_panel_wrapper" 
            :class="
                { 
                    page_margin: pageWarning, 
                    form_margin: formWarning 
                }"
            >
            <div class="text_section">
                <font-awesome-icon :icon="['fas', 'triangle-exclamation']" />&nbsp;
                <span>{{ text }}</span>
            </div>
            <div class="close_button_section">
                <span class="icon material-icons" @click="closeWarningModal">close</span>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    props: [
        "show", 
        "text", 
        "formWarning", 
        "pageWarning"
    ],
    emits: ["closeWarningModal"],
    methods: {
        closeWarningModal() {
            this.$emit("closeWarningModal");
        },
        openExpiredAccountsModal() {
            console.log("modal oppened")
        }
    }
}
</script>

Instead of <span>{{ text }}</span> I also tried <span v-html="text"></span> but it didn't work out too.

How should I properly implement a vue specific directive inside i18n text?

Thanks in advance.

One of my sentences which I localized with i18n contains an anchor tag, and this element should trigger another modal. But, when I use @click or v-on:click localization gets broken.

Below is my resources.js file where I create i18n instance:

import { createI18n } from "vue-i18n";
import store from "../../store/index.js";

const activeLocale = store.getters.languageId;

const resources = createI18n({
    locale: activeLocale,
    fallbackLocale: "tr",
    messages: {
        en: {
            expiredAccountPanel: {
                info: "You have {accountCount} social media account(s) which needs to be reconnected. Please contact with your administrator. Click <a @click="openExpiredAccountsModal" style='color:#0D4BA0'>here</a> to view respective social media account(s)."
            }
        }
    }
});

export default resources;

I imported this on my main.js as per below:

import resources from "./configs/localization/resources";

const app = createApp(App);

app.use(resources);
app.mount("#app");

I inject the texts to be localized to my custom warning-panel-base component like this:

<warning-panel-base
    class="home_warning_panel" 
    :page-warning="true" 
    :show="hasExpiredAccounts" 
    :text="$t('expiredAccountPanel.info', { accountCount: expiredAccoutsCount })"
    @close-warning-modal="closeWarningModal"
></warning-panel-base>

Finally, this is my respective custom component:

<template>
    <transition name="panel">
        <div 
            v-if="show" class="warning_panel_wrapper" 
            :class="
                { 
                    page_margin: pageWarning, 
                    form_margin: formWarning 
                }"
            >
            <div class="text_section">
                <font-awesome-icon :icon="['fas', 'triangle-exclamation']" />&nbsp;
                <span>{{ text }}</span>
            </div>
            <div class="close_button_section">
                <span class="icon material-icons" @click="closeWarningModal">close</span>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    props: [
        "show", 
        "text", 
        "formWarning", 
        "pageWarning"
    ],
    emits: ["closeWarningModal"],
    methods: {
        closeWarningModal() {
            this.$emit("closeWarningModal");
        },
        openExpiredAccountsModal() {
            console.log("modal oppened")
        }
    }
}
</script>

Instead of <span>{{ text }}</span> I also tried <span v-html="text"></span> but it didn't work out too.

How should I properly implement a vue specific directive inside i18n text?

Thanks in advance.

• vue.js
• vuejs3
• internationalization
• vue-i18n
• vue-directives

1 Answer 1

This can't be done without changing how vue-i18n works. Embedding HTML is possible with some restrictions, but it's not applicable here because @click="openExpiredAccountsModal" is Vue template that needs to be rendered to HTML, and it's expected to be aware of component instance that openExpiredAccountsModal belongs to.

If the resulting markup it's supposed to be reused, it can be extracted to a component that accepts accountCount prop and has click event.

The recommended way is to split a message in a way it can be joined in a template:

<template>
  <span>{{$t('expiredAccountPanel.info1', { accountCount })}}</span>
  <a @click="$emit('click')" style='color:#0D4BA0'>{{expiredAccountPanel.info2}}</a>
  <span>{{$t('expiredAccountPanel.info3')}}</span>
</template>

Or use i18n-t for template interpolation:

<template>
<i18n-t keypath="expiredAccountPanel.info1" tag="span" :accountCount="accountCount">
  <template v-slot:click>
     <a @click="$emit('here')" style='color:#0D4BA0'>
       {{ expiredAccountPanel.info2 }}
     </a>
  </template>
</i18n-t>
</template>

For the following messages:

expiredAccountPanel: {
  info1: "You have {accountCount} social media account(s) which needs to be reconnected. Please contact with your administrator. Click {here} to view respective social media account(s).",
  info2: "here"
}

Which can be used as:

<ExpiredAccountPanelInfo @click="openExpiredAccountsModal" :accountCount="expiredAccoutsCount"/>