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 />

<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?

Nuxt•2y ago•

1 reply

Titan

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">

<NuxtPage />

<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?

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads