Registry / web-framework / devextreme-vue

devextreme-vue

library25.2.6jsnpmunverified

DevExtreme Vue is the official wrapper for DevExtreme UI and visualization components, allowing developers to seamlessly integrate a comprehensive suite of high-performance components into Vue.js applications. This includes a robust DataGrid, various charts, advanced editors, and more, all designed for optimal performance and integration within Vue 3 projects. The current stable version is 25.2.6, released in April 2026. DevExpress maintains a frequent release cadence, typically delivering minor updates and patches multiple times a month, with major versions (e.g., 25.1, 25.2) released periodically throughout the year. Its key differentiators are its extensive feature set, enterprise-grade support, and a consistent API across its diverse component library, making it suitable for complex business application development.

web-framework

npm install devextreme-vue

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · DEVEXTREME-VUE

devextreme-vue

web-frameworkjavascriptv25.2.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

DxDataGrid

✓ import DxDataGrid from 'devextreme-vue/ui/data-grid';

✗ import { DxDataGrid } from 'devextreme-vue'; // Incorrect direct import path, components are in 'ui/*' subpaths

DevExtreme Vue components are imported from their specific 'ui' subpaths. Named exports directly from 'devextreme-vue' are not the standard way to import individual components.

DxColumn

✓ import { DxColumn } from 'devextreme-vue/ui/data-grid';

✗ import DxColumn from 'devextreme-vue/ui/data-grid/column'; // DxColumn is a named export, not a default.

Nested components like DxColumn are typically named exports from the parent component's module path.

DxButton

✓ import DxButton from 'devextreme-vue/ui/button';

✗ const DxButton = require('devextreme-vue/ui/button'); // CommonJS require is not recommended for Vue 3 projects.

Vue 3 projects are predominantly ESM-first. While CommonJS might work in some build setups, direct ESM imports are preferred.

This quickstart demonstrates how to set up a basic Vue 3 application using DevExtreme Vue, importing a DxDataGrid component, populating it with local data, and defining columns. It also shows the necessary CSS imports for theming.

import { createApp } from 'vue'; import DxDataGrid from 'devextreme-vue/ui/data-grid'; import { DxColumn } from 'devextreme-vue/ui/data-grid'; // Import DevExtreme CSS themes import 'devextreme/dist/css/dx.light.css'; // Or dx.dark.css, dx.material.orange.light.css, etc. import 'devextreme/dist/css/dx.common.css'; const app = createApp({ components: { DxDataGrid, DxColumn }, setup() { const employees = [ { id: 1, firstName: 'John', lastName: 'Doe', position: 'Manager' }, { id: 2, firstName: 'Jane', lastName: 'Smith', position: 'Developer' }, { id: 3, firstName: 'Peter', lastName: 'Jones', position: 'Designer' } ]; return { employees }; }, template: ` <div id="app-container"> <h1>Employee List</h1> <DxDataGrid :data-source="employees" :show-borders="true" key-expr="id" > <DxColumn data-field="firstName" caption="First Name" /> <DxColumn data-field="lastName" caption="Last Name" /> <DxColumn data-field="position" caption="Position" /> </DxDataGrid> </div> ` }); app.mount('#app');

Debug

Known issues

breakingMajor version updates (e.g., from v24 to v25) often introduce breaking changes in API, configuration, or require updates to underlying DevExtreme core package dependencies. Always consult the official release notes for migration guides.

fix

Review the DevExtreme version history and migration guide for your specific version upgrade. Ensure 'devextreme' and 'devextreme-vue' versions are identical.

affects: >=25.0

gotchaDevExtreme components require their CSS themes to be imported separately. Forgetting to import 'dx.common.css' and a specific theme (e.g., 'dx.light.css') will result in unstyled or incorrectly rendered components.

fix

Add `import 'devextreme/dist/css/dx.common.css';` and `import 'devextreme/dist/css/dx.light.css';` (or your chosen theme) to your main application entry file.

affects: >=18.0

gotchaMismatching versions between the `devextreme-vue` package and the `devextreme` core package can lead to runtime errors, unexpected behavior, or missing functionality. Both packages must be the exact same major.minor.patch version.

fix

Ensure that `devextreme` and `devextreme-vue` in your `package.json` are specified with the exact same version number (e.g., `"devextreme": "25.2.6"`, `"devextreme-vue": "25.2.6"`).

affects: >=18.0

gotchaDevExtreme is a commercial product, and while some components might work without a license key during development, deployment to production environments typically requires a valid DevExpress license. Using the product without a proper license can lead to legal issues.

fix

Acquire a valid DevExpress Universal or DXperience subscription to ensure proper licensing for production use.

affects: >=18.0

gotchaWhen using `DxDataGrid` with remote data, incorrectly configuring the `DataSource` or `CustomStore` can lead to data not loading, filtering/sorting not working, or performance issues. Promises must be resolved correctly, and server responses formatted as expected.

fix

Refer to the DevExtreme documentation for `DataSource` and `CustomStore` configurations. Ensure `load`, `update`, `insert`, and `remove` methods handle data fetching and mutation promises correctly and match server API expectations.

affects: >=18.0

Errors

Common errors & fixes

Failed to resolve component: DxDataGrid

The DevExtreme Vue component was imported but not correctly registered with the Vue application, or the import path was incorrect.

fix

Ensure you `import DxDataGrid from 'devextreme-vue/ui/data-grid';` and then register it in your Vue component's `components` option or globally with `app.component('DxDataGrid', DxDataGrid);`.

Cannot read properties of undefined (reading 'setup')

This error typically occurs if you're trying to use a Vue 3 composition API syntax (like `setup()`) with a Vue 2 project setup, or if there's a misconfiguration of your Vue version.

fix

Ensure your project is configured for Vue 3 and that you have `vue@^3.0.0` installed. `devextreme-vue` targets Vue 3 primarily.

Error: EACCES: permission denied, mkdir '/node_modules/devextreme'

npm/yarn installation failure due to insufficient permissions to write to the node_modules directory.

fix

Run `npm install` or `yarn install` with elevated privileges (e.g., `sudo npm install` on macOS/Linux) or fix directory permissions with `sudo chown -R $(whoami) ~/.npm` or similar commands.

GET http://localhost:8080/devextreme/dist/css/dx.light.css net::ERR_ABORTED 404

The DevExtreme CSS theme file could not be found, often because the import path is incorrect or the file doesn't exist at the expected location.

fix

Verify that `devextreme` is installed and the CSS import path is correct: `import 'devextreme/dist/css/dx.light.css';` (adjust for your chosen theme and path structure). Make sure your build system is configured to handle CSS imports.

Upgrade

Version history

25.2.6latest on npm

Audit

Dependencies

vuerequiredRequired runtime for all Vue.js applications.

devextremerequiredThe core DevExtreme library providing the underlying component logic and styles. Must match 'devextreme-vue' version.

Agent activity

18 hits · last 30 days

node

Resources

githubhttps://github.com/DevExpress/DevExtreme ↗

packagehttps://www.npmjs.com/package/devextreme-vue ↗

homepagehttps://js.devexpress.com/Vue/ ↗