- Notifications
You must be signed in to change notification settings - Fork3
webix-hub/webix-vue
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
See thedetailed documentation on integration of Webix with VueJS.
If you need a framework for using Webix UI, we highly recommend you use theWebix 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.
- to add a few complex widgets to a VueJS-based apps (such as datatable, spreadsheet, etc.)
- to use a VueJS app inside of Webix UI (reactive templates, custom forms, etc.)
You 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.
This techique allows adding a Webix component in a Vue-based app
- create a Vue app
- use the tag < webix-ui > inside of the Vue template to define a Webix widget
- specify an object with the Webix UI configuration inside of the data object of the Vue instance
- bind the "config" attribute of < webix-ui > to the data object that contains the UI configuration via the v-bind directive
In the example below we add a Calendar and a List Webix views to a Vue application:
constapp=Vue.createApp({template:` <div> <h3>1. Building UI</h3> <webix-ui :config='ui'/> </div> `,data(){return{ui:{cols:[{view:"calendar",},{view:"list",select:true, data,},],},};}});app.component(...);// init webix-ui componentapp.mount("#demo1");
It's possible to bind data of a Webix widget and a Vue template using a common Vue technique: thev-bind directive.
In 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:
constapp=Vue.createApp({template:` <div> <h3>2. One way data binding, <button v-on:click="data=[]">Clean</button> </h3> <webix-ui :config='ui' v-bind:modelValue='data'/> </div> `,data(){return{ data,ui:{view:"datatable",autoheight:true,select:"row",columns:[{id:"value",header:"Section Index"}, ...]}};}});app.component(...);// init webix-ui componentapp.mount("#demo2");
You can also implement two-way data binding using the regularv-model Vue directive.
For example, we can create a Vue template with an input element and add a < webix-ui > 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:
constapp=Vue.createApp({template:` <div> <h3>3. Two-way data binding, try to change <input v-model.number='result'></h3> <webix-ui :config='ui' v-model.number='result'/> </div> `,data(){return{result:50,ui:{margin:20,rows:[{view:"template",type:"header",template:"Webix UI",},{view:"slider",label:"Change me",labelWidth:120,inputWidth:300,value:50,on:{onChange(){this.$scope.$emit("update:modelValue",this.getValue());},onValue(value){this.setValue(value);},},},],},};}});app.component(...);// init webix-ui componentapp.mount("#demo3");
This technique allows adding a Vue component to a Webix-based app.
For 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.The code sample below shows how a Webix List and a Vue template can be bound together:
constlist={view:"list",id:"list",select:true,template:"#value# (#size#)",data:[{id:1,value:"Record 1",size:92}, ...]};constpreview={view:"vue",id:"preview",template:` <div> <p>This part is rendered by VueJS, data from the list</p> <div v-if='value'> <p>Selected: </p> <p>Size: <input v-model='size'></p> </div> </div> `,data:{value:"",size:""},watch:{size(value){$$("list").updateItem($$("list").getSelectedId(),{size:value});}}};$$("preview").bind("list");
If 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.
For example, we have an input and a slider. We want them to update their values simultaneously.
- Register a global Vue component using app.component(name,options):
constapp=Vue.createApp({ ...});app.component("my-slider",{// component config options});
- Specify the necessary Vue configuration options for the component
app.component("my-slider",{props:["modelValue"],// always an empty divtemplate:"<div></div>",watch:{// updates component when the bound value changesvalue:{handler(value){webix.$$(this.webixId).setValue(value);},},},mounted(){// initializes Webix Sliderthis.webixId=webix.ui({// container and scope are mandatory, other properties are optionalcontainer:this.$el,$scope:this,view:"slider",value:this.modelValue,});// informs Vue about changed value in case of 2-way data binding$$(this.webixId).attachEvent("onChange",function(){varvalue=this.getValue();// you can use a custom event herethis.$scope.$emit("update:modelValue",value);});},// memory cleaningdestroyed(){webix.$$(this.webixId).destructor();},});
- Use the registered component in the Vue component's template as a custom element.
Overall, it would look something like this:
constapp=Vue.createApp({template:` <div style='width:300px;'> <h3>Vue + Webix: Custom UI</h3> <my-slider v-model.number='progress' /> <div><input type="text" v-model.number='progress' /></div> </div> `,data:{progress:50,},});app.component("my-slider",{ ...});app.mount("#demo1");
The above is an example based on a global Vue component, but this approach is also possible with local components.
There is also a set of readily available Vue-wrapped Webix Form Controls:
- < webix-text >
- < webix-datepicker >
- < webix-colorpicker >
- < webix-slider >
- < webix-select >
- < webix-richselect >
- < webix-combo >
- < webix-multicombo >
- < webix-radio >
- < webix-segmented >
- < webix-tabbar >
- < webix-textarea >
- < webix-checkbox >
You can use any of these controls in a Vue application as seen in the code below:
constapp=Vue.createApp({template:` <div style='width:500px'> <fieldset> <legend>User</legend> <webix-text label='First Name' v-model.string='fname' /> <webix-text label='Last Name' v-model.string='lname' /> <webix-datepicker label='Birthdate' v-model.date='birthdate' /> <webix-colorpicker label='Color' v-model.string='color' /> <webix-slider label='Level' v-model.number='level' /> </fieldset> </div> `,data:{fname:"Reno",lname:"Abrams",birthdate:newDate(1992,10,24),color:"#aaaff0",level:20,},});app.component(...)// register controlsapp.mount("#demo1");