One data grid for JavaScript, React, Vue & Angular. Sorting, filtering, virtualization, pinning, and CSV export included. Early access $199 $349 → [Get it now]

How to build a sidebar in Vue

Sidebars provide persistent navigation for applications, offering quick access to main sections while maximizing content space in the main area. As the creator of CoreUI, a widely used open-source UI library, I’ve built sidebar navigation systems in Vue applications. The most effective approach is creating a sidebar component with Composition API managing collapse state and responsive behavior. This method ensures consistent navigation with smooth transitions and mobile-friendly toggle functionality.

Read More…

How to build a navbar in Vue

Navigation bars provide primary navigation structure for web applications, offering consistent access to main sections and improving user orientation across pages. As the creator of CoreUI, a widely used open-source UI library, I’ve built navigation systems in Vue applications. The most effective approach is creating a navbar component with Vue Router integration and responsive mobile menu toggle. This method ensures seamless navigation with active route highlighting and mobile-friendly collapsible menus.

Read More…

How to build a dropdown in Vue

Dropdown components provide collapsible menus for navigation, actions, or selections, essential for space-efficient user interfaces and organized content. As the creator of CoreUI, a widely used open-source UI library, I’ve built dropdown systems in Vue applications. The most maintainable approach is creating a reusable dropdown component with Composition API, managing open state and click-outside detection. This method ensures consistent dropdown behavior across applications with accessibility features and proper event handling.

Read More…

How to build a tooltip in Vue

Tooltips provide contextual information on hover without cluttering the interface, improving user experience with helpful hints and descriptions. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented tooltip systems in Vue applications. The most maintainable approach is creating a reusable tooltip component with Composition API and conditional rendering on hover. This method ensures consistent tooltip behavior across the application with minimal code duplication.

Read More…

CoreUI PRO Vue Admin Template v5.7.0

CoreUI PRO Vue Admin Template v5.7.0

We are pleased to announce the release of CoreUI PRO Vue Admin Template v5.7.0. This update includes enhanced dropdown functionality, improved accessibility features, and all exclusive CoreUI PRO components for building sophisticated enterprise Vue.js admin dashboards with Vue 3 compatibility.

Read More…

How to build a modal in Vue

Modal components provide overlay dialogs for user interactions without navigating away from the current page, essential for confirmations, forms, and focused content. As the creator of CoreUI, a widely used open-source UI library, I’ve built modal systems in Vue applications. The most effective approach is using Vue 3’s Teleport component with Composition API to render modals at the document body level. This method prevents z-index conflicts and ensures modals display above all page content.

Read More…

How to use Vue with cookies

Managing cookies in Vue applications enables persistent data storage across browser tabs and sessions, essential for authentication tokens and user preferences. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented cookie-based state management in Vue applications. The most reliable approach is using the js-cookie library for simplified cookie operations with automatic encoding and expiration handling. This method provides cross-tab synchronization and server-side access to stored data.

Read More…

How to use Vue with sessionStorage

Using sessionStorage in Vue applications maintains state during the browser session, perfect for temporary data like form drafts or wizard steps. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented sessionStorage integration in Vue applications. The most practical approach is combining Vue’s reactivity with sessionStorage using watchers for automatic synchronization. This method provides session-scoped persistence that clears when the browser tab closes.

Read More…

How to use Vue with localStorage

Persisting application state across browser sessions improves user experience by maintaining preferences, form data, and application state. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented localStorage integration in Vue applications. The most practical approach is combining Vue’s reactivity with localStorage, using watchers to automatically save state changes. This method provides seamless data persistence without manual save operations.

Read More…

How to combine filters with computed properties in Vue

Combining multiple filtering operations on data is common in Vue applications, from search functionality to multi-criteria filtering. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented complex filtering logic in Vue applications. The most efficient approach is using computed properties to chain filter operations, leveraging Vue’s reactivity system for automatic updates. This method keeps your template clean while providing optimal performance through caching.

Read More…