webpack/vue/nuxt - Map import if file exists (overwrite)

You can use require.context to crawl directory for components without a webpack or vue-loader involved.

For instance you have structure:

.src
+-- components
|   +-- MyComponent.vue
+-- overwrites
|  +-- components
|  |   +-- MyComponent.vue

You will put index.js file in every components folder with content:

const requireModule = require.context('./', false, /\.vue$/)
requireModule.keys().forEach(fileName => {
    if (fileName === './index.js') return;
    const moduleName = pascalCase(
        fileName.replace(/(\.\/|\.vue)/g, '')
    );
    components[moduleName] = requireModule(fileName)
});
export default components;

Then you will be able to import those index.js files in root component file like:

import components from './components/index.js';
export default {
    components: components,
    // ...
}

It will load all vue files from components directory. It will solve the issue of hot reloading.

Though, you will have to manage loading of duplicated components on your own, probably with Object.assing like:

import components from './components/index.js';
import {components as overwrites} from './overwrites/components/index.js';
export default {
    components: Object.assign({}, components, overwrites),
    // ...
}

Duplicated components will be substituted.

I solved the problem with a custom webpack resolver. Similar to this one: https://github.com/hollandThomas/webpack-custom-resolver/blob/master/StyleResolverPlugin.js

However, I check for ".vue" instead of ".js" and then I substitute the path instead of the filename.