Nuxt•6mo ago

Dynamic/computed layout without causing content shift or re-render after route change

In my app.vue I'm using dynamic layouts to avoid having to specify the layout in every page:

const route = useRoute()

const layout = computed(() => {
  if (route.path.startsWith('/platform')) {
    return 'platform'
  }

  if (route.path.startsWith('/staff')) {
    return 'staff'
  }

  if (route.path.startsWith('/admin')) {
    return 'tenant-admin'
  }

  if (route.path.startsWith('/auth')) {
    return 'auth'
  }

  return 'brochureware'
})

<template>
  <NuxtLayout :name="layout">

const route = useRoute()

const layout = computed(() => {
  if (route.path.startsWith('/platform')) {
    return 'platform'
  }

  if (route.path.startsWith('/staff')) {
    return 'staff'
  }

  if (route.path.startsWith('/admin')) {
    return 'tenant-admin'
  }

  if (route.path.startsWith('/auth')) {
    return 'auth'
  }

  return 'brochureware'
})

<template>
  <NuxtLayout :name="layout">

However when switching from /auth to /platform you see a noticable shift in the content as the layout switches after the page has rendered. This re-rendering also breaks automated e2e tests as it attempts to fill in forms while the shift is happening. Is there anyway to make the layout change blocking or apply before the next <NuxtPage /> renders I assume it's because the computed watcher on useRoute is just updating too slow. Can it be set in the middleware maybe?

1 Reply

TitanOP•6mo ago

I decided to abandon layouts feature and just move them into components/layouts and wrap my page template with them instead. Problem fixed, no layout shifts anymore

Gaming

Programming

Dynamic/computed layout without causing content shift or re-render after route change