Component Name Conflict

[ggedde]

I have just found an issue when naming a layout the same as another component. Currently it will load the layout in the component which could cause an infinite mirror effect. :(

I had a component named 'panel' and created a layout called 'panel'. This issue happened as the layout will also use

I think it should instead use instead

Sure this can be avoided just by making sure your component and layout names are unique, but that becomes difficult when importing plugins and other directives.

This can easily be avoided by changing:

layouts().forEach(c => {
    c = c.default || c
    Vue.component(c.name, c)
  })

TO

layouts().forEach(c => {
    c = c.default || c
    Vue.component('layouts-' + c.name, c)
  })

And by changing

function layoutCompile (context) {
  return _Vue.compile(`<${(context.$route.meta.layout || 'default')} />`)
}

TO

function layoutCompile (context) {
  return _Vue.compile(`<layout-${(context.$route.meta.layout || 'default')} />`)
}

Thanks

[ggedde]

This also might be a good chance to add a configuration option for this: And leave the default as ''

Vue.use(VueExtendLayout, {
    componentPrefix: 'layout-'
})

[ktquez]

@ggedde Awesome! Thanks for the contributions, I will certainly adopt them for the next version.

[ktquez]

@ggedde Done: v1.1.0 https://github.com/ktquez/vue-extend-layout#options

Thanks so much for use and for contribution.