I think currently there is lot of rerendering

[shirshak55]

Current system is abit broken. Changing route don't refresh it properly I have modified to following code and it is working correctly . Can you review it.

<template>
        <component :is="currentLayout"/>
</template>

<script>
export default {
    name: 'VueExtendLayout2',

    props: {
        layout: { type: String, default: 'default' },
        path: {
            type: String,
            default: 'layouts',
        },
    },

    data() {
        return {
            hasLoaded: false,
            layoutName: 'default',
        };
    },

    watch: {
        '$route.meta.layout': {
            immediate: true,
            handler(newLayout) {
                if (!newLayout) { this.layoutName = this.layout || 'default'; return; }
                this.layoutName = newLayout;
            },
        },
    },

    computed: {
        currentLayout() {
            const ln = this.layoutName;
            return () => import(/* webpackChunkName: "layout-[request]" */ `@/${this.path}/${ln}.vue`);
        },
    },
};
</script>

[ktquez]

Send me a pull request with your approach.
I would be grateful for this.

[ktquez]

@shirshak55
Send me this pull request as fast as you can.
Your code made things much cleaner.

<template>
  <component :is="currentLayout"/>
</template>

<script>
export default {
  name: "VueExtendLayout2",

  props: {
    layout: { type: String, default: "default" },
    path: {
      type: String,
      default: "layouts"
    }
  },

  data() {
    return {
      layoutName: 'default'
    };
  },

  watch: {
    "$route.meta.layout": {
      immediate: true,
      handler(newLayout) {
        if (!newLayout && !this.$route.name) { this.layoutName = null; return; }
        if (!newLayout) { this.layoutName = this.layout || "default"; return; }
        this.layoutName = newLayout;
      }
    }
  },

  computed: {
    currentLayout() {
      if (!this.layoutName) return
      const ln = this.layoutName;
      return () => import(/* webpackChunkName: "layout-[request]" */ `@/${this.path}/${ln}.vue`);
    }
  }
};
</script>

These lines

if (!newLayout && !this.$route.name) { this.layoutName = null; return; }
if (!this.layoutName) return

Prevents the default from loading before when the routes use beforeRouteEnter, such as this delay on the contact page.
https://github.com/ktquez/vue-extend-layout/blob/master/example/src/views/Contact.vue#L9

Repro: https://vue-layouts2.surge.sh/contact

In the next versions make available the possibility of using a "loading layout", to avoid going blank until the route loads completely.

[shirshak55]

@ktquez hmm you could have added it at the end the goal is to make this package good for everyone :)