Vue.js Integration for Suite UI Components

| Leave a comment

After delivering integration examples with two widely used frameworks: Angular and React, we settled down to Vue.js. You can find live samples of Suite UI components together with the full source code that you can use in your Vue-based apps on our GitHub Pages.

Examples of UI components with Vue.js are divided into five sections:

  • Basic initialization via npm
  • Preconfigured component
  • Work with data
  • Basic initialization via CDN
  • Event listening

Each component has a link to its documentation to help you grasp all configuration options.

Let’s take a look at the example of DHTMLX Colorpicker initialized using Vue.js via npm:

<template>
  <div ref="colorpicker"></div>
</template>

<script>
import { Colorpicker as ColorpickerDHX } from "dhx-suite";
export default {
  name: "ColorpickerBase",
  data: () => ({
    colorpicker: null,
  }),
  mounted() {
    this.colorpicker = new ColorpickerDHX(this.$refs.colorpicker);
  },
  beforeDestroy() {
    if (this.colorpicker) {
      this.colorpicker.destructor();
    }
  },
};
</script>

View full source code >

DHTMLX Colorpicker with Vue.jsView live demo >

Here is our Colorpicker widget based on Vue.js in the picker mode only:

<template>
  <div ref="colorpicker"></div>
</template>

<script>
import { Colorpicker as ColorpickerDHX } from "dhx-suite";
export default {
  name: "ColorpickerConfigurated",
  data: () => ({
    colorpicker: null,
  }),
  props: {
    options: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    this.colorpicker = new ColorpickerDHX(this.$refs.colorpicker, {
       pickerOnly: true
    });
  },
  beforeDestroy() {
    if (this.colorpicker) {
      this.colorpicker.destructor();
    }
  },
};
</script>

View full source code >

Picker mode of DHTMLX Vue.js ColorpickerView live demo >

Our Vue.js examples are intended for faster development of web applications based on Suite UI components. You can try our UI library for free during a 30-day evaluation period. Our official technical support team will provide you with guidance if any questions arise.

Related Materials: