question-mark
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.

Why `asyncData is executing twice` after calling `switchLocalePath`?

See original GitHub issue

Here 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:closed
  • Created 2 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
rchlcommented, Apr 28, 2021
0reactions
rchlcommented, Jul 17, 2021

I’ve checked the referenced Nuxt bug recently with latest dependencies and it seems to be resolved.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found