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 use defineComponent in Vue 3

defineComponent is a Vue 3 utility function that enables full TypeScript support by providing proper type inference for component options and the setup function. As the creator of CoreUI with Vue development experience since 2014, I use defineComponent in every TypeScript Vue component because it makes IDEs correctly infer prop types, emitted events, and the return value of setup. Without it, TypeScript treats the component object as a plain object and loses the Vue-specific type information. For <script setup> components you don’t need it — it’s most valuable when writing components with explicit setup functions or Options API in TypeScript files.

Read More…

How to configure lint-staged in Vue

Running the linter on your entire codebase before every commit is slow and discourages developers from committing often. As the creator of CoreUI, I’ve standardized on lint-staged to run ESLint and Prettier only on the files you actually changed. Combined with Husky git hooks, this setup catches code quality issues automatically without slowing down your workflow. The result is a consistent codebase where every committed file meets your style and quality standards.

Read More…

How to migrate Vue 2 to Vue 3

Migrating from Vue 2 to Vue 3 requires addressing breaking changes in the API, removed features, and updated behavior. As the creator of CoreUI, I’ve led Vue 2 to Vue 3 migrations for large applications and open-source libraries. The most effective approach uses the official migration build to run Vue 3 with Vue 2 compatibility flags, then addresses warnings one by one. This incremental strategy avoids a big-bang rewrite.

Read More…

How to migrate Options API to Composition API in Vue

Migrating from Options API to Composition API improves code organization, TypeScript support, and logic reusability across components. As the creator of CoreUI, I’ve led migrations for large Vue 2 codebases to the Composition API. The key is mapping each Options API section - data, computed, methods, watch, and lifecycle hooks - to their Composition API equivalents. The logic becomes more collocated and easier to extract into reusable composables.

Read More…

How to use Cypress for Vue E2E tests

End-to-end tests with Cypress verify complete user flows by running real browser interactions against your Vue application. As the creator of CoreUI, I’ve used Cypress to catch integration issues that unit tests miss, like broken API connections and routing bugs. The standard approach installs Cypress, writes specs using its chainable commands, and runs them against a local or staging server. This provides high confidence that users can actually complete their tasks.

Read More…

How to snapshot test Vue components

Snapshot tests capture the rendered output of components and alert you when it changes unexpectedly. As the creator of CoreUI, I’ve used snapshot testing to catch accidental regressions in UI components across hundreds of components. The standard approach uses @vue/test-utils to mount components and Vitest’s toMatchSnapshot to compare renders against stored snapshots. This provides an automatic safety net for your component’s output.

Read More…

How to mock API in Vue tests

Mocking API calls in Vue tests ensures tests run fast, reliably, and without external dependencies. As the creator of CoreUI, I’ve written thousands of tests that mock API responses to verify component behavior under various scenarios. The most effective approach uses Vitest’s mocking utilities to mock fetch or axios calls, returning controlled responses for different test cases. This provides predictable, isolated tests that don’t depend on external services.

Read More…

How to test Vuex store in Vue

Testing Vuex stores ensures state management logic works correctly before integrating with components. As the creator of CoreUI, I’ve written comprehensive test suites for Vuex stores in complex applications with hundreds of state mutations and actions. The most effective approach tests each store module in isolation - mutations synchronously, actions with mocked API calls, and getters with sample state. This provides confidence that state management logic is reliable and catches bugs early.

Read More…

How to test Vue components with Vue Test Utils

Testing Vue components ensures they render correctly, handle user interactions, and emit events as expected. As the creator of CoreUI, I’ve written thousands of component tests to maintain code quality in production applications. The recommended approach uses Vue Test Utils for component mounting and interaction, combined with Vitest for running tests and assertions. This combination provides fast, reliable tests with excellent TypeScript support.

Read More…

How to test Vue components with Jest

Testing Vue components is essential for maintaining code quality and preventing regressions as your application grows and evolves. As the creator of CoreUI, a widely used open-source UI library, I’ve written thousands of component tests in production environments. The most effective approach is to use Jest with Vue Test Utils, which provides a comprehensive testing framework with excellent Vue integration. This combination offers fast test execution, powerful matchers, and intuitive component mounting and interaction APIs.

Read More…