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>

No replies yet

Join the Discord to continue the conversation

Nuxt

Nuxt Community Chat Server

31,632 Members

Join

Component loaded twice on layout change

Component loaded twice on layout change

No replies yet

Nuxt

No replies yet

Nuxt

Similar Threads