Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: vue named slot syntax #3327

Merged
merged 3 commits into from
Apr 15, 2024
Merged

Conversation

EugeneBalabai
Copy link
Contributor

The current Tolgee Vue library doesn't support localizing messages that contain HTML tags or components, causing inconvenience for our team and potentially for others in the community.

Inspired by the approach in Vue-i18n's Component Interpolation (explained here), these changes introduce named slots for string interpolation.

packages/vue/src/T.ts Outdated Show resolved Hide resolved
packages/vue/src/T.ts Outdated Show resolved Hide resolved
packages/vue/src/T.ts Outdated Show resolved Hide resolved
packages/vue/src/T.ts Outdated Show resolved Hide resolved
Copy link
Collaborator

@stepan662 stepan662 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, seems to be working fine, thanks a lot for the contribution 🎉

@stepan662 stepan662 merged commit d904085 into tolgee:main Apr 15, 2024
26 checks passed
@EugeneBalabai EugeneBalabai deleted the vue-slot-syntax branch May 29, 2024 14:37
@EugeneBalabai
Copy link
Contributor Author

EugeneBalabai commented May 29, 2024

@stepan662 I made a mistake. The slots object is not reactive in Vue 3, so when I change the language, the translations inside the slot are not updated. Example: https://codesandbox.io/p/sandbox/crazy-browser-nlnpsd?file=%2Fpublic%2Fi18n%2Fde.json%3A4%2C2

Currently, I don't see a really good solution. Only move slots execution to the render function. Maybe you have a better idea.
image

@stepan662
Copy link
Collaborator

If the moving to render function works, I think the solution is fine. Or are there some drawbacks?

@EugeneBalabai
Copy link
Contributor Author

EugeneBalabai commented May 30, 2024

I would like to use Vue reactivity. But since the $slots object is not reactive, I don’t see any other solutions. I will create PR

created: #3340

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants