Nuxt 3: Resolving Issues with Page and Layout Transitions

I've been attempting to incorporate layout transitions into my Nuxt 3 project, but unfortunately, it's not working as expected. I even resorted to replicating the code directly from the Nuxt transition documentation, only to face another failure. Can someone please assist me with this issue? Below is the code snippet:

app.vue file

<div>
  <NuxtLayout>
    <NuxtPage/>
  </NuxtLayout>
</div>
</template>

<style>
  .layout-enter-active, 
  .layout-leave-active {
    transition: opacity 2s;
  }
  .layout-enter-from, 
  .layout-leave-to {
    opacity: 0;
  }
</style>

nuxt.config.ts file
export default defineNuxtConfig({
  app: {
    layoutTransition: {
      name: 'layout', 
      mode: 'out-in'}
  },
  modules: ['nuxt-icon', '@nuxtjs/tailwindcss'],
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }, 
  },
  pages: true,
})

[1]: https://nuxt.com/docs/getting-started/transitions
javascriptcssanimationvuejs3nuxt3.js

Answer №1

If you're experiencing transition issues, it may be helpful to review your code for any conflicts that could be causing the problem. I've tested an example using the provided code and it's running smoothly without any issues.

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  app: {
    layoutTransition: { name: 'layout', mode: 'out-in' }
  },
})

app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<style>
.layout-enter-active,
.layout-leave-active {
  transition: opacity 2s;
}
.layout-enter-from,
.layout-leave-to {
  opacity: 0;
}
</style>

See a working example at this link:

https://stackblitz.com/edit/nuxt-starter-su263d?file=nuxt.config.ts

I hope this clarifies things for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on how to clear and upload personalized information to Stormpath

After receiving JSON data from my client, I am looking to store it in Stormpath's custom data using node.js with express.js: I have set up a basic post route: app.post('/post', stormpath.loginRequired, function(req, res){ var data = req.b ...

javascriptnode.jsexpressstormpath

Retrieve the data from an HTTP Request using AngularJS

I've been working on creating a JavaScript function that sends an HTTP Request to retrieve data, but I'm struggling with how to handle and use the result in another function. Here are the two functions I've tried (both intended to achieve t ...

javascriptangularjsasynchronoushttprequestdeferred

Utilizing PHP and jQuery to dynamically populate Google Maps with multiple markers

I am currently working on integrating a Google map with a database to dynamically display multiple markers using PHP and MySQL. Below is the code I have been using: <?php //This section retrieves data from the database for later use in jQuery //CREATE ...

javascriptphpjquerygoogle-mapsgoogle-maps-api-3

I kindly request your assistance in resolving the issues with the append() and empty

Here is some code I've been working on: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ ...

javascriptjqueryhtml

Is there a way to identify when no rows contain specific values in PostgreSQL or node.js and return false?

Here is an example of a table: P Q t f f t f f In SQL, is there a way to return false when querying for t t, but true when querying for t f, f t, or f f? Should this be handled with node.js by first doing a select and then using if-else statements based ...

javascriptsqlnode.jspostgresqlselect

Cut off a string from the start

I'm using the text-overflow: ellipsis property in a div to shorten lengthy text values. Since there is no white space in the URL, I want to prevent the overflow from increasing the width of the div. What I want to achieve is to display the following: ...

phpjqueryhtmlcss

`Cannot recompile the `Product` model as it has already been compiled. Please try again

I attempted to reference my productSchema within my purchaseSchema but encountered the following error: OverwriteModelError: Cannot overwrite Product model once compiled. What steps can I take to resolve this issue? Here is my product schema: mongoose = ...

javascriptnode.jsmongodbexpressmongoose

What enables typescript to be eligible for transpiling is its equivalent level of abstraction to javascript?

Transpilation is the act of converting code from one language to another with a similar level of abstraction. Can you point out some distinctive characteristics that indicate TypeScript transpires into JavaScript? ...

javascripttypescript

Arrange elements within a division when the division splits into two rows

Currently in my setup: I have a navigation bar with a group of buttons located on the right-hand side. When the navbar is reduced to a smaller size, like on a smartphone, the two buttons get split across 2 rows within the div. In this state, I'm ai ...

htmlcssbootstrap-5

The directive in Angular compels the webpage to carry out the added HTML attribute

There is a custom directive in my code that applies the spellcheck attribute to two div elements as shown below: (function(){ 'use strict'; app.directive('spellchecker', spellchecker); spellchecker.$inject = ['$timeout&a ...

javascripthtmlangularjs

Retrieve the maximum numerical value from an object

My goal is to obtain the highest value from the scores object. I have a global object called "implementations": [ { "id": 5, "project": 'name project', "scores": [ { "id": 7, "user_id": 30, "implement ...

javascriptvue.js

PHP-generated HTML onclick attribute malfunctioning

Here is the PHP code I am currently working with: $listing .= "<button onclick='updateValue(".$id.", ".$key.")'>change value</button>"; The variable $id is an integer and functions correctly. However, $key is a reference from a for ...

javascriptphphtml

Personalized Svelte interface Slider tag

I am trying to customize the label of a smui/slider in a tick marks and discrete slider. While I found instructions on how to do this using material web components at https://github.com/material-components/material-components-web/tree/v13.0.0/packages/mdc- ...

javascriptmaterial-uisvelte

Leverage the NextRouter functionality without the need for a React component

I've created a custom hook that checks if a user is logged in and redirects them to the login page if not. Below is a simplified version of the hook assuming the user is not logged in: import { useRouter } from 'next/router'; export default ...

javascriptreactjsnext.jsnext-router

Unleashing the full power of Node.JS asynchronous operations

I've been struggling to grasp how to effectively manage the asynchronous nature of Node.JS. Despite reading extensively on the topic and experimenting with message passing and callback functions, I can't seem to get my object constructor to load ...

javascriptnode.jsasynchronous

What is the best way to assign attributes to multiple HTML elements using an array?

Seeking assistance to hide various sections in my HTML file upon button click, with the exception of one specific section. Encountered an error message: Uncaught TypeError: arr[i].setAttribute is not a function Here's a snippet of my code: const hide ...

javascripthtml

Utilize the splice function when resizing the window based on specific breakpoints

On a series of div elements, I have implemented some JS/jQuery code that organizes them by wrapping every three elements in a container with the class .each-row. <div class="element"></div> <div class="element"></div> <div class ...

javascriptjqueryhtmlcss

Executing unique calculations on Kendo UI Grid Columns

For experienced users, this may seem simple, but as a newcomer, I'm struggling with a basic arithmetic task. I want to multiply one of the column values (DealValue) by 0.05 in my Kendo grid setup. Despite looking through the Kendo docs, I couldn' ...

javascriptjqueryhtmlkendo-uikendo-grid

Designing websites or applications for mobile devices requires careful consideration of how content will

Currently, I am trying to use media queries to cater to mobile screens. The main problem I am encountering involves the text on the header when switching between Portrait and Landscape modes. In the landscape view, the top property overrides the portrait ...

cssmedia-querieslandscape-portrait

Performing updates on Meteor.users collection while handling a promise rejection (leveraging fcm-push with Meteor)

My current project involves the use of an NPM package called fcm-push in order to send FCM notifications to different mobile devices based on specific messages. Everything works fine when the message is successfully sent, but if the sending fails due to th ...

javascriptmeteornpmpromise