DevExtreme - Vue.js Wrappers (v18.1)

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.

DevExtreme Vue Wrappers

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

4 comment(s)

This is great new and we're are excited about being able to use DevExtreme with Vue! I was testing the example plunker from the github page and I noticed that when I bind to a simple property like the boolean row-alternation-enabled the grid will automatically apply the change with the value is changed but a complex property like filterRow.visible does not cause an update in the grid. Here is an example of what I was trying to do: embed.plnkr.co/Jqnd4HB7CpFp1Xd3Ngj3 . Did I miss something or is this functionality not currently supported?

Thanks,

Clint

9 May, 2018

Here's the link to the plunker with my modifications embed.plnkr.co/J8TBf9Hn2nUBv1nNdDq6 the link in the post above is the original provided by DevExpress on github

9 May, 2018

Clint, Thank you!

I've created the issue (github.com/.../60) in the DevExtreme Vue repo.

10 May, 2018

:D VUE!

I can't wait to try this out. I've been too enthralled with Blazor lately but I'll definitely take some time to play around with it. I'm really happy to see you guys support Vue. For some reason its the only one of the major JS frameworks that I like.

10 May, 2018

Please login or register to post comments.