{"id":7411,"date":"2020-06-25T16:44:47","date_gmt":"2020-06-25T13:44:47","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=7411"},"modified":"2026-06-30T17:35:59","modified_gmt":"2026-06-30T14:35:59","slug":"vue-js-integration-suite-ui-components","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/vue-js-integration-suite-ui-components\/","title":{"rendered":"Vue.js Integration for Suite UI Components"},"content":{"rendered":"<p>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 <a href=\"https:\/\/github.com\/DHTMLX\/vue-suite-demo\" target=\"_blank\" rel=\"noopener\">GitHub Pages<\/a>.<\/p>\n<p>Examples of UI components with Vue.js are divided into five sections:<\/p>\n<ul>\n<li>Basic initialization via npm<\/li>\n<li>Preconfigured component<\/li>\n<li>Work with data<\/li>\n<li>Basic initialization via CDN<\/li>\n<li>Event listening<\/li>\n<\/ul>\n<p>Each component has a link to its documentation to help you grasp all configuration options.<\/p>\n<p>Let&#8217;s take a look at the example of DHTMLX Colorpicker initialized using Vue.js via npm:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"sy0\">&lt;<\/span>script<span class=\"sy0\">&gt;<\/span><span class=\"co1\">\/\/ &lt;![CDATA[<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> Colorpicker as ColorpickerDHX <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">&quot;dhx-suite&quot;<\/span><span class=\"sy0\">;<\/span> <span class=\"kw5\">export<\/span> <span class=\"kw1\">default<\/span> <span class=\"br0\">&#123;<\/span> name<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;ColorpickerBase&quot;<\/span><span class=\"sy0\">,<\/span> data<span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; colorpicker<span class=\"sy0\">:<\/span> <span class=\"kw2\">null<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; mounted<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">this<\/span>.<span class=\"me1\">colorpicker<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> ColorpickerDHX<span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.$refs.<span class=\"me1\">colorpicker<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; beforeDestroy<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">colorpicker<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; <span class=\"kw1\">this<\/span>.<span class=\"me1\">colorpicker<\/span>.<span class=\"me1\">destructor<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"co1\">\/\/ ]]&gt;&lt;\/script&gt;<\/span><\/div><\/div>\n<p><a href=\"https:\/\/github.com\/DHTMLX\/vue-suite-demo\" target=\"_blank\" rel=\"noopener\">View full source code &gt;<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7415\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/06\/DHTMLX-Colorpicker-with-Vue.js.png\" alt=\"DHTMLX Colorpicker with Vue.js\" width=\"238\" height=\"254\" \/><a href=\"https:\/\/github.com\/DHTMLX\/vue-suite-demo\" target=\"_blank\" rel=\"noopener\">View live demo &gt;<\/a><\/p>\n<p>Here is our Colorpicker widget based on Vue.js in the picker mode only:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"sy0\">&lt;<\/span>script<span class=\"sy0\">&gt;<\/span><span class=\"co1\">\/\/ &lt;![CDATA[<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> Colorpicker as ColorpickerDHX <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">&quot;dhx-suite&quot;<\/span><span class=\"sy0\">;<\/span> <span class=\"kw5\">export<\/span> <span class=\"kw1\">default<\/span> <span class=\"br0\">&#123;<\/span> name<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;ColorpickerConfigurated&quot;<\/span><span class=\"sy0\">,<\/span> data<span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; colorpicker<span class=\"sy0\">:<\/span> <span class=\"kw2\">null<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; props<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; options<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"kw4\">Object<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; required<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; mounted<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">this<\/span>.<span class=\"me1\">colorpicker<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> ColorpickerDHX<span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.$refs.<span class=\"me1\">colorpicker<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;pickerOnly<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; beforeDestroy<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">colorpicker<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; <span class=\"kw1\">this<\/span>.<span class=\"me1\">colorpicker<\/span>.<span class=\"me1\">destructor<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"co1\">\/\/ ]]&gt;&lt;\/script&gt;<\/span><\/div><\/div>\n<p><a href=\"https:\/\/github.com\/DHTMLX\/vue-suite-demo\" target=\"_blank\" rel=\"noopener\">View full source code &gt;<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7417\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/06\/Picker-mode-of-DHTMLX-Vue.js-Colorpicker.png\" alt=\"Picker mode of DHTMLX Vue.js Colorpicker\" width=\"238\" height=\"255\" \/><\/p>\n<p>Our Vue.js examples are intended for faster development of web applications based on Suite UI components. You can <strong><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/download.shtml\" target=\"_blank\" rel=\"noopener\">try our UI library for free<\/a><\/strong> during a 30-day evaluation period. Our official technical support team will provide you with guidance if any questions arise.<\/p>\n<h6>Related Materials:<\/h6>\n<ul>\n<li><a href=\"https:\/\/github.com\/DHTMLX\/react-suite-demo\" target=\"_blank\" rel=\"noopener\">UI components with React<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/DHTMLX\/angular-suite-demo\" target=\"_blank\" rel=\"noopener\">UI components with Angular<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/DHTMLX\/vue-suite-demo\" target=\"_blank\" rel=\"noopener\">UI components with Vue.js<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/\" target=\"_blank\" rel=\"noopener\">JavaScript UI widgets<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8230;<\/p>\n","protected":false},"author":101012,"featured_media":7419,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,1],"tags":[33,10,55],"class_list":["post-7411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-uncategorized","tag-all-posts","tag-dhtmlxsuite","tag-vue-js"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/7411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101012"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=7411"}],"version-history":[{"count":14,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/7411\/revisions"}],"predecessor-version":[{"id":15769,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/7411\/revisions\/15769"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/7419"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=7411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=7411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=7411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}