Shortcut and more readable syntax for `v-t`: allow `<h1 v-t>Hello</h1>` which will be similar to `<h1 v-t="Hello"></h1>` about vue-i18n-next

[BobbieGoede]

I think such directive usage wouldn't work during SSR, as only the directive binding will be accessible as the node/element does not exist yet, this isn't very clearly described in the Vue docs.

[alcalyn]

Yeah I had also ssr in mind, I don't use it but I guess it is also a friction point for this

[kazupon]

FYI:
https://github.com/intlify/vue-i18n-extensions

[alcalyn]

Here is a better version with no warning, and insteadn I use another directive name to prevent trying to override:

<h1 v-t="'Games'"></h1>
=>
<h1 v-trans>Games</h1>

<h3>{{ $t('Online ({n})', { n: 3 }) }}</h3>
=>
<h3 v-trans="{ n: 3 }">Online ({n})</h3>

import { TranslationDirective, vTDirective } from 'vue-i18n';
import { i18n } from '.';
import { DirectiveBinding, DirectiveHook, VNode } from 'vue';

/**
 * Allow a shortcut to translate in a more readable way:
 *
 * - Currently:
 *      `<h1 v-t="'Games'"></h1>`
 * - With this custom directive:
 *      `<h1 v-trans>Games</h1>`
 *
 * or
 *
 * - Currently:
 *      `<h3>{{ $t('Online ({n})', { n: 3 }) }}</h3>`
 * - With this custom directive:
 *      `<h3 v-trans="{ n: 3 }">Online ({n})</h3>`
 *
 * https://github.com/intlify/vue-i18n-next/issues/1820
 */
export const customTrans: TranslationDirective<HTMLElement> = (() => {
    const setValueFromContent = (callback: DirectiveHook<HTMLElement> | undefined) => (el: HTMLElement, binding: DirectiveBinding, vnode: VNode<unknown, HTMLElement>) => {
        if (undefined === callback) {
            return;
        }

        let path: null | string = null;

        if (undefined !== el.dataset.baseTranslationKey) {
            path = el.dataset.baseTranslationKey;
        } else {
            path = el.innerText;
            el.dataset.baseTranslationKey = path;
        }

        if (!binding.value) {
            binding.value = path;
        } else if ('object' === typeof binding.value) {
            binding.value = {
                path,
                args: binding.value,
            };
        } else {
            throw new Error(`Expected either v-trans="'string'" or v-trans="{ key: value }" for element containing "${el.innerText}"`);
        }

        callback(el, binding, vnode, null);
    };

    const directive = vTDirective(i18n);

    directive.beforeUpdate = setValueFromContent(directive.beforeUpdate);
    directive.created = setValueFromContent(directive.created);

    return directive;
})();

but actually I still hesitate using this, or use proper translation keys <p v-trans="{ date: ... }">game.created_at</p> which lower the benefit of this feature