DevExtreme Vue - Add DevExtreme to a Vue Application

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@22.1 devextreme-vue@22.1 --save --save-exact
NOTE
We recommend saving an exact version of DevExtreme to avoid unexpected updates because DevExtreme does not use Semantic Versioning. In our versioning system, the first and middle numbers indicate a major release which may contain behavior changes.

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.

main.js
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).

index.html
<html lang="en">
    <head>
        <!-- ... -->
    </head>
    <body class="dx-viewport">
        <div id="app"></div>
    </body>
</html>
NOTE
SVG-based UI components do not require theme stylesheets. If you choose to import the stylesheets, the UI components apply an appearance that matches them.

Import DevExtreme Components

Import the DevExtreme components you are going to use from specific modules. In the following code, the DxButton component is imported:

App.vue (Options API)
App.vue (Composition API)
<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):

App.vue (Options API)
App.vue (Composition API)
<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>

Register 3rd-Party Dependencies

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:

vue.config.js
webpack.config.js
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.

Additional Configuration for Webpack

NOTE
If you created your application with Vue CLI, skip this step.

Open the webpack.config.js file and configure loaders to process CSS and fonts:

webpack.config.js
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.

Additional Configuration for Vite

NOTE
If you created your application with Vue CLI, skip this step.

To avoid errors in the production build, do one of the following:

  • Add the resolve.alias configuration to the vite.config.js file:

    vite.config.js
    resolve: {
    alias: {
        "devextreme/ui": 'devextreme/esm/ui'
    }
},

  • Disable treeshaking in the vite.config.ts file:

    vite.config.ts
    export default defineConfig({
    build: {
        rollupOptions: {
            treeshake:  false 
        }
    },
});

  • Disable treeshaking only for required modules. For example, if you use DataGrid in the application, disable the following module in the vite.config.ts file:

    vite.config.ts
    export default defineConfig({
    build: {
        rollupOptions: {
            plugins: [
                {
                    name: 'no-treeshake',
                    transform(_, id) {
                        if (id.includes('ui/data_grid')) {
                            return { moduleSideEffects: 'no-treeshake' }
                        }
                    }
                }
            ] 
        }
    },
});

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.ts
    export 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.

Using Quasar

If you configure Vite to use DevExtreme in Quasar, the vite.config.js file is ignored. Add the resolve.alias configuration to the quasar.config.js file instead:

quasar.config.js
build: {
    extendViteConf (viteConf, { isServer, isClient }) {
        viteConf.resolve.alias['devextreme/ui'] = 'devextreme/esm/ui'
    }
}

Run the Application

Run the application with the following command:

npm run serve

Open http://localhost:8080 to browse the application.

Demos and Code Examples

Refer to the following resources for code samples and usage examples: