·
1 min read
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:
<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 Vue tip, follow me on BlueSky to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter :