How to use CoreUI with Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
CoreUI for Vue provides production-ready UI components, responsive layouts, and professional admin dashboard templates designed specifically for Vue 3 applications. As the creator of CoreUI, a widely used open-source UI library, I’ve designed CoreUI for Vue to deliver enterprise-grade components throughout my 11 years of frontend development. The most efficient approach is installing @coreui/vue and @coreui/icons-vue packages and importing components as needed. This method provides fully integrated Vue 3 components with Composition API support, TypeScript definitions, and comprehensive documentation.
Install @coreui/vue package and import components directly in your Vue 3 application with Composition API.
npm install @coreui/vue @coreui/icons-vue
<script setup>
import {
CContainer,
CRow,
CCol,
CCard,
CCardHeader,
CCardBody,
CButton,
CModal,
CModalHeader,
CModalTitle,
CModalBody,
CModalFooter
} from '@coreui/vue'
import { ref } from 'vue'
const visible = ref(false)
const showModal = () => {
visible.value = true
}
</script>
<template>
<CContainer>
<CRow>
<CCol md='6'>
<CCard>
<CCardHeader>
<strong>CoreUI Card Component</strong>
</CCardHeader>
<CCardBody>
<p>Professional card component from CoreUI for Vue 3</p>
<CButton color='primary' @click='showModal'>
Open Modal
</CButton>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CModal :visible='visible' @close='() => { visible = false }'>
<CModalHeader>
<CModalTitle>CoreUI Modal</CModalTitle>
</CModalHeader>
<CModalBody>
This is a CoreUI modal component with built-in animations and accessibility features.
</CModalBody>
<CModalFooter>
<CButton color='secondary' @click='() => { visible = false }'>
Close
</CButton>
<CButton color='primary'>Save changes</CButton>
</CModalFooter>
</CModal>
</CContainer>
</template>
<style>
@import '@coreui/vue/dist/css/coreui.min.css';
</style>
Using CoreUI icons:
<script setup>
import { CIcon } from '@coreui/icons-vue'
import { cilUser, cilSettings, cilBell } from '@coreui/icons'
</script>
<template>
<div>
<CIcon :icon='cilUser' size='lg' />
<CIcon :icon='cilSettings' size='xl' />
<CIcon :icon='cilBell' />
</div>
</template>
Here npm installs CoreUI’s Vue 3 package with native Composition API components and the icons package for the comprehensive CoreUI icon set. Components are imported individually for optimal tree-shaking and bundle size. The Composition API with script setup provides clean, modern Vue 3 syntax. CoreUI components like CCard, CButton, and CModal offer professional styling with built-in responsive behavior. The visible ref controls modal state reactively with Vue 3’s reactivity system. CoreUI CSS import provides the complete design system including grid, utilities, and component styles.
Best Practice Note:
This is the CoreUI integration I’ve designed specifically for Vue 3 applications requiring professional admin interfaces and enterprise component libraries. Use CoreUI Pro for Vue to access advanced components like data tables, charts, calendars, and premium admin templates, explore CoreUI Vue templates to jumpstart admin dashboard development with pre-built layouts and routing, and leverage CoreUI’s responsive grid system and utility classes for consistent spacing and layout across your application.
