[solved] v-t directive needs custom directive to work with SSR

[DaxChen]

vue & vue-i18n version

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

Reproduction Link

Online Demo
Github Repo

Steps to reproduce

Open the online demo link:

1. refresh 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:

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

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

What is Expected?

v-t directive to work nicely with SSR

What is actually happening?

contents using v-t don't show in SSR result, which makes:

1. Not good for SEO.
2. First page load experience is not good, need to wait for js to render in client side.
3. Content will not show if javascript is disabled.

[DaxChen]

Hi, @kazupon.
Can you estimate if this will be fixed in soon?
Not to push or anything, just that if this will take relatively long to fix, I need to temporarily change all v-t to $t() throughout SEO important parts.

[darkylmnx]

according to the docs :

Also, when you use server-side rendering, you need to set the custom directive to directives option of the createRenderer function.

https://kazupon.github.io/vue-i18n/en/directive.html#t-vs-v-t

[DaxChen]

Whoa!!!! How did I missed that?!! I've read that page like 20 times before...orz
Thank you so much @darkylmnx! Sorry for the interruption.

[DaxChen]

example usage with nuxt, see: nuxt/nuxt#1826 (comment)

[DaxChen]

Found that the SSR custom directive only works with primitive html tags, but not with vue components such as <router-link>.
Opened issue: intlify/vue-i18n-extensions#1