Consider using an env var for specifying the layouts folder instead of a prop

Line 50 in 76aae86

    
                 return () => import(/* webpackChunkName: "layout-[request]" */ `@/${this.path}/${ln}.vue`)

Here, since the whole path is dynamic except for the @ part which is src, webpack starts watching all the .vue files in src, no matter how deep it is in the file tree, even the new files and ones that aren't even included in the project.

To confirm this, include the library into any project and try creating a .vue file anywhere inside src.

This becomes a significant performance bottleneck in bigger apps during development.

One workaround for this would be using an environment variable, as they're embedded into the code at compile time so webpack can evaluate it and figure out which files to watch.

VUE_APP_LAYOUT_DIRECTORY=layouts

vue-extend-layout.vue

return () => import(/* webpackChunkName: "layout-[request]" */ `@/${process.env.VUE_APP_LAYOUT_DIRECTORY}/${ln}.vue`)

I haven't tried this approach, but I don't see any reason why it shouldn't work.

@dumptyd
Yes man, well thought out.

I will try and everything works out, I launch a new version.
If you want to submit a PR with your contribution, it would be an honor.

Sounds good. I'll try and see if it's possible to introduce this change in a backwards compatible manner and if it is I'll create a PR tomorrow. 🙂

So, it seems like it's not possible to do this in a backwards compatible way because the env var approach requires that the env var is always present even if it is set to an empty string.

So I'm not having any success with doing something like

import(/* webpackChunkName: "layout-[request]" */ `@/${process.env.VUE_APP_LAYOUTS_DIR || 'layouts'}/${ln}.vue`)

Would you be open to releasing 3.0.0 with the layouts folder hardcoded (maybe we could name it something like vue-extend-layouts to avoid name conflicts)? The obvious downside would be that the layouts path wouldn't be configurable anymore. The upside would be that it won't cause webpack to create a chunk for every vue file.

Let's do more research on how to make it dynamic, but without affecting performance too much.

If we can't, then we create in some branch a new package with this static option.

@ktquez

"@/" cannot be used in vite but "/@/" can be used reference, vue-extend-layout currently does not work in vite

If you can dynamically import the layout directory, please also consider dynamically importing the entire directory (including @/)

Its better if you forward resolving the component to the consumer,
via function prop like this:

<vue-extend-layout get-layout-component="getLayoutComponent"/>
...
methods: {
  getLayoutComponent(name) {
    return () => import(`@/layouts/${name}`)
  }
}