Vue-i18n: Directive destroyed before animation end

[ar53n]

vue & vue-i18n version

ex: 2.5.16, 8.0

Reproduction Link

Steps to reproduce

What is Expected?

When using non-directive way its work correctly.

What is actually happening?

[kimuraz]

Can you add a reproduction link?

I couldn't reproduce it: Codepen

[ar53n]

@kimuraz https://codepen.io/anon/pen/ejQqvp. Thank you for reproduce link. Just i changed v-show to v-if. But in my project used router-view.

[kimuraz]

@ar53n I guess that this issues is due to which order the directives are resolved in VueJS transitions (see this). Since it seems to be async because of the timeout, while it doesn't resolves, the v-t directive resolves with v-if / v-show. Although I'm not sure, let me know if you go on solving this problems.

[connected]

It was not an issue for version 7.8.0, see https://codepen.io/madhamster/pen/ReRxBL
Possible solution is to lock version in package.json

IMO this is def. a plugin bug, not vue.

[thariddler]

I have the same issue! Locking version is not the solution! Very frustrating that it's literally broke whole page transitions in my app.

[bponomarenko]

I have added PR #495 which suppose to fix this issue. @ar53n @connected @thariddler will this work for you?

[rchl]

I've just noticed this problem and then found the solution that works for me, but I do wonder about the downsides of using the solution (using global preserveDirectiveContent setting). Nowhere in the documentation I can find any mention of cons so I wonder why it's not enabled by default.

I have noticed this problem with Nuxt and without even using transitions. Just clicking a nuxt-link (router-link) causes text to disappear from page before navigating to new page. I believe it's either due to asyncData or nuxt-i18n locale handling but either way, the question is why is that not enabled by default?

[rchl]

@kazupon any comments?

[kazupon]

@rchl
It's backward compatibility.

@bponomarenko said in #495

preserveDirectiveContent is false by default to remain backward compatibility. In the future (if there will be demand for it) it can be set to true by default, but that would be a breaking change.

[rchl]

It doesn't really answer my question.
What exactly does/can it break?
Is it just to be on the safe side, because the behaviour is slightly different?
Any specific issues are to be expected @bponomarenko?

[bponomarenko]

@rchl Hi Rafał

I would consider this change to be a "breaking change" because it changes functionality of the library – after v-t directive destroy content will be preserved instead of cleaned up. It may not break someones project, but can result in unexpected behaviour if that project, let say, has some logic around presence of the content inside text blocks. How rationale this logic is is another discussion but, in my experience, sometimes developers can just implement hacks for a solution to work.

Taking this into consideration, and general best practices for packages versioning, it would require to bump major library version in order to enable preserveDirectiveContent feature by default. I didn't do that in my PR because major releases usually take more time to publish, as they tend to aggregate multiple breaking changes. However, to be able to use this functionality faster – I added this feature turned off by default (preserving original library behaviour), so only minor version bump were required.

If you really need this feature to be turned on by default, I believe the best would be creating different issue specific to this request. Which can be satisfied in the next major update, but that is up to the library author.

I hope this clarifies it a bit.

[rchl]

Yes, that is more or less what I've expected to hear.

I can enable it myself so I'm fine here but I agree that it should be on the roadmap for enabling on next major version as otherwise basic functionality of Vue breaks.
And for Nuxt it also makes for some ugly visual behaviour in some cases.