Vue Tip: Automatic Global Registration of Base Components

Base components are relatively generic components, like basic inputs or buttons. These components are frequently used across our application inside other components.

A typical component import might look like this:

import BaseButton from './BaseButton.vue' import BaseIcon from './BaseIcon.vue' import BaseInput from './BaseInput.vue' export default { components: { BaseButton, BaseIcon, BaseInput, }, }

These imports are necessary to be able to reference the components inside our template:

Using webpack or Vue CLI we can use require.context to globally register only these very common base components.

Here's a code example from the official Vue docs to globally import base components in your app's entry file (e.g. src/main.js):

import { createApp } from 'vue' import upperFirst from 'lodash/upperFirst' import camelCase from 'lodash/camelCase' import App from './App.vue' const app = createApp(App) const requireComponent = require.context( // The relative path of the components folder './components', // Whether or not to look in subfolders false, // The regular expression used to match base component filenames /Base[A-Z]\w+\.(vue|js)$/ ) requireComponent.keys().forEach((fileName) => { // Get component config const componentConfig = requireComponent(fileName) // Get PascalCase name of component const componentName = upperFirst( camelCase( // Gets the file name regardless of folder depth fileName .split('/') .pop() .replace(/\.\w+$/, '') ) ) app.component( componentName, // Look for the component options on `.default`, which will // exist if the component was exported with `export default`, // otherwise fall back to module's root. componentConfig.default || componentConfig ) }) app.mount('#app')

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

Vue Tip: Use Teleport to Render a Component in a Different Place

With teleport, you can render a component in a different place in the DOM tree, even if this place is not in your app's scope.

Vue Tip: Display Raw HTML

The double mustaches interpret the data as plain text, not HTML. To output real HTML, you will need to use the v-html directive.