Transitions prevent render

nuxt4

Riddle me this folks, I have:

export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  css: [
    "/assets/css/main.css",
  ],
  modules: [
    "@nuxtjs/color-mode",
    "nuxt-mapbox",
    "@nuxtjs/robots",
    "reka-ui/nuxt",
    "@pinia/nuxt",
    "@nuxtjs/i18n",
  ],

  app: {
    pageTransition: { name: "page", mode: "out-in" },
    layoutTransition: { name: "layout", mode: "out-in" },

export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  css: [
    "/assets/css/main.css",
  ],
  modules: [
    "@nuxtjs/color-mode",
    "nuxt-mapbox",
    "@nuxtjs/robots",
    "reka-ui/nuxt",
    "@pinia/nuxt",
    "@nuxtjs/i18n",
  ],

  app: {
    pageTransition: { name: "page", mode: "out-in" },
    layoutTransition: { name: "layout", mode: "out-in" },

When I navigate from

/my-page

/my-page

/my-page/1

/my-page/1

it all goes fine. When I navigate back to

/my-page

/my-page

, my page fails to render, however, all of my HTTP calls are triggered, images are loaded etc - but entirely invisible.

When I remove

pageTransition

pageTransition

and

layoutTransition

layoutTransition

- everything works as expected.

Here are the transition effects:

.page-enter-active,
.page-leave-active {
    transition: all 0.1s;
}
.page-enter-from,
.page-leave-to {
    opacity: 0;
    filter: blur(1rem);
}

.layout-enter-active,
.layout-leave-active {
    transition: all 0.1s;
}
.layout-enter-from,
.layout-leave-to {
    filter: grayscale(1);
}

.page-enter-active,
.page-leave-active {
    transition: all 0.1s;
}
.page-enter-from,
.page-leave-to {
    opacity: 0;
    filter: blur(1rem);
}

.layout-enter-active,
.layout-leave-active {
    transition: all 0.1s;
}
.layout-enter-from,
.layout-leave-to {
    filter: grayscale(1);
}

Any thoughts?

Transitions prevent render

nuxt4

Riddle me this folks, I have:

export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  css: [
    "/assets/css/main.css",
  ],
  modules: [
    "@nuxtjs/color-mode",
    "nuxt-mapbox",
    "@nuxtjs/robots",
    "reka-ui/nuxt",
    "@pinia/nuxt",
    "@nuxtjs/i18n",
  ],

  app: {
    pageTransition: { name: "page", mode: "out-in" },
    layoutTransition: { name: "layout", mode: "out-in" },

export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  css: [
    "/assets/css/main.css",
  ],
  modules: [
    "@nuxtjs/color-mode",
    "nuxt-mapbox",
    "@nuxtjs/robots",
    "reka-ui/nuxt",
    "@pinia/nuxt",
    "@nuxtjs/i18n",
  ],

  app: {
    pageTransition: { name: "page", mode: "out-in" },
    layoutTransition: { name: "layout", mode: "out-in" },

When I navigate from

/my-page

/my-page

/my-page/1

/my-page/1

it all goes fine. When I navigate back to

/my-page

/my-page

, my page fails to render, however, all of my HTTP calls are triggered, images are loaded etc - but entirely invisible.

When I remove

pageTransition

pageTransition

and

layoutTransition

layoutTransition

- everything works as expected.

Here are the transition effects:

.page-enter-active,
.page-leave-active {
    transition: all 0.1s;
}
.page-enter-from,
.page-leave-to {
    opacity: 0;
    filter: blur(1rem);
}

.layout-enter-active,
.layout-leave-active {
    transition: all 0.1s;
}
.layout-enter-from,
.layout-leave-to {
    filter: grayscale(1);
}

.page-enter-active,
.page-leave-active {
    transition: all 0.1s;
}
.page-enter-from,
.page-leave-to {
    opacity: 0;
    filter: blur(1rem);
}

.layout-enter-active,
.layout-leave-active {
    transition: all 0.1s;
}
.layout-enter-from,
.layout-leave-to {
    filter: grayscale(1);
}

Any thoughts?

Transitions prevent render

Similar Threads

Transitions prevent render

Similar Threads

Similar Threads

Similar Threads