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.

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

See original GitHub issue

vue & vue-i18n version

vue@2.5.13 (with nuxt@1.3.0) vue-i18n@7.4.2

Reproduction Link

Online Demo Github Repo

Steps to reproduce

Open the online demo link:

refresh and see that {{ $t('xxx') }} shows immediately (SSR) but v-t="'xxx'" shows a bit later (no SSR)
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:

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

Issue Analytics

State:
Created 6 years ago
Comments:5

Top GitHub Comments

1reaction

DaxChencommented, Feb 3, 2018

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.

0reactions

DaxChencommented, Feb 4, 2018

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

Top Results From Across the Web

Nuxt — Creating Custom Directives for Static & SSR Sites

Custom directives are a way of making our code reusable similar to mixins but instead of reusing component functionalities, directives let ...

Vue 3 Custom Directives not being picked up by IDE if defined ...

Create a component and use the custom directive in the template. <template> <div v-example></div> </template>. vue (highlighting unavailable).

Custom directives

Directives are functions that can extend Lit by customizing how a template expression renders. Directives are useful and powerful because they can be ......

Custom directive localization | Vue I18n

Custom directive localization. Support Version. 7.3+. You can translate not only with v-t custom directive, but also with the $t method.

Getting Started with Custom Structural Directives in Angular

The above example is very simple, but it gives you tools to create your own custom directive when you need it. If you...