Why `asyncData is executing twice` after calling `switchLocalePath`?
See original GitHub issueHere is my nuxt.config.js
export default {
head: {
title: 'Test',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
i18n: {
locales: [
{
code: 'en',
name: 'English'
},
{
code: 'es',
name: 'Español'
},
{
code: 'fr',
name: 'Français'
}
],
defaultLocale: 'en',
vueI18n: {
fallbackLocale: 'en',
messages: {
en: {
welcome: 'Welcome'
},
fr: {
welcome: 'Bienvenue'
},
es: {
welcome: 'Bienvenido'
}
}
}
},
modules: [
'@nuxtjs/axios',
'@nuxtjs/pwa',
'nuxt-i18n'
],
}
And here is my index.vue :
<template>
<div class="container">
<nuxt-link v-for="locale in availableLocales" :key="locale.code" :to="switchLocalePath(locale.code)">
{{ locale.name }}</nuxt-link>
{{ $t('welcome') }}
</div>
</template>
<script>
export default {
asyncData({ app }) {
return app.$axios.$get(`https://reqres.in/api/users/2?timestamp=${new Date().getTime()}`)
.then((res) => {
return {
data: res
}
})
},
computed: {
availableLocales() {
return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale)
}
}
}
</script>
<style>
.container {
margin: 0 auto;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
a {
padding: 0 15px;
}
</style>
Sanbox : https://codesandbox.io/s/nuxt-i18n-forked-efgyo
The problem is that get request is sending twice one every switchLocalePath
call. I might be doing something wrong somewhere.Can anyone help?
Issue Analytics
- State:
- Created 2 years ago
- Comments:5
Top Results From Across the Web
Why asyncData is executing twice after calling ... - GitHub
The problem is that get request is sending twice one every switchLocalePath call. I might be doing something wrong somewhere.Can anyone help? The...
Read more >Vue / Nuxt.js - APIs being called twice in created hook
My question came in when I noticed on the networking tab in developer options that my API within the created() hook was being...
Read more >Nuxtjs Page Is Created Twice - ADocLib
Why asyncData is executing twice after calling switchLocalePath ? #1160. Here is my nuxt.config.js export default { head: { title: 'Test'.
Read more >Data Fetching - Nuxt
We can use the fetch method or the asyncData method. ... fetch is a hook called during server-side rendering after the component instance...
Read more >Understanding Difference Between Asyncdata Fetch Nuxt
The main implication is that the fetch hook can be called in any component (page or UI components alike), while asyncData can only...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I’ve reported https://github.com/nuxt/nuxt.js/issues/9209
I’ve checked the referenced Nuxt bug recently with latest dependencies and it seems to be resolved.