i18n: Page transition broken with nuxt-i18n

@lu40 thanks, but returning transition name should not be empty '' becouse it will be replaced to default. Should return any character, e.g:

export default function pageTransition (from, to) {
  const pageTransitionName = 'my-page-transition'
  if (!from || !to || !from.name || !to.name) return pageTransitionName
  return stripLocale(from.name) === stripLocale(to.name) ? '-' : pageTransitionName
}

@thariddler could you provide a gif of the issue? That is the routing? (from > to) Or did you solved it already?

The transition is copy-pasted from the original issue description. @thariddler I guess this is the behaviour you were talking about?

For me the following workaround does the job:

// utils/page-transition.js

function stripLocale (name) {
  const routeNameSeperator = '__' // or whatever you set it to
  return name.substring(0, name.indexOf(routeNameSeperator))
}

export default function pageTransition (from, to) {
  const pageTransitionName = 'my-page-transition'
  if (!from || !to || !from.name || !to.name) return pageTransitionName
  return stripLocale(from.name) === stripLocale(to.name) ? '' : pageTransitionName
}


// pages/index.vue

import pageTransition from '~/utils/page-transition'
export default {
  transition: pageTransition
}

However this disables page transitions when switching the language instead of replacing the translated content smoothly while fading back in.

Try key in nuxt layouts.

<NuxtPage :page-key="route.fullPath" />

or either

<main :key="route.fullPath">
  <slot></slot>
</main>

Could it be possible to set the new locale after first page unmounted, and before next page renders ?

@tiretdusix Not possible at the moment. You’ll be able to do it only once my PR fixing this issue gets merged: https://github.com/nuxt-community/i18n-module/pull/963

Actually when page component actually switches is only known at the page component level (beforeRouteLeave option) and at router-view level (either through watching $route or the leave event of the transition). It’s not that easy or robust to hook into those…

Also looking for a solution for this!

Solution for that released in https://github.com/nuxt-community/i18n-module/releases/tag/v6.20.0. Thanks to @pmrotule .

Any update on this? I see there are some conflicts on that PR plus no more comments from the repo’s maintainers

Is there already a solution to this?

Looking 4 solution too!