One-Command Setup
You can install and configure DevExtreme and its dependencies with a single npx command that is part of the DevExtreme CLI:
npx -p devextreme-cli devextreme add devextreme-vue
After you run the command, you can skip the following articles and move on straight to importing DevExtreme components.
If the command is unavailable for any reason or if you need an older version, follow the instructions below for manual setup.
Install DevExtreme
Install the devextreme
and devextreme-vue
npm packages:
npm install devextreme@24.1 devextreme-vue@24.1 --save --save-exact
Import Stylesheets
Open the main application file (main.js
) and import a predefined theme stylesheet (dx.light.css
in the code below). Alternatively, you can import the stylesheets where DevExtreme UI components are used. The syntax is the same.
import 'devextreme/dist/css/dx.light.css'; // ...
Then, go to the public
folder, open the index.html
file, and add the dx-viewport
class to the <body>
tag. This ensures that theme colors and typography settings are applied to all page elements (and not only to DevExtreme UI components).
<html lang="en"> <head> <!-- ... --> </head> <body class="dx-viewport"> <div id="app"></div> </body> </html>
Import DevExtreme Components
Import the DevExtreme components you are going to use from specific modules. In the following code, the DxButton component is imported:
<template> <DxButton text="Click me" @click="sayHelloWorld" /> </template> <script> import DxButton from 'devextreme-vue/button'; export default { components: { DxButton }, methods: { sayHelloWorld() { alert('Hello world!') } } } </script>
<template> <DxButton text="Click me" @click="sayHelloWorld" /> </template> <script setup> import DxButton from 'devextreme-vue/button'; const sayHelloWorld = () => { alert('Hello world!') } </script>
Nested DevExtreme components should also be imported (DxArgumentAxis
, DxSeries
, and DxLegend
in the following code):
<template> <DxChart :data-source="data"> <DxArgumentAxis :tick-interval="10" /> <DxSeries type="bar" /> <DxLegend :visible="false" /> </DxChart> </template> <script> import DxChart, { DxArgumentAxis, DxSeries, DxLegend } from 'devextreme-vue/chart'; const data = [{ arg: 1990, val: 5320816667 }, { arg: 2000, val: 6127700428 }, { arg: 2010, val: 6916183482 }]; export default { components: { DxChart, DxArgumentAxis, DxSeries, DxLegend }, data() { return { data } } } </script>
<template> <DxChart :data-source="data"> <DxArgumentAxis :tick-interval="10" /> <DxSeries type="bar" /> <DxLegend :visible="false" /> </DxChart> </template> <script setup> import DxChart, { DxArgumentAxis, DxSeries, DxLegend } from 'devextreme-vue/chart'; const data = [{ arg: 1990, val: 5320816667 }, { arg: 2000, val: 6127700428 }, { arg: 2010, val: 6916183482 }]; </script>
Globalize Registration
If you want to use Globalize for localization, install it and the devextreme-cldr-data
extension:
npm install --save-dev devextreme-cldr-data globalize
Then, specify the Globalize and CLDR aliases in the vue.config.js
file if you created the application with Vue CLI or in the webpack.config.js
file otherwise:
const path = require("path"); module.exports = { configureWebpack: { resolve: { alias: { globalize$: path.resolve(__dirname, "node_modules/globalize/dist/globalize.js"), globalize: path.resolve(__dirname, "node_modules/globalize/dist/globalize"), cldr$: path.resolve(__dirname, "node_modules/cldrjs/dist/cldr.js"), cldr: path.resolve(__dirname, "node_modules/cldrjs/dist/cldr") }, extensions: [".ts", ".js", ".json"] } } }
const path = require("path"); module.exports = { ... resolve: { alias: { globalize$: path.resolve(__dirname, "node_modules/globalize/dist/globalize.js"), globalize: path.resolve(__dirname, "node_modules/globalize/dist/globalize"), cldr$: path.resolve(__dirname, "node_modules/cldrjs/dist/cldr.js"), cldr: path.resolve(__dirname, "node_modules/cldrjs/dist/cldr") }, ... }, ... }
Refer to the Using Globalize article for usage examples.
Alternatively, you can use Intl as a more lightweight localization solution.
Create a Custom Bundle
In certain scenarios, you may want to utilize a custom bundle rather than an automatically generated one. The example below illustrates how to create a custom bundle with Vite.
For the best experience, we recommend that you use the latest version of DevExtreme alongside ESM.
To create a custom bundle, follow the steps below:
Create a
main.js
file with re-exports of DevExtreme components that you want to include in the bundle. If you use nested configuration components, we recommend to utilize import aliases.main.jsexport { DxButton } from "devextreme-vue/button"; export { DxDataGrid, DxColumn as DxGridColumn } from "devextreme-vue/data-grid";
Create a separate Vite configuration
vite.config.devextreme.bundle.js
file.vite.config.devextreme.bundle.jsimport { resolve } from 'path' import { defineConfig } from 'vite' export default defineConfig({ build: { commonjsOptions: { esmExternals: true }, lib: { entry: resolve(__dirname, 'main.js'), name: 'DevExtreme Vue Bundle', formats: ['es', 'cjs'], fileName: 'devextreme-vue-bundle', }, rollupOptions: { external: ['vue'], output: { globals: { vue: 'Vue', }, }, }, outDir: 'devextreme-bundle' }, })
In the code snippet above, the following options are used:
esmExternals: true
Treat external dependencies (Vue in this case) as ECMAScript modules.entry: resolve(__dirname, 'main.js')
A main entry file created at step one.formats: ['es', 'cjs']
Output formats.fileName: 'devextreme-vue-bundle'
Your bundle name.outDir: 'devextreme-bundle'
A folder for the generated bundle. The default value isdist
.
Leave
vite.config.js
file as it is to build Vue applications separately.Configure your
package.json
.package.json"type": "module", "scripts": { // ... "build": "vite build", "build:devextreme-bundle": "vite build --config vite.config.devextreme.bundle.js", },
Bundle the modules.
npm run build:devextreme-bundle
Use the assembled bundle in your application.
App.vueimport { DxButton, DxDataGrid, DxGridColumn as DxColumn } from './devextreme-bundle/devextreme-vue-bundle';
Additional Configuration for Webpack
Open the webpack.config.js
file and configure loaders to process CSS and fonts:
module.exports = { ... module: { rules: [ ... { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } ] } ] } }
In addition, open the package.json
file and ensure style-loader
, css-loader
, and url-loader
are listed in devDependencies
.
Using Nuxt
Nuxt uses server-side rendering (SSR) as the default deployment. DevExtreme Vue components do not support SSR. To disable this Nuxt functionality, do one of the following:
Disable SSR for an entire application in the
nuxt.config.ts
file:nuxt.config.tsexport default defineNuxtConfig({ ssr: false, })
Use route rules to disable SSR only for views that contain DevExtreme components.
Use the
.client
prefix for Vue components that contain DevExtreme components. Refer to the following article for additional information: .client Components.
Run the Application
Run the application with the following command:
npm run serve
Open http://localhost:8080 to browse the application.
If you have technical questions, please create a support ticket in the DevExpress Support Center.