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:
<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>
Here is our Colorpicker widget based on Vue.js in the picker mode only:
<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>
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.