Feature request: dynamically load sharedMessages

[denjaland]

Hello,

We know we can add sharedMessages to a component by using the sharedMessages key which enables us to create a set of keys that we can write once, reuse in several components.

We have a usecase in which we want to "abuse" this by dynamically adding keys to the component.

Consider a DataTable that you want to reuse to display resources of different types. I Could use it to show a list of invoices, or a list of support tickets, or whatever resource we support in our app.

We have this component set up as follows for instance:

<template>
    <div>
        <h1>{{$tc('resource', 2)}}</h1>
    </div>
</template>

As you can tell, we want to define one key, resourcewhich we can override depending on what resource we want to display in the component.

Our idea was to use the sharedMessages for this, and do something like this.

<script>
    export default {
        props: {
            resource: { required: true}
        },
        i18n: {
            messages: {
                // generic datatable keys would go here
            },
            sharedMessages: this.resource.i18n
        }
    }
</script>

the idea is that we can initialise our component as follows:

<data-table-component resource="XXXXX"></data-table-component>

It's not important for this feature request, but XXXXX in our case is a class. We use https://github.com/robsontenorio/vue-api-query for our client side resources handling, and it just made sense to us to add a get i18n() {} method in there that returns our sharedMessages our component could pull in.

Currently, I don't see how sharedMessages can take anything that is defined on the Vue component. I've also tried defining it as a function return this.resource.i18n, but it didn't work either, so I guess it's unsupported at this time.

Since the datatable component should not know what resource it's being created for, I can not pull it in using an import statement there, since the resource will always be a property value.

The only thing I currently see as an option is namespacing all our keys and pull in ALL the resources, so we can do something like {{$tc(resource + '.resource', 2}} and I could define it all in one big object, but I wouldn't like having to do this as it clutters our templates.

Any possible workaround or possibility for supporting this in the (near) future?

For your info, I create a CodeSandBox for it here: https://codesandbox.io/s/vue-template-21l7z?fontsize=14

thanks again for a great library!

[denjaland]

Hiya @kazupon - any chance you could shed a light on this? I don't think there is a solution for this now, is there?

[kazupon]

I think that you can use setLocaleMessage method.
https://kazupon.github.io/vue-i18n/api/#setlocalemessage-locale-message

ex:

mounted () {
  Object.keys(this.resource.i18n).forEach(locale => {
     this.$i18n.setLocaleMessage(locale, this.resource.i18n[locale]);
  }) 
}

[denjaland]

Hi @kazupon,

Doesn't that introduce the same issue as with mergeLocaleMessage, namely that if you have two components on the page, they end up sharing the same locale keys and messages?

David.

[denjaland]

I'm basically looking for a way to programaticaly set the component message strings without having it affect the locale messages of the same component or even other components on the page sharing the same keys...

[limeandcoconut]

This is causing me some serious trouble as well.