CoreUI Free Vue.js Admin Template v5.5.0
We’re excited to announce the release of CoreUI Free Vue.js Admin Template v5.5.0 on April 1, 2026! This update introduces Vue Router 5.0 compatibility, new Chip components, comprehensive AI-assistant documentation, and significant dependency updates for improved performance and developer experience.
CoreUI PRO Vue Admin Template v5.8.0
We are excited to announce the release of CoreUI PRO Vue Admin Template v5.8.0. This update brings Vue Router 5.0 compatibility, new Chip components, comprehensive AI-assistant documentation, and all exclusive CoreUI PRO components for building sophisticated enterprise Vue.js admin dashboards with enhanced developer experience.
How to type refs in Vue with TypeScript
Typing ref() values with TypeScript generics ensures that Vue reactive state has correct types, enabling IDE autocompletion and compile-time error detection for all state access and mutations.
As the creator of CoreUI with Vue and TypeScript development experience since 2014, I type every ref in CoreUI Vue components to catch type mismatches early and provide accurate IntelliSense in consuming components.
Vue’s TypeScript integration is excellent — in most cases you don’t need to annotate refs explicitly because TypeScript infers the type from the initial value.
Explicit type annotations are needed for nullable refs, complex interfaces, and DOM element references.
How to type emits in Vue with TypeScript
Typing emits in Vue with TypeScript ensures parent components pass the correct handler signatures, enables IDE autocompletion for event payload properties, and catches mismatched event names at compile time.
As the creator of CoreUI with Vue and TypeScript development experience since 2014, I type every custom event in CoreUI Vue components because it makes the component API self-documenting and prevents subtle bugs where a handler receives the wrong data shape.
The recommended approach in Vue 3 <script setup> uses the defineEmits<{...}>() TypeScript syntax with named tuples for each event’s payload.
This is more concise than the runtime object syntax and provides better type inference for the returned emit function.
How to type props in Vue with TypeScript
Typing props in Vue with TypeScript ensures components only receive valid data, provides IDE autocompletion for prop usage, and catches type errors at compile time rather than runtime.
As the creator of CoreUI with Vue and TypeScript development experience since 2014, I type every prop in CoreUI Vue components to prevent incorrect usage and generate accurate API documentation automatically.
There are two approaches: PropType with the Options API or defineProps generics with <script setup> — the latter is cleaner and more expressive for TypeScript projects.
Both produce the same runtime behavior; the difference is developer experience and type inference quality.
How to define emits in Vue 3 with defineEmits
defineEmits is the <script setup> macro for declaring custom events that a component can emit, replacing the emits option and giving you type-safe emit functions with IDE autocompletion.
As the creator of CoreUI with Vue development experience since 2014, I use defineEmits in every component that communicates with its parent through events, from simple click callbacks to complex form submission payloads.
Declaring emits explicitly serves two purposes: it documents the component’s event API, and it enables Vue to distinguish between custom events and native DOM events on the root element.
The TypeScript generic syntax provides the best developer experience with full type inference on the emitted payload.
CoreUI for Vue v5.8.0 - Chip Components
We are excited to announce the release of CoreUI for Vue v5.8.0. This update introduces two powerful new components - Chip and Chip Input - bringing modern, compact UI elements for tags, labels, and multi-value inputs to your Vue.js applications.
CoreUI PRO for Vue v5.18.0 - Chip Components & PRO Features
We are excited to announce the release of CoreUI PRO for Vue v5.18.0. This update introduces powerful new Chip and Chip Input components, plus all exclusive PRO components for building sophisticated enterprise Vue.js applications with Vue 3 compatibility.
How to define props in Vue 3 with defineProps
defineProps is the <script setup> compiler macro for declaring component props in Vue 3, replacing the props option from the Options API with a more concise and TypeScript-friendly syntax.
As the creator of CoreUI with Vue development experience since 2014, I use defineProps in every <script setup> component because it gives both runtime validation and full TypeScript type inference without any extra configuration.
Choosing between the runtime syntax and the TypeScript generic syntax depends on whether you need complex default values — the TypeScript syntax offers better type safety but requires withDefaults for defaults.
Both approaches are idiomatic and supported — choose the one that fits your project’s TypeScript configuration.
How to expose methods in Vue 3 with defineExpose
In Vue 3 <script setup>, all bindings are private by default — parent components cannot access child component methods or data using template refs unless you explicitly expose them with defineExpose.
As the creator of CoreUI with Vue development experience since 2014, I use defineExpose in CoreUI Vue components that need to provide imperative APIs, such as dialog open() and close() methods or form reset() and validate() methods.
Without defineExpose, a parent’s childRef.value.open() call fails silently because the method is not exposed.
This is intentional — <script setup> components are encapsulated by default, and defineExpose is an explicit contract of the public API.