Dynamic Vue Import from a subfolder

Question

I am trying to import all .vue files in a certain subfolder into another component. I know about Global registration of Base components but this does not seem to help me here.

Let's say I have default Vue component (not the main one) with something like this:

export default {
  components: {
    red: () => import('./panes/red'),
  },
  data() {
    return {
      current: false,
    };
  },

and my file structure is something like:

/src
- main.js
- main.vue
-- components/
-- panes/
--- /red.vue
--- /green.vue
--- /blue.vue
-- SubMain.vue

I am trying to dynamically create the components object for the SubMain.vue folder.

So I try something like this in SubMain.vue:

  import myComponents from './src/components/panes';

  ...

  components: Object.keys(myComponents).reduce((obj, name) => {
    return Object.assign(obj, { [name]: () => import(myComponents[name]) })
  }, {}),

But eslint is giving me errors about Missing file extension and Unable to resolve path to module on the myComponents variable. Yes, I double checked my path and tried other paths. Nothing. I am using the Vue CLI 3 project.

where's the `panes` folder? – Boussadjra Brahim Jan 31 '19 at 17:27 — Boussadjra Brahim, Jan 31 '19 at 17:27
@BoussadjraBrahim Added it in. It's all in there. – Green Mtn Jan 31 '19 at 18:20 — Green Mtn, Jan 31 '19 at 18:20

score 1 · Answer 1 · answered Jan 31 '19 at 18:33

1

I don't think you can import multiple components that way without an index file that aggregates the component import/exports for you. See Import multiple components in vue using ES6 syntax doesn't work

answered Jan 31 '19 at 18:33

Slotheroo

925
2
9
17

score 1 · Accepted Answer · answered Jan 31 '19 at 20:27

If you're using Webpack, you can use require.context:

import _kebabCase from lodash/kebabCase

const components = require.context('src/panes', true)

components.keys().map(component => {
    // turn './ComponentName.vue' into 'component-name'
    const componentName = _kebabCase(
        component.replace(/^\.\//, '').replace(/\.vue$/, '')
    )
    // register new component globally
    Vue.component(componentName, components(component))
})

Dynamic Vue Import from a subfolder

2 Answers2