DevExtreme Vue - Create and Configure a Widget

Make sure you linked all the required resources before creating a widget:

All DevExtreme widgets can be created on a page in the same manner - using a widget-specific Knockout binding. To create, for example, the dxChart widget, add a <div> element to the <body> tag of your page and use the dxChart binding as the following code shows.

HTML
<div data-bind="dxChart: { }"></div>

To configure a widget, add properties to the object passed to the widget binding. Note that these properties mirror the options of the widget.

HTML
<div data-bind="dxChart: {
    dataSource: [
        { fruit: 'Oranges', total: 10 },
        { fruit: 'Apples', total: 15 },
        { fruit: 'Bananas', total: 9 }
    ],
    series: { argumentField: 'fruit', valueField: 'total' }
}"></div>

You can initialize a widget option with the value of a view model property. For example, the following code declares the fruitsData property within a view model. The dataSource option of the Chart is initialized with the value of this property.

JavaScript
var viewModel = {
    fruitsData: [
        { fruit: 'Oranges', total: 10 },
        { fruit: 'Apples', total: 15 },
        { fruit: 'Bananas', total: 9 }
    ]
};

ko.applyBindings(viewModel);
HTML
<div data-bind="dxChart: {
    dataSource: fruitsData,
    series: { argumentField: 'fruit', valueField: 'total' }
}"></div>

As an alternative, you can declare the whole object of widget options in the view model and pass it to the widget binding.

JavaScript
var viewModel = {
    chartOptions: {
        dataSource: [
            { fruit: 'Oranges', total: 10 },
            { fruit: 'Apples', total: 15 },
            { fruit: 'Bananas', total: 9 }
        ],
        series: { argumentField: 'fruit', valueField: 'total' }
    }
};

ko.applyBindings(viewModel);
HTML
<div data-bind="dxChart: chartOptions"></div>
See Also