#Dynamic layouts and transitions

3 messages · Page 1 of 1 (latest)

jolly cypress
#

I'm having a single page setup [...slug].vue and need to dynamically apply different layouts depending on the url. My approach is as follows:

  <div>
    <NuxtLayout :name="layout">
      ...
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">

definePageMeta({
  layout: false,
})

const { slug } = useRoute().params

const url = Array.isArray(slug)
  ? slug.join('/')
  : slug.replace(/\/$/, '')
    ? slug
    : 'start'

const layout = url === 'start' ? 'default' : 'blue'

All good except for the fact that transitions are not working as expected. Layout transitions are not applied at all and page transitions are applied on the whole page, not just the updated components. Any ideas? I cannot use layout in definePageMeta. The only approach I see is to move the dynamic part to middleware but that seems a bit overkill IMO.

wind cedar
jolly cypress
#

Yes, just give me a bit and I will provide one