Pages don't disappear and new pages load in the same area when you use a transition when navigating

[hdwebpros]

Environment

"nuxt": "^3.8.0"

Reproduction

https://stackblitz.com/edit/nuxt-starter-7kblg3

Describe the bug

I have an app that I am working on, and I notice when I use

  app: {
    pageTransition: { name: 'page', mode: 'out-in' }
  }

in the Nuxt config that pages end up loading on top of each other.

I have a simple representation of it here: https://stackblitz.com/edit/nuxt-starter-7kblg3

Video showing this effect: https://nimb.ws/EfcLd4

Additional context

No response

Logs

No response

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• nuxt-starter-7kblg3 (Open reproduction)

[connerblanton]

@hdwebpros replace your :key="$route.fullPath" with :page-key="route => route.fullPath". Full docs about it are here

[hdwebpros]

Of course :) Thanks for pointing that out. I was going mad! Please keep this closed

[mklueh]

I have the same issue, but I'm not using the page-key attribute at all.

Changing the page will append it to the bottom of the page (in dev and after nuxt generate).

Why does that happen?

[danielroe]

@mklueh It sounds like an issue with hydration, perhaps. Do you pages have a single root element?

[mklueh]

@mklueh It sounds like an issue with hydration, perhaps. Do you pages have a single root element?

@danielroe Yes, all pages have a single root element.

It mainly happens when I navigate to /projects, and it does not matter if I'm on /, the author page or the tag page

And it is also happening when I remove //pageTransition: { name: "page", mode: "out-in" },

The last published version (that works) has been build with Nuxt 3.0.0 and the structure of the pages have not changed.

I've noticed there is an error I constantly see in the Browser, which might have something to do with it, but it does not give any hint what component / page it relates to

chunk-2H5ULGKI.js:62 Uncaught (in promise) TypeError: c.toUpperCase is not a function
    at :3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-2H5ULGKI.js?v=218c0bd3:62:50
    at String.replace (<anonymous>)
    at :3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-2H5ULGKI.js?v=218c0bd3:62:14
    at :3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-2H5ULGKI.js?v=218c0bd3:57:33
    at setFullProps (:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-2H5ULGKI.js?v=218c0bd3:5426:49)
    at initProps (:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-2H5ULGKI.js?v=218c0bd3:5294:3)
    at setupComponent (:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-2H5ULGKI.js?v=218c0bd3:8626:3)
    at mountComponent (:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-2H5ULGKI.js?v=218c0bd3:7027:7)
    at hydrateNode (:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-2H5ULGKI.js?v=218c0bd3:6033:11)
    at hydrateChildren (:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-2H5ULGKI.js?v=218c0bd3:6194:16)

[danielroe]

@mklueh I'd happily take a look at a reproduction. I would recommend you take a look at the source code of those chunks to see what code they relate to. (Though to my eye they seem to be vue internal code relating to an undefined(?) component.) I would also consider whether there could be an issue with the case of your pages.

[mklueh]

@danielroe

@mklueh I'd happily take a look at a reproduction. I would recommend you take a look at the source code of those chunks to see what code they relate to. (Though to my eye they seem to be vue internal code relating to an undefined(?) component.) I would also consider whether there could be an issue with the case of your pages.

Tough to build a reproducer when you have no idea where it may be coming from...

But I've debugged into the function and found out that _ is "-b" and c is 4.
c seems to always be the start index of the replacement, so I'm wondering how this could work at all

Tried to reproduce that

"bord-b".replace(camelizeRE, (_, c) => {console.log(_,c); return c ? c.toUpperCase() : "";});

which produces the exact same result and error.

I've set a conditional breakpoint to break when str contains "-b" and found out it seems that properties must be CamelCase now

This does not work anymore / produces the hydration failures

      <PostItem :class="{'shadow-lg hover:-translate-y-1': useGridView}"
                v-for="post in posts"
                :key="post.id"
                :post="post"
                :show-border="!useGridView" />

while this works

      <PostItem :class="{'shadow-lg hover:-translate-y-1': useGridView}"
                v-for="post in posts"
                :key="post.id"
                :post="post"
                :showBorder="!useGridView" />

The odd thing is, that IntelliJ autocompletes with ":show-border" and even the Vue documentation recommends this type of setting properties.

I guess this is rather a bug or a mixture of incompatible dependencies than a sudden break in Vue conventions

Edit: I've integrated playwright to ensure hydration issues don't exist. It seems even after changing the property casing from kebab to camel case, there are still issues on webkit browsers, while others are working fine

[danielroe]

This seems like a core Vue bug to me. If you can reproduce minimally - try with https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter - I would open a reproduction in http://github.com/vuejs/core. 🙏

[mklueh]

@danielroe this is likely not a Vue issue and I could reproduce the exact error. It only happens in the client, while on server it logs the expected outputs

<template>
  <NuxtLayout>
  </NuxtLayout>
</template>
<script setup>
import { camelize } from "@vue/shared";

console.log(camelize("test"));
console.log(camelize("test-test"));

</script>

The odd thing is, the error seems to only be thrown when navigating to pages rendered by https://github.com/nuxt/content
and it breaks now when the data-content-id property is passed into the camelize function on the client

Once I disable the ContentRenderer the issue disappears

<ContentRenderer v-if="false" :value="post"/>

Summary of my observations:

1. Using kebab-case for custom properties of components causing this
2. Using nuxt-content's ContentRenderer causing this

[danielroe]

It might be a nuxt/content issue in that case... 🤔

Nuxt doesn't handle or modify the case of attributes, so that would either be Vue itself, or possibly some magic being done by nuxt/content. cc: @farnabaz