Nuxt•2d ago

Double View Transition in Safari

View transitions landed in Safari 18. However, the default swipe animation for back/forward navigation cannot be disabled. This causes a double animation. There is a proof of concept here: https://jch.github.io/turbo-cancel-view-transition/

11 Replies

kapa.ai•2d ago

Hi @lorenzofiamingo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain specific information about handling or disabling the default Safari swipe animation when using the View Transitions API in Nuxt, nor do they address the issue of double animations in Safari 18. The documentation does mention that Nuxt's View Transitions API integration is experimental and highlights some known issues, but it does not provide guidance on browser-specific behaviors like Safari's native swipe animation or how to prevent double transitions in that context View Transitions API (experimental). If you encounter this issue, you may need to monitor updates to both Nuxt and browser implementations, or consider reporting the problem to the Nuxt team if it significantly impacts your project. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@781217973053423616> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

lorenzofiamingoOP•2d ago

@kapa.ai Exist a way to disable the nuxt view transition when the swipe back on safari is detected?

kapa.ai•2d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not contain information about detecting a swipe back gesture in Safari or programmatically disabling Nuxt's View Transition specifically in response to such an event. The documentation covers how to enable, disable, and override view transitions globally or per page using configuration and definePageMeta, but it does not address browser-specific navigation gestures or provide a way to conditionally disable view transitions based on user navigation method (like swipe back in Safari) View Transitions API (experimental) definePageMeta parameters. If this is a critical issue for your project, you may need to follow browser updates or raise the issue with the Nuxt team for further guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@781217973053423616> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

lorenzofiamingoOP•2d ago

@kapa.ai Can i use a route middleware to make action when I navigate between pages?

kapa.ai•2d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can use route middleware in Nuxt to perform actions when navigating between pages. Route middleware allows you to run code before navigation is completed. Middleware functions receive the target route (to) and the current route (from) as arguments, so you can perform logic based on navigation events. For example, you can create a middleware in the middleware/ directory:

// middleware/logger.ts
export default defineNuxtRouteMiddleware((to, from) => {
  console.log('Navigating from', from.fullPath, 'to', to.fullPath)
})

// middleware/logger.ts
export default defineNuxtRouteMiddleware((to, from) => {
  console.log('Navigating from', from.fullPath, 'to', to.fullPath)
})

Then, you can apply this middleware globally (by naming it logger.global.ts), or per page using definePageMeta:

<script setup lang="ts">
definePageMeta({
  middleware: 'logger'
})
</script>

<script setup lang="ts">
definePageMeta({
  middleware: 'logger'
})
</script>

This will execute your middleware logic on every navigation where the middleware is applied middleware usage middleware example. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@781217973053423616> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

lorenzofiamingoOP•2d ago

@kapa.ai middleware folder has to be in app, shared, server, or at root?

kapa.ai•2d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The middleware folder for route middleware should be placed inside your main application directory, which is typically app/middleware if you are using the new Nuxt directory structure (Nuxt 4+). If you are using the legacy structure, it would be at the root as middleware/. The dir.middleware configuration defaults to "middleware" inside your app directory dir config. For server middleware (which is different from route middleware), the folder should be server/middleware at the root of your project server directory. There is no mention in the knowledge sources of placing the middleware folder inside a shared directory. Summary: - Route middleware: app/middleware/ (or middleware/ at root for legacy) - Server middleware: server/middleware/ at project root If you use a custom structure, you can adjust the directory via Nuxt config, but by default, these are the expected locations. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@781217973053423616> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Double View Transition in Safari

Did you find this page helpful?