How to get access to template in asyncData?

Question

I want to get access to this.$el in asyncData. I use a database to store translations. I want to get a list of translations that are used on the current page. Then I will send a request to the server to receive them. After that, I will merge it.

i18.mergeLocaleMessage( locale, message )

How to do it ?

@kissu I want to get access to template, before it is mounted. it is necessary for seo. — Vladimir Golub
– Vladimir Golub, Commented Apr 23, 2021 at 9:56
Like a specific div ? Usually, you do have the SEO in the head(). Other info, can be get through $refs or the script tag. Do you have an example template of what you do want to get ? — kissu
– kissu, Commented Apr 23, 2021 at 10:02
No. I use nuxt-i18n for translate. In template {{ $t('Hello') ]}, when there is access to $ el, then translations are already loaded, and I want to load them for the current page. — Vladimir Golub
– Vladimir Golub, Commented Apr 23, 2021 at 10:05

kissu · Accepted Answer · 2021-04-23 10:36:02Z

2

You can access i18n with something like this, no need to access the template for this use case

asyncData ({ app }) {
  console.log(app.i18n.t('Hello'))
}

Looking at the lifecycle of Nuxt, asyncData will happen before any template is generated at all, so it is impossible with asyncData.
And even if it was possible with some hacky trick, it would be a bit strange to have to look inside of your template to then have some logic for i18n fetching.

Why not getting a computed nested object and loop on this through your template, after you have fetched all of your required translations ?

Also, you're using asyncData + an API call each time ? So, for every page: you will stop the user, let him wait for the API call and then proceed ?

Latest point, if you are on your page and you hit F5, then asyncData hook will not be triggered. Just to let you know about this caveat.

Alternative solutions:

using the fetch() hook and display a loader until you have fetched all your translations, still better to not rely on the content of the template. This will work even on F5 and can produce a more smooth experience (by not blocking the navigation).
getting your i18n whole translations globally, at some point when your user's connection is idle. Rather than on per-page. Especially because you will need to handle the logic of not fetching some translations that you already have (if the user visits a page twice).

edited Apr 23, 2021 at 10:36

answered Apr 23, 2021 at 10:18

kissu

47.3k16 gold badges94 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vladimir Golub Over a year ago

How do I know what translations are needed for a page?

kissu Over a year ago

Edited my answer. Also, do you use nuxt as universal or SPA only ?

Collectives™ on Stack Overflow

How to get access to template in asyncData?

1 Answer 1

Alternative solutions:

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Alternative solutions:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related