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 ?
You can access
i18n
with something like this, no need to access the template for this use caseLooking at the lifecycle of Nuxt,
asyncData
will happen before any template is generated at all, so it is impossible withasyncData
.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
, thenasyncData
hook will not be triggered. Just to let you know about this caveat.Alternative solutions:
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 onF5
and can produce a more smooth experience (by not blocking the navigation).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).