Whitespace injection after variable interpolation

vue & vue-i18n version

vue: 2.5.21, vue-i18n: 8. 7. 0

Reproduction Link

Steps to reproduce

Using advanced interpolation, we have this i18n tag

<i18n
      path="HOME.INTRODUCTION.CERTIFICATE_INFO"
      tag="p"
      class="introduction"
    >
      <span place="userName">
        {{ userName }}
      </span>
      <strong
        class="highligth-text"
        place="baseCertificate"
      >
        {{ $t('HOME.INTRODUCTION.BASE_CERTIFICATE') }}
      </strong>
      <strong
        class="highligth-text"
        place="personalizedCertificate"
      >
        {{ $t('HOME.INTRODUCTION.PERSONALIZED_CERTIFICATE') }}
      </strong>
    </i18n>

And this language object

export const es = {
  HOME: {
    INTRODUCTION: {
      TITLE: 'Necesito un certificado',
      CERTIFICATE_INFO:
        'Hola {userName}, desde aquí podras generar',
      BASE_CERTIFICATE: 'certificado base',
      PERSONALIZED_CERTIFICATE: 'certificado personalizado'
    },
    SUBTITLE: 'Selecciona que tipo de certificado quieres generar para ti.'
  }
}

What is Expected?

In the CERTIFICATE_INFO interpolation we expect that the component just not inject a white space after the variable in brackets.

Hola Frederick, desde aquí....

What is actually happening?

Actually, the library is adding a white space after the variable in brackets.

Hola Frederick , desde aquí....

Comment

I guess, this could be a nice behaviour, but the interpolation should detect if the next character is a dot or a comma

[kazupon]

Sorry, late for a reply 🙇

This is due to the behavior of Vue’s template compiler. You need to remove the space.

• before

<span place="userName">  {{ "Carlos" }}  </span>

• after

<span place="userName"> {{ "Carlos" }} </span>

[belvederef]

Related to #623 and #963, seems like the only solution is to trim whitespace in some way external to this project.