Nuxt•2y ago

Component loaded twice on layout change

If you want to change the layout programmatic the component is re-loaded. It would be nice pro prevent this as deferred components and requests are also restarted. It can be reproduced with this code:

<template>
  <div>Test</div>
</template>
<script lang="ts" setup>
definePageMeta({
  layout: false,
});
onBeforeMount(() => {
  const route = useRoute();
  route.meta.layout = false ? 'blank' : 'default';
});

console.log('Loaded');
</script>

<template>
  <div>Test</div>
</template>
<script lang="ts" setup>
definePageMeta({
  layout: false,
});
onBeforeMount(() => {
  const route = useRoute();
  route.meta.layout = false ? 'blank' : 'default';
});

console.log('Loaded');
</script>

You will find the console log twice. Maybe there is a better way to handle the layout change without being mounted? Here is a reproduction: https://stackblitz.com/edit/github-xhfdq1-de15an?file=src%2Fpages%2F[...all].vue,src%2Flayouts%2Fblank.vue,src%2Flayouts%2Fdefault.vue

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Component loaded twice on layout change