I have followed the documentation on the Vuejs website to learn how to register vue ponents globally.

I have defined that the relative path of the ponents folder is ./global and set to look in subfolder to true (default false). However, it still doesn't look into subfolders.

I have also console.logged the ponents keys to see if any vue ponents are included, but it only returned the ponents in the global (root) folder.

.html

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // The relative path of the ponents folder
  './global',
  // Whether or not to look in subfolders
  true,
  // The regular expression used to match base ponent filenames
  /[A-Z]\w+\.(vue|js)$/
)

console.log(requireComponent.keys())

requireComponent.keys().forEach(fileName => {
  // Get ponent config
  const ponentConfig = requireComponent(fileName)

  // Get PascalCase name of ponent
  const ponentName = upperFirst(
    camelCase(
      // Strip the leading `./` and extension from the filename
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )

  // Register ponent globally
  Vueponent(
    ponentName,
    // Look for the ponent options on `.default`, which will
    // exist if the ponent was exported with `export default`,
    // otherwise fall back to module's root.
    ponentConfig.default || ponentConfig
  )
})

I have followed the documentation on the Vuejs website to learn how to register vue ponents globally.

I have defined that the relative path of the ponents folder is ./global and set to look in subfolder to true (default false). However, it still doesn't look into subfolders.

I have also console.logged the ponents keys to see if any vue ponents are included, but it only returned the ponents in the global (root) folder.

https://v2.vuejs/v2/guide/ponents-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 ponents folder
  './global',
  // Whether or not to look in subfolders
  true,
  // The regular expression used to match base ponent filenames
  /[A-Z]\w+\.(vue|js)$/
)

console.log(requireComponent.keys())

requireComponent.keys().forEach(fileName => {
  // Get ponent config
  const ponentConfig = requireComponent(fileName)

  // Get PascalCase name of ponent
  const ponentName = upperFirst(
    camelCase(
      // Strip the leading `./` and extension from the filename
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )

  // Register ponent globally
  Vue.ponent(
    ponentName,
    // Look for the ponent options on `.default`, which will
    // exist if the ponent was exported with `export default`,
    // otherwise fall back to module's root.
    ponentConfig.default || ponentConfig
  )
})

• javascript
• vue.js
• webpack
• nuxt.js

Share Improve this question Follow edited Jul 14, 2022 at 1:35 tony19 139k2323 gold badges278278 silver badges348348 bronze badges asked Dec 7, 2018 at 21:09 Anson CAnson C 50777 silver badges1818 bronze badges 1

• Are the ponent files in the subdirectories named correctly? They should start with an uppercase letter. – Decade Moon Commented Dec 8, 2018 at 0:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Here is what I ended up writing to achieve this same oute:

const requireComponent = require.context(
  // The relative path of the ponents folder
  './global',
  // Whether or not to look in subfolders
  true,
  // The regular expression used to match base ponent filenames
  /[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // Get ponent config
  const ponentConfig = requireComponent(fileName)
  // Get PascalCase name of ponent
  const ponentName = Vue._.upperFirst(
    Vue._.camelCase(
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  // Register ponent globally
  Vue.ponent(
    ponentName,
    // Look for the ponent options on `.default`, which will
    // exist if the ponent was exported with `export default`,
    // otherwise fall back to module's root.
    ponentConfig.default || ponentConfig
  )
})

Make sure all of you files in global are capitalized and have a .vue or .js extention.

Also with the path you provided make sure that main.js (or whatever your bootstrap file is called) lives one directory up from globals. Example:

/src main.js /global

This will make the a file such as ProgressBar.vue globally available in all of your ponents as ProgressBar

<ProgressBar></ProgressBar>

@Anson C

const requireComponent = require.context(
  // The relative path of the ponents folder
  './global',
  // Whether or not to look in subfolders
  true,
  // The regular expression used to match base ponent filenames
  /[A-Z]\w+\.(vue|js)$/
)

This code is exactly working as meant to be. Means it will return you back all files in subfolders as expected (like for ./Base/BaseInput.vue will return BaseInput). But to import those files, You have to add the corresponding path as well.

// Get PascalCase name of ponent
  const ponentName = upperFirst(
    camelCase(
      // Strip the leading `./` and extension from the filename
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )

This will only import ./BaseInput which is not accurate path it shall be ./Base/BaseInput.

There for:

// Get PascalCase name of ponent
  const ponentName = Vue._.upperFirst(
    Vue._.camelCase(
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

This code returns perfect path to the file and folder.