SSR custom directive not working with router-link.

[DaxChen]

vue & vue-i18n version

[email protected] (with [email protected])
[email protected]
[email protected]

Reproduction Link

Online Demo
Github Repo

Steps to reproduce

Open the online demo link:

1. refresh without cache (command-shift-R on mac) and see that {{ $t('xxx') }} shows immediately (SSR) but v-t="'xxx'" shows a bit later (no SSR)
2. Right-click and "View page source", and you can see this:

<router-link class="curly_bracket">{{ $t('curly_bracket') }}</router-link>
<router-link class="directive" v-t="'directive'" />

renders to:

<a class="curly_bracket">Using {{ }}, shows in SSR!</a>
<a class="directive"></a>

Only {{ $t() }} is server side rendered, v-t="'xxx" isn't.

This SSR directive works with primitive html tags, but when using with vue components such as <router-link>, it fails.

What is Expected?

v-t directive on <router-link> to work with SSR

What is actually happening?

v-t directive only works with primitive html elements, but not with vue components such as <router-link>.

Thank you so much!

[kazupon]

Hmm 🤔 , I seem same the below issue:
vuejs/vue#5239

[kazupon]

Maybe, custom directive doesn't not support for components on SSR.
However, functional component work on SSR.

[kazupon]

close (in-activity)