How to include a link inside nuxt-i18n text

Question

Im trying to use nuxt-I18n module for localization. I have installed "nuxt-i18n": "^6.4.1"

Also in my nuxt.config.js i have the fallowing

    modules: [
        [
            'nuxt-i18n',
            {
                defaultLocale: 'en',
                lazy: true,
                langDir: 'locales/',
                locales: [
                    {
                        code: 'mk',
                        name: 'Македонски',
                        file: 'mk.js',
                    },
                    {
                        code: 'en',
                        name: 'English',
                        file: 'en.js',
                    },
                ],
            },
        ],
    ],

I also created folder locale where i have my 2 files where i write my localization. Mostly of the text in my project is simple so I was doing fine with this setup. However i end up on a problem. I have a text paragraph with a link inside that goes something like this:

<p>Lorem ipsum <a href="#"> This is link </a> dolor sit amet. </p>

I was trying to solve this with component that comes of i18n but i had a lot of errors with it.

Can anyone give me an example how to solve this ?

Answer 1

I solved my problem so I want it to share if someone faces the same. To understand better you can read the fallowing link about component interpolation.

    <i18n path="text" tag="p">
        <template v-slot:link>
            <a>{{ $t('link') }}</a>
        </template>
    </i18n

And my locales look like:

en: {
   text: 'You can check {link} for more details.',
   link: 'component interpolation',

}