DevExtreme Vue Components

Common errors

• Failed to resolve component: DxDataGrid

  cause 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')

  cause 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'

  cause 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

  cause 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.

Warnings

• breaking Major 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.
• gotcha DevExtreme 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.
• gotcha Mismatching 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"`).
• gotcha DevExtreme 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.
• gotcha When 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.

Install

• npm install devextreme-vue npm
• yarn add devextreme-vue yarn
• pnpm add devextreme-vue pnpm

Imports

• DxDataGrid
  wrong:

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

  correct:

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

  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
  wrong:

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

  correct:

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

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

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

  correct:

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

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

Quickstart

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');