I am trying to use i18n with Vue3 and the variable feature in it. I have a translation like this:

 "documents-button": "Please see @:navigation.documents"

And then under navigation I have this variable "documents": "Documents" and all works fine when I put it out in my component sort of like this:

<div>{{ $t('documents-button') }}</div>

The problem is that I want to put a dot at the end of the resulting button text so it says “Please see Documents.”.

I tried this:

"documents-button": "Please see @:navigation.documents."

But now it seems to look for a variable “navigation.documents.” which of course doesn’t exist. If I instead try:

"documents-button": "Please see @:navigation.documents ."

Then it puts a space and result is instead “Please see Documents .”.

How can I get a dot in the end without a space, so the result is “Please see Documents.”?

Ps.

1. I can’t put the dot in navigation.documents variable since it is used in other places and some of which it should not have a dot behind it.
2. I can’t put the dot in the html since I loop through many objects and some translations already have a dot so they would get double dots, if that makes sense.

I therefore need it in the documents-button variable translation.