I've been working through the documentation on the Vuejs website to understand how to globally register vue components.
In my setup, I've specified that the components folder's relative path is ./global and I've set it to look into subfolders (though by default it was set to false). Despite these settings, it still doesn't seem to search in subfolders.
To investigate further, I used console.log to check for the keys of the components but it only displayed components located in the global (root) folder.
https://v2.vuejs.org/v2/guide/components-registration.html
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
// The relative path of the components folder
'./global',
// Whether or not to look in subfolders
true,
// The regular expression used to match base component filenames
/[A-Z]\w+\.(vue|js)$/
)
console.log(requireComponent.keys())
requireComponent.keys().forEach(fileName => {
// Retrieve component configuration
const componentConfig = requireComponent(fileName)
// Obtain PascalCase name of the component
const componentName = upperFirst(
camelCase(
// Remove the leading `./` and extension from the filename
fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
)
)
// Register the component globally
Vue.component(
componentName,
// Look for the component options on `.default`, if it exists
// This will be present if the component was exported with `export default`
// If not, fallback to the module's root.
componentConfig.default || componentConfig
)
})