i18n template component converts html white space in slot into white space characters

[Soviut]

vue & vue-i18n version

vue@2.6.11 vue-i18n@8.18.1 nuxt-i18n@6.12.2

Steps to reproduce

• Create a key with a placeholder in it.
• Wrap brackets around the placeholder with no space in between.

{
  term: 'over the remaining [{months}] months of your term'
}

• Create an <i18n> tag.
• Create a slot for the placeholder.
• Put a value in the slot on its own line.

<i18n tag="p" path="term">
  <template v-slot:months>
    30
  </template>
</i18n>

What is Expected?

There would be no space between the brackets and the value. They would be flush, like this:

What is actually happening?

Notice the space before and after the value.

These are actual selectable white space characters because of how the HTML is being rendered with newlines.

Workaround

  <template v-slot:months>30</template>

[kleinfreund]

This is not a bug. This is how whitespace renders normally in HTML.

[Soviut]

Thanks. I understand that, however it is definitely unexpected behaviour on our end.

We need to use the i18n tag for certain values because we're applying filters to them (formatting currency, etc.). We expected it to render the values in the slot the same way it would if we'd passed string to the placeholders using $t().

Maybe an option to trim the slots before they're combined into the final output would be a good idea?

It could be a global config on the plugin as well as an attribute override on each slot.

<template v-slot:months trim>
  this content would be trimmed
</template>

[kleinfreund]

What you propose as a workaround above is in my opinion the correct solution to your problem: ensuring that no extra white space is in the source code.

[exoego]

Thanks for proposals.

It seems that there are already some modules that brings whitespace-removal. E.g. https://github.com/aokiken/vue-remove-whitespace (I have not used). I hope this module or similar works with vue-i18n and fit your use case.

I do not think it is good idea to implement trim in vue-i18n, since it is a common concern not specific to vue-i18n.

[Soviut]

Bear in mind that the workaround violates a lot of linters/prettier for things like line length.

My argument for why it should exist in vue-i18n is that it would normalize the behaviour between inline params ({{ $t('path', { months: 30 }) }}) and slots with just one line of text in them.

Regardless, the difference in behaviour should probably be documented more clearly.

[kleinfreund]

But there is no difference in behavior here. You compare the wrapped template segment with the $t call using { months: 30 }, but this comparison isn’t adequate. The adequate comparison is with an argument like { months: ' 30 ' } and that will exhibit the same behavior that poses an issue for you.

This library is not the right place to change this because it’s not introducing the behavior and also because the behavior is not problematic itself. If your linter setup prevents you from writing this template segment in one line without white space around the content, you can disable that behavior like so:

<!-- prettier-ignore -->
<template v-slot:months>30</template>

[Soviut]

I understand the difference, but the issue is whether or not the behavior is expected when you have to use the template tag in order to take advantage of filters.

It should at least be documented that any additional white space in the HTML will be included in the passed value which can result in white space issues in the content. It might save someone like me a couple hours trying to figure out if it was the filters adding the space or not.

For posterity, it's breaking an official Vue linting rule vue/singleline-html-element-content-newline so the required disable syntax is

<!-- eslint-disable vue/singleline-html-element-content-newline -->
<template v-slot:months>{{ termRemainingMonths }}</template>
<!-- eslint-enable vue/singleline-html-element-content-newline -->

[exoego]

PRs are welcome to improve docs.

[Soviut]

I'm looking into it once I have time.