question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Use `@formatjs/intl`?

See original GitHub issue

👋 We just released @formatjs/intl that detaches the imperative API from the React binding (react-intl uses this basically) so I’m curious if vue-i18n-next can use it? It basically has everything that react-intl supports (custom formats, default timeZone, format merging, handling AST vs regular messages).

I’m curious what the roadmap for vue-i18n-next is as well?

No hard feelings if this doesn’t happen 😄

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:1
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
longlhocommented, Dec 31, 2020

Hmm let see if i can just take over that package

1reaction
glen-84commented, Dec 31, 2020

Happy new year from japan!

Happy new year. 🎉

Unfortunately, custom formatter is not supported in vue-i18n@v9 and later. 😞

That’s really unfortunate. 😞

However, it is difficult and time-consuming to provide custom functionality for a message format like ICU, so we have abandoned support for it in v9.

I thought that most of the work would be done by another library like formatjs, and you just needed to expose an API that allowed users to handle a formatMessage(message: string, params: []) call. You could then have a storage abstraction on top of that that allows users to store messages in different places and in different formats.

In other words, in my opinion, vue-i18n shouldn’t support ICU syntax directly, but it should have very generic interfaces and hooks that could be used to integrate one of many different syntaxes with one of many different storage mechanisms.

You would then have plug-ins for each syntax and for each storage type. vue-i18n’s message syntax would also be implemented as a message formatting plug-in.

If you want to for example support hierarchical keys etc., but a storage plug-in doesn’t support this, it could use an alternative serialization, like joining the keys with a period: parent.child.key.

In order for Vue.js to support i18n with ICU-like message format support, you will need to create a combination of formatjs and @vue/reactivity.

I might have to look into writing my own library, but I was hoping to avoid this. 🙂

As the next roadmap for the Intlify project, the vue-i18n (intlify) message format will support compatibility with the ICU message format

The next roadmap meaning 10.x?

I completely agree with @longlho – the successor to ICU MessageFormat isn’t going to be ready any time soon, but it might be possible to design interfaces/abstractions now that would allow it to be supported in the future.

Thanks anyway for the work that you do. 👍

Read more comments on GitHub >

github_iconTop Results From Across the Web

Overview | Format.JS
React Intl has two ways to format data, through React components and its API. The components provide an idiomatic-React way of integrating internationalization ......
Read more >
@formatjs/intl - npm
Internationalize JS apps. This library provides an API to format dates, numbers, and strings, including pluralization and handling ...
Read more >
A React I18n Tutorial with FormatJS | Phrase
Get to know the core features of FormatJS (formerly react-intl) ... Let us take a look now at how to use FormatJS in...
Read more >
How to translate your React app with react-intl / FormatJS
We're setting up a small React application to learn how localization works. Of course, you can skip this section if you want to...
Read more >
Using react-intl with es6 classes · Issue #99 - GitHub
Said I use IntlStore to save locales and messages, this function returns an high order component: // utils/connectToIntlStore.js import React ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found