Vue UI Components for jQWidgets

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Web application built with Vue.js and jQWidgets: https://jqwidgets.github.io/vue-grid/

Prerequisites

Node.js - to verify that you have it installed, run the command node -v in cmd. It will output the current version.

Setup using create-jqwidgets-vue-app

To use a template project with jQWidgets and Vue CLI, please refer to: create-jqwidgets-vue-app
This is the simplest way to get jQWidgets working with Vue.

Setup using Vue CLI

To use the Vue Components with Vue CLI, please refer to: Vue CLI

Events Methods & Properties

I. Events

Event Names in the Vue Components are the same as the Event Names in the jQuery Widgets.
The only thing you need to do is to put "@" before the event name.

II. Methods & Properties

Properties can be set either inline or in the Vue "data" function. Methods should be set inside the "methods" object.

Every widget also have a method setOptions which accepts an object as an argument. This object contains widget settings.

Two Way Data Binding

We often want to both display a data property and update that property when the user makes changes.
Take a look at the following example:

Two-Way Data Binding is available for the following widgets:

• JqxCalendar
• JqxCheckBox
• JqxComboBox
• JqxComplexInput
• JqxDateTimeInput
• JqxDropDownList
• JqxFormattedInput
• JqxInput
• JqxListBox
• JqxMaskedInput
• JqxNumberInput
• JqxPasswordInput
• JqxRadioButton
• JqxRating
• JqxSlider
• JqxSwitchButton
• JqxTextArea