Nuxt•3y 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

Nuxt•3y ago

spohl

Component loaded twice on layout change

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

Component loaded twice on layout change

Similar Threads

Component loaded twice on layout change

Similar Threads

Similar Threads

Similar Threads