How to create a component in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Creating reusable Vue components is fundamental for building maintainable, scalable applications with modular architecture and consistent user interfaces.
As the creator of CoreUI, a widely used open-source UI library, I’ve built thousands of Vue components for buttons, forms, navigation, and complex dashboard layouts in enterprise applications.
From my expertise, the most effective approach is to use Single File Components (SFC) with .vue extension.
This method provides excellent developer experience by combining template, script, and style in one file while maintaining clear separation of concerns.
Create Vue components using Single File Components with template, script, and style sections.
<template>
<button class="btn" @click="handleClick">
{{ label }}
</button>
</template>
<script>
export default {
props: ['label'],
methods: {
handleClick() {
this.$emit('click')
}
}
}
</script>
<style scoped>
.btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
}
</style>
Single File Components organize Vue components into three distinct sections: <template> for HTML structure, <script> for JavaScript logic, and <style> for CSS styling. The component can accept props, emit events, and manage local state. Use scoped attribute in the style section to prevent CSS from affecting other components. Export the component as default to make it importable in other files. This structure provides excellent tooling support, hot reload, and clear organization for complex components.
Best Practice Note:
This is the same approach we use for all CoreUI Vue components to ensure maintainable and reusable code architecture.
Use Composition API with <script setup> syntax in Vue 3 for more concise code: <script setup> eliminates the need for export default and provides better TypeScript support.
