The world of JavaScript frameworks is continuously evolving. As a result, we receive requests for integration with a specific new library every day. For a while now, Vue.js has been mentioned to us more than others. The framework is growing into a serious contender in the UI space, having accumulated almost as many GitHub stars as React.
Since we already have the other main players covered — with our Angular integration and the new React Wrappers —, we decided to tackle Vue.js as the next most important platform.
In our upcoming release v18.1, we are introducing more than 65 Vue.js components, based on DevExtreme widgets. Here is the GitHub repository, where you can also find example code and getting-started instructions more detailed than the information in this post.
Deep integration
On a low level, our DevExtreme Widgets run JavaScript and render HTML, so they can be used in any HTML/JS application. However, when you look at different UI frameworks, you find that an important distinguishing aspect is the way libraries implement components, instantiation mechanisms, life-cycle management and runtime features like data binding. Integrating with a certain framework therefor means adopting the specific approaches that make our widgets “feel” native to the environment.
Creating components
Several different Vue.js techniques can be used to instantiate a DevExtreme Vue component. First, you can include it in a single-file component:
<template>
<div>
<dx-button text="Click me" />
<dx-button
text="I'm colored"
:elementAttr="{ style: 'background-color: #ffc' }" />
<dx-button
text="I'm dangerous"
type="danger" />
</div>
</template>
<script>
import { DxButton } from "devextreme-vue";
export default {
components: {
DxButton
}
}
</script>
Alternatively, components can be used as part of a template when creating a Vue instance:
new Vue({
el: '#app',
components: { DxButton },
template: '<dx-button :text="text" />',
data() {
return { text: 'Hello!' };
}
});
A third option is to include our Vue components in your own HTML, like this live sample (alternative live sample link) does:
<html>
...
<body>
<div id="app">
<dx-data-grid
key-expr="orderId"
...>
...
</dx-data-grid>
</div>
</body>
</html>
Finally, our components are also compatible with JSX render functions.
Data binding
All Vue.js data binding mechanisms are supported:
<dx-button :text="buttonLabel" />
<dx-text-box :value.sync="phoneNumber" />
<dx-text-box v-model="text" />
Event handling
You can install listeners for all DevExtreme widget events using the standard Vue.js v-on or (shorthand) @ syntax.
<dx-button v-on:click="handleClick" text="Click me" />
Templates
Where our DevExtreme widgets support templating of components or elements, you can write these templates using Named Slots. Template data is scoped, with the slot-scope attribute pointing to a variable that can be used to access data within the template.
<div id="app">
<dx-list :items="items">
<div slot="item" slot-scope="data">
<i>This is my template for {{data}}</i>
</div>
</dx-list>
</div>
Prop validation
All our DevExtreme Vue components publish Prop Validation requirement details. This means that you will receive console error messages when you are misusing component properties.
We would like your help!
The public CTP of our DevExtreme Vue Wrappers is available now. For npm, you can use the pre-release package (and check out this post if you’re not using npm).
npm install devextreme@18.1-unstable devextreme-vue@18.1-unstable
Of course we are very interested in any of your thoughts or comments. However, we also need some help prioritizing a few features that have not been implemented yet:
- Full TypeScript (TS) support — at this time, the Wrappers can be used in TS projects, but their TS declarations require improvement
- Server-side rendering (SSR) — Wrappers can currently be used with SSR enabled, but they will actually render on the client only
- Vue.js event modifiers
- Vue.js key modifiers
Please get back to us if you have any thoughts about these features, or if you think we should prioritize something else. Feel free to comment on this post, or to participate in discussions on GitHub!
Join the Webinar
If you want to see all new features introduced in our v18.1 release, sign up for our upcoming webinar “New in v18.1 - DevExtreme HTML / JS Controls”, where you’ll have a chance to ask questions about all the new features as well.
Join the webinar: https://attendee.gotowebinar.com/register/9186007723238099714
Free DevExpress Products - Get Your Copy Today
The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the
DevExpress Support Center at your convenience. We'll be happy to follow-up.