I'm having trouble importing all files with the .vue extension from a specific subfolder into another component. I am aware of the concept of Automatically Registering Base Components Globally, but it doesn't seem to be applicable in this case.
Imagine a default Vue component (not the main one) that looks something like this:
export default {
components: {
red: () => import('./panes/red'),
},
data() {
return {
current: false,
};
},
And suppose my file structure is as follows:
/src
- main.js
- main.vue
-- components/
-- panes/
--- /red.vue
--- /green.vue
--- /blue.vue
-- SubMain.vue
I want to dynamically generate the components object for the SubMain.vue folder.
So, in SubMain.vue, I've tried something like this:
import myComponents from './src/components/panes';
...
components: Object.keys(myComponents).reduce((obj, name) => {
return Object.assign(obj, { [name]: () => import(myComponents[name]) })
}, {}),
However, ESLint keeps flagging errors related to Missing file extension and Unable to resolve path to module on the myComponents variable. I have verified the path multiple times and attempted different variations, but to no avail. My project is set up using Vue CLI 3.