Vue Tip: Automatic Global Registration of Base Components

Base components are components that are relatively generic, 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:
<BaseButton>
<BaseIcon name="search" />
</BaseButton>
<BaseInput v-model="searchText" />
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 tip, follow me on Twitter to get notified about new tips, blog posts and more content from me.
Alternatively (or additionally), you can also subscribe to my newsletter.
Sie haben einen Fehler in diesem Artikel gefunden? Sie möchten gerne etwas klarstellen, aktualisieren oder hinzufügen?
Alle meine Artikel können auf Github editiert werden. Jeder Fix ist willkommen, egal wie klein er sein mag!
Ändern auf Github