{"id":22750267,"url":"https://github.com/webix-hub/webix-vue","last_synced_at":"2025-09-09T12:44:37.794Z","repository":{"id":143926947,"uuid":"82052529","full_name":"webix-hub/webix-vue","owner":"webix-hub","description":"Adapter to use Webix with Vue","archived":false,"fork":false,"pushed_at":"2023-07-06T20:55:53.000Z","size":90,"stargazers_count":19,"open_issues_count":2,"forks_count":3,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-04-25T23:20:44.171Z","etag":null,"topics":["vue","webix","webix-integration"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webix-hub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-02-15T11:17:16.000Z","updated_at":"2023-12-15T12:58:08.000Z","dependencies_parsed_at":"2023-06-14T17:00:07.704Z","dependency_job_id":null,"html_url":"https://github.com/webix-hub/webix-vue","commit_stats":{"total_commits":19,"total_committers":4,"mean_commits":4.75,"dds":0.5263157894736843,"last_synced_commit":"62cae666571f93afb5676be3df09652745d465e0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Fwebix-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Fwebix-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Fwebix-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Fwebix-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webix-hub","download_url":"https://codeload.github.com/webix-hub/webix-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248886296,"owners_count":21177643,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vue","webix","webix-integration"],"created_at":"2024-12-11T04:13:23.428Z","updated_at":"2025-09-09T12:44:37.657Z","avatar_url":"https://github.com/webix-hub.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VueJS adapter for Webix UI\n\n[![npm version](https://badge.fury.io/js/vue-webix.svg)](https://badge.fury.io/js/vue-webix)\n\nSee the [detailed documentation on integration of Webix with VueJS](http://docs.webix.com/desktop__vue.html).\n\nIf you need a framework for using Webix UI, we highly recommend you use the [Webix Jet](https://webix.gitbook.io/webix-jet) framework for building web apps with Webix, as it is native for the library and will help you to manage the development stages in the most natural way.\n\n## When to Use Vue+Webix integration\n\n- to add a few complex widgets to a VueJS-based apps (such as datatable, spreadsheet, etc.)\n- to use a VueJS app inside of Webix UI (reactive templates, custom forms, etc.)\n\nYou can also create a custom component by wrapping a Webix widget into a Vue component or use one of ready-made Vue+Webix Form controls.\n\n## webix-ui component in a Vue app\n\nThis techique allows adding a Webix component in a Vue-based app\n\n### Rendering a Webix view\n\n- create a Vue app\n- use the tag \u003c webix-ui \u003e inside of the Vue template to define a Webix widget\n- specify an object with the Webix UI configuration inside of the data object of the Vue instance\n- bind the \"config\" attribute of \u003c webix-ui \u003e to the data object that contains the UI configuration via the v-bind directive\n\nIn the example below we add a Calendar and a List Webix views to a Vue application:\n\n```js\nconst app = Vue.createApp({\n  template: `\n    \u003cdiv style=\"width:400px; height: 350px;\"\u003e\n        \u003ch3\u003e1. Building UI\u003c/h3\u003e\n        \u003cwebix-ui :config='ui'/\u003e\n    \u003c/div\u003e\n  `,\n  data() {\n    return {\n      ui: {\n        cols: [\n          {\n            view: \"calendar\",\n          },\n          {\n            view: \"list\",\n            select: true,\n            data,\n          },\n        ],\n      },\n    };\n  }\n});\n\napp.component(...); // init webix-ui component\n\napp.mount(\"#demo1\");\n```\n\n### Data binding\n\nIt's possible to bind data of a Webix widget and a Vue template using a common Vue technique: the _v-bind_ directive.\n\nIn the example below we add a Webix DataTable widget into a Vue app and add a button by click on which data in the datatable will be cleared:\n\n```js\nconst app = Vue.createApp({\n    template: `\n      \u003cdiv style=\"width:400px; height: 250px;\"\u003e\n          \u003ch3\u003e2. One way data binding,\n              \u003cbutton v-on:click=\"data=[]\"\u003eClean\u003c/button\u003e\n          \u003c/h3\u003e\n          \u003cwebix-ui :config='ui' v-bind:modelValue='data'/\u003e\n      \u003c/div\u003e\n    `,\n    data() {\n      return {\n        data,\n        ui: {\n          view: \"datatable\",\n          autoheight: true,\n          select: \"row\",\n          columns:[\n              {\n                id: \"value\",\n                header: \"Section Index\"\n              },\n              ...\n          ]\n        }\n      };\n    }\n});\n\napp.component(...); // init webix-ui component\n\napp.mount(\"#demo2\");\n```\n\n### Two-way data binding\n\nYou can also implement two-way data binding using the regular _v-model_ Vue directive.\n\nFor example, we can create a Vue template with an input element and add a \u003c webix-ui \u003e element that will render a Webix Layout with a Slider inside. If a value is changed in an input or a slider, it will automatically get updated in the other component. See the code below:\n\n```js\nconst app = Vue.createApp({\n  template: `\n    \u003cdiv style=\"width:400px; height: 250px;\"\u003e\n      \u003ch3\u003e3. Two-way data binding, try to change \u003cinput v-model.number='result'\u003e\u003c/h3\u003e\n      \u003cwebix-ui :config='ui' v-model.number='result'/\u003e\n    \u003c/div\u003e\n  `,\n  data() {\n    return {\n      result: 50,\n      ui: {\n        margin: 20,\n        rows: [\n          {\n            view: \"template\",\n            type: \"header\",\n            template: \"Webix UI\",\n          },\n          {\n            view: \"slider\",\n            label: \"Change me\",\n            labelWidth: 120,\n            inputWidth: 300,\n            value: 50,\n            on: {\n              onChange() {\n                this.$scope.$emit(\"update:modelValue\", this.getValue());\n              },\n              onValue(value) {\n                this.setValue(value);\n              },\n            },\n          },\n        ],\n      },\n    };\n  }\n});\n\napp.component(...); // init webix-ui component\n\napp.mount(\"#demo3\");\n```\n\n## view: \"vue\" in a Webix app\n\nThis technique allows adding a Vue component to a Webix-based app.\n\nFor example, we have a Webix Layout with a List view and we want to display a data item in a template depending on the selected List item.\nThe code sample below shows how a Webix List and a Vue template can be bound together:\n\n```js\nconst list = {\n  view: \"list\",\n  id: \"list\",\n  select: true,\n  template: \"#value# (#size#)\",\n  data: [\n      { id: 1, value: \"Record 1\", size: 92 },\n      ...\n  ]\n};\n\nconst preview = {\n    view: \"vue\",\n    id: \"preview\",\n    template: `\n      \u003cdiv\u003e\n          \u003cp\u003eThis part is rendered by VueJS, data from the list\u003c/p\u003e\n          \u003cdiv v-if='value'\u003e\n              \u003cp\u003eSelected: \u003c/p\u003e\n              \u003cp\u003eSize: \u003cinput v-model='size'\u003e\u003c/p\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n    `,\n    data: {\n      value: \"\",\n      size: \"\"\n    },\n    watch: {\n      size(value) {\n          $$(\"list\").updateItem($$(\"list\").getSelectedId(), { size: value });\n      }\n    }\n};\n\n$$(\"preview\").bind(\"list\");\n```\n\n## Custom Components\n\nIf you have some UI element which is reused in an app several times or you just don't like storing UI config in data, it is possible to write a custom Vue component around any Webix component.\n\n### Creating a custom component\n\nFor example, we have an input and a slider. We want them to update their values simultaneously.\n\n1. Register a global Vue component using app.component(name,options):\n\n```js\nconst app = Vue.createApp({ ... });\n\napp.component(\"my-slider\", {\n  // component config options\n});\n```\n\n2. Specify the necessary Vue configuration options for the component\n\n```js\napp.component(\"my-slider\", {\n  props: [\"modelValue\"],\n  // always an empty div\n  template: \"\u003cdiv\u003e\u003c/div\u003e\",\n  watch: {\n    // updates component when the bound value changes\n    value: {\n      handler(value) {\n        webix.$$(this.webixId).setValue(value);\n      },\n    },\n  },\n  mounted() {\n    // initializes Webix Slider\n    this.webixId = webix.ui({\n      // container and scope are mandatory, other properties are optional\n      container: this.$el,\n      $scope: this,\n      view: \"slider\",\n      value: this.modelValue,\n    });\n\n    // informs Vue about changed value in case of 2-way data binding\n    $$(this.webixId).attachEvent(\"onChange\", function() {\n      var value = this.getValue();\n      // you can use a custom event here\n      this.$scope.$emit(\"update:modelValue\", value);\n    });\n  },\n  // memory cleaning\n  unmounted() {\n    webix.$$(this.webixId).destructor();\n  },\n});\n```\n\n3. Use the registered component in the Vue component's template as a custom element.\n\nOverall, it would look something like this:\n\n```js\nconst app = Vue.createApp({\n  template: `\n  \u003cdiv style='width:300px;'\u003e\n      \u003ch3\u003eVue + Webix: Custom UI\u003c/h3\u003e\n      \u003cmy-slider v-model.number='progress' /\u003e\n      \u003cdiv\u003e\u003cinput type=\"text\" v-model.number='progress' /\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  `,\n  data: {\n    progress: 50,\n  },\n});\n\napp.component(\"my-slider\", { ... });\n\napp.mount(\"#demo1\");\n```\n\nThe above is an example based on a global Vue component, but this approach is also possible with local components.\n\n### Form controls\n\nThere is also a set of readily available Vue-wrapped Webix Form Controls:\n\n- \u003c webix-text \u003e\n- \u003c webix-datepicker \u003e\n- \u003c webix-colorpicker \u003e\n- \u003c webix-slider \u003e\n- \u003c webix-select \u003e\n- \u003c webix-richselect \u003e\n- \u003c webix-combo \u003e\n- \u003c webix-multicombo \u003e\n- \u003c webix-radio \u003e\n- \u003c webix-segmented \u003e\n- \u003c webix-tabbar \u003e\n- \u003c webix-textarea \u003e\n- \u003c webix-checkbox \u003e\n\nYou can use any of these controls in a Vue application as seen in the code below:\n\n```js\nconst app = Vue.createApp({\n  template: `\n    \u003cdiv style='width:500px'\u003e\n        \u003cfieldset\u003e\n            \u003clegend\u003eUser\u003c/legend\u003e\n            \u003cwebix-text         label='First Name'  v-model.string='fname' /\u003e\n            \u003cwebix-text         label='Last Name'   v-model.string='lname' /\u003e\n            \u003cwebix-datepicker   label='Birthdate'   v-model.date='birthdate' /\u003e\n            \u003cwebix-colorpicker  label='Color'       v-model.string='color' /\u003e\n            \u003cwebix-slider       label='Level'       v-model.number='level' /\u003e\n        \u003c/fieldset\u003e\n    \u003c/div\u003e\n  `,\n  data: {\n    fname: \"Reno\",\n    lname: \"Abrams\",\n    birthdate: new Date(1992, 10, 24),\n    color: \"#aaaff0\",\n    level: 20,\n  },\n});\n\napp.component(...) // register controls\n\napp.mount(\"#demo1\");\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebix-hub%2Fwebix-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebix-hub%2Fwebix-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebix-hub%2Fwebix-vue/lists"}