Skip to content

Instantly share code, notes, and snippets.

@rmp135

rmp135/loadAllComps.js

Last active September 6, 2021 11:32
Show Gist options
  • Save rmp135/aca1e54aec3838275b174f0db602467f to your computer and use it in GitHub Desktop.
Save rmp135/aca1e54aec3838275b174f0db602467f to your computer and use it in GitHub Desktop.
Download ZIP
Import all vue components in a directory
Raw
loadAllComps.js
// Use the following to load all vue components in a directory. They will be loaded by the `name` attribute.
components: {
...(() => {
const context = require.context("./components", false, /.*.vue/);
return Object.fromEntries(
context
.keys()
.map(k => context(k).default)
.filter(c => c.name != undefined)
.map(c => [c.name, c])
)
})()
}
@robmathews
Copy link

robmathews commented May 17, 2018 •
edited
Loading

Doesn't work for me. It finds and loads the components, but when I try to use the components in my application, I get the error "Failed to mount component: template or render function not defined".

When I import the component explicitly, it all works.

Any idea why?

@vladyslavnes
Copy link

@robmathews, You are probably using Vue 2+ but it is said that:

This behavior was available pre-Vue 2 via the component array syntax.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment