Add require.context for Vue automatic global component registration

[JollyBrackets]

What I'm trying to do:
I would like to use the automatic global component registration from Vue as outlined in this guide.
This approach however relies on webpacks require.context method, which is outlined here.

Problem
require.context does not seem to be support by codesandbox (❤) yet, which is why it throws the following error:

My request
Could you please add support for require.context, since this would enable global auto registration which allows us to omit tedious component imports everywhere and make it even easier for beginners to get started with Vue (imo).

Codesandbox
https://codesandbox.io/s/github/MPH-Bali/green-village-project/tree/develop/public

Software	Name/Version
Сodesandbox	PROD-1523452809
Browser	Chrome/65.0.3325.181
Operating System	Windows/10.0.16299

[CompuIves]

Very good request, makes a lot of sense to add this. I'm actually surprised that we didn't see this request before 😄.

If I understand the behaviour of require.context well enough it should work like this:

const req = require.context('./components', true, /.*\.vue$/)

// Now we have a 'context' that behaves the same as require but with context, soo

req.resolve('App.vue') // Will resolve components/App.vue
req.keys() // Will return all keys indexed by the context
req('App.vue') // Will `require` components/App.vue and return the module

I can't give a timeline on when this will be done, but it's high on my priority list!

[Napzu]

I made simple as possible example that works fine in container sandbox but obviously not in client template.

import Vue from "vue";

const requireComponent = require.context("../components", false, /\.vue$/);
requireComponent.keys().forEach(filename => {
  const component = requireComponent(filename)
  /* Get componenent name from filename IE. "/components/component-name.vue" to "ComponentName" */
  const componentName = filename.split("/").pop().replace(/\.\w+$/, "").replace(/-([a-z])/g,g=>g[1].toUpperCase()).replace(/(\b\w)/gi,m=>m.toUpperCase());
  Vue.component(componentName, component.default || component); /* Global component registration */
});

Any news if and when we could get require.context working on client templates?

[hendrul]

How is it doing? what's been done? anything on this issue? it is a very important feature, I depend on this to import lots of images, and other files.

[strophy]

Is there a workaround until this is implemented? Would love to be able to show off some work I have done, but can't figure out how to work around this error...

[github-actions]

This issue is stale because it has been open many days with no activity. It will be closed soon unless the stale label is removed or a comment is made.

[Napzu]

Any change getting this feature implemented? This would really help people who is just starting to code. Also this feature would lower mental overhead, because all components would be automatically available when needed.

[unitedworx]

we practically can not do any real work on codesandbox if this is not supported!

We are building a prototype of an SPA using Vue and Vuetify and we are to the point that we need to use require.context in several places but we obviously can't!

any updates on this? or workarounds at least???

[github-actions]

This issue has automatically been marked stale because there has been no activity in a while. Please leave a comment if the issue has not been resolved, or if it is not stale for any other reason. After 2 weeks, this issue will automatically be closed, unless a comment is made or the stale label is removed.

[jonaskuske]

...just letting the bot know it's not resolved yet
(if it works like that and doesn't need a maintainer to comment)