From 952eae8b5619cc05da9cc533ef3d40cc607bf466 Mon Sep 17 00:00:00 2001
From: "www.jQWidgets.com" <info@jqwidgets.com>
Date: Wed, 26 Sep 2018 14:26:45 +0300
Subject: [PATCH] Initial Commit

---
 README.md                                     | 128 ++-
 bargauge/addandremovevalues/App.vue           | 132 +++
 bargauge/addandremovevalues/main.js           |  10 +
 bargauge/addandremovevalues/package.json      |   7 +
 bargauge/autochangevalue/App.vue              |  54 ++
 bargauge/autochangevalue/main.js              |  10 +
 bargauge/autochangevalue/package.json         |   7 +
 bargauge/createComponent/App.vue              |  36 +
 bargauge/createComponent/main.js              |  10 +
 bargauge/createComponent/package.json         |   7 +
 bargauge/customtooltips/App.vue               |  50 +
 bargauge/customtooltips/main.js               |  10 +
 bargauge/customtooltips/package.json          |   7 +
 bargauge/defaultfunctionality/App.vue         |  27 +
 bargauge/defaultfunctionality/main.js         |  10 +
 bargauge/defaultfunctionality/package.json    |   7 +
 bargauge/fluidsize/App.vue                    |  29 +
 bargauge/fluidsize/main.js                    |  10 +
 bargauge/fluidsize/package.json               |   7 +
 bargauge/negativevalues/App.vue               |  33 +
 bargauge/negativevalues/main.js               |  10 +
 bargauge/negativevalues/package.json          |   7 +
 bargauge/sequentialgrowth/App.vue             |  55 ++
 bargauge/sequentialgrowth/main.js             |  10 +
 bargauge/sequentialgrowth/package.json        |   7 +
 bargauge/updatevalues/App.vue                 |  82 ++
 bargauge/updatevalues/main.js                 |  10 +
 bargauge/updatevalues/package.json            |   7 +
 bulletchart/defaultfunctionality/App.vue      |  49 +
 bulletchart/defaultfunctionality/main.js      |  10 +
 bulletchart/defaultfunctionality/package.json |   7 +
 bulletchart/fluidsize/App.vue                 |  48 +
 bulletchart/fluidsize/main.js                 |  10 +
 bulletchart/fluidsize/package.json            |   7 +
 bulletchart/labelsformatting/App.vue          |  64 ++
 bulletchart/labelsformatting/main.js          |  10 +
 bulletchart/labelsformatting/package.json     |   7 +
 bulletchart/multipleranges/App.vue            |  67 ++
 bulletchart/multipleranges/main.js            |  10 +
 bulletchart/multipleranges/package.json       |   7 +
 bulletchart/negativevalues/App.vue            |  33 +
 bulletchart/negativevalues/main.js            |  10 +
 bulletchart/negativevalues/package.json       |   7 +
 bulletchart/rangesstyling/App.vue             |  33 +
 bulletchart/rangesstyling/main.js             |  10 +
 bulletchart/rangesstyling/package.json        |   7 +
 bulletchart/righttoleftlayout/App.vue         |  35 +
 bulletchart/righttoleftlayout/main.js         |  10 +
 bulletchart/righttoleftlayout/package.json    |   7 +
 bulletchart/settings/App.vue                  | 200 ++++
 bulletchart/settings/main.js                  |  10 +
 bulletchart/settings/package.json             |   7 +
 bulletchart/verticalbulletchart/App.vue       |  32 +
 bulletchart/verticalbulletchart/main.js       |  10 +
 bulletchart/verticalbulletchart/package.json  |   7 +
 buttongroup/defaultfunctionality/App.vue      |  50 +
 buttongroup/defaultfunctionality/main.js      |  10 +
 buttongroup/defaultfunctionality/package.json |   7 +
 buttongroup/templates/App.vue                 |  64 ++
 buttongroup/templates/main.js                 |  10 +
 buttongroup/templates/package.json            |   7 +
 buttons/defaultfunctionality/App.vue          |  74 ++
 buttons/defaultfunctionality/main.js          |  10 +
 buttons/defaultfunctionality/package.json     |   7 +
 buttons/fluidsize/App.vue                     |  58 ++
 buttons/fluidsize/main.js                     |  10 +
 buttons/fluidsize/package.json                |   7 +
 buttons/imageposition/App.vue                 |  71 ++
 buttons/imageposition/main.js                 |  10 +
 buttons/imageposition/package.json            |   7 +
 buttons/images/App.vue                        | 377 ++++++++
 buttons/images/main.js                        |  10 +
 buttons/images/package.json                   |   7 +
 buttons/righttoleftlayout/App.vue             |  58 ++
 buttons/righttoleftlayout/main.js             |  10 +
 buttons/righttoleftlayout/package.json        |   7 +
 buttons/templates/App.vue                     |  25 +
 buttons/templates/main.js                     |  10 +
 buttons/templates/package.json                |   7 +
 buttons/textposition/App.vue                  |  56 ++
 buttons/textposition/main.js                  |  10 +
 buttons/textposition/package.json             |   7 +
 calendar/defaultfunctionality/App.vue         |  16 +
 calendar/defaultfunctionality/main.js         |  10 +
 calendar/defaultfunctionality/package.json    |   7 +
 calendar/disabled/App.vue                     |  16 +
 calendar/disabled/main.js                     |  10 +
 calendar/disabled/package.json                |   7 +
 calendar/displayweekendsstyle/App.vue         |  19 +
 calendar/displayweekendsstyle/main.js         |  10 +
 calendar/displayweekendsstyle/package.json    |   7 +
 calendar/events/App.vue                       |  46 +
 calendar/events/main.js                       |  10 +
 calendar/events/package.json                  |   7 +
 calendar/firstdayoftheweek/App.vue            |  47 +
 calendar/firstdayoftheweek/main.js            |  10 +
 calendar/firstdayoftheweek/package.json       |   7 +
 calendar/fluidsize/App.vue                    |  27 +
 calendar/fluidsize/main.js                    |  10 +
 calendar/fluidsize/package.json               |   7 +
 calendar/hideothermonthdays/App.vue           |  16 +
 calendar/hideothermonthdays/main.js           |  10 +
 calendar/hideothermonthdays/package.json      |   7 +
 calendar/keyboardnavigation/App.vue           |  31 +
 calendar/keyboardnavigation/main.js           |  10 +
 calendar/keyboardnavigation/package.json      |   7 +
 calendar/localization/App.vue                 |  81 ++
 calendar/localization/main.js                 |  10 +
 calendar/localization/package.json            |   7 +
 calendar/rangeselection/App.vue               |  41 +
 calendar/rangeselection/main.js               |  10 +
 calendar/rangeselection/package.json          |   7 +
 calendar/restrictdaterange/App.vue            |  28 +
 calendar/restrictdaterange/main.js            |  10 +
 calendar/restrictdaterange/package.json       |   7 +
 calendar/restricteddates/App.vue              |  33 +
 calendar/restricteddates/main.js              |  10 +
 calendar/restricteddates/package.json         |   7 +
 calendar/righttoleftlayout/App.vue            |  19 +
 calendar/righttoleftlayout/main.js            |  10 +
 calendar/righttoleftlayout/package.json       |   7 +
 calendar/showweekoftheyear/App.vue            |  19 +
 calendar/showweekoftheyear/main.js            |  10 +
 calendar/showweekoftheyear/package.json       |   7 +
 calendar/specialdates/App.vue                 |  32 +
 calendar/specialdates/main.js                 |  10 +
 calendar/specialdates/package.json            |   7 +
 calendar/twowaydatabinding/App.vue            |  22 +
 calendar/twowaydatabinding/main.js            |  10 +
 calendar/twowaydatabinding/package.json       |   7 +
 chart/100stackedareaseries/App.vue            |  77 ++
 chart/100stackedareaseries/main.js            |  10 +
 chart/100stackedareaseries/package.json       |   7 +
 chart/100stackedcolumns/App.vue               |  77 ++
 chart/100stackedcolumns/main.js               |  10 +
 chart/100stackedcolumns/package.json          |   7 +
 chart/100stackedlineseries/App.vue            |  81 ++
 chart/100stackedlineseries/main.js            |  10 +
 chart/100stackedlineseries/package.json       |   7 +
 chart/alternatingbackgroundcolor/App.vue      | 114 +++
 chart/alternatingbackgroundcolor/main.js      |  10 +
 chart/alternatingbackgroundcolor/package.json |   7 +
 chart/areaseries/App.vue                      |  77 ++
 chart/areaseries/main.js                      |  10 +
 chart/areaseries/package.json                 |   7 +
 chart/areasplineseries/App.vue                |  95 ++
 chart/areasplineseries/main.js                |  10 +
 chart/areasplineseries/package.json           |   7 +
 chart/axiscustomoffsets/App.vue               | 220 +++++
 chart/axiscustomoffsets/main.js               |  10 +
 chart/axiscustomoffsets/package.json          |   7 +
 chart/axiscustomoffsetsandcolorbands/App.vue  |  91 ++
 chart/axiscustomoffsetsandcolorbands/main.js  |  10 +
 .../package.json                              |   7 +
 chart/axisoffsettovalue/App.vue               | 112 +++
 chart/axisoffsettovalue/main.js               |  10 +
 chart/axisoffsettovalue/package.json          |   7 +
 chart/axisorientation/App.vue                 |  87 ++
 chart/axisorientation/main.js                 |  10 +
 chart/axisorientation/package.json            |   7 +
 chart/axisposition/App.vue                    | 113 +++
 chart/axisposition/main.js                    |  10 +
 chart/axisposition/package.json               |   7 +
 chart/axissettings/App.vue                    | 252 +++++
 chart/axissettings/main.js                    |  10 +
 chart/axissettings/package.json               |   7 +
 chart/barseries/App.vue                       |  59 ++
 chart/barseries/main.js                       |  10 +
 chart/barseries/package.json                  |   7 +
 chart/bublechart/App.vue                      |  99 ++
 chart/bublechart/main.js                      |  10 +
 chart/bublechart/package.json                 |   7 +
 chart/candlestickchart/App.vue                | 135 +++
 chart/candlestickchart/main.js                |  10 +
 chart/candlestickchart/package.json           |   7 +
 chart/chartannotations/App.vue                | 149 +++
 chart/chartannotations/main.js                |  10 +
 chart/chartannotations/package.json           |   7 +
 chart/chartcrosshairs/App.vue                 |  72 ++
 chart/chartcrosshairs/main.js                 |  10 +
 chart/chartcrosshairs/package.json            |   7 +
 chart/chartevents/App.vue                     |  84 ++
 chart/chartevents/main.js                     |  10 +
 chart/chartevents/package.json                |   7 +
 chart/chartprinting/App.vue                   | 106 ++
 chart/chartprinting/main.js                   |  10 +
 chart/chartprinting/package.json              |   7 +
 chart/chartrangeselectorevents/App.vue        | 160 ++++
 chart/chartrangeselectorevents/main.js        |  10 +
 chart/chartrangeselectorevents/package.json   |   7 +
 chart/chartwithgrid/App.vue                   |  98 ++
 chart/chartwithgrid/main.js                   |  10 +
 chart/chartwithgrid/package.json              |   7 +
 chart/chartwithtabs/App.vue                   | 193 ++++
 chart/chartwithtabs/main.js                   |  10 +
 chart/chartwithtabs/package.json              |   7 +
 chart/colorbands/App.vue                      |  80 ++
 chart/colorbands/main.js                      |  10 +
 chart/colorbands/package.json                 |   7 +
 chart/colorbandsxaxis/App.vue                 |  97 ++
 chart/colorbandsxaxis/main.js                 |  10 +
 chart/colorbandsxaxis/package.json            |   7 +
 chart/columnlocaldata/App.vue                 |  64 ++
 chart/columnlocaldata/main.js                 |  10 +
 chart/columnlocaldata/package.json            |   7 +
 chart/columnrange/App.vue                     |  86 ++
 chart/columnrange/main.js                     |  10 +
 chart/columnrange/package.json                |   7 +
 chart/columnseries/App.vue                    |  78 ++
 chart/columnseries/main.js                    |  10 +
 chart/columnseries/package.json               |   7 +
 chart/columnseriesspacing/App.vue             | 272 ++++++
 chart/columnseriesspacing/main.js             |  10 +
 chart/columnseriesspacing/package.json        |   7 +
 chart/columnserieswithlabels/App.vue          |  82 ++
 chart/columnserieswithlabels/main.js          |  10 +
 chart/columnserieswithlabels/package.json     |   7 +
 chart/columnserieswithmissingvalues/App.vue   |  75 ++
 chart/columnserieswithmissingvalues/main.js   |  10 +
 .../package.json                              |   7 +
 .../columnseriewithconditionalcolors/App.vue  |  91 ++
 .../columnseriewithconditionalcolors/main.js  |  10 +
 .../package.json                              |   7 +
 chart/columnsrange/App.vue                    |  62 ++
 chart/columnsrange/main.js                    |  10 +
 chart/columnsrange/package.json               |   7 +
 .../columnswithbase10logarithmicaxis/App.vue  |  66 ++
 .../columnswithbase10logarithmicaxis/main.js  |  10 +
 .../package.json                              |   7 +
 chart/columnswithlogarithmicaxis/App.vue      |  67 ++
 chart/columnswithlogarithmicaxis/main.js      |  10 +
 chart/columnswithlogarithmicaxis/package.json |   7 +
 chart/createComponent/App.vue                 |  90 ++
 chart/createComponent/main.js                 |  10 +
 chart/createComponent/package.json            |   7 +
 chart/customdrawing/App.vue                   |  91 ++
 chart/customdrawing/main.js                   |  10 +
 chart/customdrawing/package.json              |   7 +
 chart/customstyling/App.vue                   | 103 ++
 chart/customstyling/main.js                   |  10 +
 chart/customstyling/package.json              |   7 +
 chart/darkbackground/App.vue                  | 128 +++
 chart/darkbackground/main.js                  |  10 +
 chart/darkbackground/package.json             |   7 +
 chart/dashboard/App.vue                       | 226 +++++
 chart/dashboard/main.js                       |  10 +
 chart/dashboard/package.json                  |   7 +
 chart/datetimexaxisrangeselection/App.vue     | 104 ++
 chart/datetimexaxisrangeselection/main.js     |  10 +
 .../datetimexaxisrangeselection/package.json  |   7 +
 chart/donutlabels/App.vue                     |  59 ++
 chart/donutlabels/main.js                     |  10 +
 chart/donutlabels/package.json                |   7 +
 chart/donutseries/App.vue                     |  84 ++
 chart/donutseries/main.js                     |  10 +
 chart/donutseries/package.json                |   7 +
 chart/exporttoimage/App.vue                   | 106 ++
 chart/exporttoimage/issue.txt                 |  10 +
 chart/exporttoimage/main.js                   |  10 +
 chart/exporttoimage/package.json              |   7 +
 chart/fluidsize/App.vue                       |  82 ++
 chart/fluidsize/main.js                       |  10 +
 chart/fluidsize/package.json                  |   7 +
 chart/funnelchart/App.vue                     |  63 ++
 chart/funnelchart/main.js                     |  10 +
 chart/funnelchart/package.json                |   7 +
 chart/greyscaleseries/App.vue                 | 117 +++
 chart/greyscaleseries/main.js                 |  10 +
 chart/greyscaleseries/package.json            |   7 +
 chart/gridlinesdashstyle/App.vue              |  79 ++
 chart/gridlinesdashstyle/main.js              |  10 +
 chart/gridlinesdashstyle/package.json         |   7 +
 chart/intervalandsteps/App.vue                | 223 +++++
 chart/intervalandsteps/main.js                |  10 +
 chart/intervalandsteps/package.json           |   7 +
 chart/lineseries/App.vue                      |  84 ++
 chart/lineseries/main.js                      |  10 +
 chart/lineseries/package.json                 |   7 +
 chart/lineseriesmarkers/App.vue               |  83 ++
 chart/lineseriesmarkers/main.js               |  10 +
 chart/lineseriesmarkers/package.json          |   7 +
 chart/lineseriewithconditionalcolors/App.vue  |  84 ++
 chart/lineseriewithconditionalcolors/main.js  |  10 +
 .../package.json                              |   7 +
 chart/lineseriewithmissingpoints/App.vue      |  73 ++
 chart/lineseriewithmissingpoints/main.js      |  10 +
 chart/lineseriewithmissingpoints/package.json |   7 +
 .../lineseriewithmultipledatasources/App.vue  |  99 ++
 .../lineseriewithmultipledatasources/main.js  |  10 +
 .../package.json                              |   7 +
 chart/liveupdates/App.vue                     | 118 +++
 chart/liveupdates/main.js                     |  10 +
 chart/liveupdates/package.json                |   7 +
 chart/liveupdateseverysecond/App.vue          | 130 +++
 chart/liveupdateseverysecond/main.js          |  10 +
 chart/liveupdateseverysecond/package.json     |   7 +
 chart/liveupdatesperformance/App.vue          | 142 +++
 chart/liveupdatesperformance/main.js          |  10 +
 chart/liveupdatesperformance/package.json     |   7 +
 chart/logarithmicXaxis/App.vue                |  61 ++
 chart/logarithmicXaxis/main.js                |  10 +
 chart/logarithmicXaxis/package.json           |   7 +
 chart/logarithmicaxisbaseline/App.vue         |  61 ++
 chart/logarithmicaxisbaseline/main.js         |  10 +
 chart/logarithmicaxisbaseline/package.json    |   7 +
 chart/logarithmicwaterfallseries/App.vue      |  63 ++
 chart/logarithmicwaterfallseries/main.js      |  10 +
 chart/logarithmicwaterfallseries/package.json |   7 +
 chart/multipleseriestypes/App.vue             |  81 ++
 chart/multipleseriestypes/main.js             |  10 +
 chart/multipleseriestypes/package.json        |   7 +
 chart/negativebarseries/App.vue               |  58 ++
 chart/negativebarseries/main.js               |  10 +
 chart/negativebarseries/package.json          |   7 +
 chart/negativevalues/App.vue                  |  70 ++
 chart/negativevalues/main.js                  |  10 +
 chart/negativevalues/package.json             |   7 +
 chart/nondatexaxisrangeselection/App.vue      |  76 ++
 chart/nondatexaxisrangeselection/main.js      |  10 +
 chart/nondatexaxisrangeselection/package.json |   7 +
 chart/ohlcchart/App.vue                       | 142 +++
 chart/ohlcchart/main.js                       |  10 +
 chart/ohlcchart/package.json                  |   7 +
 chart/partialpieseries/App.vue                | 127 +++
 chart/partialpieseries/main.js                |  10 +
 chart/partialpieseries/package.json           |   7 +
 chart/partialpolarchart/App.vue               | 156 +++
 chart/partialpolarchart/main.js               |  10 +
 chart/partialpolarchart/package.json          |   7 +
 chart/percentagestackedcolumns/App.vue        |  61 ++
 chart/percentagestackedcolumns/main.js        |  10 +
 chart/percentagestackedcolumns/package.json   |   7 +
 chart/pieseries/App.vue                       |  55 ++
 chart/pieseries/main.js                       |  10 +
 chart/pieseries/package.json                  |   7 +
 chart/pieserieslegend/App.vue                 |  64 ++
 chart/pieserieslegend/main.js                 |  10 +
 chart/pieserieslegend/package.json            |   7 +
 chart/polarseries/App.vue                     | 143 +++
 chart/polarseries/main.js                     |  10 +
 chart/polarseries/package.json                |   7 +
 chart/polarseriesbands/App.vue                | 171 ++++
 chart/polarseriesbands/main.js                |  10 +
 chart/polarseriesbands/package.json           |   7 +
 chart/pyramidchart/App.vue                    |  63 ++
 chart/pyramidchart/main.js                    |  10 +
 chart/pyramidchart/package.json               |   7 +
 chart/rigthtoleftlayout/App.vue               |  76 ++
 chart/rigthtoleftlayout/main.js               |  10 +
 chart/rigthtoleftlayout/package.json          |   7 +
 chart/scatterchart/App.vue                    | 102 ++
 chart/scatterchart/main.js                    |  10 +
 chart/scatterchart/package.json               |   7 +
 chart/sparklines/App.vue                      | 108 +++
 chart/sparklines/main.js                      |  10 +
 chart/sparklines/package.json                 |   7 +
 chart/spiderchart/App.vue                     | 189 ++++
 chart/spiderchart/main.js                     |  10 +
 chart/spiderchart/package.json                |   7 +
 chart/splinearea/App.vue                      |  53 +
 chart/splinearea/main.js                      |  10 +
 chart/splinearea/package.json                 |   7 +
 chart/splineseries/App.vue                    |  99 ++
 chart/splineseries/main.js                    |  10 +
 chart/splineseries/package.json               |   7 +
 chart/stackedandgroupedcolumnseries/App.vue   |  80 ++
 chart/stackedandgroupedcolumnseries/main.js   |  10 +
 .../package.json                              |   7 +
 chart/stackedareaseries/App.vue               |  73 ++
 chart/stackedareaseries/main.js               |  10 +
 chart/stackedareaseries/package.json          |   7 +
 chart/stackedcolumns/App.vue                  |  56 ++
 chart/stackedcolumns/main.js                  |  10 +
 chart/stackedcolumns/package.json             |   7 +
 chart/stackedcolumnseries/App.vue             |  72 ++
 chart/stackedcolumnseries/main.js             |  10 +
 chart/stackedcolumnseries/package.json        |   7 +
 chart/stackedfunnelchart/App.vue              |  65 ++
 chart/stackedfunnelchart/main.js              |  10 +
 chart/stackedfunnelchart/package.json         |   7 +
 chart/stackedlineseries/App.vue               |  76 ++
 chart/stackedlineseries/main.js               |  10 +
 chart/stackedlineseries/package.json          |   7 +
 chart/stackedpyramidchart/App.vue             |  66 ++
 chart/stackedpyramidchart/main.js             |  10 +
 chart/stackedpyramidchart/package.json        |   7 +
 chart/stackedwaterfallseries/App.vue          |  60 ++
 chart/stackedwaterfallseries/main.js          |  10 +
 chart/stackedwaterfallseries/package.json     |   7 +
 chart/steplineseries/App.vue                  |  81 ++
 chart/steplineseries/main.js                  |  10 +
 chart/steplineseries/package.json             |   7 +
 chart/textrotation/App.vue                    |  68 ++
 chart/textrotation/main.js                    |  10 +
 chart/textrotation/package.json               |   7 +
 chart/textwrapping/App.vue                    |  93 ++
 chart/textwrapping/main.js                    |  10 +
 chart/textwrapping/package.json               |   7 +
 chart/themes/App.vue                          | 132 +++
 chart/themes/main.js                          |  10 +
 chart/themes/package.json                     |   7 +
 chart/tooltipformatting/App.vue               |  87 ++
 chart/tooltipformatting/main.js               |  10 +
 chart/tooltipformatting/package.json          |   7 +
 chart/waterfallseries/App.vue                 |  86 ++
 chart/waterfallseries/main.js                 |  10 +
 chart/waterfallseries/package.json            |   7 +
 chart/waterfallwithmultipleseries/App.vue     | 103 ++
 chart/waterfallwithmultipleseries/main.js     |  10 +
 .../waterfallwithmultipleseries/package.json  |   7 +
 checkbox/defaultfunctionality/App.vue         | 115 +++
 checkbox/defaultfunctionality/main.js         |  10 +
 checkbox/defaultfunctionality/package.json    |   7 +
 checkbox/twowaydatabinding/App.vue            |  26 +
 checkbox/twowaydatabinding/main.js            |  10 +
 checkbox/twowaydatabinding/package.json       |   7 +
 colorpicker/defaultfunctionality/App.vue      |  88 ++
 colorpicker/defaultfunctionality/main.js      |  10 +
 colorpicker/defaultfunctionality/package.json |   7 +
 colorpicker/settings/App.vue                  |  50 +
 colorpicker/settings/main.js                  |  10 +
 colorpicker/settings/package.json             |   7 +
 combobox/animation/App.vue                    |  82 ++
 combobox/animation/main.js                    |  10 +
 combobox/animation/package.json               |   7 +
 combobox/bindingtojson/App.vue                |  56 ++
 combobox/bindingtojson/main.js                |  10 +
 combobox/bindingtojson/package.json           |   7 +
 combobox/bindingtoremotedata/App.vue          |  63 ++
 combobox/bindingtoremotedata/main.js          |  10 +
 combobox/bindingtoremotedata/package.json     |   7 +
 combobox/bindingtoxml/App.vue                 |  58 ++
 combobox/bindingtoxml/main.js                 |  10 +
 combobox/bindingtoxml/package.json            |   7 +
 combobox/cascadingcomboboxes/App.vue          | 128 +++
 combobox/cascadingcomboboxes/main.js          |  10 +
 combobox/cascadingcomboboxes/package.json     |   7 +
 combobox/categories/App.vue                   |  38 +
 combobox/categories/main.js                   |  10 +
 combobox/categories/package.json              |   7 +
 combobox/checkboxes/App.vue                   |  75 ++
 combobox/checkboxes/main.js                   |  10 +
 combobox/checkboxes/package.json              |   7 +
 combobox/createComponent/App.vue              |  91 ++
 combobox/createComponent/main.js              |  10 +
 combobox/createComponent/package.json         |   7 +
 combobox/customrendering/App.vue              |  88 ++
 combobox/customrendering/main.js              |  10 +
 combobox/customrendering/package.json         |   7 +
 combobox/defaultfunctionality/App.vue         |  88 ++
 combobox/defaultfunctionality/main.js         |  10 +
 combobox/defaultfunctionality/package.json    |   7 +
 combobox/dropdownhorizontalalignment/App.vue  |  62 ++
 combobox/dropdownhorizontalalignment/main.js  |  10 +
 .../dropdownhorizontalalignment/package.json  |   7 +
 combobox/dropdownverticalalignment/App.vue    |  63 ++
 combobox/dropdownverticalalignment/main.js    |  10 +
 .../dropdownverticalalignment/package.json    |   7 +
 combobox/events/App.vue                       |  88 ++
 combobox/events/main.js                       |  10 +
 combobox/events/package.json                  |   7 +
 combobox/fluidsize/App.vue                    |  62 ++
 combobox/fluidsize/main.js                    |  10 +
 combobox/fluidsize/package.json               |   7 +
 combobox/keyboardnavigation/App.vue           | 267 ++++++
 combobox/keyboardnavigation/main.js           |  10 +
 combobox/keyboardnavigation/package.json      |   7 +
 combobox/multiselect/App.vue                  |  50 +
 combobox/multiselect/main.js                  |  10 +
 combobox/multiselect/package.json             |   7 +
 combobox/righttoleftlayout/App.vue            | 255 +++++
 combobox/righttoleftlayout/main.js            |  10 +
 combobox/righttoleftlayout/package.json       |   7 +
 combobox/settings/App.vue                     | 164 ++++
 combobox/settings/main.js                     |  10 +
 combobox/settings/package.json                |   7 +
 combobox/templates/App.vue                    |  84 ++
 combobox/templates/main.js                    |  10 +
 combobox/templates/package.json               |   7 +
 combobox/twowaydatabinding/App.vue            |  37 +
 combobox/twowaydatabinding/main.js            |  10 +
 combobox/twowaydatabinding/package.json       |   7 +
 complexinput/changeevent/App.vue              |  42 +
 complexinput/changeevent/main.js              |  10 +
 complexinput/changeevent/package.json         |   7 +
 complexinput/defaultfunctionality/App.vue     |  48 +
 complexinput/defaultfunctionality/main.js     |  10 +
 .../defaultfunctionality/package.json         |   7 +
 complexinput/exponentialnotation/App.vue      | 142 +++
 complexinput/exponentialnotation/main.js      |  10 +
 complexinput/exponentialnotation/package.json |   7 +
 complexinput/fluidsize/App.vue                |  18 +
 complexinput/fluidsize/main.js                |  10 +
 complexinput/fluidsize/package.json           |   7 +
 complexinput/spinbuttons/App.vue              |  19 +
 complexinput/spinbuttons/main.js              |  10 +
 complexinput/spinbuttons/package.json         |   7 +
 complexinput/twowaydatabinding/App.vue        |  22 +
 complexinput/twowaydatabinding/main.js        |  10 +
 complexinput/twowaydatabinding/package.json   |   7 +
 complexinput/validation/App.vue               |  34 +
 complexinput/validation/main.js               |  10 +
 complexinput/validation/package.json          |   7 +
 datatable/advancedfiltering/App.vue           |  51 +
 datatable/advancedfiltering/main.js           |  10 +
 datatable/advancedfiltering/package.json      |   7 +
 datatable/aggregates/App.vue                  |  50 +
 datatable/aggregates/main.js                  |  10 +
 datatable/aggregates/package.json             |   7 +
 datatable/aggregatestemplate/App.vue          |  64 ++
 datatable/aggregatestemplate/main.js          |  10 +
 datatable/aggregatestemplate/package.json     |   7 +
 datatable/celledit/App.vue                    | 106 ++
 datatable/celledit/main.js                    |  10 +
 datatable/celledit/package.json               |   7 +
 datatable/columnalignment/App.vue             | 109 +++
 datatable/columnalignment/main.js             |  10 +
 datatable/columnalignment/package.json        |   7 +
 datatable/columnformatting/App.vue            | 153 +++
 datatable/columnformatting/main.js            |  10 +
 datatable/columnformatting/package.json       |   7 +
 datatable/columnreorder/App.vue               |  51 +
 datatable/columnreorder/main.js               |  10 +
 datatable/columnreorder/package.json          |   7 +
 datatable/columnresize/App.vue                |  51 +
 datatable/columnresize/main.js                |  10 +
 datatable/columnresize/package.json           |   7 +
 datatable/columnshierarchy/App.vue            |  59 ++
 datatable/columnshierarchy/main.js            |  10 +
 datatable/columnshierarchy/package.json       |   7 +
 datatable/columntemplate/App.vue              | 128 +++
 datatable/columntemplate/main.js              |  10 +
 datatable/columntemplate/package.json         |   7 +
 datatable/conditionalformatting/App.vue       | 107 +++
 datatable/conditionalformatting/main.js       |  10 +
 datatable/conditionalformatting/package.json  |   7 +
 datatable/createComponent/App.vue             |  56 ++
 datatable/createComponent/main.js             |  10 +
 datatable/createComponent/package.json        |   7 +
 datatable/csvdata/App.vue                     |  40 +
 datatable/csvdata/main.js                     |  10 +
 datatable/csvdata/package.json                |   7 +
 datatable/customeditors/App.vue               | 153 +++
 datatable/customeditors/main.js               |  10 +
 datatable/customeditors/package.json          |   7 +
 datatable/dataexport/App.vue                  | 105 ++
 datatable/dataexport/main.js                  |  10 +
 datatable/dataexport/package.json             |   7 +
 datatable/dataprinting/App.vue                |  78 ++
 datatable/dataprinting/main.js                |  10 +
 datatable/dataprinting/package.json           |   7 +
 datatable/defaultfunctionality/App.vue        | 148 +++
 datatable/defaultfunctionality/main.js        |  10 +
 datatable/defaultfunctionality/package.json   |   7 +
 datatable/dialog/App.vue                      | 164 ++++
 datatable/dialog/main.js                      |  10 +
 datatable/dialog/package.json                 |   7 +
 datatable/filtering/App.vue                   |  50 +
 datatable/filtering/main.js                   |  10 +
 datatable/filtering/package.json              |   7 +
 datatable/filteringapi/App.vue                | 184 ++++
 datatable/filteringapi/main.js                |  10 +
 datatable/filteringapi/package.json           |   7 +
 datatable/fluidsize/App.vue                   |  51 +
 datatable/fluidsize/main.js                   |  10 +
 datatable/fluidsize/package.json              |   7 +
 datatable/grouping/App.vue                    |  57 ++
 datatable/grouping/main.js                    |  10 +
 datatable/grouping/package.json               |   7 +
 datatable/groupingserverpaging/App.vue        |  78 ++
 datatable/groupingserverpaging/main.js        |  10 +
 datatable/groupingserverpaging/package.json   |   7 +
 datatable/headertemplate/App.vue              | 177 ++++
 datatable/headertemplate/main.js              |  10 +
 datatable/headertemplate/package.json         |   7 +
 datatable/inlinerow/App.vue                   | 246 +++++
 datatable/inlinerow/main.js                   |  10 +
 datatable/inlinerow/package.json              |   7 +
 datatable/jsondata/App.vue                    |  46 +
 datatable/jsondata/main.js                    |  10 +
 datatable/jsondata/package.json               |   7 +
 datatable/keyboardnavigation/App.vue          |  74 ++
 datatable/keyboardnavigation/main.js          |  10 +
 datatable/keyboardnavigation/package.json     |   7 +
 datatable/localdata/App.vue                   |  47 +
 datatable/localdata/main.js                   |  10 +
 datatable/localdata/package.json              |   7 +
 datatable/localization/App.vue                |  48 +
 datatable/localization/main.js                |  10 +
 datatable/localization/package.json           |   7 +
 datatable/lockrow/App.vue                     |  60 ++
 datatable/lockrow/main.js                     |  10 +
 datatable/lockrow/package.json                |   7 +
 datatable/nestedtables/App.vue                | 128 +++
 datatable/nestedtables/main.js                |  10 +
 datatable/nestedtables/package.json           |   7 +
 datatable/paging/App.vue                      |  44 +
 datatable/paging/main.js                      |  10 +
 datatable/paging/package.json                 |   7 +
 datatable/pagingapi/App.vue                   | 142 +++
 datatable/pagingapi/main.js                   |  10 +
 datatable/pagingapi/package.json              |   7 +
 datatable/pinnedfrozencolumn/App.vue          |  47 +
 datatable/pinnedfrozencolumn/main.js          |  10 +
 datatable/pinnedfrozencolumn/package.json     |   7 +
 datatable/remotedata/App.vue                  |  52 +
 datatable/remotedata/main.js                  |  10 +
 datatable/remotedata/package.json             |   7 +
 datatable/righttoleftlayout/App.vue           |  47 +
 datatable/righttoleftlayout/main.js           |  10 +
 datatable/righttoleftlayout/package.json      |   7 +
 datatable/rowdetails/App.vue                  | 172 ++++
 datatable/rowdetails/main.js                  |  10 +
 datatable/rowdetails/package.json             |   7 +
 datatable/rowselectionhover/App.vue           | 149 +++
 datatable/rowselectionhover/main.js           |  10 +
 datatable/rowselectionhover/package.json      |   7 +
 datatable/rowtemplate/App.vue                 | 149 +++
 datatable/rowtemplate/main.js                 |  10 +
 datatable/rowtemplate/package.json            |   7 +
 datatable/searchfield/App.vue                 |  52 +
 datatable/searchfield/main.js                 |  10 +
 datatable/searchfield/package.json            |   7 +
 datatable/separatetables/App.vue              | 151 +++
 datatable/separatetables/main.js              |  10 +
 datatable/separatetables/package.json         |   7 +
 datatable/serverfiltering/App.vue             | 131 +++
 datatable/serverfiltering/main.js             |  10 +
 datatable/serverfiltering/package.json        |   7 +
 datatable/serverpaging/App.vue                |  69 ++
 datatable/serverpaging/main.js                |  10 +
 datatable/serverpaging/package.json           |   7 +
 datatable/serversorting/App.vue               |  75 ++
 datatable/serversorting/main.js               |  10 +
 datatable/serversorting/package.json          |   7 +
 datatable/showorhidecolumn/App.vue            |  67 ++
 datatable/showorhidecolumn/main.js            |  10 +
 datatable/showorhidecolumn/package.json       |   7 +
 datatable/sorting/App.vue                     |  51 +
 datatable/sorting/main.js                     |  10 +
 datatable/sorting/package.json                |   7 +
 datatable/sortingapi/App.vue                  | 107 +++
 datatable/sortingapi/main.js                  |  10 +
 datatable/sortingapi/package.json             |   7 +
 datatable/tsvdata/App.vue                     |  44 +
 datatable/tsvdata/main.js                     |  10 +
 datatable/tsvdata/package.json                |   7 +
 datatable/validation/App.vue                  |  71 ++
 datatable/validation/main.js                  |  10 +
 datatable/validation/package.json             |   7 +
 datatable/xmldata/App.vue                     |  49 +
 datatable/xmldata/main.js                     |  10 +
 datatable/xmldata/package.json                |   7 +
 datetimeinput/animation/App.vue               |  53 +
 datetimeinput/animation/main.js               |  10 +
 datetimeinput/animation/package.json          |   7 +
 datetimeinput/createcomponent/App.vue         |  37 +
 datetimeinput/createcomponent/main.js         |  10 +
 datetimeinput/createcomponent/package.json    |   7 +
 datetimeinput/datetime/App.vue                |  18 +
 datetimeinput/datetime/main.js                |  10 +
 datetimeinput/datetime/package.json           |   7 +
 datetimeinput/defaultfunctionality/App.vue    |  33 +
 datetimeinput/defaultfunctionality/main.js    |  10 +
 .../defaultfunctionality/package.json         |   7 +
 datetimeinput/disabled/App.vue                |  18 +
 datetimeinput/disabled/main.js                |  10 +
 datetimeinput/disabled/package.json           |   7 +
 .../dropdownhorizontalalignment/App.vue       |  45 +
 .../dropdownhorizontalalignment/main.js       |  10 +
 .../dropdownhorizontalalignment/package.json  |   7 +
 .../dropdownverticalalignment/App.vue         |  35 +
 .../dropdownverticalalignment/main.js         |  10 +
 .../dropdownverticalalignment/package.json    |   7 +
 datetimeinput/events/App.vue                  |  46 +
 datetimeinput/events/main.js                  |  10 +
 datetimeinput/events/package.json             |   7 +
 datetimeinput/fluidsize/App.vue               |  18 +
 datetimeinput/fluidsize/main.js               |  10 +
 datetimeinput/fluidsize/package.json          |   7 +
 datetimeinput/formatdate/App.vue              |  78 ++
 datetimeinput/formatdate/main.js              |  10 +
 datetimeinput/formatdate/package.json         |   7 +
 datetimeinput/keyboardnavigation/App.vue      |  48 +
 datetimeinput/keyboardnavigation/main.js      |  10 +
 datetimeinput/keyboardnavigation/package.json |   7 +
 datetimeinput/localization/App.vue            |  84 ++
 datetimeinput/localization/main.js            |  10 +
 datetimeinput/localization/package.json       |   7 +
 datetimeinput/rangeselection/App.vue          |  41 +
 datetimeinput/rangeselection/main.js          |  10 +
 datetimeinput/rangeselection/package.json     |   7 +
 datetimeinput/restrictdaterange/App.vue       |  31 +
 datetimeinput/restrictdaterange/main.js       |  10 +
 datetimeinput/restrictdaterange/package.json  |   7 +
 datetimeinput/righttoleftlayout/App.vue       |  19 +
 datetimeinput/righttoleftlayout/main.js       |  10 +
 datetimeinput/righttoleftlayout/package.json  |   7 +
 datetimeinput/templates/App.vue               |  51 +
 datetimeinput/templates/main.js               |  10 +
 datetimeinput/templates/package.json          |   7 +
 datetimeinput/timeinput/App.vue               |  19 +
 datetimeinput/timeinput/main.js               |  10 +
 datetimeinput/timeinput/package.json          |   7 +
 datetimeinput/twowaydatabinding/App.vue       |  27 +
 datetimeinput/twowaydatabinding/main.js       |  10 +
 datetimeinput/twowaydatabinding/package.json  |   7 +
 docking/defaultfunctionality/App.vue          | 133 +++
 docking/defaultfunctionality/main.js          |  10 +
 docking/defaultfunctionality/package.json     |   7 +
 docking/events/App.vue                        |  84 ++
 docking/events/main.js                        |  10 +
 docking/events/package.json                   |   7 +
 docking/importlayout/App.vue                  |  54 ++
 docking/importlayout/main.js                  |  10 +
 docking/importlayout/package.json             |   7 +
 docking/keyboardnavigation/App.vue            |  64 ++
 docking/keyboardnavigation/main.js            |  10 +
 docking/keyboardnavigation/package.json       |   7 +
 docking/righttoleftlayout/App.vue             | 133 +++
 docking/righttoleftlayout/main.js             |  10 +
 docking/righttoleftlayout/package.json        |   7 +
 docking/settings/App.vue                      | 137 +++
 docking/settings/main.js                      |  10 +
 docking/settings/package.json                 |   7 +
 dockinglayout/createcomponent/App.vue         | 230 +++++
 dockinglayout/createcomponent/main.js         |  10 +
 dockinglayout/createcomponent/package.json    |   7 +
 dockinglayout/defaultfunctionality/App.vue    | 226 +++++
 dockinglayout/defaultfunctionality/main.js    |  10 +
 .../defaultfunctionality/package.json         |   7 +
 dockinglayout/fluidsize/App.vue               | 105 ++
 dockinglayout/fluidsize/main.js               |  10 +
 dockinglayout/fluidsize/package.json          |   7 +
 dockinglayout/idelikelayout/App.vue           | 271 ++++++
 dockinglayout/idelikelayout/main.js           |  10 +
 dockinglayout/idelikelayout/package.json      |   7 +
 dockinglayout/righttoleftlayout/App.vue       | 234 +++++
 dockinglayout/righttoleftlayout/main.js       |  10 +
 dockinglayout/righttoleftlayout/package.json  |   7 +
 dockinglayout/saveloadlayout/App.vue          | 257 +++++
 dockinglayout/saveloadlayout/main.js          |  10 +
 dockinglayout/saveloadlayout/package.json     |   7 +
 dragdrop/defaultfunctionality/App.vue         | 325 +++++++
 dragdrop/defaultfunctionality/main.js         |  10 +
 dragdrop/defaultfunctionality/package.json    |   7 +
 dragdrop/events/App.vue                       | 123 +++
 dragdrop/events/main.js                       |  10 +
 dragdrop/events/package.json                  |   7 +
 draw/defaultfunctionality/App.vue             |  54 ++
 draw/defaultfunctionality/main.js             |  10 +
 draw/defaultfunctionality/package.json        |   7 +
 dropdownbutton/defaultfunctionality/App.vue   |  75 ++
 dropdownbutton/defaultfunctionality/main.js   |  10 +
 .../defaultfunctionality/package.json         |   7 +
 dropdownlist/animation/App.vue                |  69 ++
 dropdownlist/animation/main.js                |  10 +
 dropdownlist/animation/package.json           |   7 +
 dropdownlist/autoopen/App.vue                 |  53 +
 dropdownlist/autoopen/main.js                 |  10 +
 dropdownlist/autoopen/package.json            |   7 +
 dropdownlist/bindingtojson/App.vue            |  58 ++
 dropdownlist/bindingtojson/main.js            |  10 +
 dropdownlist/bindingtojson/package.json       |   7 +
 dropdownlist/bindingtoxml/App.vue             |  60 ++
 dropdownlist/bindingtoxml/main.js             |  10 +
 dropdownlist/bindingtoxml/package.json        |   7 +
 dropdownlist/categories/App.vue               |  38 +
 dropdownlist/categories/main.js               |  10 +
 dropdownlist/categories/package.json          |   7 +
 dropdownlist/checkboxes/App.vue               |  72 ++
 dropdownlist/checkboxes/main.js               |  10 +
 dropdownlist/checkboxes/package.json          |   7 +
 dropdownlist/createcomponent/App.vue          |  54 ++
 dropdownlist/createcomponent/main.js          |  10 +
 dropdownlist/createcomponent/package.json     |   7 +
 dropdownlist/customrendering/App.vue          |  85 ++
 dropdownlist/customrendering/main.js          |  10 +
 dropdownlist/customrendering/package.json     |   7 +
 dropdownlist/defaultfunctionality/App.vue     |  53 +
 dropdownlist/defaultfunctionality/main.js     |  10 +
 .../defaultfunctionality/package.json         |   7 +
 .../dropdownhorizontalalignment/App.vue       |  61 ++
 .../dropdownhorizontalalignment/main.js       |  10 +
 .../dropdownhorizontalalignment/package.json  |   7 +
 .../dropdownverticalalignment/App.vue         |  61 ++
 .../dropdownverticalalignment/main.js         |  10 +
 .../dropdownverticalalignment/package.json    |   7 +
 dropdownlist/events/App.vue                   |  85 ++
 dropdownlist/events/main.js                   |  10 +
 dropdownlist/events/package.json              |   7 +
 dropdownlist/filtering/App.vue                |  47 +
 dropdownlist/filtering/main.js                |  10 +
 dropdownlist/filtering/package.json           |   7 +
 dropdownlist/fluidsize/App.vue                |  52 +
 dropdownlist/fluidsize/main.js                |  10 +
 dropdownlist/fluidsize/package.json           |   7 +
 dropdownlist/keyboardnavigation/App.vue       | 268 ++++++
 dropdownlist/keyboardnavigation/main.js       |  10 +
 dropdownlist/keyboardnavigation/package.json  |   7 +
 dropdownlist/loaddatafromselect/App.vue       |  71 ++
 dropdownlist/loaddatafromselect/main.js       |  10 +
 dropdownlist/loaddatafromselect/package.json  |   7 +
 dropdownlist/righttoleftlayout/App.vue        | 255 +++++
 dropdownlist/righttoleftlayout/main.js        |  10 +
 dropdownlist/righttoleftlayout/package.json   |   7 +
 .../saveloadselectionusingcookies/App.vue     |  47 +
 .../saveloadselectionusingcookies/main.js     |  10 +
 .../package.json                              |   7 +
 dropdownlist/templates/App.vue                |  78 ++
 dropdownlist/templates/main.js                |  10 +
 dropdownlist/templates/package.json           |   7 +
 dropdownlist/textwithicons/App.vue            |  34 +
 dropdownlist/textwithicons/main.js            |  10 +
 dropdownlist/textwithicons/package.json       |   7 +
 dropdownlist/twowaydatabinding/App.vue        |  37 +
 dropdownlist/twowaydatabinding/main.js        |  10 +
 dropdownlist/twowaydatabinding/package.json   |   7 +
 editor/customtools/App.vue                    |  97 ++
 editor/customtools/main.js                    |  10 +
 editor/customtools/package.json               |   7 +
 editor/defaultfunctionality/App.vue           |  35 +
 editor/defaultfunctionality/main.js           |  10 +
 editor/defaultfunctionality/package.json      |   7 +
 editor/fluidsize/App.vue                      |  38 +
 editor/fluidsize/main.js                      |  10 +
 editor/fluidsize/package.json                 |   7 +
 editor/importstyles/App.vue                   |  63 ++
 editor/importstyles/main.js                   |  10 +
 editor/importstyles/package.json              |   7 +
 editor/linebreakconfig/App.vue                |  22 +
 editor/linebreakconfig/main.js                |  10 +
 editor/linebreakconfig/package.json           |   7 +
 editor/localization/App.vue                   |  56 ++
 editor/localization/main.js                   |  10 +
 editor/localization/package.json              |   7 +
 editor/popupeditor/App.vue                    |  33 +
 editor/popupeditor/main.js                    |  10 +
 editor/popupeditor/package.json               |   7 +
 editor/printing/App.vue                       |  59 ++
 editor/printing/main.js                       |  10 +
 editor/printing/package.json                  |   7 +
 editor/righttoleftlayout/App.vue              |  35 +
 editor/righttoleftlayout/main.js              |  10 +
 editor/righttoleftlayout/package.json         |   7 +
 editor/toolbarposition/App.vue                |  35 +
 editor/toolbarposition/main.js                |  10 +
 editor/toolbarposition/package.json           |   7 +
 editor/toolscustomization/App.vue             |  67 ++
 editor/toolscustomization/main.js             |  10 +
 editor/toolscustomization/package.json        |   7 +
 editor/toolsvisibility/App.vue                |  35 +
 editor/toolsvisibility/main.js                |  10 +
 editor/toolsvisibility/package.json           |   7 +
 expander/defaultfunctionality/App.vue         |  40 +
 expander/defaultfunctionality/main.js         |  10 +
 expander/defaultfunctionality/package.json    |   7 +
 expander/fluidsize/App.vue                    |  48 +
 expander/fluidsize/main.js                    |  10 +
 expander/fluidsize/package.json               |   7 +
 expander/loadingdataondemand/App.vue          |  48 +
 expander/loadingdataondemand/main.js          |  10 +
 expander/loadingdataondemand/package.json     |   7 +
 expander/righttoleftlayout/App.vue            |  38 +
 expander/righttoleftlayout/main.js            |  10 +
 expander/righttoleftlayout/package.json       |   7 +
 expander/toggleondoubleclick/App.vue          |  38 +
 expander/toggleondoubleclick/main.js          |  10 +
 expander/toggleondoubleclick/package.json     |   7 +
 fileupload/buttonsrendering/App.vue           |  18 +
 fileupload/buttonsrendering/main.js           |  10 +
 fileupload/buttonsrendering/package.json      |   7 +
 fileupload/defaultfunctionality/App.vue       |  17 +
 fileupload/defaultfunctionality/main.js       |  10 +
 fileupload/defaultfunctionality/package.json  |   7 +
 fileupload/events/App.vue                     |  57 ++
 fileupload/events/main.js                     |  10 +
 fileupload/events/package.json                |   7 +
 fileupload/righttoleftlayout/App.vue          |  18 +
 fileupload/righttoleftlayout/main.js          |  10 +
 fileupload/righttoleftlayout/package.json     |   7 +
 fileupload/selectedfilesrendering/App.vue     |  37 +
 fileupload/selectedfilesrendering/main.js     |  10 +
 .../selectedfilesrendering/package.json       |   7 +
 form/defaultfunctionality/App.vue             | 119 +++
 form/defaultfunctionality/main.js             |  10 +
 form/defaultfunctionality/package.json        |   7 +
 form/events/App.vue                           | 142 +++
 form/events/main.js                           |  10 +
 form/events/package.json                      |   7 +
 form/inputalignment/App.vue                   |  78 ++
 form/inputalignment/main.js                   |  10 +
 form/inputalignment/package.json              |   7 +
 form/inputlabelposition/App.vue               |  67 ++
 form/inputlabelposition/main.js               |  10 +
 form/inputlabelposition/package.json          |   7 +
 form/inputtypes/App.vue                       | 167 ++++
 form/inputtypes/main.js                       |  10 +
 form/inputtypes/package.json                  |   7 +
 form/submit/App.vue                           | 156 +++
 form/submit/main.js                           |  10 +
 form/submit/package.json                      |   7 +
 formattedinput/defaultfunctionality/App.vue   |  18 +
 formattedinput/defaultfunctionality/main.js   |  10 +
 .../defaultfunctionality/package.json         |   7 +
 formattedinput/events/App.vue                 |  56 ++
 formattedinput/events/main.js                 |  10 +
 formattedinput/events/package.json            |   7 +
 formattedinput/exponentialnotation/App.vue    |  50 +
 formattedinput/exponentialnotation/main.js    |  10 +
 .../exponentialnotation/package.json          |   7 +
 formattedinput/fluidsize/App.vue              |  18 +
 formattedinput/fluidsize/main.js              |  10 +
 formattedinput/fluidsize/package.json         |   7 +
 formattedinput/keyboardnavigation/App.vue     |  32 +
 formattedinput/keyboardnavigation/main.js     |  10 +
 .../keyboardnavigation/package.json           |   7 +
 formattedinput/negativenumbers/App.vue        |  17 +
 formattedinput/negativenumbers/main.js        |  10 +
 formattedinput/negativenumbers/package.json   |   7 +
 formattedinput/righttoleftlayout/App.vue      |  19 +
 formattedinput/righttoleftlayout/main.js      |  10 +
 formattedinput/righttoleftlayout/package.json |   7 +
 formattedinput/simpleinput/App.vue            |  42 +
 formattedinput/simpleinput/main.js            |  10 +
 formattedinput/simpleinput/package.json       |   7 +
 formattedinput/twowaydatabinding/App.vue      |  22 +
 formattedinput/twowaydatabinding/main.js      |  10 +
 formattedinput/twowaydatabinding/package.json |   7 +
 formattedinput/uppercasehexadecimals/App.vue  |  17 +
 formattedinput/uppercasehexadecimals/main.js  |  10 +
 .../uppercasehexadecimals/package.json        |   7 +
 formattedinput/validation/App.vue             |  18 +
 formattedinput/validation/main.js             |  10 +
 formattedinput/validation/package.json        |   7 +
 gauge/defaultfunctionality/App.vue            | 100 ++
 gauge/defaultfunctionality/main.js            |  10 +
 gauge/defaultfunctionality/package.json       |   7 +
 gauge/fluidsize/App.vue                       |  37 +
 gauge/fluidsize/main.js                       |  10 +
 gauge/fluidsize/package.json                  |   7 +
 gauge/gaugesettings/App.vue                   | 152 +++
 gauge/gaugesettings/main.js                   |  10 +
 gauge/gaugesettings/package.json              |   7 +
 gauge/gaugewithslider/App.vue                 |  82 ++
 gauge/gaugewithslider/main.js                 |  10 +
 gauge/gaugewithslider/package.json            |   7 +
 gauge/lineargauge/App.vue                     | 182 ++++
 gauge/lineargauge/main.js                     |  10 +
 gauge/lineargauge/package.json                |   7 +
 grid/addnewbottomrow/App.vue                  |  65 ++
 grid/addnewbottomrow/main.js                  |  10 +
 grid/addnewbottomrow/package.json             |   7 +
 grid/addnewrow/App.vue                        |  65 ++
 grid/addnewrow/main.js                        |  10 +
 grid/addnewrow/package.json                   |   7 +
 grid/addremoveupdate/App.vue                  |  47 +
 grid/addremoveupdate/main.js                  |  10 +
 grid/addremoveupdate/package.json             |   7 +
 grid/aggregates/App.vue                       |  96 ++
 grid/aggregates/main.js                       |  10 +
 grid/aggregates/package.json                  |   7 +
 grid/aggregatesgrouping/App.vue               |  63 ++
 grid/aggregatesgrouping/main.js               |  10 +
 grid/aggregatesgrouping/package.json          |   7 +
 grid/aggregatesrenderer/App.vue               | 103 ++
 grid/aggregatesrenderer/main.js               |  10 +
 grid/aggregatesrenderer/package.json          |   7 +
 grid/autorowheight/App.vue                    |  49 +
 grid/autorowheight/main.js                    |  10 +
 grid/autorowheight/package.json               |   7 +
 grid/autosizecolumns/App.vue                  |  63 ++
 grid/autosizecolumns/main.js                  |  10 +
 grid/autosizecolumns/package.json             |   7 +
 grid/bindingtoarray/App.vue                   |  46 +
 grid/bindingtoarray/main.js                   |  10 +
 grid/bindingtoarray/package.json              |   7 +
 grid/bindingtocsv/App.vue                     |  39 +
 grid/bindingtocsv/main.js                     |  10 +
 grid/bindingtocsv/package.json                |   7 +
 grid/bindingtojsarray/App.vue                 |  67 ++
 grid/bindingtojsarray/main.js                 |  10 +
 grid/bindingtojsarray/package.json            |   7 +
 grid/bindingtojson/App.vue                    |  48 +
 grid/bindingtojson/main.js                    |  10 +
 grid/bindingtojson/package.json               |   7 +
 grid/bindingtojsonstring/App.vue              |  47 +
 grid/bindingtojsonstring/main.js              |  10 +
 grid/bindingtojsonstring/package.json         |   7 +
 grid/bindingtojsonusingphp/App.vue            |  49 +
 grid/bindingtojsonusingphp/main.js            |  10 +
 grid/bindingtojsonusingphp/package.json       |   7 +
 grid/bindingtoobservablearray/App.vue         | 113 +++
 grid/bindingtoobservablearray/main.js         |  10 +
 grid/bindingtoobservablearray/package.json    |   7 +
 grid/bindingtoremotedata/App.vue              |  53 +
 grid/bindingtoremotedata/main.js              |  10 +
 grid/bindingtoremotedata/package.json         |   7 +
 grid/bindingtotsv/App.vue                     |  43 +
 grid/bindingtotsv/main.js                     |  10 +
 grid/bindingtotsv/package.json                |   7 +
 grid/bindingtoxml/App.vue                     |  50 +
 grid/bindingtoxml/main.js                     |  10 +
 grid/bindingtoxml/package.json                |   7 +
 grid/cascadingcomboboxes/App.vue              |  70 ++
 grid/cascadingcomboboxes/main.js              |  10 +
 grid/cascadingcomboboxes/package.json         |   7 +
 grid/cellsselection/App.vue                   | 188 ++++
 grid/cellsselection/main.js                   |  10 +
 grid/cellsselection/package.json              |   7 +
 grid/cellsstyling/App.vue                     |  93 ++
 grid/cellsstyling/main.js                     |  10 +
 grid/cellsstyling/package.json                |   7 +
 grid/checkboxcolumn/App.vue                   |  52 +
 grid/checkboxcolumn/main.js                   |  10 +
 grid/checkboxcolumn/package.json              |   7 +
 grid/checkboxselection/App.vue                |  52 +
 grid/checkboxselection/main.js                |  10 +
 grid/checkboxselection/package.json           |   7 +
 grid/columnshierarchy/App.vue                 |  60 ++
 grid/columnshierarchy/main.js                 |  10 +
 grid/columnshierarchy/package.json            |   7 +
 grid/columnsreorder/App.vue                   |  57 ++
 grid/columnsreorder/main.js                   |  10 +
 grid/columnsreorder/package.json              |   7 +
 grid/columnsresize/App.vue                    |  61 ++
 grid/columnsresize/main.js                    |  10 +
 grid/columnsresize/package.json               |   7 +
 grid/columntemplate/App.vue                   |  56 ++
 grid/columntemplate/main.js                   |  10 +
 grid/columntemplate/package.json              |   7 +
 grid/columntooltips/App.vue                   |  63 ++
 grid/columntooltips/main.js                   |  10 +
 grid/columntooltips/package.json              |   7 +
 grid/computedcolumn/App.vue                   |  82 ++
 grid/computedcolumn/main.js                   |  10 +
 grid/computedcolumn/package.json              |   7 +
 grid/contextmenu/App.vue                      | 172 ++++
 grid/contextmenu/main.js                      |  10 +
 grid/contextmenu/package.json                 |   7 +
 grid/createComponent/App.vue                  |  69 ++
 grid/createComponent/main.js                  |  10 +
 grid/createComponent/package.json             |   7 +
 grid/createremoveupdate/App.vue               | 159 +++
 grid/createremoveupdate/main.js               |  10 +
 grid/createremoveupdate/package.json          |   7 +
 grid/customaggregates/App.vue                 |  59 ++
 grid/customaggregates/main.js                 |  10 +
 grid/customaggregates/package.json            |   7 +
 grid/customcolumneditor/App.vue               | 170 ++++
 grid/customcolumneditor/main.js               |  10 +
 grid/customcolumneditor/package.json          |   7 +
 grid/customcomboboxcolumn/App.vue             | 180 ++++
 grid/customcomboboxcolumn/main.js             |  10 +
 grid/customcomboboxcolumn/package.json        |   7 +
 grid/customdropdownlistcolumn/App.vue         | 180 ++++
 grid/customdropdownlistcolumn/main.js         |  10 +
 grid/customdropdownlistcolumn/package.json    |   7 +
 grid/customfiltermenu/App.vue                 | 209 ++++
 grid/customfiltermenu/main.js                 |  10 +
 grid/customfiltermenu/package.json            |   7 +
 grid/customizededitors/App.vue                |  75 ++
 grid/customizededitors/main.js                |  10 +
 grid/customizededitors/package.json           |   7 +
 grid/customkeyboardnavigation/App.vue         |  57 ++
 grid/customkeyboardnavigation/main.js         |  10 +
 grid/customkeyboardnavigation/package.json    |   7 +
 grid/customlistitemswithkeyvalue/App.vue      | 217 +++++
 grid/customlistitemswithkeyvalue/main.js      |  10 +
 grid/customlistitemswithkeyvalue/package.json |   7 +
 grid/customroweditor/App.vue                  | 102 ++
 grid/customroweditor/main.js                  |  10 +
 grid/customroweditor/package.json             |   7 +
 grid/customsorting/App.vue                    | 102 ++
 grid/customsorting/main.js                    |  10 +
 grid/customsorting/package.json               |   7 +
 grid/dataexport/App.vue                       |  98 ++
 grid/dataexport/main.js                       |  10 +
 grid/dataexport/package.json                  |   7 +
 grid/dataprinting/App.vue                     |  80 ++
 grid/dataprinting/main.js                     |  10 +
 grid/dataprinting/package.json                |   7 +
 grid/daterangefilter/App.vue                  |  59 ++
 grid/daterangefilter/main.js                  |  10 +
 grid/daterangefilter/package.json             |   7 +
 grid/defaultfunctionality/App.vue             |  62 ++
 grid/defaultfunctionality/main.js             |  10 +
 grid/defaultfunctionality/package.json        |   7 +
 grid/deferedscrolling/App.vue                 | 100 ++
 grid/deferedscrolling/main.js                 |  10 +
 grid/deferedscrolling/package.json            |   7 +
 grid/deferedscrollingonalargedataset/App.vue  |  50 +
 grid/deferedscrollingonalargedataset/main.js  |  10 +
 .../package.json                              |   7 +
 grid/disableeditingofrows/App.vue             | 111 +++
 grid/disableeditingofrows/main.js             |  10 +
 grid/disableeditingofrows/package.json        |   7 +
 grid/dragdrop/App.vue                         | 123 +++
 grid/dragdrop/main.js                         |  10 +
 grid/dragdrop/package.json                    |   7 +
 grid/dropdowngrid/App.vue                     |  64 ++
 grid/dropdowngrid/main.js                     |  10 +
 grid/dropdowngrid/package.json                |   7 +
 grid/dynamiccolumns/App.vue                   |  59 ++
 grid/dynamiccolumns/main.js                   |  10 +
 grid/dynamiccolumns/package.json              |   7 +
 grid/editing/App.vue                          | 102 ++
 grid/editing/main.js                          |  10 +
 grid/editing/package.json                     |   7 +
 grid/editmodes/App.vue                        | 107 +++
 grid/editmodes/main.js                        |  10 +
 grid/editmodes/package.json                   |   7 +
 grid/everpresentrowwithcolumns/App.vue        |  48 +
 grid/everpresentrowwithcolumns/main.js        |  10 +
 grid/everpresentrowwithcolumns/package.json   |   7 +
 grid/everpresentrowwithcustomwidgets/App.vue  | 197 ++++
 grid/everpresentrowwithcustomwidgets/main.js  |  10 +
 .../package.json                              |   7 +
 grid/excellikefilter/App.vue                  |  49 +
 grid/excellikefilter/main.js                  |  10 +
 grid/excellikefilter/package.json             |   7 +
 grid/filterconditions/App.vue                 | 171 ++++
 grid/filterconditions/main.js                 |  10 +
 grid/filterconditions/package.json            |   7 +
 grid/filtering/App.vue                        | 131 +++
 grid/filtering/main.js                        |  10 +
 grid/filtering/package.json                   |   7 +
 grid/filtermenutypes/App.vue                  | 121 +++
 grid/filtermenutypes/main.js                  |  10 +
 grid/filtermenutypes/package.json             |   7 +
 grid/filterrow/App.vue                        |  62 ++
 grid/filterrow/main.js                        |  10 +
 grid/filterrow/package.json                   |   7 +
 grid/filterrowcustomlistitems/App.vue         |  54 ++
 grid/filterrowcustomlistitems/main.js         |  10 +
 grid/filterrowcustomlistitems/package.json    |   7 +
 grid/fluidsize/App.vue                        |  51 +
 grid/fluidsize/main.js                        |  10 +
 grid/fluidsize/package.json                   |   7 +
 grid/foreignkeycolumn/App.vue                 |  84 ++
 grid/foreignkeycolumn/main.js                 |  10 +
 grid/foreignkeycolumn/package.json            |   7 +
 grid/fullrowedit/App.vue                      | 114 +++
 grid/fullrowedit/main.js                      |  10 +
 grid/fullrowedit/package.json                 |   7 +
 grid/gridinjqxtabs/App.vue                    |  76 ++
 grid/gridinjqxtabs/main.js                    |  10 +
 grid/gridinjqxtabs/package.json               |   7 +
 grid/grouping/App.vue                         | 116 +++
 grid/grouping/main.js                         |  10 +
 grid/grouping/package.json                    |   7 +
 grid/groupingaggregates/App.vue               |  62 ++
 grid/groupingaggregates/main.js               |  10 +
 grid/groupingaggregates/package.json          |   7 +
 grid/groupingwithpager/App.vue                | 112 +++
 grid/groupingwithpager/main.js                |  10 +
 grid/groupingwithpager/package.json           |   7 +
 grid/imagecolumn/App.vue                      |  56 ++
 grid/imagecolumn/main.js                      |  10 +
 grid/imagecolumn/package.json                 |   7 +
 grid/initialfilter/App.vue                    |  63 ++
 grid/initialfilter/main.js                    |  10 +
 grid/initialfilter/package.json               |   7 +
 grid/initialpageandpagesize/App.vue           | 103 ++
 grid/initialpageandpagesize/main.js           |  10 +
 grid/initialpageandpagesize/package.json      |   7 +
 grid/keyboardnavigation/App.vue               |  85 ++
 grid/keyboardnavigation/main.js               |  10 +
 grid/keyboardnavigation/package.json          |   7 +
 grid/keysvaluescolumn/App.vue                 | 115 +++
 grid/keysvaluescolumn/main.js                 |  10 +
 grid/keysvaluescolumn/package.json            |   7 +
 grid/largedataset/App.vue                     |  47 +
 grid/largedataset/main.js                     |  10 +
 grid/largedataset/package.json                |   7 +
 grid/loadfromtable/App.vue                    | 231 +++++
 grid/loadfromtable/main.js                    |  10 +
 grid/loadfromtable/package.json               |   7 +
 grid/localization/App.vue                     |  50 +
 grid/localization/main.js                     |  10 +
 grid/localization/package.json                |   7 +
 grid/localizedaddnewrow/App.vue               |  62 ++
 grid/localizedaddnewrow/main.js               |  10 +
 grid/localizedaddnewrow/package.json          |   7 +
 grid/manycolumns/App.vue                      |  47 +
 grid/manycolumns/main.js                      |  10 +
 grid/manycolumns/package.json                 |   7 +
 grid/masterdetails/App.vue                    | 117 +++
 grid/masterdetails/main.js                    |  10 +
 grid/masterdetails/package.json               |   7 +
 grid/nestedgrids/App.vue                      | 133 +++
 grid/nestedgrids/main.js                      |  10 +
 grid/nestedgrids/package.json                 |   7 +
 grid/pagermodes/App.vue                       |  74 ++
 grid/pagermodes/main.js                       |  10 +
 grid/pagermodes/package.json                  |   7 +
 grid/paging/App.vue                           |  95 ++
 grid/paging/main.js                           |  10 +
 grid/paging/package.json                      |   7 +
 grid/percentagewidthforcolumns/App.vue        |  46 +
 grid/percentagewidthforcolumns/main.js        |  10 +
 grid/percentagewidthforcolumns/package.json   |   7 +
 grid/pinnedfrozencolumns/App.vue              |  52 +
 grid/pinnedfrozencolumns/main.js              |  10 +
 grid/pinnedfrozencolumns/package.json         |   7 +
 grid/popupediting/App.vue                     | 162 ++++
 grid/popupediting/main.js                     |  10 +
 grid/popupediting/package.json                |   7 +
 grid/positioning/App.vue                      |  66 ++
 grid/positioning/main.js                      |  10 +
 grid/positioning/package.json                 |   7 +
 grid/refreshdata/App.vue                      |  71 ++
 grid/refreshdata/main.js                      |  10 +
 grid/refreshdata/package.json                 |   7 +
 grid/righttoleftlayout/App.vue                |  48 +
 grid/righttoleftlayout/main.js                |  10 +
 grid/righttoleftlayout/package.json           |   7 +
 grid/rowdetails/App.vue                       | 169 ++++
 grid/rowdetails/main.js                       |  10 +
 grid/rowdetails/package.json                  |   7 +
 grid/roweditwitheverpresentrow/App.vue        |  45 +
 grid/roweditwitheverpresentrow/main.js        |  10 +
 grid/roweditwitheverpresentrow/package.json   |   7 +
 grid/rownumbercolumn/App.vue                  |  54 ++
 grid/rownumbercolumn/main.js                  |  10 +
 grid/rownumbercolumn/package.json             |   7 +
 grid/rowselection/App.vue                     | 169 ++++
 grid/rowselection/main.js                     |  10 +
 grid/rowselection/package.json                |   7 +
 grid/showhidecolumns/App.vue                  |  71 ++
 grid/showhidecolumns/main.js                  |  10 +
 grid/showhidecolumns/package.json             |   7 +
 grid/sorting/App.vue                          | 101 ++
 grid/sorting/main.js                          |  10 +
 grid/sorting/package.json                     |   7 +
 grid/spreadsheet/App.vue                      |  65 ++
 grid/spreadsheet/main.js                      |  10 +
 grid/spreadsheet/package.json                 |   7 +
 grid/statemaintenance/App.vue                 |  80 ++
 grid/statemaintenance/main.js                 |  10 +
 grid/statemaintenance/package.json            |   7 +
 grid/statusbar/App.vue                        | 225 +++++
 grid/statusbar/main.js                        |  10 +
 grid/statusbar/package.json                   |   7 +
 grid/textalignment/App.vue                    |  86 ++
 grid/textalignment/main.js                    |  10 +
 grid/textalignment/package.json               |   7 +
 grid/togglesubrows/App.vue                    | 129 +++
 grid/togglesubrows/main.js                    |  10 +
 grid/togglesubrows/package.json               |   7 +
 grid/toolbar/App.vue                          | 225 +++++
 grid/toolbar/main.js                          |  10 +
 grid/toolbar/package.json                     |   7 +
 grid/updatingactionsatruntime/App.vue         |  72 ++
 grid/updatingactionsatruntime/main.js         |  10 +
 grid/updatingactionsatruntime/package.json    |   7 +
 grid/validation/App.vue                       | 101 ++
 grid/validation/main.js                       |  10 +
 grid/validation/package.json                  |   7 +
 grid/virtualpaging/App.vue                    |  89 ++
 grid/virtualpaging/main.js                    |  10 +
 grid/virtualpaging/package.json               |   7 +
 grid/virtualscrolling/App.vue                 |  84 ++
 grid/virtualscrolling/main.js                 |  10 +
 grid/virtualscrolling/package.json            |   7 +
 grid/widgetcolumn/App.vue                     | 114 +++
 grid/widgetcolumn/main.js                     |  10 +
 grid/widgetcolumn/package.json                |   7 +
 input/autocomplete/App.vue                    |  62 ++
 input/autocomplete/main.js                    |  10 +
 input/autocomplete/package.json               |   7 +
 input/bindingtojsondata/App.vue               |  65 ++
 input/bindingtojsondata/main.js               |  10 +
 input/bindingtojsondata/package.json          |   7 +
 input/defaultfunctionality/App.vue            |  23 +
 input/defaultfunctionality/main.js            |  10 +
 input/defaultfunctionality/package.json       |   7 +
 input/fluidsize/App.vue                       |  23 +
 input/fluidsize/main.js                       |  10 +
 input/fluidsize/package.json                  |   7 +
 input/inputgroup/App.vue                      |  40 +
 input/inputgroup/main.js                      |  10 +
 input/inputgroup/package.json                 |   7 +
 input/multiplevalues/App.vue                  |  45 +
 input/multiplevalues/main.js                  |  10 +
 input/multiplevalues/package.json             |   7 +
 input/righttoleftlayout/App.vue               |  23 +
 input/righttoleftlayout/main.js               |  10 +
 input/righttoleftlayout/package.json          |   7 +
 input/twowaydatabinding/App.vue               |  23 +
 input/twowaydatabinding/main.js               |  10 +
 input/twowaydatabinding/package.json          |   7 +
 kanban/addremoveupdateitems/App.vue           | 109 +++
 kanban/addremoveupdateitems/main.js           |  10 +
 kanban/addremoveupdateitems/package.json      |   7 +
 kanban/defaultfunctionality/App.vue           | 157 +++
 kanban/defaultfunctionality/main.js           |  10 +
 kanban/defaultfunctionality/package.json      |   7 +
 kanban/disablecollapse/App.vue                |  91 ++
 kanban/disablecollapse/main.js                |  10 +
 kanban/disablecollapse/package.json           |   7 +
 kanban/headertemplate/App.vue                 | 199 ++++
 kanban/headertemplate/main.js                 |  10 +
 kanban/headertemplate/package.json            |   7 +
 kanban/itemtemplate/App.vue                   | 184 ++++
 kanban/itemtemplate/main.js                   |  10 +
 kanban/itemtemplate/package.json              |   7 +
 kanban/kanbanediting/App.vue                  | 227 +++++
 kanban/kanbanediting/main.js                  |  10 +
 kanban/kanbanediting/package.json             |   7 +
 kanban/kanbanevents/App.vue                   | 137 +++
 kanban/kanbanevents/main.js                   |  10 +
 kanban/kanbanevents/package.json              |   7 +
 kanban/kanbanfluidsize/App.vue                |  86 ++
 kanban/kanbanfluidsize/main.js                |  10 +
 kanban/kanbanfluidsize/package.json           |   7 +
 kanban/multiplekanbans/App.vue                |  93 ++
 kanban/multiplekanbans/main.js                |  10 +
 kanban/multiplekanbans/package.json           |   7 +
 kanban/righttoleftlayout/App.vue              |  79 ++
 kanban/righttoleftlayout/main.js              |  10 +
 kanban/righttoleftlayout/package.json         |   7 +
 knob/circlepointer/App.vue                    |  46 +
 knob/circlepointer/main.js                    |  10 +
 knob/circlepointer/package.json               |   7 +
 knob/defaultfunctionality/App.vue             | 114 +++
 knob/defaultfunctionality/main.js             |  10 +
 knob/defaultfunctionality/package.json        |   7 +
 knob/fluidsize/App.vue                        |  69 ++
 knob/fluidsize/main.js                        |  10 +
 knob/fluidsize/package.json                   |   7 +
 knob/infiniteknob/App.vue                     | 103 ++
 knob/infiniteknob/main.js                     |  10 +
 knob/infiniteknob/package.json                |   7 +
 knob/knobprogressranges/App.vue               | 102 ++
 knob/knobprogressranges/main.js               |  10 +
 knob/knobprogressranges/package.json          |   7 +
 knob/knobrotation/App.vue                     |  89 ++
 knob/knobrotation/main.js                     |  10 +
 knob/knobrotation/package.json                |   7 +
 knob/knobwithcustomshape/App.vue              |  80 ++
 knob/knobwithcustomshape/main.js              |  10 +
 knob/knobwithcustomshape/package.json         |   7 +
 knob/knobwithinput/App.vue                    |  84 ++
 knob/knobwithinput/main.js                    |  10 +
 knob/knobwithinput/package.json               |   7 +
 knob/linepointer/App.vue                      |  65 ++
 knob/linepointer/main.js                      |  10 +
 knob/linepointer/package.json                 |   7 +
 knob/multiplearrowpointes/App.vue             |  78 ++
 knob/multiplearrowpointes/main.js             |  10 +
 knob/multiplearrowpointes/package.json        |   7 +
 knob/multiplecirclepointers/App.vue           |  84 ++
 knob/multiplecirclepointers/main.js           |  10 +
 knob/multiplecirclepointers/package.json      |   7 +
 knob/multipleknobs/App.vue                    | 217 +++++
 knob/multipleknobs/main.js                    |  10 +
 knob/multipleknobs/package.json               |   7 +
 knob/radialgradient/App.vue                   |  67 ++
 knob/radialgradient/main.js                   |  10 +
 knob/radialgradient/package.json              |   7 +
 knob/semiknob/App.vue                         |  61 ++
 knob/semiknob/main.js                         |  10 +
 knob/semiknob/package.json                    |   7 +
 layout/dashboard/App.vue                      | 341 +++++++
 layout/dashboard/main.js                      |  10 +
 layout/dashboard/package.json                 |   7 +
 layout/defaultfunctionality/App.vue           | 161 ++++
 layout/defaultfunctionality/main.js           |  10 +
 layout/defaultfunctionality/package.json      |   7 +
 layout/fluidsize/App.vue                      |  90 ++
 layout/fluidsize/main.js                      |  10 +
 layout/fluidsize/package.json                 |   7 +
 layout/integrationwithotherwidgets/App.vue    | 254 +++++
 layout/integrationwithotherwidgets/main.js    |  10 +
 .../integrationwithotherwidgets/package.json  |   7 +
 layout/righttoleftlayout/App.vue              | 165 ++++
 layout/righttoleftlayout/main.js              |  10 +
 layout/righttoleftlayout/package.json         |   7 +
 layout/saveloadlayout/App.vue                 | 190 ++++
 layout/saveloadlayout/main.js                 |  10 +
 layout/saveloadlayout/package.json            |   7 +
 linkbutton/defaultfunctionality/App.vue       |  16 +
 linkbutton/defaultfunctionality/main.js       |  10 +
 linkbutton/defaultfunctionality/package.json  |   7 +
 listbox/bindingtoarray/App.vue                | 162 ++++
 listbox/bindingtoarray/main.js                |  10 +
 listbox/bindingtoarray/package.json           |   7 +
 listbox/bindingtojsondata/App.vue             |  63 ++
 listbox/bindingtojsondata/main.js             |  10 +
 listbox/bindingtojsondata/package.json        |   7 +
 listbox/bindingtoxml/App.vue                  |  65 ++
 listbox/bindingtoxml/main.js                  |  10 +
 listbox/bindingtoxml/package.json             |   7 +
 listbox/categories/App.vue                    |  39 +
 listbox/categories/main.js                    |  10 +
 listbox/categories/package.json               |   7 +
 listbox/checkboxes/App.vue                    |  90 ++
 listbox/checkboxes/main.js                    |  10 +
 listbox/checkboxes/package.json               |   7 +
 listbox/customrendering/App.vue               | 155 +++
 listbox/customrendering/main.js               |  10 +
 listbox/customrendering/package.json          |   7 +
 listbox/defaultfunctionality/App.vue          |  54 ++
 listbox/defaultfunctionality/main.js          |  10 +
 listbox/defaultfunctionality/package.json     |   7 +
 listbox/dragdrop/App.vue                      | 161 ++++
 listbox/dragdrop/main.js                      |  10 +
 listbox/dragdrop/package.json                 |   7 +
 listbox/events/App.vue                        |  93 ++
 listbox/events/main.js                        |  10 +
 listbox/events/package.json                   |   7 +
 listbox/filtering/App.vue                     |  69 ++
 listbox/filtering/main.js                     |  10 +
 listbox/filtering/package.json                |   7 +
 listbox/fluidsize/App.vue                     |  30 +
 listbox/fluidsize/main.js                     |  10 +
 listbox/fluidsize/package.json                |   7 +
 listbox/itemsreorder/App.vue                  |  39 +
 listbox/itemsreorder/main.js                  |  10 +
 listbox/itemsreorder/package.json             |   7 +
 listbox/keyboardnavigation/App.vue            | 275 ++++++
 listbox/keyboardnavigation/main.js            |  10 +
 listbox/keyboardnavigation/package.json       |   7 +
 listbox/loaddatafromselect/App.vue            |  75 ++
 listbox/loaddatafromselect/main.js            |  10 +
 listbox/loaddatafromselect/package.json       |   7 +
 listbox/multipleselection/App.vue             |  77 ++
 listbox/multipleselection/main.js             |  10 +
 listbox/multipleselection/package.json        |   7 +
 listbox/remotesearch/App.vue                  |  79 ++
 listbox/remotesearch/main.js                  |  10 +
 listbox/remotesearch/package.json             |   7 +
 listbox/righttoleftlayout/App.vue             | 258 +++++
 listbox/righttoleftlayout/main.js             |  10 +
 listbox/righttoleftlayout/package.json        |   7 +
 listbox/selectionwithshiftctrl/App.vue        |  76 ++
 listbox/selectionwithshiftctrl/main.js        |  10 +
 listbox/selectionwithshiftctrl/package.json   |   7 +
 listbox/textwithicons/App.vue                 |  35 +
 listbox/textwithicons/main.js                 |  10 +
 listbox/textwithicons/package.json            |   7 +
 listbox/twowaydatabinding/App.vue             |  40 +
 listbox/twowaydatabinding/main.js             |  10 +
 listbox/twowaydatabinding/package.json        |   7 +
 listmenu/defaultfunctionality/App.vue         | 904 ++++++++++++++++++
 listmenu/defaultfunctionality/main.js         |  10 +
 listmenu/defaultfunctionality/package.json    |   7 +
 listmenu/fluidsize/App.vue                    | 904 ++++++++++++++++++
 listmenu/fluidsize/main.js                    |  10 +
 listmenu/fluidsize/package.json               |   7 +
 listmenu/nestedlists/App.vue                  | 126 +++
 listmenu/nestedlists/main.js                  |  10 +
 listmenu/nestedlists/package.json             |   7 +
 listmenu/righttoleftlayout/App.vue            | 127 +++
 listmenu/righttoleftlayout/main.js            |  10 +
 listmenu/righttoleftlayout/package.json       |   7 +
 loader/defaultfunctionality/App.vue           |  43 +
 loader/defaultfunctionality/main.js           |  10 +
 loader/defaultfunctionality/package.json      |   7 +
 loader/loaderwithjqxgrid/App.vue              |  75 ++
 loader/loaderwithjqxgrid/main.js              |  10 +
 loader/loaderwithjqxgrid/package.json         |   7 +
 loader/righttoleftlayout/App.vue              |  44 +
 loader/righttoleftlayout/main.js              |  10 +
 loader/righttoleftlayout/package.json         |   7 +
 loader/showmodalloader/App.vue                |  33 +
 loader/showmodalloader/main.js                |  10 +
 loader/showmodalloader/package.json           |   7 +
 loader/showonlyicon/App.vue                   |  43 +
 loader/showonlyicon/main.js                   |  10 +
 loader/showonlyicon/package.json              |   7 +
 loader/showonlytext/App.vue                   |  43 +
 loader/showonlytext/main.js                   |  10 +
 loader/showonlytext/package.json              |   7 +
 maskedinput/defaultfunctionality/App.vue      |  76 ++
 maskedinput/defaultfunctionality/main.js      |  10 +
 maskedinput/defaultfunctionality/package.json |   7 +
 maskedinput/events/App.vue                    |  52 +
 maskedinput/events/main.js                    |  10 +
 maskedinput/events/package.json               |   7 +
 maskedinput/fluidsize/App.vue                 |  23 +
 maskedinput/fluidsize/main.js                 |  10 +
 maskedinput/fluidsize/package.json            |   7 +
 maskedinput/righttoleftlayout/App.vue         |  47 +
 maskedinput/righttoleftlayout/main.js         |  10 +
 maskedinput/righttoleftlayout/package.json    |   7 +
 maskedinput/twowaydatabinding/App.vue         |  22 +
 maskedinput/twowaydatabinding/main.js         |  10 +
 maskedinput/twowaydatabinding/package.json    |   7 +
 menu/centermenuitems/App.vue                  | 113 +++
 menu/centermenuitems/main.js                  |  10 +
 menu/centermenuitems/package.json             |   7 +
 menu/columns/App.vue                          | 123 +++
 menu/columns/main.js                          |  10 +
 menu/columns/package.json                     |   7 +
 menu/contextmenu/App.vue                      | 107 +++
 menu/contextmenu/main.js                      |  10 +
 menu/contextmenu/package.json                 |   7 +
 menu/defaultfunctionality/App.vue             | 200 ++++
 menu/defaultfunctionality/main.js             |  10 +
 menu/defaultfunctionality/package.json        |   7 +
 menu/fluidsize/App.vue                        | 153 +++
 menu/fluidsize/main.js                        |  10 +
 menu/fluidsize/package.json                   |   7 +
 menu/images/App.vue                           | 107 +++
 menu/images/main.js                           |  10 +
 menu/images/package.json                      |   7 +
 menu/jsonmenu/App.vue                         | 125 +++
 menu/jsonmenu/main.js                         |  10 +
 menu/jsonmenu/package.json                    |   7 +
 menu/keyboardnavigation/App.vue               | 128 +++
 menu/keyboardnavigation/main.js               |  10 +
 menu/keyboardnavigation/package.json          |   7 +
 menu/loadmenufromarray/App.vue                |  46 +
 menu/loadmenufromarray/main.js                |  10 +
 menu/loadmenufromarray/package.json           |   7 +
 menu/minimizedmenu/App.vue                    |  72 ++
 menu/minimizedmenu/main.js                    |  10 +
 menu/minimizedmenu/package.json               |   7 +
 menu/opendirection/App.vue                    |  62 ++
 menu/opendirection/main.js                    |  10 +
 menu/opendirection/package.json               |   7 +
 menu/righttoleftlayout/App.vue                | 103 ++
 menu/righttoleftlayout/main.js                |  10 +
 menu/righttoleftlayout/package.json           |   7 +
 menu/verticalmenu/App.vue                     |  86 ++
 menu/verticalmenu/main.js                     |  10 +
 menu/verticalmenu/package.json                |   7 +
 menu/xmlmenu/App.vue                          |  49 +
 menu/xmlmenu/main.js                          |  10 +
 menu/xmlmenu/package.json                     |   7 +
 navbar/defaultfunctionality/App.vue           |  82 ++
 navbar/defaultfunctionality/main.js           |  10 +
 navbar/defaultfunctionality/package.json      |   7 +
 navbar/minimizednavbar/App.vue                |  54 ++
 navbar/minimizednavbar/main.js                |  10 +
 navbar/minimizednavbar/package.json           |   7 +
 navbar/righttoleftlayout/App.vue              |  23 +
 navbar/righttoleftlayout/main.js              |  10 +
 navbar/righttoleftlayout/package.json         |   7 +
 navbar/verticalnavbar/App.vue                 |  23 +
 navbar/verticalnavbar/main.js                 |  10 +
 navbar/verticalnavbar/package.json            |   7 +
 navigationbar/defaultfunctionality/App.vue    |  87 ++
 navigationbar/defaultfunctionality/main.js    |  10 +
 .../defaultfunctionality/package.json         |   7 +
 navigationbar/disabled/App.vue                |  98 ++
 navigationbar/disabled/main.js                |  10 +
 navigationbar/disabled/package.json           |   7 +
 navigationbar/events/App.vue                  | 137 +++
 navigationbar/events/main.js                  |  10 +
 navigationbar/events/package.json             |   7 +
 navigationbar/fittocontainer/App.vue          | 139 +++
 navigationbar/fittocontainer/main.js          |  10 +
 navigationbar/fittocontainer/package.json     |   7 +
 navigationbar/fluidsize/App.vue               |  95 ++
 navigationbar/fluidsize/main.js               |  10 +
 navigationbar/fluidsize/package.json          |   7 +
 navigationbar/keyboardnavigation/App.vue      | 104 ++
 navigationbar/keyboardnavigation/main.js      |  10 +
 navigationbar/keyboardnavigation/package.json |   7 +
 navigationbar/multipleexpanded/App.vue        |  90 ++
 navigationbar/multipleexpanded/main.js        |  10 +
 navigationbar/multipleexpanded/package.json   |   7 +
 navigationbar/righttoleftlayout/App.vue       |  98 ++
 navigationbar/righttoleftlayout/main.js       |  10 +
 navigationbar/righttoleftlayout/package.json  |   7 +
 navigationbar/togglemode/App.vue              |  97 ++
 navigationbar/togglemode/main.js              |  10 +
 navigationbar/togglemode/package.json         |   7 +
 notification/customicon/App.vue               |  88 ++
 notification/customicon/main.js               |  10 +
 notification/customicon/package.json          |   7 +
 notification/defaultfunctionality/App.vue     |  66 ++
 notification/defaultfunctionality/main.js     |  10 +
 .../defaultfunctionality/package.json         |   7 +
 notification/events/App.vue                   |  91 ++
 notification/events/main.js                   |  10 +
 notification/events/package.json              |   7 +
 notification/fluidsize/App.vue                |  27 +
 notification/fluidsize/main.js                |  10 +
 notification/fluidsize/package.json           |   7 +
 notification/notificationcontainer/App.vue    |  51 +
 notification/notificationcontainer/main.js    |  10 +
 .../notificationcontainer/package.json        |   7 +
 notification/righttoleftlayout/App.vue        |  27 +
 notification/righttoleftlayout/main.js        |  10 +
 notification/righttoleftlayout/package.json   |   7 +
 notification/settings/App.vue                 | 161 ++++
 notification/settings/main.js                 |  10 +
 notification/settings/package.json            |   7 +
 notification/timernotification/App.vue        | 121 +++
 notification/timernotification/main.js        |  10 +
 notification/timernotification/package.json   |   7 +
 numberinput/defaultfunctionality/App.vue      |  36 +
 numberinput/defaultfunctionality/main.js      |  10 +
 numberinput/defaultfunctionality/package.json |   7 +
 numberinput/events/App.vue                    |  61 ++
 numberinput/events/main.js                    |  10 +
 numberinput/events/package.json               |   7 +
 numberinput/fluidsize/App.vue                 |  26 +
 numberinput/fluidsize/main.js                 |  10 +
 numberinput/fluidsize/package.json            |   7 +
 numberinput/righttoleftlayout/App.vue         |  51 +
 numberinput/righttoleftlayout/main.js         |  10 +
 numberinput/righttoleftlayout/package.json    |   7 +
 numberinput/settings/App.vue                  | 121 +++
 numberinput/settings/main.js                  |  10 +
 numberinput/settings/package.json             |   7 +
 numberinput/simpleinputmode/App.vue           |  57 ++
 numberinput/simpleinputmode/main.js           |  10 +
 numberinput/simpleinputmode/package.json      |   7 +
 numberinput/templates/App.vue                 |  75 ++
 numberinput/templates/main.js                 |  10 +
 numberinput/templates/package.json            |   7 +
 numberinput/twowaydatabinding/App.vue         |  22 +
 numberinput/twowaydatabinding/main.js         |  10 +
 numberinput/twowaydatabinding/package.json    |   7 +
 numberinput/validation/App.vue                |  49 +
 numberinput/validation/main.js                |  10 +
 numberinput/validation/package.json           |   7 +
 panel/defaultfunctionality/App.vue            |  92 ++
 panel/defaultfunctionality/main.js            |  10 +
 panel/defaultfunctionality/package.json       |   7 +
 panel/dockpanel/App.vue                       | 123 +++
 panel/dockpanel/main.js                       |  10 +
 panel/dockpanel/package.json                  |   7 +
 panel/fluidsize/App.vue                       |  49 +
 panel/fluidsize/main.js                       |  10 +
 panel/fluidsize/package.json                  |   7 +
 panel/righttoleftlayout/App.vue               | 101 ++
 panel/righttoleftlayout/main.js               |  10 +
 panel/righttoleftlayout/package.json          |   7 +
 passwordinput/customstrengthrendering/App.vue |  69 ++
 passwordinput/customstrengthrendering/main.js |  10 +
 .../customstrengthrendering/package.json      |   7 +
 passwordinput/defaultfunctionality/App.vue    | 165 ++++
 passwordinput/defaultfunctionality/main.js    |  10 +
 .../defaultfunctionality/package.json         |   7 +
 passwordinput/fluidsize/App.vue               |  16 +
 passwordinput/fluidsize/main.js               |  10 +
 passwordinput/fluidsize/package.json          |   7 +
 passwordinput/righttoleftlayout/App.vue       |  31 +
 passwordinput/righttoleftlayout/main.js       |  10 +
 passwordinput/righttoleftlayout/package.json  |   7 +
 passwordinput/twowaydatabinding/App.vue       |  22 +
 passwordinput/twowaydatabinding/main.js       |  10 +
 passwordinput/twowaydatabinding/package.json  |   7 +
 pivotgrid/cell-values-alignment/App.vue       |  79 ++
 pivotgrid/cell-values-alignment/main.js       |  10 +
 pivotgrid/cell-values-alignment/package.json  |   7 +
 pivotgrid/custom-pivot-function/App.vue       | 142 +++
 pivotgrid/custom-pivot-function/main.js       |  10 +
 pivotgrid/custom-pivot-function/package.json  |   7 +
 pivotgrid/custom-rendering/App.vue            | 154 +++
 pivotgrid/custom-rendering/main.js            |  10 +
 pivotgrid/custom-rendering/package.json       |   7 +
 pivotgrid/designer/App.vue                    | 159 +++
 pivotgrid/designer/main.js                    |  10 +
 pivotgrid/designer/package.json               |   7 +
 pivotgrid/drill-through/App.vue               | 188 ++++
 pivotgrid/drill-through/main.js               |  10 +
 pivotgrid/drill-through/package.json          |   7 +
 pivotgrid/events/App.vue                      | 174 ++++
 pivotgrid/events/main.js                      |  10 +
 pivotgrid/events/package.json                 |   7 +
 pivotgrid/localization/App.vue                | 122 +++
 pivotgrid/localization/main.js                |  10 +
 pivotgrid/localization/package.json           |   7 +
 pivotgrid/olap-tree-style-rows/App.vue        | 137 +++
 pivotgrid/olap-tree-style-rows/main.js        |  10 +
 pivotgrid/olap-tree-style-rows/package.json   |   7 +
 .../rows-columns-cells-css-styling/App.vue    | 129 +++
 .../rows-columns-cells-css-styling/main.js    |  10 +
 .../package.json                              |   7 +
 pivotgrid/totals/App.vue                      | 114 +++
 pivotgrid/totals/main.js                      |  10 +
 pivotgrid/totals/package.json                 |   7 +
 pivotgrid/values-on-columns/App.vue           | 113 +++
 pivotgrid/values-on-columns/main.js           |  10 +
 pivotgrid/values-on-columns/package.json      |   7 +
 pivotgrid/values-on-rows/App.vue              | 113 +++
 pivotgrid/values-on-rows/main.js              |  10 +
 pivotgrid/values-on-rows/package.json         |   7 +
 popover/bottompositioning/App.vue             |  55 ++
 popover/bottompositioning/main.js             |  10 +
 popover/bottompositioning/package.json        |   7 +
 popover/defaultfunctionality/App.vue          |  59 ++
 popover/defaultfunctionality/main.js          |  10 +
 popover/defaultfunctionality/package.json     |   7 +
 popover/modalpopover/App.vue                  |  63 ++
 popover/modalpopover/main.js                  |  10 +
 popover/modalpopover/package.json             |   7 +
 popover/positioning/App.vue                   |  62 ++
 popover/positioning/main.js                   |  10 +
 popover/positioning/package.json              |   7 +
 popover/righttoleftlayout/App.vue             |  52 +
 popover/righttoleftlayout/main.js             |  10 +
 popover/righttoleftlayout/package.json        |   7 +
 progressbar/colorranges/App.vue               |  54 ++
 progressbar/colorranges/main.js               |  10 +
 progressbar/colorranges/package.json          |   7 +
 progressbar/defaultfunctionality/App.vue      | 103 ++
 progressbar/defaultfunctionality/main.js      |  10 +
 progressbar/defaultfunctionality/package.json |   7 +
 progressbar/layout/App.vue                    |  46 +
 progressbar/layout/main.js                    |  10 +
 progressbar/layout/package.json               |   7 +
 progressbar/righttoleftlayout/App.vue         |  20 +
 progressbar/righttoleftlayout/main.js         |  10 +
 progressbar/righttoleftlayout/package.json    |   7 +
 progressbar/templates/App.vue                 | 105 ++
 progressbar/templates/main.js                 |  10 +
 progressbar/templates/package.json            |   7 +
 radiobutton/defaultfunctionality/App.vue      |  88 ++
 radiobutton/defaultfunctionality/main.js      |  10 +
 radiobutton/defaultfunctionality/package.json |   7 +
 radiobutton/twowaydatabinding/App.vue         |  24 +
 radiobutton/twowaydatabinding/main.js         |  10 +
 radiobutton/twowaydatabinding/package.json    |   7 +
 rangeselector/backgroundimage/App.vue         |  76 ++
 rangeselector/backgroundimage/main.js         |  10 +
 rangeselector/backgroundimage/package.json    |   7 +
 rangeselector/chartonbackground/App.vue       | 117 +++
 rangeselector/chartonbackground/main.js       |  10 +
 rangeselector/chartonbackground/package.json  |   7 +
 rangeselector/customizedmarkers/App.vue       |  36 +
 rangeselector/customizedmarkers/main.js       |  10 +
 rangeselector/customizedmarkers/package.json  |   7 +
 rangeselector/datascale/App.vue               |  35 +
 rangeselector/datascale/main.js               |  10 +
 rangeselector/datascale/package.json          |   7 +
 rangeselector/decimalscale/App.vue            |  37 +
 rangeselector/decimalscale/main.js            |  10 +
 rangeselector/decimalscale/package.json       |   7 +
 rangeselector/defaultfunctionality/App.vue    |  57 ++
 rangeselector/defaultfunctionality/main.js    |  10 +
 .../defaultfunctionality/package.json         |   7 +
 rangeselector/fluidsize/App.vue               |  52 +
 rangeselector/fluidsize/main.js               |  10 +
 rangeselector/fluidsize/package.json          |   7 +
 rangeselector/negativescale/App.vue           |  28 +
 rangeselector/negativescale/main.js           |  10 +
 rangeselector/negativescale/package.json      |   7 +
 rangeselector/numericscale/App.vue            |  30 +
 rangeselector/numericscale/main.js            |  10 +
 rangeselector/numericscale/package.json       |   7 +
 rangeselector/rangeselectorasafilter/App.vue  | 108 +++
 rangeselector/rangeselectorasafilter/main.js  |  10 +
 .../rangeselectorasafilter/package.json       |   7 +
 rangeselector/righttoleftlayout/App.vue       |  90 ++
 rangeselector/righttoleftlayout/main.js       |  10 +
 rangeselector/righttoleftlayout/package.json  |   7 +
 rangeselector/timescale/App.vue               |  93 ++
 rangeselector/timescale/main.js               |  10 +
 rangeselector/timescale/package.json          |   7 +
 rating/defaultfunctionality/App.vue           |  30 +
 rating/defaultfunctionality/main.js           |  10 +
 rating/defaultfunctionality/package.json      |   7 +
 rating/twowaydatabinding/App.vue              |  22 +
 rating/twowaydatabinding/main.js              |  10 +
 rating/twowaydatabinding/package.json         |   7 +
 repeatbutton/defaultfunctionality/App.vue     |  35 +
 repeatbutton/defaultfunctionality/main.js     |  10 +
 .../defaultfunctionality/package.json         |   7 +
 responsivepanel/defaultfunctionality/App.vue  | 188 ++++
 responsivepanel/defaultfunctionality/main.js  |  10 +
 .../defaultfunctionality/package.json         |   7 +
 responsivepanel/fluidsize/App.vue             | 152 +++
 responsivepanel/fluidsize/main.js             |  10 +
 responsivepanel/fluidsize/package.json        |   7 +
 .../integrationwithjqxmenu/App.vue            | 183 ++++
 .../integrationwithjqxmenu/main.js            |  10 +
 .../integrationwithjqxmenu/package.json       |   7 +
 responsivepanel/righttoleftlayout/App.vue     |  52 +
 responsivepanel/righttoleftlayout/main.js     |  10 +
 .../righttoleftlayout/package.json            |   7 +
 ribbon/collapsible/App.vue                    | 198 ++++
 ribbon/collapsible/main.js                    |  10 +
 ribbon/collapsible/package.json               |   7 +
 ribbon/defaultfunctionality/App.vue           | 861 +++++++++++++++++
 ribbon/defaultfunctionality/main.js           |  10 +
 ribbon/defaultfunctionality/package.json      |   7 +
 ribbon/events/App.vue                         | 197 ++++
 ribbon/events/main.js                         |  10 +
 ribbon/events/package.json                    |   7 +
 ribbon/fluidsize/App.vue                      | 172 ++++
 ribbon/fluidsize/main.js                      |  10 +
 ribbon/fluidsize/package.json                 |   7 +
 ribbon/integrationwithotherwidgets/App.vue    | 143 +++
 ribbon/integrationwithotherwidgets/main.js    |  10 +
 .../integrationwithotherwidgets/package.json  |   7 +
 ribbon/popuplayout/App.vue                    | 299 ++++++
 ribbon/popuplayout/main.js                    |  10 +
 ribbon/popuplayout/package.json               |   7 +
 ribbon/ribbonatthebottom/App.vue              | 114 +++
 ribbon/ribbonatthebottom/main.js              |  10 +
 ribbon/ribbonatthebottom/package.json         |   7 +
 ribbon/righttoleftlayout/App.vue              | 172 ++++
 ribbon/righttoleftlayout/main.js              |  10 +
 ribbon/righttoleftlayout/package.json         |   7 +
 ribbon/scrolling/App.vue                      | 175 ++++
 ribbon/scrolling/main.js                      |  10 +
 ribbon/scrolling/package.json                 |   7 +
 ribbon/verticalribbon/App.vue                 | 460 +++++++++
 ribbon/verticalribbon/main.js                 |  10 +
 ribbon/verticalribbon/package.json            |   7 +
 ribbon/verticalrightposition/App.vue          | 460 +++++++++
 ribbon/verticalrightposition/main.js          |  10 +
 ribbon/verticalrightposition/package.json     |   7 +
 scheduler/agendaview/App.vue                  | 134 +++
 scheduler/agendaview/main.js                  |  10 +
 scheduler/agendaview/package.json             |   7 +
 scheduler/appointmentcustomization/App.vue    | 177 ++++
 scheduler/appointmentcustomization/main.js    |  10 +
 .../appointmentcustomization/package.json     |   7 +
 scheduler/appointmentrestrictions/App.vue     | 158 +++
 scheduler/appointmentrestrictions/main.js     |  10 +
 .../appointmentrestrictions/package.json      |   7 +
 .../appointmentsexacttimerendering/App.vue    | 133 +++
 .../appointmentsexacttimerendering/main.js    |  10 +
 .../package.json                              |   7 +
 scheduler/appointmentstatuses/App.vue         | 141 +++
 scheduler/appointmentstatuses/main.js         |  10 +
 scheduler/appointmentstatuses/package.json    |   7 +
 scheduler/bindingtoicalendar/App.vue          |  54 ++
 scheduler/bindingtoicalendar/main.js          |  10 +
 scheduler/bindingtoicalendar/package.json     |   7 +
 scheduler/bindingtojson/App.vue               |  61 ++
 scheduler/bindingtojson/main.js               |  10 +
 scheduler/bindingtojson/package.json          |   7 +
 scheduler/contextmenu/App.vue                 | 206 ++++
 scheduler/contextmenu/main.js                 |  10 +
 scheduler/contextmenu/package.json            |   7 +
 scheduler/dataexport/App.vue                  | 186 ++++
 scheduler/dataexport/main.js                  |  10 +
 scheduler/dataexport/package.json             |   7 +
 scheduler/dataprinting/App.vue                | 167 ++++
 scheduler/dataprinting/main.js                |  10 +
 scheduler/dataprinting/package.json           |   7 +
 scheduler/defaultfunctionality/App.vue        | 133 +++
 scheduler/defaultfunctionality/main.js        |  10 +
 scheduler/defaultfunctionality/package.json   |   7 +
 scheduler/editdialog/App.vue                  | 262 +++++
 scheduler/editdialog/main.js                  |  10 +
 scheduler/editdialog/package.json             |   7 +
 scheduler/events/App.vue                      |  96 ++
 scheduler/events/main.js                      |  10 +
 scheduler/events/package.json                 |   7 +
 scheduler/fluidsize/App.vue                   |  71 ++
 scheduler/fluidsize/main.js                   |  10 +
 scheduler/fluidsize/package.json              |   7 +
 scheduler/hidetimeruler/App.vue               |  65 ++
 scheduler/hidetimeruler/main.js               |  10 +
 scheduler/hidetimeruler/package.json          |   7 +
 scheduler/hideweekends/App.vue                |  66 ++
 scheduler/hideweekends/main.js                |  10 +
 scheduler/hideweekends/package.json           |   7 +
 scheduler/keyboardnavigation/App.vue          | 131 +++
 scheduler/keyboardnavigation/main.js          |  10 +
 scheduler/keyboardnavigation/package.json     |   7 +
 scheduler/localization/App.vue                | 287 ++++++
 scheduler/localization/main.js                |  10 +
 scheduler/localization/package.json           |   7 +
 scheduler/monthviewweeknumbers/App.vue        | 133 +++
 scheduler/monthviewweeknumbers/main.js        |  10 +
 scheduler/monthviewweeknumbers/package.json   |   7 +
 scheduler/monthviewwithautorowheight/App.vue  | 133 +++
 scheduler/monthviewwithautorowheight/main.js  |  10 +
 .../monthviewwithautorowheight/package.json   |   7 +
 scheduler/recurringappointments/App.vue       | 119 +++
 scheduler/recurringappointments/main.js       |  10 +
 scheduler/recurringappointments/package.json  |   7 +
 scheduler/resources/App.vue                   | 134 +++
 scheduler/resources/main.js                   |  10 +
 scheduler/resources/package.json              |   7 +
 .../resourceswithcustomcolumnwidths/App.vue   | 133 +++
 .../resourceswithcustomcolumnwidths/main.js   |  10 +
 .../package.json                              |   7 +
 scheduler/righttoleft/App.vue                 |  67 ++
 scheduler/righttoleft/main.js                 |  10 +
 scheduler/righttoleft/package.json            |   7 +
 scheduler/rowheight/App.vue                   |  65 ++
 scheduler/rowheight/main.js                   |  10 +
 scheduler/rowheight/package.json              |   7 +
 scheduler/rowheightconfiguration/App.vue      |  65 ++
 scheduler/rowheightconfiguration/main.js      |  10 +
 scheduler/rowheightconfiguration/package.json |   7 +
 scheduler/timelineviews/App.vue               | 133 +++
 scheduler/timelineviews/main.js               |  10 +
 scheduler/timelineviews/package.json          |   7 +
 .../timelineviewswithcustomslotwidth/App.vue  | 134 +++
 .../timelineviewswithcustomslotwidth/main.js  |  10 +
 .../package.json                              |   7 +
 scheduler/timelineviewswithresources/App.vue  | 134 +++
 scheduler/timelineviewswithresources/main.js  |  10 +
 .../timelineviewswithresources/package.json   |   7 +
 scheduler/timescalesconfiguration/App.vue     |  62 ++
 scheduler/timescalesconfiguration/main.js     |  10 +
 .../timescalesconfiguration/package.json      |   7 +
 scheduler/timescaleszooming/App.vue           |  65 ++
 scheduler/timescaleszooming/main.js           |  10 +
 scheduler/timescaleszooming/package.json      |   7 +
 scheduler/timezones/App.vue                   |  61 ++
 scheduler/timezones/main.js                   |  10 +
 scheduler/timezones/package.json              |   7 +
 scheduler/verticalresources/App.vue           | 134 +++
 scheduler/verticalresources/main.js           |  10 +
 scheduler/verticalresources/package.json      |   7 +
 scheduler/worktime/App.vue                    |  73 ++
 scheduler/worktime/main.js                    |  10 +
 scheduler/worktime/package.json               |   7 +
 scrollbar/defaultfunctionality/App.vue        |  31 +
 scrollbar/defaultfunctionality/main.js        |  10 +
 scrollbar/defaultfunctionality/package.json   |   7 +
 scrollbar/righttoleft/App.vue                 |  23 +
 scrollbar/righttoleft/main.js                 |  10 +
 scrollbar/righttoleft/package.json            |   7 +
 scrollview/defaultfunctionality/App.vue       |  56 ++
 scrollview/defaultfunctionality/main.js       |  10 +
 scrollview/defaultfunctionality/package.json  |   7 +
 slider/defaultfunctionality/App.vue           | 120 +++
 slider/defaultfunctionality/main.js           |  10 +
 slider/defaultfunctionality/package.json      |   7 +
 slider/events/App.vue                         |  33 +
 slider/events/main.js                         |  10 +
 slider/events/package.json                    |   7 +
 slider/fluidsize/App.vue                      |  26 +
 slider/fluidsize/main.js                      |  10 +
 slider/fluidsize/package.json                 |   7 +
 slider/keyboardnavigation/App.vue             |  45 +
 slider/keyboardnavigation/main.js             |  10 +
 slider/keyboardnavigation/package.json        |   7 +
 slider/layout/App.vue                         |  39 +
 slider/layout/main.js                         |  10 +
 slider/layout/package.json                    |   7 +
 slider/rangeslider/App.vue                    | 324 +++++++
 slider/rangeslider/main.js                    |  10 +
 slider/rangeslider/package.json               |   7 +
 slider/righttoleft/App.vue                    |  39 +
 slider/righttoleft/main.js                    |  10 +
 slider/righttoleft/package.json               |   7 +
 slider/sliderlabels/App.vue                   |  23 +
 slider/sliderlabels/main.js                   |  10 +
 slider/sliderlabels/package.json              |   7 +
 slider/slidertooltip/App.vue                  |  19 +
 slider/slidertooltip/main.js                  |  10 +
 slider/slidertooltip/package.json             |   7 +
 slider/templates/App.vue                      |  37 +
 slider/templates/main.js                      |  10 +
 slider/templates/package.json                 |   7 +
 slider/twowaydatabinding/App.vue              |  22 +
 slider/twowaydatabinding/main.js              |  10 +
 slider/twowaydatabinding/package.json         |   7 +
 slider/verticalslider/App.vue                 | 327 +++++++
 slider/verticalslider/main.js                 |  10 +
 slider/verticalslider/package.json            |   7 +
 sortable/connectedlist/App.vue                |  88 ++
 sortable/connectedlist/main.js                |  10 +
 sortable/connectedlist/package.json           |   7 +
 sortable/defaultfunctionality/App.vue         |  57 ++
 sortable/defaultfunctionality/main.js         |  10 +
 sortable/defaultfunctionality/package.json    |   7 +
 sortable/displayastable/App.vue               |  47 +
 sortable/displayastable/main.js               |  10 +
 sortable/displayastable/package.json          |   7 +
 sortable/events/App.vue                       |  91 ++
 sortable/events/main.js                       |  10 +
 sortable/events/package.json                  |   7 +
 splitter/api/App.vue                          |  87 ++
 splitter/api/main.js                          |  10 +
 splitter/api/package.json                     |   7 +
 splitter/defaultfunctionality/App.vue         | 207 ++++
 splitter/defaultfunctionality/main.js         |  10 +
 splitter/defaultfunctionality/package.json    |   7 +
 splitter/events/App.vue                       |  60 ++
 splitter/events/main.js                       |  10 +
 splitter/events/package.json                  |   7 +
 splitter/fluidsize/App.vue                    |  52 +
 splitter/fluidsize/main.js                    |  10 +
 splitter/fluidsize/package.json               |   7 +
 splitter/horizontalsplitter/App.vue           |  22 +
 splitter/horizontalsplitter/main.js           |  10 +
 splitter/horizontalsplitter/package.json      |   7 +
 splitter/integrationwithjqxgrid/App.vue       | 122 +++
 splitter/integrationwithjqxgrid/main.js       |  10 +
 splitter/integrationwithjqxgrid/package.json  |   7 +
 splitter/integrationwithjqxtabs/App.vue       |  46 +
 splitter/integrationwithjqxtabs/main.js       |  10 +
 splitter/integrationwithjqxtabs/package.json  |   7 +
 splitter/integrationwithjqxtree/App.vue       |  97 ++
 splitter/integrationwithjqxtree/main.js       |  10 +
 splitter/integrationwithjqxtree/package.json  |   7 +
 .../multiplesplitpanelswithjqxtabs/App.vue    |  69 ++
 .../multiplesplitpanelswithjqxtabs/main.js    |  10 +
 .../package.json                              |   7 +
 splitter/nestedsidesplitters/App.vue          |  39 +
 splitter/nestedsidesplitters/main.js          |  10 +
 splitter/nestedsidesplitters/package.json     |   7 +
 splitter/nestedsplitters/App.vue              |  55 ++
 splitter/nestedsplitters/main.js              |  10 +
 splitter/nestedsplitters/package.json         |   7 +
 splitter/simplecontainer/App.vue              |  31 +
 splitter/simplecontainer/main.js              |  10 +
 splitter/simplecontainer/package.json         |   7 +
 splitter/splitterwithinjqxtabs/App.vue        |  59 ++
 splitter/splitterwithinjqxtabs/main.js        |  10 +
 splitter/splitterwithinjqxtabs/package.json   |   7 +
 splitter/togglebottompanel/App.vue            |  22 +
 splitter/togglebottompanel/main.js            |  10 +
 splitter/togglebottompanel/package.json       |   7 +
 splitter/togglerightpanel/App.vue             |  22 +
 splitter/togglerightpanel/main.js             |  10 +
 splitter/togglerightpanel/package.json        |   7 +
 splitter/verticalsplitter/App.vue             |  21 +
 splitter/verticalsplitter/main.js             |  10 +
 splitter/verticalsplitter/package.json        |   7 +
 switchbutton/defaultfunctionality/App.vue     | 181 ++++
 switchbutton/defaultfunctionality/main.js     |  10 +
 .../defaultfunctionality/package.json         |   7 +
 switchbutton/twowaydatabinding/App.vue        |  22 +
 switchbutton/twowaydatabinding/main.js        |  10 +
 switchbutton/twowaydatabinding/package.json   |   7 +
 tabs/closebuttons/App.vue                     |  55 ++
 tabs/closebuttons/main.js                     |  10 +
 tabs/closebuttons/package.json                |   7 +
 tabs/collapsible/App.vue                      |  81 ++
 tabs/collapsible/main.js                      |  10 +
 tabs/collapsible/package.json                 |   7 +
 tabs/defaultfunctionality/App.vue             | 104 ++
 tabs/defaultfunctionality/main.js             |  10 +
 tabs/defaultfunctionality/package.json        |   7 +
 tabs/draganddrop/App.vue                      |  43 +
 tabs/draganddrop/main.js                      |  10 +
 tabs/draganddrop/package.json                 |   7 +
 tabs/events/App.vue                           |  86 ++
 tabs/events/main.js                           |  10 +
 tabs/events/package.json                      |   7 +
 tabs/fluidsize/App.vue                        |  50 +
 tabs/fluidsize/main.js                        |  10 +
 tabs/fluidsize/package.json                   |   7 +
 tabs/integrationwithotherwidgets/App.vue      | 164 ++++
 tabs/integrationwithotherwidgets/main.js      |  10 +
 tabs/integrationwithotherwidgets/package.json |   7 +
 tabs/keyboardnavigation/App.vue               | 102 ++
 tabs/keyboardnavigation/main.js               |  10 +
 tabs/keyboardnavigation/package.json          |   7 +
 tabs/loadingtabcontentswithajax/App.vue       |  53 +
 tabs/loadingtabcontentswithajax/main.js       |  10 +
 tabs/loadingtabcontentswithajax/package.json  |   7 +
 tabs/mapinsidetab/App.vue                     |  50 +
 tabs/mapinsidetab/main.js                     |  10 +
 tabs/mapinsidetab/package.json                |   7 +
 tabs/righttoleftlayout/App.vue                |  85 ++
 tabs/righttoleftlayout/main.js                |  10 +
 tabs/righttoleftlayout/package.json           |   7 +
 tabs/saveloadselectionusingcookies/App.vue    |  54 ++
 tabs/saveloadselectionusingcookies/main.js    |  10 +
 .../package.json                              |   7 +
 tabs/scrolling/App.vue                        | 172 ++++
 tabs/scrolling/main.js                        |  10 +
 tabs/scrolling/package.json                   |   7 +
 tabs/settings/App.vue                         |  94 ++
 tabs/settings/main.js                         |  10 +
 tabs/settings/package.json                    |   7 +
 tabs/tabswithimages/App.vue                   | 165 ++++
 tabs/tabswithimages/main.js                   |  10 +
 tabs/tabswithimages/package.json              |   7 +
 tabs/wizard/App.vue                           | 318 ++++++
 tabs/wizard/main.js                           |  10 +
 tabs/wizard/package.json                      |   7 +
 tagcloud/addremoveupdatetags/App.vue          |  67 ++
 tagcloud/addremoveupdatetags/main.js          |  10 +
 tagcloud/addremoveupdatetags/package.json     |   7 +
 tagcloud/bindingtojson/App.vue                |  29 +
 tagcloud/bindingtojson/main.js                |  10 +
 tagcloud/bindingtojson/package.json           |   7 +
 tagcloud/colorselection/App.vue               | 133 +++
 tagcloud/colorselection/main.js               |  10 +
 tagcloud/colorselection/package.json          |   7 +
 tagcloud/customtags/App.vue                   |  65 ++
 tagcloud/customtags/main.js                   |  10 +
 tagcloud/customtags/package.json              |   7 +
 tagcloud/defaultfunctionality/App.vue         |  39 +
 tagcloud/defaultfunctionality/main.js         |  10 +
 tagcloud/defaultfunctionality/package.json    |   7 +
 tagcloud/fontsize/App.vue                     | 104 ++
 tagcloud/fontsize/main.js                     |  10 +
 tagcloud/fontsize/package.json                |   7 +
 tagcloud/showhidetags/App.vue                 |  82 ++
 tagcloud/showhidetags/main.js                 |  10 +
 tagcloud/showhidetags/package.json            |   7 +
 tagcloud/sortingfiltering/App.vue             | 163 ++++
 tagcloud/sortingfiltering/main.js             |  10 +
 tagcloud/sortingfiltering/package.json        |   7 +
 textarea/bindingtojsondata/App.vue            |  45 +
 textarea/bindingtojsondata/main.js            |  10 +
 textarea/bindingtojsondata/package.json       |   7 +
 textarea/defaultfunctionality/App.vue         |  32 +
 textarea/defaultfunctionality/main.js         |  10 +
 textarea/defaultfunctionality/package.json    |   7 +
 textarea/fluidsize/App.vue                    |  31 +
 textarea/fluidsize/main.js                    |  10 +
 textarea/fluidsize/package.json               |   7 +
 textarea/multiplevalues/App.vue               |  41 +
 textarea/multiplevalues/main.js               |  10 +
 textarea/multiplevalues/package.json          |   7 +
 textarea/righttoleftlayout/App.vue            |  23 +
 textarea/righttoleftlayout/main.js            |  10 +
 textarea/righttoleftlayout/package.json       |   7 +
 textarea/twowaydatabinding/App.vue            |  24 +
 textarea/twowaydatabinding/main.js            |  10 +
 textarea/twowaydatabinding/package.json       |   7 +
 togglebutton/defaultfunctionality/App.vue     |  44 +
 togglebutton/defaultfunctionality/main.js     |  10 +
 .../defaultfunctionality/package.json         |   7 +
 toolbar/buttongroupsintoolbar/App.vue         |  85 ++
 toolbar/buttongroupsintoolbar/main.js         |  10 +
 toolbar/buttongroupsintoolbar/package.json    |   7 +
 toolbar/cascadingcomboboxesintoolbar/App.vue  |  82 ++
 toolbar/cascadingcomboboxesintoolbar/main.js  |  10 +
 .../cascadingcomboboxesintoolbar/package.json |   7 +
 toolbar/defaultfunctionality/App.vue          |  85 ++
 toolbar/defaultfunctionality/main.js          |  10 +
 toolbar/defaultfunctionality/package.json     |   7 +
 toolbar/fluidsize/App.vue                     |  80 ++
 toolbar/fluidsize/main.js                     |  10 +
 toolbar/fluidsize/package.json                |   7 +
 toolbar/nonminimizabletools/App.vue           | 113 +++
 toolbar/nonminimizabletools/main.js           |  10 +
 toolbar/nonminimizabletools/package.json      |   7 +
 toolbar/resizabletoolbar/App.vue              | 106 ++
 toolbar/resizabletoolbar/main.js              |  10 +
 toolbar/resizabletoolbar/package.json         |   7 +
 toolbar/righttoleftlayout/App.vue             |  81 ++
 toolbar/righttoleftlayout/main.js             |  10 +
 toolbar/righttoleftlayout/package.json        |   7 +
 toolbar/settings/App.vue                      | 161 ++++
 toolbar/settings/main.js                      |  10 +
 toolbar/settings/package.json                 |   7 +
 toolbar/toolevents/App.vue                    | 105 ++
 toolbar/toolevents/main.js                    |  10 +
 toolbar/toolevents/package.json               |   7 +
 tooltip/closeonclick/App.vue                  |  40 +
 tooltip/closeonclick/main.js                  |  10 +
 tooltip/closeonclick/package.json             |   7 +
 tooltip/defaultfunctionality/App.vue          |  70 ++
 tooltip/defaultfunctionality/main.js          |  10 +
 tooltip/defaultfunctionality/package.json     |   7 +
 tooltip/popover/App.vue                       |  56 ++
 tooltip/popover/main.js                       |  10 +
 tooltip/popover/package.json                  |   7 +
 tooltip/tooltippositions/App.vue              |  36 +
 tooltip/tooltippositions/main.js              |  10 +
 tooltip/tooltippositions/package.json         |   7 +
 tree/checkboxes/App.vue                       | 119 +++
 tree/checkboxes/main.js                       |  10 +
 tree/checkboxes/package.json                  |   7 +
 tree/contextmenu/App.vue                      | 144 +++
 tree/contextmenu/main.js                      |  10 +
 tree/contextmenu/package.json                 |   7 +
 tree/defaultfunctionality/App.vue             |  57 ++
 tree/defaultfunctionality/main.js             |  10 +
 tree/defaultfunctionality/package.json        |   7 +
 tree/draganddrop/App.vue                      | 122 +++
 tree/draganddrop/main.js                      |  10 +
 tree/draganddrop/package.json                 |   7 +
 tree/dropdowntree/App.vue                     |  60 ++
 tree/dropdowntree/main.js                     |  10 +
 tree/dropdowntree/package.json                |   7 +
 tree/events/App.vue                           |  74 ++
 tree/events/main.js                           |  10 +
 tree/events/package.json                      |   7 +
 tree/fluidsize/App.vue                        |  53 +
 tree/fluidsize/main.js                        |  10 +
 tree/fluidsize/package.json                   |   7 +
 tree/jsontree/App.vue                         | 119 +++
 tree/jsontree/main.js                         |  10 +
 tree/jsontree/package.json                    |   7 +
 tree/keyboardnavigation/App.vue               |  63 ++
 tree/keyboardnavigation/main.js               |  10 +
 tree/keyboardnavigation/package.json          |   7 +
 tree/navigation/App.vue                       |  88 ++
 tree/navigation/main.js                       |  10 +
 tree/navigation/package.json                  |   7 +
 tree/righttoleftlayout/App.vue                |  44 +
 tree/righttoleftlayout/main.js                |  10 +
 tree/righttoleftlayout/package.json           |   7 +
 tree/settings/App.vue                         | 233 +++++
 tree/settings/main.js                         |  10 +
 tree/settings/package.json                    |   7 +
 tree/xmltree/App.vue                          |  35 +
 tree/xmltree/main.js                          |  10 +
 tree/xmltree/package.json                     |   7 +
 treegrid/advancedfiltering/App.vue            |  71 ++
 treegrid/advancedfiltering/main.js            |  10 +
 treegrid/advancedfiltering/package.json       |   7 +
 treegrid/aggregates/App.vue                   |  71 ++
 treegrid/aggregates/main.js                   |  10 +
 treegrid/aggregates/package.json              |   7 +
 treegrid/aggregatestemplate/App.vue           | 110 +++
 treegrid/aggregatestemplate/main.js           |  10 +
 treegrid/aggregatestemplate/package.json      |   7 +
 treegrid/celledit/App.vue                     | 122 +++
 treegrid/celledit/main.js                     |  10 +
 treegrid/celledit/package.json                |   7 +
 treegrid/columnalignment/App.vue              | 151 +++
 treegrid/columnalignment/main.js              |  10 +
 treegrid/columnalignment/package.json         |   7 +
 treegrid/columncheckboxes/App.vue             |  92 ++
 treegrid/columncheckboxes/main.js             |  10 +
 treegrid/columncheckboxes/package.json        |   7 +
 treegrid/columnformatting/App.vue             | 153 +++
 treegrid/columnformatting/main.js             |  10 +
 treegrid/columnformatting/package.json        |   7 +
 treegrid/columnhierarchicalcheckboxes/App.vue |  93 ++
 treegrid/columnhierarchicalcheckboxes/main.js |  10 +
 .../columnhierarchicalcheckboxes/package.json |   7 +
 treegrid/columnicons/App.vue                  |  90 ++
 treegrid/columnicons/main.js                  |  10 +
 treegrid/columnicons/package.json             |   7 +
 treegrid/columnreorder/App.vue                |  92 ++
 treegrid/columnreorder/main.js                |  10 +
 treegrid/columnreorder/package.json           |   7 +
 treegrid/columnresize/App.vue                 |  92 ++
 treegrid/columnresize/main.js                 |  10 +
 treegrid/columnresize/package.json            |   7 +
 treegrid/columnshierarchy/App.vue             |  95 ++
 treegrid/columnshierarchy/main.js             |  10 +
 treegrid/columnshierarchy/package.json        |   7 +
 treegrid/columnsmallicons/App.vue             | 116 +++
 treegrid/columnsmallicons/main.js             |  10 +
 treegrid/columnsmallicons/package.json        |   7 +
 treegrid/commandcolumn/App.vue                | 170 ++++
 treegrid/commandcolumn/main.js                |  10 +
 treegrid/commandcolumn/package.json           |   7 +
 treegrid/conditionalformatting/App.vue        | 134 +++
 treegrid/conditionalformatting/main.js        |  10 +
 treegrid/conditionalformatting/package.json   |   7 +
 treegrid/conditionalrendering/App.vue         | 137 +++
 treegrid/conditionalrendering/main.js         |  10 +
 treegrid/conditionalrendering/package.json    |   7 +
 treegrid/contextmenu/App.vue                  | 108 +++
 treegrid/contextmenu/main.js                  |  10 +
 treegrid/contextmenu/package.json             |   7 +
 treegrid/createComponent/App.vue              |  67 ++
 treegrid/createComponent/main.js              |  10 +
 treegrid/createComponent/package.json         |   7 +
 treegrid/csvdata/App.vue                      |  68 ++
 treegrid/csvdata/main.js                      |  10 +
 treegrid/csvdata/package.json                 |   7 +
 treegrid/customeditors/App.vue                | 132 +++
 treegrid/customeditors/main.js                |  10 +
 treegrid/customeditors/package.json           |   7 +
 treegrid/dataexport/App.vue                   | 128 +++
 treegrid/dataexport/main.js                   |  10 +
 treegrid/dataexport/package.json              |   7 +
 treegrid/datagrouping/App.vue                 |  75 ++
 treegrid/datagrouping/main.js                 |  10 +
 treegrid/datagrouping/package.json            |   7 +
 treegrid/dataprinting/App.vue                 | 106 ++
 treegrid/dataprinting/main.js                 |  10 +
 treegrid/dataprinting/package.json            |   7 +
 treegrid/defaultfunctionality/App.vue         |  68 ++
 treegrid/defaultfunctionality/main.js         |  10 +
 treegrid/defaultfunctionality/package.json    |   7 +
 treegrid/dialog/App.vue                       | 186 ++++
 treegrid/dialog/main.js                       |  10 +
 treegrid/dialog/package.json                  |   7 +
 treegrid/filtering/App.vue                    |  71 ++
 treegrid/filtering/main.js                    |  10 +
 treegrid/filtering/package.json               |   7 +
 treegrid/filteringapi/App.vue                 | 207 ++++
 treegrid/filteringapi/main.js                 |  10 +
 treegrid/filteringapi/package.json            |   7 +
 treegrid/fluidsize/App.vue                    |  87 ++
 treegrid/fluidsize/main.js                    |  10 +
 treegrid/fluidsize/package.json               |   7 +
 treegrid/headertemplate/App.vue               | 134 +++
 treegrid/headertemplate/main.js               |  10 +
 treegrid/headertemplate/package.json          |   7 +
 treegrid/inlinerow/App.vue                    | 240 +++++
 treegrid/inlinerow/main.js                    |  10 +
 treegrid/inlinerow/package.json               |   7 +
 treegrid/jsondata/App.vue                     |  84 ++
 treegrid/jsondata/main.js                     |  10 +
 treegrid/jsondata/package.json                |   7 +
 treegrid/keyboardnavigation/App.vue           | 102 ++
 treegrid/keyboardnavigation/main.js           |  10 +
 treegrid/keyboardnavigation/package.json      |   7 +
 treegrid/localdata/App.vue                    |  71 ++
 treegrid/localdata/main.js                    |  10 +
 treegrid/localdata/package.json               |   7 +
 treegrid/localization/App.vue                 |  73 ++
 treegrid/localization/main.js                 |  10 +
 treegrid/localization/package.json            |   7 +
 treegrid/lockrow/App.vue                      |  89 ++
 treegrid/lockrow/main.js                      |  10 +
 treegrid/lockrow/package.json                 |   7 +
 treegrid/manualaggregates/App.vue             | 122 +++
 treegrid/manualaggregates/main.js             |  10 +
 treegrid/manualaggregates/package.json        |   7 +
 treegrid/nestedjsondata/App.vue               |  81 ++
 treegrid/nestedjsondata/main.js               |  10 +
 treegrid/nestedjsondata/package.json          |   7 +
 treegrid/nestedxmldata/App.vue                |  71 ++
 treegrid/nestedxmldata/main.js                |  10 +
 treegrid/nestedxmldata/package.json           |   7 +
 treegrid/paging/App.vue                       |  71 ++
 treegrid/paging/main.js                       |  10 +
 treegrid/paging/package.json                  |   7 +
 treegrid/pagingapi/App.vue                    | 159 +++
 treegrid/pagingapi/main.js                    |  10 +
 treegrid/pagingapi/package.json               |   7 +
 treegrid/pagingbyrootrecords/App.vue          |  70 ++
 treegrid/pagingbyrootrecords/main.js          |  10 +
 treegrid/pagingbyrootrecords/package.json     |   7 +
 treegrid/pinnedfrozencolumn/App.vue           |  92 ++
 treegrid/pinnedfrozencolumn/main.js           |  10 +
 treegrid/pinnedfrozencolumn/package.json      |   7 +
 treegrid/propertyeditor/App.vue               | 259 +++++
 treegrid/propertyeditor/main.js               |  10 +
 treegrid/propertyeditor/package.json          |   7 +
 treegrid/righttoleftlayout/App.vue            |  80 ++
 treegrid/righttoleftlayout/main.js            |  10 +
 treegrid/righttoleftlayout/package.json       |   7 +
 treegrid/rowdetails/App.vue                   | 102 ++
 treegrid/rowdetails/main.js                   |  10 +
 treegrid/rowdetails/package.json              |   7 +
 treegrid/searchfield/App.vue                  |  81 ++
 treegrid/searchfield/main.js                  |  10 +
 treegrid/searchfield/package.json             |   7 +
 treegrid/showorhidecolumn/App.vue             | 115 +++
 treegrid/showorhidecolumn/main.js             |  10 +
 treegrid/showorhidecolumn/package.json        |   7 +
 treegrid/sorting/App.vue                      |  88 ++
 treegrid/sorting/main.js                      |  10 +
 treegrid/sorting/package.json                 |   7 +
 treegrid/sortingapi/App.vue                   | 124 +++
 treegrid/sortingapi/main.js                   |  10 +
 treegrid/sortingapi/package.json              |   7 +
 treegrid/tabdata/App.vue                      |  55 ++
 treegrid/tabdata/main.js                      |  10 +
 treegrid/tabdata/package.json                 |   7 +
 treegrid/validation/App.vue                   | 123 +++
 treegrid/validation/main.js                   |  10 +
 treegrid/validation/package.json              |   7 +
 treegrid/virtualmode/App.vue                  | 120 +++
 treegrid/virtualmode/main.js                  |  10 +
 treegrid/virtualmode/package.json             |   7 +
 treegrid/virtualmodewithajax/App.vue          |  90 ++
 treegrid/virtualmodewithajax/main.js          |  10 +
 treegrid/virtualmodewithajax/package.json     |   7 +
 treegrid/xmldata/App.vue                      |  68 ++
 treegrid/xmldata/main.js                      |  10 +
 treegrid/xmldata/package.json                 |   7 +
 treemap/automaticrendering/App.vue            | 103 ++
 treemap/automaticrendering/main.js            |  10 +
 treemap/automaticrendering/package.json       |   7 +
 treemap/bindingtojson/App.vue                 | 134 +++
 treemap/bindingtojson/main.js                 |  10 +
 treemap/bindingtojson/package.json            |   7 +
 treemap/bindingtotabdata/App.vue              |  85 ++
 treemap/bindingtotabdata/main.js              |  10 +
 treemap/bindingtotabdata/package.json         |   7 +
 treemap/customrendering/App.vue               |  85 ++
 treemap/customrendering/main.js               |  10 +
 treemap/customrendering/package.json          |   7 +
 treemap/defaultfunctionality/App.vue          | 175 ++++
 treemap/defaultfunctionality/main.js          |  10 +
 treemap/defaultfunctionality/package.json     |   7 +
 treemap/fluidsize/App.vue                     | 124 +++
 treemap/fluidsize/main.js                     |  10 +
 treemap/fluidsize/package.json                |   7 +
 treemap/issues.txt                            |  17 +
 treemap/rangesrendering/App.vue               | 124 +++
 treemap/rangesrendering/main.js               |  10 +
 treemap/rangesrendering/package.json          |   7 +
 validator/defaultfunctionality/App.vue        | 162 ++++
 validator/defaultfunctionality/main.js        |  10 +
 validator/defaultfunctionality/package.json   |   7 +
 validator/errorlabels/App.vue                 | 162 ++++
 validator/errorlabels/main.js                 |  10 +
 validator/errorlabels/package.json            |   7 +
 validator/righttoleftlayout/App.vue           | 164 ++++
 validator/righttoleftlayout/main.js           |  10 +
 validator/righttoleftlayout/package.json      |   7 +
 window/defaultfunctionality/App.vue           | 167 ++++
 window/defaultfunctionality/main.js           |  10 +
 window/defaultfunctionality/package.json      |   7 +
 window/events/App.vue                         |  95 ++
 window/events/main.js                         |  10 +
 window/events/package.json                    |   7 +
 window/keyboardnavigation/App.vue             | 100 ++
 window/keyboardnavigation/main.js             |  10 +
 window/keyboardnavigation/package.json        |   7 +
 window/multiplewindows/App.vue                |  91 ++
 window/multiplewindows/main.js                |  10 +
 window/multiplewindows/package.json           |   7 +
 window/righttoleftlayout/App.vue              |  91 ++
 window/righttoleftlayout/main.js              |  10 +
 window/righttoleftlayout/package.json         |   7 +
 window/settings/App.vue                       | 124 +++
 window/settings/main.js                       |  10 +
 window/settings/package.json                  |   7 +
 2406 files changed, 89338 insertions(+), 1 deletion(-)
 create mode 100644 bargauge/addandremovevalues/App.vue
 create mode 100644 bargauge/addandremovevalues/main.js
 create mode 100644 bargauge/addandremovevalues/package.json
 create mode 100644 bargauge/autochangevalue/App.vue
 create mode 100644 bargauge/autochangevalue/main.js
 create mode 100644 bargauge/autochangevalue/package.json
 create mode 100644 bargauge/createComponent/App.vue
 create mode 100644 bargauge/createComponent/main.js
 create mode 100644 bargauge/createComponent/package.json
 create mode 100644 bargauge/customtooltips/App.vue
 create mode 100644 bargauge/customtooltips/main.js
 create mode 100644 bargauge/customtooltips/package.json
 create mode 100644 bargauge/defaultfunctionality/App.vue
 create mode 100644 bargauge/defaultfunctionality/main.js
 create mode 100644 bargauge/defaultfunctionality/package.json
 create mode 100644 bargauge/fluidsize/App.vue
 create mode 100644 bargauge/fluidsize/main.js
 create mode 100644 bargauge/fluidsize/package.json
 create mode 100644 bargauge/negativevalues/App.vue
 create mode 100644 bargauge/negativevalues/main.js
 create mode 100644 bargauge/negativevalues/package.json
 create mode 100644 bargauge/sequentialgrowth/App.vue
 create mode 100644 bargauge/sequentialgrowth/main.js
 create mode 100644 bargauge/sequentialgrowth/package.json
 create mode 100644 bargauge/updatevalues/App.vue
 create mode 100644 bargauge/updatevalues/main.js
 create mode 100644 bargauge/updatevalues/package.json
 create mode 100644 bulletchart/defaultfunctionality/App.vue
 create mode 100644 bulletchart/defaultfunctionality/main.js
 create mode 100644 bulletchart/defaultfunctionality/package.json
 create mode 100644 bulletchart/fluidsize/App.vue
 create mode 100644 bulletchart/fluidsize/main.js
 create mode 100644 bulletchart/fluidsize/package.json
 create mode 100644 bulletchart/labelsformatting/App.vue
 create mode 100644 bulletchart/labelsformatting/main.js
 create mode 100644 bulletchart/labelsformatting/package.json
 create mode 100644 bulletchart/multipleranges/App.vue
 create mode 100644 bulletchart/multipleranges/main.js
 create mode 100644 bulletchart/multipleranges/package.json
 create mode 100644 bulletchart/negativevalues/App.vue
 create mode 100644 bulletchart/negativevalues/main.js
 create mode 100644 bulletchart/negativevalues/package.json
 create mode 100644 bulletchart/rangesstyling/App.vue
 create mode 100644 bulletchart/rangesstyling/main.js
 create mode 100644 bulletchart/rangesstyling/package.json
 create mode 100644 bulletchart/righttoleftlayout/App.vue
 create mode 100644 bulletchart/righttoleftlayout/main.js
 create mode 100644 bulletchart/righttoleftlayout/package.json
 create mode 100644 bulletchart/settings/App.vue
 create mode 100644 bulletchart/settings/main.js
 create mode 100644 bulletchart/settings/package.json
 create mode 100644 bulletchart/verticalbulletchart/App.vue
 create mode 100644 bulletchart/verticalbulletchart/main.js
 create mode 100644 bulletchart/verticalbulletchart/package.json
 create mode 100644 buttongroup/defaultfunctionality/App.vue
 create mode 100644 buttongroup/defaultfunctionality/main.js
 create mode 100644 buttongroup/defaultfunctionality/package.json
 create mode 100644 buttongroup/templates/App.vue
 create mode 100644 buttongroup/templates/main.js
 create mode 100644 buttongroup/templates/package.json
 create mode 100644 buttons/defaultfunctionality/App.vue
 create mode 100644 buttons/defaultfunctionality/main.js
 create mode 100644 buttons/defaultfunctionality/package.json
 create mode 100644 buttons/fluidsize/App.vue
 create mode 100644 buttons/fluidsize/main.js
 create mode 100644 buttons/fluidsize/package.json
 create mode 100644 buttons/imageposition/App.vue
 create mode 100644 buttons/imageposition/main.js
 create mode 100644 buttons/imageposition/package.json
 create mode 100644 buttons/images/App.vue
 create mode 100644 buttons/images/main.js
 create mode 100644 buttons/images/package.json
 create mode 100644 buttons/righttoleftlayout/App.vue
 create mode 100644 buttons/righttoleftlayout/main.js
 create mode 100644 buttons/righttoleftlayout/package.json
 create mode 100644 buttons/templates/App.vue
 create mode 100644 buttons/templates/main.js
 create mode 100644 buttons/templates/package.json
 create mode 100644 buttons/textposition/App.vue
 create mode 100644 buttons/textposition/main.js
 create mode 100644 buttons/textposition/package.json
 create mode 100644 calendar/defaultfunctionality/App.vue
 create mode 100644 calendar/defaultfunctionality/main.js
 create mode 100644 calendar/defaultfunctionality/package.json
 create mode 100644 calendar/disabled/App.vue
 create mode 100644 calendar/disabled/main.js
 create mode 100644 calendar/disabled/package.json
 create mode 100644 calendar/displayweekendsstyle/App.vue
 create mode 100644 calendar/displayweekendsstyle/main.js
 create mode 100644 calendar/displayweekendsstyle/package.json
 create mode 100644 calendar/events/App.vue
 create mode 100644 calendar/events/main.js
 create mode 100644 calendar/events/package.json
 create mode 100644 calendar/firstdayoftheweek/App.vue
 create mode 100644 calendar/firstdayoftheweek/main.js
 create mode 100644 calendar/firstdayoftheweek/package.json
 create mode 100644 calendar/fluidsize/App.vue
 create mode 100644 calendar/fluidsize/main.js
 create mode 100644 calendar/fluidsize/package.json
 create mode 100644 calendar/hideothermonthdays/App.vue
 create mode 100644 calendar/hideothermonthdays/main.js
 create mode 100644 calendar/hideothermonthdays/package.json
 create mode 100644 calendar/keyboardnavigation/App.vue
 create mode 100644 calendar/keyboardnavigation/main.js
 create mode 100644 calendar/keyboardnavigation/package.json
 create mode 100644 calendar/localization/App.vue
 create mode 100644 calendar/localization/main.js
 create mode 100644 calendar/localization/package.json
 create mode 100644 calendar/rangeselection/App.vue
 create mode 100644 calendar/rangeselection/main.js
 create mode 100644 calendar/rangeselection/package.json
 create mode 100644 calendar/restrictdaterange/App.vue
 create mode 100644 calendar/restrictdaterange/main.js
 create mode 100644 calendar/restrictdaterange/package.json
 create mode 100644 calendar/restricteddates/App.vue
 create mode 100644 calendar/restricteddates/main.js
 create mode 100644 calendar/restricteddates/package.json
 create mode 100644 calendar/righttoleftlayout/App.vue
 create mode 100644 calendar/righttoleftlayout/main.js
 create mode 100644 calendar/righttoleftlayout/package.json
 create mode 100644 calendar/showweekoftheyear/App.vue
 create mode 100644 calendar/showweekoftheyear/main.js
 create mode 100644 calendar/showweekoftheyear/package.json
 create mode 100644 calendar/specialdates/App.vue
 create mode 100644 calendar/specialdates/main.js
 create mode 100644 calendar/specialdates/package.json
 create mode 100644 calendar/twowaydatabinding/App.vue
 create mode 100644 calendar/twowaydatabinding/main.js
 create mode 100644 calendar/twowaydatabinding/package.json
 create mode 100644 chart/100stackedareaseries/App.vue
 create mode 100644 chart/100stackedareaseries/main.js
 create mode 100644 chart/100stackedareaseries/package.json
 create mode 100644 chart/100stackedcolumns/App.vue
 create mode 100644 chart/100stackedcolumns/main.js
 create mode 100644 chart/100stackedcolumns/package.json
 create mode 100644 chart/100stackedlineseries/App.vue
 create mode 100644 chart/100stackedlineseries/main.js
 create mode 100644 chart/100stackedlineseries/package.json
 create mode 100644 chart/alternatingbackgroundcolor/App.vue
 create mode 100644 chart/alternatingbackgroundcolor/main.js
 create mode 100644 chart/alternatingbackgroundcolor/package.json
 create mode 100644 chart/areaseries/App.vue
 create mode 100644 chart/areaseries/main.js
 create mode 100644 chart/areaseries/package.json
 create mode 100644 chart/areasplineseries/App.vue
 create mode 100644 chart/areasplineseries/main.js
 create mode 100644 chart/areasplineseries/package.json
 create mode 100644 chart/axiscustomoffsets/App.vue
 create mode 100644 chart/axiscustomoffsets/main.js
 create mode 100644 chart/axiscustomoffsets/package.json
 create mode 100644 chart/axiscustomoffsetsandcolorbands/App.vue
 create mode 100644 chart/axiscustomoffsetsandcolorbands/main.js
 create mode 100644 chart/axiscustomoffsetsandcolorbands/package.json
 create mode 100644 chart/axisoffsettovalue/App.vue
 create mode 100644 chart/axisoffsettovalue/main.js
 create mode 100644 chart/axisoffsettovalue/package.json
 create mode 100644 chart/axisorientation/App.vue
 create mode 100644 chart/axisorientation/main.js
 create mode 100644 chart/axisorientation/package.json
 create mode 100644 chart/axisposition/App.vue
 create mode 100644 chart/axisposition/main.js
 create mode 100644 chart/axisposition/package.json
 create mode 100644 chart/axissettings/App.vue
 create mode 100644 chart/axissettings/main.js
 create mode 100644 chart/axissettings/package.json
 create mode 100644 chart/barseries/App.vue
 create mode 100644 chart/barseries/main.js
 create mode 100644 chart/barseries/package.json
 create mode 100644 chart/bublechart/App.vue
 create mode 100644 chart/bublechart/main.js
 create mode 100644 chart/bublechart/package.json
 create mode 100644 chart/candlestickchart/App.vue
 create mode 100644 chart/candlestickchart/main.js
 create mode 100644 chart/candlestickchart/package.json
 create mode 100644 chart/chartannotations/App.vue
 create mode 100644 chart/chartannotations/main.js
 create mode 100644 chart/chartannotations/package.json
 create mode 100644 chart/chartcrosshairs/App.vue
 create mode 100644 chart/chartcrosshairs/main.js
 create mode 100644 chart/chartcrosshairs/package.json
 create mode 100644 chart/chartevents/App.vue
 create mode 100644 chart/chartevents/main.js
 create mode 100644 chart/chartevents/package.json
 create mode 100644 chart/chartprinting/App.vue
 create mode 100644 chart/chartprinting/main.js
 create mode 100644 chart/chartprinting/package.json
 create mode 100644 chart/chartrangeselectorevents/App.vue
 create mode 100644 chart/chartrangeselectorevents/main.js
 create mode 100644 chart/chartrangeselectorevents/package.json
 create mode 100644 chart/chartwithgrid/App.vue
 create mode 100644 chart/chartwithgrid/main.js
 create mode 100644 chart/chartwithgrid/package.json
 create mode 100644 chart/chartwithtabs/App.vue
 create mode 100644 chart/chartwithtabs/main.js
 create mode 100644 chart/chartwithtabs/package.json
 create mode 100644 chart/colorbands/App.vue
 create mode 100644 chart/colorbands/main.js
 create mode 100644 chart/colorbands/package.json
 create mode 100644 chart/colorbandsxaxis/App.vue
 create mode 100644 chart/colorbandsxaxis/main.js
 create mode 100644 chart/colorbandsxaxis/package.json
 create mode 100644 chart/columnlocaldata/App.vue
 create mode 100644 chart/columnlocaldata/main.js
 create mode 100644 chart/columnlocaldata/package.json
 create mode 100644 chart/columnrange/App.vue
 create mode 100644 chart/columnrange/main.js
 create mode 100644 chart/columnrange/package.json
 create mode 100644 chart/columnseries/App.vue
 create mode 100644 chart/columnseries/main.js
 create mode 100644 chart/columnseries/package.json
 create mode 100644 chart/columnseriesspacing/App.vue
 create mode 100644 chart/columnseriesspacing/main.js
 create mode 100644 chart/columnseriesspacing/package.json
 create mode 100644 chart/columnserieswithlabels/App.vue
 create mode 100644 chart/columnserieswithlabels/main.js
 create mode 100644 chart/columnserieswithlabels/package.json
 create mode 100644 chart/columnserieswithmissingvalues/App.vue
 create mode 100644 chart/columnserieswithmissingvalues/main.js
 create mode 100644 chart/columnserieswithmissingvalues/package.json
 create mode 100644 chart/columnseriewithconditionalcolors/App.vue
 create mode 100644 chart/columnseriewithconditionalcolors/main.js
 create mode 100644 chart/columnseriewithconditionalcolors/package.json
 create mode 100644 chart/columnsrange/App.vue
 create mode 100644 chart/columnsrange/main.js
 create mode 100644 chart/columnsrange/package.json
 create mode 100644 chart/columnswithbase10logarithmicaxis/App.vue
 create mode 100644 chart/columnswithbase10logarithmicaxis/main.js
 create mode 100644 chart/columnswithbase10logarithmicaxis/package.json
 create mode 100644 chart/columnswithlogarithmicaxis/App.vue
 create mode 100644 chart/columnswithlogarithmicaxis/main.js
 create mode 100644 chart/columnswithlogarithmicaxis/package.json
 create mode 100644 chart/createComponent/App.vue
 create mode 100644 chart/createComponent/main.js
 create mode 100644 chart/createComponent/package.json
 create mode 100644 chart/customdrawing/App.vue
 create mode 100644 chart/customdrawing/main.js
 create mode 100644 chart/customdrawing/package.json
 create mode 100644 chart/customstyling/App.vue
 create mode 100644 chart/customstyling/main.js
 create mode 100644 chart/customstyling/package.json
 create mode 100644 chart/darkbackground/App.vue
 create mode 100644 chart/darkbackground/main.js
 create mode 100644 chart/darkbackground/package.json
 create mode 100644 chart/dashboard/App.vue
 create mode 100644 chart/dashboard/main.js
 create mode 100644 chart/dashboard/package.json
 create mode 100644 chart/datetimexaxisrangeselection/App.vue
 create mode 100644 chart/datetimexaxisrangeselection/main.js
 create mode 100644 chart/datetimexaxisrangeselection/package.json
 create mode 100644 chart/donutlabels/App.vue
 create mode 100644 chart/donutlabels/main.js
 create mode 100644 chart/donutlabels/package.json
 create mode 100644 chart/donutseries/App.vue
 create mode 100644 chart/donutseries/main.js
 create mode 100644 chart/donutseries/package.json
 create mode 100644 chart/exporttoimage/App.vue
 create mode 100644 chart/exporttoimage/issue.txt
 create mode 100644 chart/exporttoimage/main.js
 create mode 100644 chart/exporttoimage/package.json
 create mode 100644 chart/fluidsize/App.vue
 create mode 100644 chart/fluidsize/main.js
 create mode 100644 chart/fluidsize/package.json
 create mode 100644 chart/funnelchart/App.vue
 create mode 100644 chart/funnelchart/main.js
 create mode 100644 chart/funnelchart/package.json
 create mode 100644 chart/greyscaleseries/App.vue
 create mode 100644 chart/greyscaleseries/main.js
 create mode 100644 chart/greyscaleseries/package.json
 create mode 100644 chart/gridlinesdashstyle/App.vue
 create mode 100644 chart/gridlinesdashstyle/main.js
 create mode 100644 chart/gridlinesdashstyle/package.json
 create mode 100644 chart/intervalandsteps/App.vue
 create mode 100644 chart/intervalandsteps/main.js
 create mode 100644 chart/intervalandsteps/package.json
 create mode 100644 chart/lineseries/App.vue
 create mode 100644 chart/lineseries/main.js
 create mode 100644 chart/lineseries/package.json
 create mode 100644 chart/lineseriesmarkers/App.vue
 create mode 100644 chart/lineseriesmarkers/main.js
 create mode 100644 chart/lineseriesmarkers/package.json
 create mode 100644 chart/lineseriewithconditionalcolors/App.vue
 create mode 100644 chart/lineseriewithconditionalcolors/main.js
 create mode 100644 chart/lineseriewithconditionalcolors/package.json
 create mode 100644 chart/lineseriewithmissingpoints/App.vue
 create mode 100644 chart/lineseriewithmissingpoints/main.js
 create mode 100644 chart/lineseriewithmissingpoints/package.json
 create mode 100644 chart/lineseriewithmultipledatasources/App.vue
 create mode 100644 chart/lineseriewithmultipledatasources/main.js
 create mode 100644 chart/lineseriewithmultipledatasources/package.json
 create mode 100644 chart/liveupdates/App.vue
 create mode 100644 chart/liveupdates/main.js
 create mode 100644 chart/liveupdates/package.json
 create mode 100644 chart/liveupdateseverysecond/App.vue
 create mode 100644 chart/liveupdateseverysecond/main.js
 create mode 100644 chart/liveupdateseverysecond/package.json
 create mode 100644 chart/liveupdatesperformance/App.vue
 create mode 100644 chart/liveupdatesperformance/main.js
 create mode 100644 chart/liveupdatesperformance/package.json
 create mode 100644 chart/logarithmicXaxis/App.vue
 create mode 100644 chart/logarithmicXaxis/main.js
 create mode 100644 chart/logarithmicXaxis/package.json
 create mode 100644 chart/logarithmicaxisbaseline/App.vue
 create mode 100644 chart/logarithmicaxisbaseline/main.js
 create mode 100644 chart/logarithmicaxisbaseline/package.json
 create mode 100644 chart/logarithmicwaterfallseries/App.vue
 create mode 100644 chart/logarithmicwaterfallseries/main.js
 create mode 100644 chart/logarithmicwaterfallseries/package.json
 create mode 100644 chart/multipleseriestypes/App.vue
 create mode 100644 chart/multipleseriestypes/main.js
 create mode 100644 chart/multipleseriestypes/package.json
 create mode 100644 chart/negativebarseries/App.vue
 create mode 100644 chart/negativebarseries/main.js
 create mode 100644 chart/negativebarseries/package.json
 create mode 100644 chart/negativevalues/App.vue
 create mode 100644 chart/negativevalues/main.js
 create mode 100644 chart/negativevalues/package.json
 create mode 100644 chart/nondatexaxisrangeselection/App.vue
 create mode 100644 chart/nondatexaxisrangeselection/main.js
 create mode 100644 chart/nondatexaxisrangeselection/package.json
 create mode 100644 chart/ohlcchart/App.vue
 create mode 100644 chart/ohlcchart/main.js
 create mode 100644 chart/ohlcchart/package.json
 create mode 100644 chart/partialpieseries/App.vue
 create mode 100644 chart/partialpieseries/main.js
 create mode 100644 chart/partialpieseries/package.json
 create mode 100644 chart/partialpolarchart/App.vue
 create mode 100644 chart/partialpolarchart/main.js
 create mode 100644 chart/partialpolarchart/package.json
 create mode 100644 chart/percentagestackedcolumns/App.vue
 create mode 100644 chart/percentagestackedcolumns/main.js
 create mode 100644 chart/percentagestackedcolumns/package.json
 create mode 100644 chart/pieseries/App.vue
 create mode 100644 chart/pieseries/main.js
 create mode 100644 chart/pieseries/package.json
 create mode 100644 chart/pieserieslegend/App.vue
 create mode 100644 chart/pieserieslegend/main.js
 create mode 100644 chart/pieserieslegend/package.json
 create mode 100644 chart/polarseries/App.vue
 create mode 100644 chart/polarseries/main.js
 create mode 100644 chart/polarseries/package.json
 create mode 100644 chart/polarseriesbands/App.vue
 create mode 100644 chart/polarseriesbands/main.js
 create mode 100644 chart/polarseriesbands/package.json
 create mode 100644 chart/pyramidchart/App.vue
 create mode 100644 chart/pyramidchart/main.js
 create mode 100644 chart/pyramidchart/package.json
 create mode 100644 chart/rigthtoleftlayout/App.vue
 create mode 100644 chart/rigthtoleftlayout/main.js
 create mode 100644 chart/rigthtoleftlayout/package.json
 create mode 100644 chart/scatterchart/App.vue
 create mode 100644 chart/scatterchart/main.js
 create mode 100644 chart/scatterchart/package.json
 create mode 100644 chart/sparklines/App.vue
 create mode 100644 chart/sparklines/main.js
 create mode 100644 chart/sparklines/package.json
 create mode 100644 chart/spiderchart/App.vue
 create mode 100644 chart/spiderchart/main.js
 create mode 100644 chart/spiderchart/package.json
 create mode 100644 chart/splinearea/App.vue
 create mode 100644 chart/splinearea/main.js
 create mode 100644 chart/splinearea/package.json
 create mode 100644 chart/splineseries/App.vue
 create mode 100644 chart/splineseries/main.js
 create mode 100644 chart/splineseries/package.json
 create mode 100644 chart/stackedandgroupedcolumnseries/App.vue
 create mode 100644 chart/stackedandgroupedcolumnseries/main.js
 create mode 100644 chart/stackedandgroupedcolumnseries/package.json
 create mode 100644 chart/stackedareaseries/App.vue
 create mode 100644 chart/stackedareaseries/main.js
 create mode 100644 chart/stackedareaseries/package.json
 create mode 100644 chart/stackedcolumns/App.vue
 create mode 100644 chart/stackedcolumns/main.js
 create mode 100644 chart/stackedcolumns/package.json
 create mode 100644 chart/stackedcolumnseries/App.vue
 create mode 100644 chart/stackedcolumnseries/main.js
 create mode 100644 chart/stackedcolumnseries/package.json
 create mode 100644 chart/stackedfunnelchart/App.vue
 create mode 100644 chart/stackedfunnelchart/main.js
 create mode 100644 chart/stackedfunnelchart/package.json
 create mode 100644 chart/stackedlineseries/App.vue
 create mode 100644 chart/stackedlineseries/main.js
 create mode 100644 chart/stackedlineseries/package.json
 create mode 100644 chart/stackedpyramidchart/App.vue
 create mode 100644 chart/stackedpyramidchart/main.js
 create mode 100644 chart/stackedpyramidchart/package.json
 create mode 100644 chart/stackedwaterfallseries/App.vue
 create mode 100644 chart/stackedwaterfallseries/main.js
 create mode 100644 chart/stackedwaterfallseries/package.json
 create mode 100644 chart/steplineseries/App.vue
 create mode 100644 chart/steplineseries/main.js
 create mode 100644 chart/steplineseries/package.json
 create mode 100644 chart/textrotation/App.vue
 create mode 100644 chart/textrotation/main.js
 create mode 100644 chart/textrotation/package.json
 create mode 100644 chart/textwrapping/App.vue
 create mode 100644 chart/textwrapping/main.js
 create mode 100644 chart/textwrapping/package.json
 create mode 100644 chart/themes/App.vue
 create mode 100644 chart/themes/main.js
 create mode 100644 chart/themes/package.json
 create mode 100644 chart/tooltipformatting/App.vue
 create mode 100644 chart/tooltipformatting/main.js
 create mode 100644 chart/tooltipformatting/package.json
 create mode 100644 chart/waterfallseries/App.vue
 create mode 100644 chart/waterfallseries/main.js
 create mode 100644 chart/waterfallseries/package.json
 create mode 100644 chart/waterfallwithmultipleseries/App.vue
 create mode 100644 chart/waterfallwithmultipleseries/main.js
 create mode 100644 chart/waterfallwithmultipleseries/package.json
 create mode 100644 checkbox/defaultfunctionality/App.vue
 create mode 100644 checkbox/defaultfunctionality/main.js
 create mode 100644 checkbox/defaultfunctionality/package.json
 create mode 100644 checkbox/twowaydatabinding/App.vue
 create mode 100644 checkbox/twowaydatabinding/main.js
 create mode 100644 checkbox/twowaydatabinding/package.json
 create mode 100644 colorpicker/defaultfunctionality/App.vue
 create mode 100644 colorpicker/defaultfunctionality/main.js
 create mode 100644 colorpicker/defaultfunctionality/package.json
 create mode 100644 colorpicker/settings/App.vue
 create mode 100644 colorpicker/settings/main.js
 create mode 100644 colorpicker/settings/package.json
 create mode 100644 combobox/animation/App.vue
 create mode 100644 combobox/animation/main.js
 create mode 100644 combobox/animation/package.json
 create mode 100644 combobox/bindingtojson/App.vue
 create mode 100644 combobox/bindingtojson/main.js
 create mode 100644 combobox/bindingtojson/package.json
 create mode 100644 combobox/bindingtoremotedata/App.vue
 create mode 100644 combobox/bindingtoremotedata/main.js
 create mode 100644 combobox/bindingtoremotedata/package.json
 create mode 100644 combobox/bindingtoxml/App.vue
 create mode 100644 combobox/bindingtoxml/main.js
 create mode 100644 combobox/bindingtoxml/package.json
 create mode 100644 combobox/cascadingcomboboxes/App.vue
 create mode 100644 combobox/cascadingcomboboxes/main.js
 create mode 100644 combobox/cascadingcomboboxes/package.json
 create mode 100644 combobox/categories/App.vue
 create mode 100644 combobox/categories/main.js
 create mode 100644 combobox/categories/package.json
 create mode 100644 combobox/checkboxes/App.vue
 create mode 100644 combobox/checkboxes/main.js
 create mode 100644 combobox/checkboxes/package.json
 create mode 100644 combobox/createComponent/App.vue
 create mode 100644 combobox/createComponent/main.js
 create mode 100644 combobox/createComponent/package.json
 create mode 100644 combobox/customrendering/App.vue
 create mode 100644 combobox/customrendering/main.js
 create mode 100644 combobox/customrendering/package.json
 create mode 100644 combobox/defaultfunctionality/App.vue
 create mode 100644 combobox/defaultfunctionality/main.js
 create mode 100644 combobox/defaultfunctionality/package.json
 create mode 100644 combobox/dropdownhorizontalalignment/App.vue
 create mode 100644 combobox/dropdownhorizontalalignment/main.js
 create mode 100644 combobox/dropdownhorizontalalignment/package.json
 create mode 100644 combobox/dropdownverticalalignment/App.vue
 create mode 100644 combobox/dropdownverticalalignment/main.js
 create mode 100644 combobox/dropdownverticalalignment/package.json
 create mode 100644 combobox/events/App.vue
 create mode 100644 combobox/events/main.js
 create mode 100644 combobox/events/package.json
 create mode 100644 combobox/fluidsize/App.vue
 create mode 100644 combobox/fluidsize/main.js
 create mode 100644 combobox/fluidsize/package.json
 create mode 100644 combobox/keyboardnavigation/App.vue
 create mode 100644 combobox/keyboardnavigation/main.js
 create mode 100644 combobox/keyboardnavigation/package.json
 create mode 100644 combobox/multiselect/App.vue
 create mode 100644 combobox/multiselect/main.js
 create mode 100644 combobox/multiselect/package.json
 create mode 100644 combobox/righttoleftlayout/App.vue
 create mode 100644 combobox/righttoleftlayout/main.js
 create mode 100644 combobox/righttoleftlayout/package.json
 create mode 100644 combobox/settings/App.vue
 create mode 100644 combobox/settings/main.js
 create mode 100644 combobox/settings/package.json
 create mode 100644 combobox/templates/App.vue
 create mode 100644 combobox/templates/main.js
 create mode 100644 combobox/templates/package.json
 create mode 100644 combobox/twowaydatabinding/App.vue
 create mode 100644 combobox/twowaydatabinding/main.js
 create mode 100644 combobox/twowaydatabinding/package.json
 create mode 100644 complexinput/changeevent/App.vue
 create mode 100644 complexinput/changeevent/main.js
 create mode 100644 complexinput/changeevent/package.json
 create mode 100644 complexinput/defaultfunctionality/App.vue
 create mode 100644 complexinput/defaultfunctionality/main.js
 create mode 100644 complexinput/defaultfunctionality/package.json
 create mode 100644 complexinput/exponentialnotation/App.vue
 create mode 100644 complexinput/exponentialnotation/main.js
 create mode 100644 complexinput/exponentialnotation/package.json
 create mode 100644 complexinput/fluidsize/App.vue
 create mode 100644 complexinput/fluidsize/main.js
 create mode 100644 complexinput/fluidsize/package.json
 create mode 100644 complexinput/spinbuttons/App.vue
 create mode 100644 complexinput/spinbuttons/main.js
 create mode 100644 complexinput/spinbuttons/package.json
 create mode 100644 complexinput/twowaydatabinding/App.vue
 create mode 100644 complexinput/twowaydatabinding/main.js
 create mode 100644 complexinput/twowaydatabinding/package.json
 create mode 100644 complexinput/validation/App.vue
 create mode 100644 complexinput/validation/main.js
 create mode 100644 complexinput/validation/package.json
 create mode 100644 datatable/advancedfiltering/App.vue
 create mode 100644 datatable/advancedfiltering/main.js
 create mode 100644 datatable/advancedfiltering/package.json
 create mode 100644 datatable/aggregates/App.vue
 create mode 100644 datatable/aggregates/main.js
 create mode 100644 datatable/aggregates/package.json
 create mode 100644 datatable/aggregatestemplate/App.vue
 create mode 100644 datatable/aggregatestemplate/main.js
 create mode 100644 datatable/aggregatestemplate/package.json
 create mode 100644 datatable/celledit/App.vue
 create mode 100644 datatable/celledit/main.js
 create mode 100644 datatable/celledit/package.json
 create mode 100644 datatable/columnalignment/App.vue
 create mode 100644 datatable/columnalignment/main.js
 create mode 100644 datatable/columnalignment/package.json
 create mode 100644 datatable/columnformatting/App.vue
 create mode 100644 datatable/columnformatting/main.js
 create mode 100644 datatable/columnformatting/package.json
 create mode 100644 datatable/columnreorder/App.vue
 create mode 100644 datatable/columnreorder/main.js
 create mode 100644 datatable/columnreorder/package.json
 create mode 100644 datatable/columnresize/App.vue
 create mode 100644 datatable/columnresize/main.js
 create mode 100644 datatable/columnresize/package.json
 create mode 100644 datatable/columnshierarchy/App.vue
 create mode 100644 datatable/columnshierarchy/main.js
 create mode 100644 datatable/columnshierarchy/package.json
 create mode 100644 datatable/columntemplate/App.vue
 create mode 100644 datatable/columntemplate/main.js
 create mode 100644 datatable/columntemplate/package.json
 create mode 100644 datatable/conditionalformatting/App.vue
 create mode 100644 datatable/conditionalformatting/main.js
 create mode 100644 datatable/conditionalformatting/package.json
 create mode 100644 datatable/createComponent/App.vue
 create mode 100644 datatable/createComponent/main.js
 create mode 100644 datatable/createComponent/package.json
 create mode 100644 datatable/csvdata/App.vue
 create mode 100644 datatable/csvdata/main.js
 create mode 100644 datatable/csvdata/package.json
 create mode 100644 datatable/customeditors/App.vue
 create mode 100644 datatable/customeditors/main.js
 create mode 100644 datatable/customeditors/package.json
 create mode 100644 datatable/dataexport/App.vue
 create mode 100644 datatable/dataexport/main.js
 create mode 100644 datatable/dataexport/package.json
 create mode 100644 datatable/dataprinting/App.vue
 create mode 100644 datatable/dataprinting/main.js
 create mode 100644 datatable/dataprinting/package.json
 create mode 100644 datatable/defaultfunctionality/App.vue
 create mode 100644 datatable/defaultfunctionality/main.js
 create mode 100644 datatable/defaultfunctionality/package.json
 create mode 100644 datatable/dialog/App.vue
 create mode 100644 datatable/dialog/main.js
 create mode 100644 datatable/dialog/package.json
 create mode 100644 datatable/filtering/App.vue
 create mode 100644 datatable/filtering/main.js
 create mode 100644 datatable/filtering/package.json
 create mode 100644 datatable/filteringapi/App.vue
 create mode 100644 datatable/filteringapi/main.js
 create mode 100644 datatable/filteringapi/package.json
 create mode 100644 datatable/fluidsize/App.vue
 create mode 100644 datatable/fluidsize/main.js
 create mode 100644 datatable/fluidsize/package.json
 create mode 100644 datatable/grouping/App.vue
 create mode 100644 datatable/grouping/main.js
 create mode 100644 datatable/grouping/package.json
 create mode 100644 datatable/groupingserverpaging/App.vue
 create mode 100644 datatable/groupingserverpaging/main.js
 create mode 100644 datatable/groupingserverpaging/package.json
 create mode 100644 datatable/headertemplate/App.vue
 create mode 100644 datatable/headertemplate/main.js
 create mode 100644 datatable/headertemplate/package.json
 create mode 100644 datatable/inlinerow/App.vue
 create mode 100644 datatable/inlinerow/main.js
 create mode 100644 datatable/inlinerow/package.json
 create mode 100644 datatable/jsondata/App.vue
 create mode 100644 datatable/jsondata/main.js
 create mode 100644 datatable/jsondata/package.json
 create mode 100644 datatable/keyboardnavigation/App.vue
 create mode 100644 datatable/keyboardnavigation/main.js
 create mode 100644 datatable/keyboardnavigation/package.json
 create mode 100644 datatable/localdata/App.vue
 create mode 100644 datatable/localdata/main.js
 create mode 100644 datatable/localdata/package.json
 create mode 100644 datatable/localization/App.vue
 create mode 100644 datatable/localization/main.js
 create mode 100644 datatable/localization/package.json
 create mode 100644 datatable/lockrow/App.vue
 create mode 100644 datatable/lockrow/main.js
 create mode 100644 datatable/lockrow/package.json
 create mode 100644 datatable/nestedtables/App.vue
 create mode 100644 datatable/nestedtables/main.js
 create mode 100644 datatable/nestedtables/package.json
 create mode 100644 datatable/paging/App.vue
 create mode 100644 datatable/paging/main.js
 create mode 100644 datatable/paging/package.json
 create mode 100644 datatable/pagingapi/App.vue
 create mode 100644 datatable/pagingapi/main.js
 create mode 100644 datatable/pagingapi/package.json
 create mode 100644 datatable/pinnedfrozencolumn/App.vue
 create mode 100644 datatable/pinnedfrozencolumn/main.js
 create mode 100644 datatable/pinnedfrozencolumn/package.json
 create mode 100644 datatable/remotedata/App.vue
 create mode 100644 datatable/remotedata/main.js
 create mode 100644 datatable/remotedata/package.json
 create mode 100644 datatable/righttoleftlayout/App.vue
 create mode 100644 datatable/righttoleftlayout/main.js
 create mode 100644 datatable/righttoleftlayout/package.json
 create mode 100644 datatable/rowdetails/App.vue
 create mode 100644 datatable/rowdetails/main.js
 create mode 100644 datatable/rowdetails/package.json
 create mode 100644 datatable/rowselectionhover/App.vue
 create mode 100644 datatable/rowselectionhover/main.js
 create mode 100644 datatable/rowselectionhover/package.json
 create mode 100644 datatable/rowtemplate/App.vue
 create mode 100644 datatable/rowtemplate/main.js
 create mode 100644 datatable/rowtemplate/package.json
 create mode 100644 datatable/searchfield/App.vue
 create mode 100644 datatable/searchfield/main.js
 create mode 100644 datatable/searchfield/package.json
 create mode 100644 datatable/separatetables/App.vue
 create mode 100644 datatable/separatetables/main.js
 create mode 100644 datatable/separatetables/package.json
 create mode 100644 datatable/serverfiltering/App.vue
 create mode 100644 datatable/serverfiltering/main.js
 create mode 100644 datatable/serverfiltering/package.json
 create mode 100644 datatable/serverpaging/App.vue
 create mode 100644 datatable/serverpaging/main.js
 create mode 100644 datatable/serverpaging/package.json
 create mode 100644 datatable/serversorting/App.vue
 create mode 100644 datatable/serversorting/main.js
 create mode 100644 datatable/serversorting/package.json
 create mode 100644 datatable/showorhidecolumn/App.vue
 create mode 100644 datatable/showorhidecolumn/main.js
 create mode 100644 datatable/showorhidecolumn/package.json
 create mode 100644 datatable/sorting/App.vue
 create mode 100644 datatable/sorting/main.js
 create mode 100644 datatable/sorting/package.json
 create mode 100644 datatable/sortingapi/App.vue
 create mode 100644 datatable/sortingapi/main.js
 create mode 100644 datatable/sortingapi/package.json
 create mode 100644 datatable/tsvdata/App.vue
 create mode 100644 datatable/tsvdata/main.js
 create mode 100644 datatable/tsvdata/package.json
 create mode 100644 datatable/validation/App.vue
 create mode 100644 datatable/validation/main.js
 create mode 100644 datatable/validation/package.json
 create mode 100644 datatable/xmldata/App.vue
 create mode 100644 datatable/xmldata/main.js
 create mode 100644 datatable/xmldata/package.json
 create mode 100644 datetimeinput/animation/App.vue
 create mode 100644 datetimeinput/animation/main.js
 create mode 100644 datetimeinput/animation/package.json
 create mode 100644 datetimeinput/createcomponent/App.vue
 create mode 100644 datetimeinput/createcomponent/main.js
 create mode 100644 datetimeinput/createcomponent/package.json
 create mode 100644 datetimeinput/datetime/App.vue
 create mode 100644 datetimeinput/datetime/main.js
 create mode 100644 datetimeinput/datetime/package.json
 create mode 100644 datetimeinput/defaultfunctionality/App.vue
 create mode 100644 datetimeinput/defaultfunctionality/main.js
 create mode 100644 datetimeinput/defaultfunctionality/package.json
 create mode 100644 datetimeinput/disabled/App.vue
 create mode 100644 datetimeinput/disabled/main.js
 create mode 100644 datetimeinput/disabled/package.json
 create mode 100644 datetimeinput/dropdownhorizontalalignment/App.vue
 create mode 100644 datetimeinput/dropdownhorizontalalignment/main.js
 create mode 100644 datetimeinput/dropdownhorizontalalignment/package.json
 create mode 100644 datetimeinput/dropdownverticalalignment/App.vue
 create mode 100644 datetimeinput/dropdownverticalalignment/main.js
 create mode 100644 datetimeinput/dropdownverticalalignment/package.json
 create mode 100644 datetimeinput/events/App.vue
 create mode 100644 datetimeinput/events/main.js
 create mode 100644 datetimeinput/events/package.json
 create mode 100644 datetimeinput/fluidsize/App.vue
 create mode 100644 datetimeinput/fluidsize/main.js
 create mode 100644 datetimeinput/fluidsize/package.json
 create mode 100644 datetimeinput/formatdate/App.vue
 create mode 100644 datetimeinput/formatdate/main.js
 create mode 100644 datetimeinput/formatdate/package.json
 create mode 100644 datetimeinput/keyboardnavigation/App.vue
 create mode 100644 datetimeinput/keyboardnavigation/main.js
 create mode 100644 datetimeinput/keyboardnavigation/package.json
 create mode 100644 datetimeinput/localization/App.vue
 create mode 100644 datetimeinput/localization/main.js
 create mode 100644 datetimeinput/localization/package.json
 create mode 100644 datetimeinput/rangeselection/App.vue
 create mode 100644 datetimeinput/rangeselection/main.js
 create mode 100644 datetimeinput/rangeselection/package.json
 create mode 100644 datetimeinput/restrictdaterange/App.vue
 create mode 100644 datetimeinput/restrictdaterange/main.js
 create mode 100644 datetimeinput/restrictdaterange/package.json
 create mode 100644 datetimeinput/righttoleftlayout/App.vue
 create mode 100644 datetimeinput/righttoleftlayout/main.js
 create mode 100644 datetimeinput/righttoleftlayout/package.json
 create mode 100644 datetimeinput/templates/App.vue
 create mode 100644 datetimeinput/templates/main.js
 create mode 100644 datetimeinput/templates/package.json
 create mode 100644 datetimeinput/timeinput/App.vue
 create mode 100644 datetimeinput/timeinput/main.js
 create mode 100644 datetimeinput/timeinput/package.json
 create mode 100644 datetimeinput/twowaydatabinding/App.vue
 create mode 100644 datetimeinput/twowaydatabinding/main.js
 create mode 100644 datetimeinput/twowaydatabinding/package.json
 create mode 100644 docking/defaultfunctionality/App.vue
 create mode 100644 docking/defaultfunctionality/main.js
 create mode 100644 docking/defaultfunctionality/package.json
 create mode 100644 docking/events/App.vue
 create mode 100644 docking/events/main.js
 create mode 100644 docking/events/package.json
 create mode 100644 docking/importlayout/App.vue
 create mode 100644 docking/importlayout/main.js
 create mode 100644 docking/importlayout/package.json
 create mode 100644 docking/keyboardnavigation/App.vue
 create mode 100644 docking/keyboardnavigation/main.js
 create mode 100644 docking/keyboardnavigation/package.json
 create mode 100644 docking/righttoleftlayout/App.vue
 create mode 100644 docking/righttoleftlayout/main.js
 create mode 100644 docking/righttoleftlayout/package.json
 create mode 100644 docking/settings/App.vue
 create mode 100644 docking/settings/main.js
 create mode 100644 docking/settings/package.json
 create mode 100644 dockinglayout/createcomponent/App.vue
 create mode 100644 dockinglayout/createcomponent/main.js
 create mode 100644 dockinglayout/createcomponent/package.json
 create mode 100644 dockinglayout/defaultfunctionality/App.vue
 create mode 100644 dockinglayout/defaultfunctionality/main.js
 create mode 100644 dockinglayout/defaultfunctionality/package.json
 create mode 100644 dockinglayout/fluidsize/App.vue
 create mode 100644 dockinglayout/fluidsize/main.js
 create mode 100644 dockinglayout/fluidsize/package.json
 create mode 100644 dockinglayout/idelikelayout/App.vue
 create mode 100644 dockinglayout/idelikelayout/main.js
 create mode 100644 dockinglayout/idelikelayout/package.json
 create mode 100644 dockinglayout/righttoleftlayout/App.vue
 create mode 100644 dockinglayout/righttoleftlayout/main.js
 create mode 100644 dockinglayout/righttoleftlayout/package.json
 create mode 100644 dockinglayout/saveloadlayout/App.vue
 create mode 100644 dockinglayout/saveloadlayout/main.js
 create mode 100644 dockinglayout/saveloadlayout/package.json
 create mode 100644 dragdrop/defaultfunctionality/App.vue
 create mode 100644 dragdrop/defaultfunctionality/main.js
 create mode 100644 dragdrop/defaultfunctionality/package.json
 create mode 100644 dragdrop/events/App.vue
 create mode 100644 dragdrop/events/main.js
 create mode 100644 dragdrop/events/package.json
 create mode 100644 draw/defaultfunctionality/App.vue
 create mode 100644 draw/defaultfunctionality/main.js
 create mode 100644 draw/defaultfunctionality/package.json
 create mode 100644 dropdownbutton/defaultfunctionality/App.vue
 create mode 100644 dropdownbutton/defaultfunctionality/main.js
 create mode 100644 dropdownbutton/defaultfunctionality/package.json
 create mode 100644 dropdownlist/animation/App.vue
 create mode 100644 dropdownlist/animation/main.js
 create mode 100644 dropdownlist/animation/package.json
 create mode 100644 dropdownlist/autoopen/App.vue
 create mode 100644 dropdownlist/autoopen/main.js
 create mode 100644 dropdownlist/autoopen/package.json
 create mode 100644 dropdownlist/bindingtojson/App.vue
 create mode 100644 dropdownlist/bindingtojson/main.js
 create mode 100644 dropdownlist/bindingtojson/package.json
 create mode 100644 dropdownlist/bindingtoxml/App.vue
 create mode 100644 dropdownlist/bindingtoxml/main.js
 create mode 100644 dropdownlist/bindingtoxml/package.json
 create mode 100644 dropdownlist/categories/App.vue
 create mode 100644 dropdownlist/categories/main.js
 create mode 100644 dropdownlist/categories/package.json
 create mode 100644 dropdownlist/checkboxes/App.vue
 create mode 100644 dropdownlist/checkboxes/main.js
 create mode 100644 dropdownlist/checkboxes/package.json
 create mode 100644 dropdownlist/createcomponent/App.vue
 create mode 100644 dropdownlist/createcomponent/main.js
 create mode 100644 dropdownlist/createcomponent/package.json
 create mode 100644 dropdownlist/customrendering/App.vue
 create mode 100644 dropdownlist/customrendering/main.js
 create mode 100644 dropdownlist/customrendering/package.json
 create mode 100644 dropdownlist/defaultfunctionality/App.vue
 create mode 100644 dropdownlist/defaultfunctionality/main.js
 create mode 100644 dropdownlist/defaultfunctionality/package.json
 create mode 100644 dropdownlist/dropdownhorizontalalignment/App.vue
 create mode 100644 dropdownlist/dropdownhorizontalalignment/main.js
 create mode 100644 dropdownlist/dropdownhorizontalalignment/package.json
 create mode 100644 dropdownlist/dropdownverticalalignment/App.vue
 create mode 100644 dropdownlist/dropdownverticalalignment/main.js
 create mode 100644 dropdownlist/dropdownverticalalignment/package.json
 create mode 100644 dropdownlist/events/App.vue
 create mode 100644 dropdownlist/events/main.js
 create mode 100644 dropdownlist/events/package.json
 create mode 100644 dropdownlist/filtering/App.vue
 create mode 100644 dropdownlist/filtering/main.js
 create mode 100644 dropdownlist/filtering/package.json
 create mode 100644 dropdownlist/fluidsize/App.vue
 create mode 100644 dropdownlist/fluidsize/main.js
 create mode 100644 dropdownlist/fluidsize/package.json
 create mode 100644 dropdownlist/keyboardnavigation/App.vue
 create mode 100644 dropdownlist/keyboardnavigation/main.js
 create mode 100644 dropdownlist/keyboardnavigation/package.json
 create mode 100644 dropdownlist/loaddatafromselect/App.vue
 create mode 100644 dropdownlist/loaddatafromselect/main.js
 create mode 100644 dropdownlist/loaddatafromselect/package.json
 create mode 100644 dropdownlist/righttoleftlayout/App.vue
 create mode 100644 dropdownlist/righttoleftlayout/main.js
 create mode 100644 dropdownlist/righttoleftlayout/package.json
 create mode 100644 dropdownlist/saveloadselectionusingcookies/App.vue
 create mode 100644 dropdownlist/saveloadselectionusingcookies/main.js
 create mode 100644 dropdownlist/saveloadselectionusingcookies/package.json
 create mode 100644 dropdownlist/templates/App.vue
 create mode 100644 dropdownlist/templates/main.js
 create mode 100644 dropdownlist/templates/package.json
 create mode 100644 dropdownlist/textwithicons/App.vue
 create mode 100644 dropdownlist/textwithicons/main.js
 create mode 100644 dropdownlist/textwithicons/package.json
 create mode 100644 dropdownlist/twowaydatabinding/App.vue
 create mode 100644 dropdownlist/twowaydatabinding/main.js
 create mode 100644 dropdownlist/twowaydatabinding/package.json
 create mode 100644 editor/customtools/App.vue
 create mode 100644 editor/customtools/main.js
 create mode 100644 editor/customtools/package.json
 create mode 100644 editor/defaultfunctionality/App.vue
 create mode 100644 editor/defaultfunctionality/main.js
 create mode 100644 editor/defaultfunctionality/package.json
 create mode 100644 editor/fluidsize/App.vue
 create mode 100644 editor/fluidsize/main.js
 create mode 100644 editor/fluidsize/package.json
 create mode 100644 editor/importstyles/App.vue
 create mode 100644 editor/importstyles/main.js
 create mode 100644 editor/importstyles/package.json
 create mode 100644 editor/linebreakconfig/App.vue
 create mode 100644 editor/linebreakconfig/main.js
 create mode 100644 editor/linebreakconfig/package.json
 create mode 100644 editor/localization/App.vue
 create mode 100644 editor/localization/main.js
 create mode 100644 editor/localization/package.json
 create mode 100644 editor/popupeditor/App.vue
 create mode 100644 editor/popupeditor/main.js
 create mode 100644 editor/popupeditor/package.json
 create mode 100644 editor/printing/App.vue
 create mode 100644 editor/printing/main.js
 create mode 100644 editor/printing/package.json
 create mode 100644 editor/righttoleftlayout/App.vue
 create mode 100644 editor/righttoleftlayout/main.js
 create mode 100644 editor/righttoleftlayout/package.json
 create mode 100644 editor/toolbarposition/App.vue
 create mode 100644 editor/toolbarposition/main.js
 create mode 100644 editor/toolbarposition/package.json
 create mode 100644 editor/toolscustomization/App.vue
 create mode 100644 editor/toolscustomization/main.js
 create mode 100644 editor/toolscustomization/package.json
 create mode 100644 editor/toolsvisibility/App.vue
 create mode 100644 editor/toolsvisibility/main.js
 create mode 100644 editor/toolsvisibility/package.json
 create mode 100644 expander/defaultfunctionality/App.vue
 create mode 100644 expander/defaultfunctionality/main.js
 create mode 100644 expander/defaultfunctionality/package.json
 create mode 100644 expander/fluidsize/App.vue
 create mode 100644 expander/fluidsize/main.js
 create mode 100644 expander/fluidsize/package.json
 create mode 100644 expander/loadingdataondemand/App.vue
 create mode 100644 expander/loadingdataondemand/main.js
 create mode 100644 expander/loadingdataondemand/package.json
 create mode 100644 expander/righttoleftlayout/App.vue
 create mode 100644 expander/righttoleftlayout/main.js
 create mode 100644 expander/righttoleftlayout/package.json
 create mode 100644 expander/toggleondoubleclick/App.vue
 create mode 100644 expander/toggleondoubleclick/main.js
 create mode 100644 expander/toggleondoubleclick/package.json
 create mode 100644 fileupload/buttonsrendering/App.vue
 create mode 100644 fileupload/buttonsrendering/main.js
 create mode 100644 fileupload/buttonsrendering/package.json
 create mode 100644 fileupload/defaultfunctionality/App.vue
 create mode 100644 fileupload/defaultfunctionality/main.js
 create mode 100644 fileupload/defaultfunctionality/package.json
 create mode 100644 fileupload/events/App.vue
 create mode 100644 fileupload/events/main.js
 create mode 100644 fileupload/events/package.json
 create mode 100644 fileupload/righttoleftlayout/App.vue
 create mode 100644 fileupload/righttoleftlayout/main.js
 create mode 100644 fileupload/righttoleftlayout/package.json
 create mode 100644 fileupload/selectedfilesrendering/App.vue
 create mode 100644 fileupload/selectedfilesrendering/main.js
 create mode 100644 fileupload/selectedfilesrendering/package.json
 create mode 100644 form/defaultfunctionality/App.vue
 create mode 100644 form/defaultfunctionality/main.js
 create mode 100644 form/defaultfunctionality/package.json
 create mode 100644 form/events/App.vue
 create mode 100644 form/events/main.js
 create mode 100644 form/events/package.json
 create mode 100644 form/inputalignment/App.vue
 create mode 100644 form/inputalignment/main.js
 create mode 100644 form/inputalignment/package.json
 create mode 100644 form/inputlabelposition/App.vue
 create mode 100644 form/inputlabelposition/main.js
 create mode 100644 form/inputlabelposition/package.json
 create mode 100644 form/inputtypes/App.vue
 create mode 100644 form/inputtypes/main.js
 create mode 100644 form/inputtypes/package.json
 create mode 100644 form/submit/App.vue
 create mode 100644 form/submit/main.js
 create mode 100644 form/submit/package.json
 create mode 100644 formattedinput/defaultfunctionality/App.vue
 create mode 100644 formattedinput/defaultfunctionality/main.js
 create mode 100644 formattedinput/defaultfunctionality/package.json
 create mode 100644 formattedinput/events/App.vue
 create mode 100644 formattedinput/events/main.js
 create mode 100644 formattedinput/events/package.json
 create mode 100644 formattedinput/exponentialnotation/App.vue
 create mode 100644 formattedinput/exponentialnotation/main.js
 create mode 100644 formattedinput/exponentialnotation/package.json
 create mode 100644 formattedinput/fluidsize/App.vue
 create mode 100644 formattedinput/fluidsize/main.js
 create mode 100644 formattedinput/fluidsize/package.json
 create mode 100644 formattedinput/keyboardnavigation/App.vue
 create mode 100644 formattedinput/keyboardnavigation/main.js
 create mode 100644 formattedinput/keyboardnavigation/package.json
 create mode 100644 formattedinput/negativenumbers/App.vue
 create mode 100644 formattedinput/negativenumbers/main.js
 create mode 100644 formattedinput/negativenumbers/package.json
 create mode 100644 formattedinput/righttoleftlayout/App.vue
 create mode 100644 formattedinput/righttoleftlayout/main.js
 create mode 100644 formattedinput/righttoleftlayout/package.json
 create mode 100644 formattedinput/simpleinput/App.vue
 create mode 100644 formattedinput/simpleinput/main.js
 create mode 100644 formattedinput/simpleinput/package.json
 create mode 100644 formattedinput/twowaydatabinding/App.vue
 create mode 100644 formattedinput/twowaydatabinding/main.js
 create mode 100644 formattedinput/twowaydatabinding/package.json
 create mode 100644 formattedinput/uppercasehexadecimals/App.vue
 create mode 100644 formattedinput/uppercasehexadecimals/main.js
 create mode 100644 formattedinput/uppercasehexadecimals/package.json
 create mode 100644 formattedinput/validation/App.vue
 create mode 100644 formattedinput/validation/main.js
 create mode 100644 formattedinput/validation/package.json
 create mode 100644 gauge/defaultfunctionality/App.vue
 create mode 100644 gauge/defaultfunctionality/main.js
 create mode 100644 gauge/defaultfunctionality/package.json
 create mode 100644 gauge/fluidsize/App.vue
 create mode 100644 gauge/fluidsize/main.js
 create mode 100644 gauge/fluidsize/package.json
 create mode 100644 gauge/gaugesettings/App.vue
 create mode 100644 gauge/gaugesettings/main.js
 create mode 100644 gauge/gaugesettings/package.json
 create mode 100644 gauge/gaugewithslider/App.vue
 create mode 100644 gauge/gaugewithslider/main.js
 create mode 100644 gauge/gaugewithslider/package.json
 create mode 100644 gauge/lineargauge/App.vue
 create mode 100644 gauge/lineargauge/main.js
 create mode 100644 gauge/lineargauge/package.json
 create mode 100644 grid/addnewbottomrow/App.vue
 create mode 100644 grid/addnewbottomrow/main.js
 create mode 100644 grid/addnewbottomrow/package.json
 create mode 100644 grid/addnewrow/App.vue
 create mode 100644 grid/addnewrow/main.js
 create mode 100644 grid/addnewrow/package.json
 create mode 100644 grid/addremoveupdate/App.vue
 create mode 100644 grid/addremoveupdate/main.js
 create mode 100644 grid/addremoveupdate/package.json
 create mode 100644 grid/aggregates/App.vue
 create mode 100644 grid/aggregates/main.js
 create mode 100644 grid/aggregates/package.json
 create mode 100644 grid/aggregatesgrouping/App.vue
 create mode 100644 grid/aggregatesgrouping/main.js
 create mode 100644 grid/aggregatesgrouping/package.json
 create mode 100644 grid/aggregatesrenderer/App.vue
 create mode 100644 grid/aggregatesrenderer/main.js
 create mode 100644 grid/aggregatesrenderer/package.json
 create mode 100644 grid/autorowheight/App.vue
 create mode 100644 grid/autorowheight/main.js
 create mode 100644 grid/autorowheight/package.json
 create mode 100644 grid/autosizecolumns/App.vue
 create mode 100644 grid/autosizecolumns/main.js
 create mode 100644 grid/autosizecolumns/package.json
 create mode 100644 grid/bindingtoarray/App.vue
 create mode 100644 grid/bindingtoarray/main.js
 create mode 100644 grid/bindingtoarray/package.json
 create mode 100644 grid/bindingtocsv/App.vue
 create mode 100644 grid/bindingtocsv/main.js
 create mode 100644 grid/bindingtocsv/package.json
 create mode 100644 grid/bindingtojsarray/App.vue
 create mode 100644 grid/bindingtojsarray/main.js
 create mode 100644 grid/bindingtojsarray/package.json
 create mode 100644 grid/bindingtojson/App.vue
 create mode 100644 grid/bindingtojson/main.js
 create mode 100644 grid/bindingtojson/package.json
 create mode 100644 grid/bindingtojsonstring/App.vue
 create mode 100644 grid/bindingtojsonstring/main.js
 create mode 100644 grid/bindingtojsonstring/package.json
 create mode 100644 grid/bindingtojsonusingphp/App.vue
 create mode 100644 grid/bindingtojsonusingphp/main.js
 create mode 100644 grid/bindingtojsonusingphp/package.json
 create mode 100644 grid/bindingtoobservablearray/App.vue
 create mode 100644 grid/bindingtoobservablearray/main.js
 create mode 100644 grid/bindingtoobservablearray/package.json
 create mode 100644 grid/bindingtoremotedata/App.vue
 create mode 100644 grid/bindingtoremotedata/main.js
 create mode 100644 grid/bindingtoremotedata/package.json
 create mode 100644 grid/bindingtotsv/App.vue
 create mode 100644 grid/bindingtotsv/main.js
 create mode 100644 grid/bindingtotsv/package.json
 create mode 100644 grid/bindingtoxml/App.vue
 create mode 100644 grid/bindingtoxml/main.js
 create mode 100644 grid/bindingtoxml/package.json
 create mode 100644 grid/cascadingcomboboxes/App.vue
 create mode 100644 grid/cascadingcomboboxes/main.js
 create mode 100644 grid/cascadingcomboboxes/package.json
 create mode 100644 grid/cellsselection/App.vue
 create mode 100644 grid/cellsselection/main.js
 create mode 100644 grid/cellsselection/package.json
 create mode 100644 grid/cellsstyling/App.vue
 create mode 100644 grid/cellsstyling/main.js
 create mode 100644 grid/cellsstyling/package.json
 create mode 100644 grid/checkboxcolumn/App.vue
 create mode 100644 grid/checkboxcolumn/main.js
 create mode 100644 grid/checkboxcolumn/package.json
 create mode 100644 grid/checkboxselection/App.vue
 create mode 100644 grid/checkboxselection/main.js
 create mode 100644 grid/checkboxselection/package.json
 create mode 100644 grid/columnshierarchy/App.vue
 create mode 100644 grid/columnshierarchy/main.js
 create mode 100644 grid/columnshierarchy/package.json
 create mode 100644 grid/columnsreorder/App.vue
 create mode 100644 grid/columnsreorder/main.js
 create mode 100644 grid/columnsreorder/package.json
 create mode 100644 grid/columnsresize/App.vue
 create mode 100644 grid/columnsresize/main.js
 create mode 100644 grid/columnsresize/package.json
 create mode 100644 grid/columntemplate/App.vue
 create mode 100644 grid/columntemplate/main.js
 create mode 100644 grid/columntemplate/package.json
 create mode 100644 grid/columntooltips/App.vue
 create mode 100644 grid/columntooltips/main.js
 create mode 100644 grid/columntooltips/package.json
 create mode 100644 grid/computedcolumn/App.vue
 create mode 100644 grid/computedcolumn/main.js
 create mode 100644 grid/computedcolumn/package.json
 create mode 100644 grid/contextmenu/App.vue
 create mode 100644 grid/contextmenu/main.js
 create mode 100644 grid/contextmenu/package.json
 create mode 100644 grid/createComponent/App.vue
 create mode 100644 grid/createComponent/main.js
 create mode 100644 grid/createComponent/package.json
 create mode 100644 grid/createremoveupdate/App.vue
 create mode 100644 grid/createremoveupdate/main.js
 create mode 100644 grid/createremoveupdate/package.json
 create mode 100644 grid/customaggregates/App.vue
 create mode 100644 grid/customaggregates/main.js
 create mode 100644 grid/customaggregates/package.json
 create mode 100644 grid/customcolumneditor/App.vue
 create mode 100644 grid/customcolumneditor/main.js
 create mode 100644 grid/customcolumneditor/package.json
 create mode 100644 grid/customcomboboxcolumn/App.vue
 create mode 100644 grid/customcomboboxcolumn/main.js
 create mode 100644 grid/customcomboboxcolumn/package.json
 create mode 100644 grid/customdropdownlistcolumn/App.vue
 create mode 100644 grid/customdropdownlistcolumn/main.js
 create mode 100644 grid/customdropdownlistcolumn/package.json
 create mode 100644 grid/customfiltermenu/App.vue
 create mode 100644 grid/customfiltermenu/main.js
 create mode 100644 grid/customfiltermenu/package.json
 create mode 100644 grid/customizededitors/App.vue
 create mode 100644 grid/customizededitors/main.js
 create mode 100644 grid/customizededitors/package.json
 create mode 100644 grid/customkeyboardnavigation/App.vue
 create mode 100644 grid/customkeyboardnavigation/main.js
 create mode 100644 grid/customkeyboardnavigation/package.json
 create mode 100644 grid/customlistitemswithkeyvalue/App.vue
 create mode 100644 grid/customlistitemswithkeyvalue/main.js
 create mode 100644 grid/customlistitemswithkeyvalue/package.json
 create mode 100644 grid/customroweditor/App.vue
 create mode 100644 grid/customroweditor/main.js
 create mode 100644 grid/customroweditor/package.json
 create mode 100644 grid/customsorting/App.vue
 create mode 100644 grid/customsorting/main.js
 create mode 100644 grid/customsorting/package.json
 create mode 100644 grid/dataexport/App.vue
 create mode 100644 grid/dataexport/main.js
 create mode 100644 grid/dataexport/package.json
 create mode 100644 grid/dataprinting/App.vue
 create mode 100644 grid/dataprinting/main.js
 create mode 100644 grid/dataprinting/package.json
 create mode 100644 grid/daterangefilter/App.vue
 create mode 100644 grid/daterangefilter/main.js
 create mode 100644 grid/daterangefilter/package.json
 create mode 100644 grid/defaultfunctionality/App.vue
 create mode 100644 grid/defaultfunctionality/main.js
 create mode 100644 grid/defaultfunctionality/package.json
 create mode 100644 grid/deferedscrolling/App.vue
 create mode 100644 grid/deferedscrolling/main.js
 create mode 100644 grid/deferedscrolling/package.json
 create mode 100644 grid/deferedscrollingonalargedataset/App.vue
 create mode 100644 grid/deferedscrollingonalargedataset/main.js
 create mode 100644 grid/deferedscrollingonalargedataset/package.json
 create mode 100644 grid/disableeditingofrows/App.vue
 create mode 100644 grid/disableeditingofrows/main.js
 create mode 100644 grid/disableeditingofrows/package.json
 create mode 100644 grid/dragdrop/App.vue
 create mode 100644 grid/dragdrop/main.js
 create mode 100644 grid/dragdrop/package.json
 create mode 100644 grid/dropdowngrid/App.vue
 create mode 100644 grid/dropdowngrid/main.js
 create mode 100644 grid/dropdowngrid/package.json
 create mode 100644 grid/dynamiccolumns/App.vue
 create mode 100644 grid/dynamiccolumns/main.js
 create mode 100644 grid/dynamiccolumns/package.json
 create mode 100644 grid/editing/App.vue
 create mode 100644 grid/editing/main.js
 create mode 100644 grid/editing/package.json
 create mode 100644 grid/editmodes/App.vue
 create mode 100644 grid/editmodes/main.js
 create mode 100644 grid/editmodes/package.json
 create mode 100644 grid/everpresentrowwithcolumns/App.vue
 create mode 100644 grid/everpresentrowwithcolumns/main.js
 create mode 100644 grid/everpresentrowwithcolumns/package.json
 create mode 100644 grid/everpresentrowwithcustomwidgets/App.vue
 create mode 100644 grid/everpresentrowwithcustomwidgets/main.js
 create mode 100644 grid/everpresentrowwithcustomwidgets/package.json
 create mode 100644 grid/excellikefilter/App.vue
 create mode 100644 grid/excellikefilter/main.js
 create mode 100644 grid/excellikefilter/package.json
 create mode 100644 grid/filterconditions/App.vue
 create mode 100644 grid/filterconditions/main.js
 create mode 100644 grid/filterconditions/package.json
 create mode 100644 grid/filtering/App.vue
 create mode 100644 grid/filtering/main.js
 create mode 100644 grid/filtering/package.json
 create mode 100644 grid/filtermenutypes/App.vue
 create mode 100644 grid/filtermenutypes/main.js
 create mode 100644 grid/filtermenutypes/package.json
 create mode 100644 grid/filterrow/App.vue
 create mode 100644 grid/filterrow/main.js
 create mode 100644 grid/filterrow/package.json
 create mode 100644 grid/filterrowcustomlistitems/App.vue
 create mode 100644 grid/filterrowcustomlistitems/main.js
 create mode 100644 grid/filterrowcustomlistitems/package.json
 create mode 100644 grid/fluidsize/App.vue
 create mode 100644 grid/fluidsize/main.js
 create mode 100644 grid/fluidsize/package.json
 create mode 100644 grid/foreignkeycolumn/App.vue
 create mode 100644 grid/foreignkeycolumn/main.js
 create mode 100644 grid/foreignkeycolumn/package.json
 create mode 100644 grid/fullrowedit/App.vue
 create mode 100644 grid/fullrowedit/main.js
 create mode 100644 grid/fullrowedit/package.json
 create mode 100644 grid/gridinjqxtabs/App.vue
 create mode 100644 grid/gridinjqxtabs/main.js
 create mode 100644 grid/gridinjqxtabs/package.json
 create mode 100644 grid/grouping/App.vue
 create mode 100644 grid/grouping/main.js
 create mode 100644 grid/grouping/package.json
 create mode 100644 grid/groupingaggregates/App.vue
 create mode 100644 grid/groupingaggregates/main.js
 create mode 100644 grid/groupingaggregates/package.json
 create mode 100644 grid/groupingwithpager/App.vue
 create mode 100644 grid/groupingwithpager/main.js
 create mode 100644 grid/groupingwithpager/package.json
 create mode 100644 grid/imagecolumn/App.vue
 create mode 100644 grid/imagecolumn/main.js
 create mode 100644 grid/imagecolumn/package.json
 create mode 100644 grid/initialfilter/App.vue
 create mode 100644 grid/initialfilter/main.js
 create mode 100644 grid/initialfilter/package.json
 create mode 100644 grid/initialpageandpagesize/App.vue
 create mode 100644 grid/initialpageandpagesize/main.js
 create mode 100644 grid/initialpageandpagesize/package.json
 create mode 100644 grid/keyboardnavigation/App.vue
 create mode 100644 grid/keyboardnavigation/main.js
 create mode 100644 grid/keyboardnavigation/package.json
 create mode 100644 grid/keysvaluescolumn/App.vue
 create mode 100644 grid/keysvaluescolumn/main.js
 create mode 100644 grid/keysvaluescolumn/package.json
 create mode 100644 grid/largedataset/App.vue
 create mode 100644 grid/largedataset/main.js
 create mode 100644 grid/largedataset/package.json
 create mode 100644 grid/loadfromtable/App.vue
 create mode 100644 grid/loadfromtable/main.js
 create mode 100644 grid/loadfromtable/package.json
 create mode 100644 grid/localization/App.vue
 create mode 100644 grid/localization/main.js
 create mode 100644 grid/localization/package.json
 create mode 100644 grid/localizedaddnewrow/App.vue
 create mode 100644 grid/localizedaddnewrow/main.js
 create mode 100644 grid/localizedaddnewrow/package.json
 create mode 100644 grid/manycolumns/App.vue
 create mode 100644 grid/manycolumns/main.js
 create mode 100644 grid/manycolumns/package.json
 create mode 100644 grid/masterdetails/App.vue
 create mode 100644 grid/masterdetails/main.js
 create mode 100644 grid/masterdetails/package.json
 create mode 100644 grid/nestedgrids/App.vue
 create mode 100644 grid/nestedgrids/main.js
 create mode 100644 grid/nestedgrids/package.json
 create mode 100644 grid/pagermodes/App.vue
 create mode 100644 grid/pagermodes/main.js
 create mode 100644 grid/pagermodes/package.json
 create mode 100644 grid/paging/App.vue
 create mode 100644 grid/paging/main.js
 create mode 100644 grid/paging/package.json
 create mode 100644 grid/percentagewidthforcolumns/App.vue
 create mode 100644 grid/percentagewidthforcolumns/main.js
 create mode 100644 grid/percentagewidthforcolumns/package.json
 create mode 100644 grid/pinnedfrozencolumns/App.vue
 create mode 100644 grid/pinnedfrozencolumns/main.js
 create mode 100644 grid/pinnedfrozencolumns/package.json
 create mode 100644 grid/popupediting/App.vue
 create mode 100644 grid/popupediting/main.js
 create mode 100644 grid/popupediting/package.json
 create mode 100644 grid/positioning/App.vue
 create mode 100644 grid/positioning/main.js
 create mode 100644 grid/positioning/package.json
 create mode 100644 grid/refreshdata/App.vue
 create mode 100644 grid/refreshdata/main.js
 create mode 100644 grid/refreshdata/package.json
 create mode 100644 grid/righttoleftlayout/App.vue
 create mode 100644 grid/righttoleftlayout/main.js
 create mode 100644 grid/righttoleftlayout/package.json
 create mode 100644 grid/rowdetails/App.vue
 create mode 100644 grid/rowdetails/main.js
 create mode 100644 grid/rowdetails/package.json
 create mode 100644 grid/roweditwitheverpresentrow/App.vue
 create mode 100644 grid/roweditwitheverpresentrow/main.js
 create mode 100644 grid/roweditwitheverpresentrow/package.json
 create mode 100644 grid/rownumbercolumn/App.vue
 create mode 100644 grid/rownumbercolumn/main.js
 create mode 100644 grid/rownumbercolumn/package.json
 create mode 100644 grid/rowselection/App.vue
 create mode 100644 grid/rowselection/main.js
 create mode 100644 grid/rowselection/package.json
 create mode 100644 grid/showhidecolumns/App.vue
 create mode 100644 grid/showhidecolumns/main.js
 create mode 100644 grid/showhidecolumns/package.json
 create mode 100644 grid/sorting/App.vue
 create mode 100644 grid/sorting/main.js
 create mode 100644 grid/sorting/package.json
 create mode 100644 grid/spreadsheet/App.vue
 create mode 100644 grid/spreadsheet/main.js
 create mode 100644 grid/spreadsheet/package.json
 create mode 100644 grid/statemaintenance/App.vue
 create mode 100644 grid/statemaintenance/main.js
 create mode 100644 grid/statemaintenance/package.json
 create mode 100644 grid/statusbar/App.vue
 create mode 100644 grid/statusbar/main.js
 create mode 100644 grid/statusbar/package.json
 create mode 100644 grid/textalignment/App.vue
 create mode 100644 grid/textalignment/main.js
 create mode 100644 grid/textalignment/package.json
 create mode 100644 grid/togglesubrows/App.vue
 create mode 100644 grid/togglesubrows/main.js
 create mode 100644 grid/togglesubrows/package.json
 create mode 100644 grid/toolbar/App.vue
 create mode 100644 grid/toolbar/main.js
 create mode 100644 grid/toolbar/package.json
 create mode 100644 grid/updatingactionsatruntime/App.vue
 create mode 100644 grid/updatingactionsatruntime/main.js
 create mode 100644 grid/updatingactionsatruntime/package.json
 create mode 100644 grid/validation/App.vue
 create mode 100644 grid/validation/main.js
 create mode 100644 grid/validation/package.json
 create mode 100644 grid/virtualpaging/App.vue
 create mode 100644 grid/virtualpaging/main.js
 create mode 100644 grid/virtualpaging/package.json
 create mode 100644 grid/virtualscrolling/App.vue
 create mode 100644 grid/virtualscrolling/main.js
 create mode 100644 grid/virtualscrolling/package.json
 create mode 100644 grid/widgetcolumn/App.vue
 create mode 100644 grid/widgetcolumn/main.js
 create mode 100644 grid/widgetcolumn/package.json
 create mode 100644 input/autocomplete/App.vue
 create mode 100644 input/autocomplete/main.js
 create mode 100644 input/autocomplete/package.json
 create mode 100644 input/bindingtojsondata/App.vue
 create mode 100644 input/bindingtojsondata/main.js
 create mode 100644 input/bindingtojsondata/package.json
 create mode 100644 input/defaultfunctionality/App.vue
 create mode 100644 input/defaultfunctionality/main.js
 create mode 100644 input/defaultfunctionality/package.json
 create mode 100644 input/fluidsize/App.vue
 create mode 100644 input/fluidsize/main.js
 create mode 100644 input/fluidsize/package.json
 create mode 100644 input/inputgroup/App.vue
 create mode 100644 input/inputgroup/main.js
 create mode 100644 input/inputgroup/package.json
 create mode 100644 input/multiplevalues/App.vue
 create mode 100644 input/multiplevalues/main.js
 create mode 100644 input/multiplevalues/package.json
 create mode 100644 input/righttoleftlayout/App.vue
 create mode 100644 input/righttoleftlayout/main.js
 create mode 100644 input/righttoleftlayout/package.json
 create mode 100644 input/twowaydatabinding/App.vue
 create mode 100644 input/twowaydatabinding/main.js
 create mode 100644 input/twowaydatabinding/package.json
 create mode 100644 kanban/addremoveupdateitems/App.vue
 create mode 100644 kanban/addremoveupdateitems/main.js
 create mode 100644 kanban/addremoveupdateitems/package.json
 create mode 100644 kanban/defaultfunctionality/App.vue
 create mode 100644 kanban/defaultfunctionality/main.js
 create mode 100644 kanban/defaultfunctionality/package.json
 create mode 100644 kanban/disablecollapse/App.vue
 create mode 100644 kanban/disablecollapse/main.js
 create mode 100644 kanban/disablecollapse/package.json
 create mode 100644 kanban/headertemplate/App.vue
 create mode 100644 kanban/headertemplate/main.js
 create mode 100644 kanban/headertemplate/package.json
 create mode 100644 kanban/itemtemplate/App.vue
 create mode 100644 kanban/itemtemplate/main.js
 create mode 100644 kanban/itemtemplate/package.json
 create mode 100644 kanban/kanbanediting/App.vue
 create mode 100644 kanban/kanbanediting/main.js
 create mode 100644 kanban/kanbanediting/package.json
 create mode 100644 kanban/kanbanevents/App.vue
 create mode 100644 kanban/kanbanevents/main.js
 create mode 100644 kanban/kanbanevents/package.json
 create mode 100644 kanban/kanbanfluidsize/App.vue
 create mode 100644 kanban/kanbanfluidsize/main.js
 create mode 100644 kanban/kanbanfluidsize/package.json
 create mode 100644 kanban/multiplekanbans/App.vue
 create mode 100644 kanban/multiplekanbans/main.js
 create mode 100644 kanban/multiplekanbans/package.json
 create mode 100644 kanban/righttoleftlayout/App.vue
 create mode 100644 kanban/righttoleftlayout/main.js
 create mode 100644 kanban/righttoleftlayout/package.json
 create mode 100644 knob/circlepointer/App.vue
 create mode 100644 knob/circlepointer/main.js
 create mode 100644 knob/circlepointer/package.json
 create mode 100644 knob/defaultfunctionality/App.vue
 create mode 100644 knob/defaultfunctionality/main.js
 create mode 100644 knob/defaultfunctionality/package.json
 create mode 100644 knob/fluidsize/App.vue
 create mode 100644 knob/fluidsize/main.js
 create mode 100644 knob/fluidsize/package.json
 create mode 100644 knob/infiniteknob/App.vue
 create mode 100644 knob/infiniteknob/main.js
 create mode 100644 knob/infiniteknob/package.json
 create mode 100644 knob/knobprogressranges/App.vue
 create mode 100644 knob/knobprogressranges/main.js
 create mode 100644 knob/knobprogressranges/package.json
 create mode 100644 knob/knobrotation/App.vue
 create mode 100644 knob/knobrotation/main.js
 create mode 100644 knob/knobrotation/package.json
 create mode 100644 knob/knobwithcustomshape/App.vue
 create mode 100644 knob/knobwithcustomshape/main.js
 create mode 100644 knob/knobwithcustomshape/package.json
 create mode 100644 knob/knobwithinput/App.vue
 create mode 100644 knob/knobwithinput/main.js
 create mode 100644 knob/knobwithinput/package.json
 create mode 100644 knob/linepointer/App.vue
 create mode 100644 knob/linepointer/main.js
 create mode 100644 knob/linepointer/package.json
 create mode 100644 knob/multiplearrowpointes/App.vue
 create mode 100644 knob/multiplearrowpointes/main.js
 create mode 100644 knob/multiplearrowpointes/package.json
 create mode 100644 knob/multiplecirclepointers/App.vue
 create mode 100644 knob/multiplecirclepointers/main.js
 create mode 100644 knob/multiplecirclepointers/package.json
 create mode 100644 knob/multipleknobs/App.vue
 create mode 100644 knob/multipleknobs/main.js
 create mode 100644 knob/multipleknobs/package.json
 create mode 100644 knob/radialgradient/App.vue
 create mode 100644 knob/radialgradient/main.js
 create mode 100644 knob/radialgradient/package.json
 create mode 100644 knob/semiknob/App.vue
 create mode 100644 knob/semiknob/main.js
 create mode 100644 knob/semiknob/package.json
 create mode 100644 layout/dashboard/App.vue
 create mode 100644 layout/dashboard/main.js
 create mode 100644 layout/dashboard/package.json
 create mode 100644 layout/defaultfunctionality/App.vue
 create mode 100644 layout/defaultfunctionality/main.js
 create mode 100644 layout/defaultfunctionality/package.json
 create mode 100644 layout/fluidsize/App.vue
 create mode 100644 layout/fluidsize/main.js
 create mode 100644 layout/fluidsize/package.json
 create mode 100644 layout/integrationwithotherwidgets/App.vue
 create mode 100644 layout/integrationwithotherwidgets/main.js
 create mode 100644 layout/integrationwithotherwidgets/package.json
 create mode 100644 layout/righttoleftlayout/App.vue
 create mode 100644 layout/righttoleftlayout/main.js
 create mode 100644 layout/righttoleftlayout/package.json
 create mode 100644 layout/saveloadlayout/App.vue
 create mode 100644 layout/saveloadlayout/main.js
 create mode 100644 layout/saveloadlayout/package.json
 create mode 100644 linkbutton/defaultfunctionality/App.vue
 create mode 100644 linkbutton/defaultfunctionality/main.js
 create mode 100644 linkbutton/defaultfunctionality/package.json
 create mode 100644 listbox/bindingtoarray/App.vue
 create mode 100644 listbox/bindingtoarray/main.js
 create mode 100644 listbox/bindingtoarray/package.json
 create mode 100644 listbox/bindingtojsondata/App.vue
 create mode 100644 listbox/bindingtojsondata/main.js
 create mode 100644 listbox/bindingtojsondata/package.json
 create mode 100644 listbox/bindingtoxml/App.vue
 create mode 100644 listbox/bindingtoxml/main.js
 create mode 100644 listbox/bindingtoxml/package.json
 create mode 100644 listbox/categories/App.vue
 create mode 100644 listbox/categories/main.js
 create mode 100644 listbox/categories/package.json
 create mode 100644 listbox/checkboxes/App.vue
 create mode 100644 listbox/checkboxes/main.js
 create mode 100644 listbox/checkboxes/package.json
 create mode 100644 listbox/customrendering/App.vue
 create mode 100644 listbox/customrendering/main.js
 create mode 100644 listbox/customrendering/package.json
 create mode 100644 listbox/defaultfunctionality/App.vue
 create mode 100644 listbox/defaultfunctionality/main.js
 create mode 100644 listbox/defaultfunctionality/package.json
 create mode 100644 listbox/dragdrop/App.vue
 create mode 100644 listbox/dragdrop/main.js
 create mode 100644 listbox/dragdrop/package.json
 create mode 100644 listbox/events/App.vue
 create mode 100644 listbox/events/main.js
 create mode 100644 listbox/events/package.json
 create mode 100644 listbox/filtering/App.vue
 create mode 100644 listbox/filtering/main.js
 create mode 100644 listbox/filtering/package.json
 create mode 100644 listbox/fluidsize/App.vue
 create mode 100644 listbox/fluidsize/main.js
 create mode 100644 listbox/fluidsize/package.json
 create mode 100644 listbox/itemsreorder/App.vue
 create mode 100644 listbox/itemsreorder/main.js
 create mode 100644 listbox/itemsreorder/package.json
 create mode 100644 listbox/keyboardnavigation/App.vue
 create mode 100644 listbox/keyboardnavigation/main.js
 create mode 100644 listbox/keyboardnavigation/package.json
 create mode 100644 listbox/loaddatafromselect/App.vue
 create mode 100644 listbox/loaddatafromselect/main.js
 create mode 100644 listbox/loaddatafromselect/package.json
 create mode 100644 listbox/multipleselection/App.vue
 create mode 100644 listbox/multipleselection/main.js
 create mode 100644 listbox/multipleselection/package.json
 create mode 100644 listbox/remotesearch/App.vue
 create mode 100644 listbox/remotesearch/main.js
 create mode 100644 listbox/remotesearch/package.json
 create mode 100644 listbox/righttoleftlayout/App.vue
 create mode 100644 listbox/righttoleftlayout/main.js
 create mode 100644 listbox/righttoleftlayout/package.json
 create mode 100644 listbox/selectionwithshiftctrl/App.vue
 create mode 100644 listbox/selectionwithshiftctrl/main.js
 create mode 100644 listbox/selectionwithshiftctrl/package.json
 create mode 100644 listbox/textwithicons/App.vue
 create mode 100644 listbox/textwithicons/main.js
 create mode 100644 listbox/textwithicons/package.json
 create mode 100644 listbox/twowaydatabinding/App.vue
 create mode 100644 listbox/twowaydatabinding/main.js
 create mode 100644 listbox/twowaydatabinding/package.json
 create mode 100644 listmenu/defaultfunctionality/App.vue
 create mode 100644 listmenu/defaultfunctionality/main.js
 create mode 100644 listmenu/defaultfunctionality/package.json
 create mode 100644 listmenu/fluidsize/App.vue
 create mode 100644 listmenu/fluidsize/main.js
 create mode 100644 listmenu/fluidsize/package.json
 create mode 100644 listmenu/nestedlists/App.vue
 create mode 100644 listmenu/nestedlists/main.js
 create mode 100644 listmenu/nestedlists/package.json
 create mode 100644 listmenu/righttoleftlayout/App.vue
 create mode 100644 listmenu/righttoleftlayout/main.js
 create mode 100644 listmenu/righttoleftlayout/package.json
 create mode 100644 loader/defaultfunctionality/App.vue
 create mode 100644 loader/defaultfunctionality/main.js
 create mode 100644 loader/defaultfunctionality/package.json
 create mode 100644 loader/loaderwithjqxgrid/App.vue
 create mode 100644 loader/loaderwithjqxgrid/main.js
 create mode 100644 loader/loaderwithjqxgrid/package.json
 create mode 100644 loader/righttoleftlayout/App.vue
 create mode 100644 loader/righttoleftlayout/main.js
 create mode 100644 loader/righttoleftlayout/package.json
 create mode 100644 loader/showmodalloader/App.vue
 create mode 100644 loader/showmodalloader/main.js
 create mode 100644 loader/showmodalloader/package.json
 create mode 100644 loader/showonlyicon/App.vue
 create mode 100644 loader/showonlyicon/main.js
 create mode 100644 loader/showonlyicon/package.json
 create mode 100644 loader/showonlytext/App.vue
 create mode 100644 loader/showonlytext/main.js
 create mode 100644 loader/showonlytext/package.json
 create mode 100644 maskedinput/defaultfunctionality/App.vue
 create mode 100644 maskedinput/defaultfunctionality/main.js
 create mode 100644 maskedinput/defaultfunctionality/package.json
 create mode 100644 maskedinput/events/App.vue
 create mode 100644 maskedinput/events/main.js
 create mode 100644 maskedinput/events/package.json
 create mode 100644 maskedinput/fluidsize/App.vue
 create mode 100644 maskedinput/fluidsize/main.js
 create mode 100644 maskedinput/fluidsize/package.json
 create mode 100644 maskedinput/righttoleftlayout/App.vue
 create mode 100644 maskedinput/righttoleftlayout/main.js
 create mode 100644 maskedinput/righttoleftlayout/package.json
 create mode 100644 maskedinput/twowaydatabinding/App.vue
 create mode 100644 maskedinput/twowaydatabinding/main.js
 create mode 100644 maskedinput/twowaydatabinding/package.json
 create mode 100644 menu/centermenuitems/App.vue
 create mode 100644 menu/centermenuitems/main.js
 create mode 100644 menu/centermenuitems/package.json
 create mode 100644 menu/columns/App.vue
 create mode 100644 menu/columns/main.js
 create mode 100644 menu/columns/package.json
 create mode 100644 menu/contextmenu/App.vue
 create mode 100644 menu/contextmenu/main.js
 create mode 100644 menu/contextmenu/package.json
 create mode 100644 menu/defaultfunctionality/App.vue
 create mode 100644 menu/defaultfunctionality/main.js
 create mode 100644 menu/defaultfunctionality/package.json
 create mode 100644 menu/fluidsize/App.vue
 create mode 100644 menu/fluidsize/main.js
 create mode 100644 menu/fluidsize/package.json
 create mode 100644 menu/images/App.vue
 create mode 100644 menu/images/main.js
 create mode 100644 menu/images/package.json
 create mode 100644 menu/jsonmenu/App.vue
 create mode 100644 menu/jsonmenu/main.js
 create mode 100644 menu/jsonmenu/package.json
 create mode 100644 menu/keyboardnavigation/App.vue
 create mode 100644 menu/keyboardnavigation/main.js
 create mode 100644 menu/keyboardnavigation/package.json
 create mode 100644 menu/loadmenufromarray/App.vue
 create mode 100644 menu/loadmenufromarray/main.js
 create mode 100644 menu/loadmenufromarray/package.json
 create mode 100644 menu/minimizedmenu/App.vue
 create mode 100644 menu/minimizedmenu/main.js
 create mode 100644 menu/minimizedmenu/package.json
 create mode 100644 menu/opendirection/App.vue
 create mode 100644 menu/opendirection/main.js
 create mode 100644 menu/opendirection/package.json
 create mode 100644 menu/righttoleftlayout/App.vue
 create mode 100644 menu/righttoleftlayout/main.js
 create mode 100644 menu/righttoleftlayout/package.json
 create mode 100644 menu/verticalmenu/App.vue
 create mode 100644 menu/verticalmenu/main.js
 create mode 100644 menu/verticalmenu/package.json
 create mode 100644 menu/xmlmenu/App.vue
 create mode 100644 menu/xmlmenu/main.js
 create mode 100644 menu/xmlmenu/package.json
 create mode 100644 navbar/defaultfunctionality/App.vue
 create mode 100644 navbar/defaultfunctionality/main.js
 create mode 100644 navbar/defaultfunctionality/package.json
 create mode 100644 navbar/minimizednavbar/App.vue
 create mode 100644 navbar/minimizednavbar/main.js
 create mode 100644 navbar/minimizednavbar/package.json
 create mode 100644 navbar/righttoleftlayout/App.vue
 create mode 100644 navbar/righttoleftlayout/main.js
 create mode 100644 navbar/righttoleftlayout/package.json
 create mode 100644 navbar/verticalnavbar/App.vue
 create mode 100644 navbar/verticalnavbar/main.js
 create mode 100644 navbar/verticalnavbar/package.json
 create mode 100644 navigationbar/defaultfunctionality/App.vue
 create mode 100644 navigationbar/defaultfunctionality/main.js
 create mode 100644 navigationbar/defaultfunctionality/package.json
 create mode 100644 navigationbar/disabled/App.vue
 create mode 100644 navigationbar/disabled/main.js
 create mode 100644 navigationbar/disabled/package.json
 create mode 100644 navigationbar/events/App.vue
 create mode 100644 navigationbar/events/main.js
 create mode 100644 navigationbar/events/package.json
 create mode 100644 navigationbar/fittocontainer/App.vue
 create mode 100644 navigationbar/fittocontainer/main.js
 create mode 100644 navigationbar/fittocontainer/package.json
 create mode 100644 navigationbar/fluidsize/App.vue
 create mode 100644 navigationbar/fluidsize/main.js
 create mode 100644 navigationbar/fluidsize/package.json
 create mode 100644 navigationbar/keyboardnavigation/App.vue
 create mode 100644 navigationbar/keyboardnavigation/main.js
 create mode 100644 navigationbar/keyboardnavigation/package.json
 create mode 100644 navigationbar/multipleexpanded/App.vue
 create mode 100644 navigationbar/multipleexpanded/main.js
 create mode 100644 navigationbar/multipleexpanded/package.json
 create mode 100644 navigationbar/righttoleftlayout/App.vue
 create mode 100644 navigationbar/righttoleftlayout/main.js
 create mode 100644 navigationbar/righttoleftlayout/package.json
 create mode 100644 navigationbar/togglemode/App.vue
 create mode 100644 navigationbar/togglemode/main.js
 create mode 100644 navigationbar/togglemode/package.json
 create mode 100644 notification/customicon/App.vue
 create mode 100644 notification/customicon/main.js
 create mode 100644 notification/customicon/package.json
 create mode 100644 notification/defaultfunctionality/App.vue
 create mode 100644 notification/defaultfunctionality/main.js
 create mode 100644 notification/defaultfunctionality/package.json
 create mode 100644 notification/events/App.vue
 create mode 100644 notification/events/main.js
 create mode 100644 notification/events/package.json
 create mode 100644 notification/fluidsize/App.vue
 create mode 100644 notification/fluidsize/main.js
 create mode 100644 notification/fluidsize/package.json
 create mode 100644 notification/notificationcontainer/App.vue
 create mode 100644 notification/notificationcontainer/main.js
 create mode 100644 notification/notificationcontainer/package.json
 create mode 100644 notification/righttoleftlayout/App.vue
 create mode 100644 notification/righttoleftlayout/main.js
 create mode 100644 notification/righttoleftlayout/package.json
 create mode 100644 notification/settings/App.vue
 create mode 100644 notification/settings/main.js
 create mode 100644 notification/settings/package.json
 create mode 100644 notification/timernotification/App.vue
 create mode 100644 notification/timernotification/main.js
 create mode 100644 notification/timernotification/package.json
 create mode 100644 numberinput/defaultfunctionality/App.vue
 create mode 100644 numberinput/defaultfunctionality/main.js
 create mode 100644 numberinput/defaultfunctionality/package.json
 create mode 100644 numberinput/events/App.vue
 create mode 100644 numberinput/events/main.js
 create mode 100644 numberinput/events/package.json
 create mode 100644 numberinput/fluidsize/App.vue
 create mode 100644 numberinput/fluidsize/main.js
 create mode 100644 numberinput/fluidsize/package.json
 create mode 100644 numberinput/righttoleftlayout/App.vue
 create mode 100644 numberinput/righttoleftlayout/main.js
 create mode 100644 numberinput/righttoleftlayout/package.json
 create mode 100644 numberinput/settings/App.vue
 create mode 100644 numberinput/settings/main.js
 create mode 100644 numberinput/settings/package.json
 create mode 100644 numberinput/simpleinputmode/App.vue
 create mode 100644 numberinput/simpleinputmode/main.js
 create mode 100644 numberinput/simpleinputmode/package.json
 create mode 100644 numberinput/templates/App.vue
 create mode 100644 numberinput/templates/main.js
 create mode 100644 numberinput/templates/package.json
 create mode 100644 numberinput/twowaydatabinding/App.vue
 create mode 100644 numberinput/twowaydatabinding/main.js
 create mode 100644 numberinput/twowaydatabinding/package.json
 create mode 100644 numberinput/validation/App.vue
 create mode 100644 numberinput/validation/main.js
 create mode 100644 numberinput/validation/package.json
 create mode 100644 panel/defaultfunctionality/App.vue
 create mode 100644 panel/defaultfunctionality/main.js
 create mode 100644 panel/defaultfunctionality/package.json
 create mode 100644 panel/dockpanel/App.vue
 create mode 100644 panel/dockpanel/main.js
 create mode 100644 panel/dockpanel/package.json
 create mode 100644 panel/fluidsize/App.vue
 create mode 100644 panel/fluidsize/main.js
 create mode 100644 panel/fluidsize/package.json
 create mode 100644 panel/righttoleftlayout/App.vue
 create mode 100644 panel/righttoleftlayout/main.js
 create mode 100644 panel/righttoleftlayout/package.json
 create mode 100644 passwordinput/customstrengthrendering/App.vue
 create mode 100644 passwordinput/customstrengthrendering/main.js
 create mode 100644 passwordinput/customstrengthrendering/package.json
 create mode 100644 passwordinput/defaultfunctionality/App.vue
 create mode 100644 passwordinput/defaultfunctionality/main.js
 create mode 100644 passwordinput/defaultfunctionality/package.json
 create mode 100644 passwordinput/fluidsize/App.vue
 create mode 100644 passwordinput/fluidsize/main.js
 create mode 100644 passwordinput/fluidsize/package.json
 create mode 100644 passwordinput/righttoleftlayout/App.vue
 create mode 100644 passwordinput/righttoleftlayout/main.js
 create mode 100644 passwordinput/righttoleftlayout/package.json
 create mode 100644 passwordinput/twowaydatabinding/App.vue
 create mode 100644 passwordinput/twowaydatabinding/main.js
 create mode 100644 passwordinput/twowaydatabinding/package.json
 create mode 100644 pivotgrid/cell-values-alignment/App.vue
 create mode 100644 pivotgrid/cell-values-alignment/main.js
 create mode 100644 pivotgrid/cell-values-alignment/package.json
 create mode 100644 pivotgrid/custom-pivot-function/App.vue
 create mode 100644 pivotgrid/custom-pivot-function/main.js
 create mode 100644 pivotgrid/custom-pivot-function/package.json
 create mode 100644 pivotgrid/custom-rendering/App.vue
 create mode 100644 pivotgrid/custom-rendering/main.js
 create mode 100644 pivotgrid/custom-rendering/package.json
 create mode 100644 pivotgrid/designer/App.vue
 create mode 100644 pivotgrid/designer/main.js
 create mode 100644 pivotgrid/designer/package.json
 create mode 100644 pivotgrid/drill-through/App.vue
 create mode 100644 pivotgrid/drill-through/main.js
 create mode 100644 pivotgrid/drill-through/package.json
 create mode 100644 pivotgrid/events/App.vue
 create mode 100644 pivotgrid/events/main.js
 create mode 100644 pivotgrid/events/package.json
 create mode 100644 pivotgrid/localization/App.vue
 create mode 100644 pivotgrid/localization/main.js
 create mode 100644 pivotgrid/localization/package.json
 create mode 100644 pivotgrid/olap-tree-style-rows/App.vue
 create mode 100644 pivotgrid/olap-tree-style-rows/main.js
 create mode 100644 pivotgrid/olap-tree-style-rows/package.json
 create mode 100644 pivotgrid/rows-columns-cells-css-styling/App.vue
 create mode 100644 pivotgrid/rows-columns-cells-css-styling/main.js
 create mode 100644 pivotgrid/rows-columns-cells-css-styling/package.json
 create mode 100644 pivotgrid/totals/App.vue
 create mode 100644 pivotgrid/totals/main.js
 create mode 100644 pivotgrid/totals/package.json
 create mode 100644 pivotgrid/values-on-columns/App.vue
 create mode 100644 pivotgrid/values-on-columns/main.js
 create mode 100644 pivotgrid/values-on-columns/package.json
 create mode 100644 pivotgrid/values-on-rows/App.vue
 create mode 100644 pivotgrid/values-on-rows/main.js
 create mode 100644 pivotgrid/values-on-rows/package.json
 create mode 100644 popover/bottompositioning/App.vue
 create mode 100644 popover/bottompositioning/main.js
 create mode 100644 popover/bottompositioning/package.json
 create mode 100644 popover/defaultfunctionality/App.vue
 create mode 100644 popover/defaultfunctionality/main.js
 create mode 100644 popover/defaultfunctionality/package.json
 create mode 100644 popover/modalpopover/App.vue
 create mode 100644 popover/modalpopover/main.js
 create mode 100644 popover/modalpopover/package.json
 create mode 100644 popover/positioning/App.vue
 create mode 100644 popover/positioning/main.js
 create mode 100644 popover/positioning/package.json
 create mode 100644 popover/righttoleftlayout/App.vue
 create mode 100644 popover/righttoleftlayout/main.js
 create mode 100644 popover/righttoleftlayout/package.json
 create mode 100644 progressbar/colorranges/App.vue
 create mode 100644 progressbar/colorranges/main.js
 create mode 100644 progressbar/colorranges/package.json
 create mode 100644 progressbar/defaultfunctionality/App.vue
 create mode 100644 progressbar/defaultfunctionality/main.js
 create mode 100644 progressbar/defaultfunctionality/package.json
 create mode 100644 progressbar/layout/App.vue
 create mode 100644 progressbar/layout/main.js
 create mode 100644 progressbar/layout/package.json
 create mode 100644 progressbar/righttoleftlayout/App.vue
 create mode 100644 progressbar/righttoleftlayout/main.js
 create mode 100644 progressbar/righttoleftlayout/package.json
 create mode 100644 progressbar/templates/App.vue
 create mode 100644 progressbar/templates/main.js
 create mode 100644 progressbar/templates/package.json
 create mode 100644 radiobutton/defaultfunctionality/App.vue
 create mode 100644 radiobutton/defaultfunctionality/main.js
 create mode 100644 radiobutton/defaultfunctionality/package.json
 create mode 100644 radiobutton/twowaydatabinding/App.vue
 create mode 100644 radiobutton/twowaydatabinding/main.js
 create mode 100644 radiobutton/twowaydatabinding/package.json
 create mode 100644 rangeselector/backgroundimage/App.vue
 create mode 100644 rangeselector/backgroundimage/main.js
 create mode 100644 rangeselector/backgroundimage/package.json
 create mode 100644 rangeselector/chartonbackground/App.vue
 create mode 100644 rangeselector/chartonbackground/main.js
 create mode 100644 rangeselector/chartonbackground/package.json
 create mode 100644 rangeselector/customizedmarkers/App.vue
 create mode 100644 rangeselector/customizedmarkers/main.js
 create mode 100644 rangeselector/customizedmarkers/package.json
 create mode 100644 rangeselector/datascale/App.vue
 create mode 100644 rangeselector/datascale/main.js
 create mode 100644 rangeselector/datascale/package.json
 create mode 100644 rangeselector/decimalscale/App.vue
 create mode 100644 rangeselector/decimalscale/main.js
 create mode 100644 rangeselector/decimalscale/package.json
 create mode 100644 rangeselector/defaultfunctionality/App.vue
 create mode 100644 rangeselector/defaultfunctionality/main.js
 create mode 100644 rangeselector/defaultfunctionality/package.json
 create mode 100644 rangeselector/fluidsize/App.vue
 create mode 100644 rangeselector/fluidsize/main.js
 create mode 100644 rangeselector/fluidsize/package.json
 create mode 100644 rangeselector/negativescale/App.vue
 create mode 100644 rangeselector/negativescale/main.js
 create mode 100644 rangeselector/negativescale/package.json
 create mode 100644 rangeselector/numericscale/App.vue
 create mode 100644 rangeselector/numericscale/main.js
 create mode 100644 rangeselector/numericscale/package.json
 create mode 100644 rangeselector/rangeselectorasafilter/App.vue
 create mode 100644 rangeselector/rangeselectorasafilter/main.js
 create mode 100644 rangeselector/rangeselectorasafilter/package.json
 create mode 100644 rangeselector/righttoleftlayout/App.vue
 create mode 100644 rangeselector/righttoleftlayout/main.js
 create mode 100644 rangeselector/righttoleftlayout/package.json
 create mode 100644 rangeselector/timescale/App.vue
 create mode 100644 rangeselector/timescale/main.js
 create mode 100644 rangeselector/timescale/package.json
 create mode 100644 rating/defaultfunctionality/App.vue
 create mode 100644 rating/defaultfunctionality/main.js
 create mode 100644 rating/defaultfunctionality/package.json
 create mode 100644 rating/twowaydatabinding/App.vue
 create mode 100644 rating/twowaydatabinding/main.js
 create mode 100644 rating/twowaydatabinding/package.json
 create mode 100644 repeatbutton/defaultfunctionality/App.vue
 create mode 100644 repeatbutton/defaultfunctionality/main.js
 create mode 100644 repeatbutton/defaultfunctionality/package.json
 create mode 100644 responsivepanel/defaultfunctionality/App.vue
 create mode 100644 responsivepanel/defaultfunctionality/main.js
 create mode 100644 responsivepanel/defaultfunctionality/package.json
 create mode 100644 responsivepanel/fluidsize/App.vue
 create mode 100644 responsivepanel/fluidsize/main.js
 create mode 100644 responsivepanel/fluidsize/package.json
 create mode 100644 responsivepanel/integrationwithjqxmenu/App.vue
 create mode 100644 responsivepanel/integrationwithjqxmenu/main.js
 create mode 100644 responsivepanel/integrationwithjqxmenu/package.json
 create mode 100644 responsivepanel/righttoleftlayout/App.vue
 create mode 100644 responsivepanel/righttoleftlayout/main.js
 create mode 100644 responsivepanel/righttoleftlayout/package.json
 create mode 100644 ribbon/collapsible/App.vue
 create mode 100644 ribbon/collapsible/main.js
 create mode 100644 ribbon/collapsible/package.json
 create mode 100644 ribbon/defaultfunctionality/App.vue
 create mode 100644 ribbon/defaultfunctionality/main.js
 create mode 100644 ribbon/defaultfunctionality/package.json
 create mode 100644 ribbon/events/App.vue
 create mode 100644 ribbon/events/main.js
 create mode 100644 ribbon/events/package.json
 create mode 100644 ribbon/fluidsize/App.vue
 create mode 100644 ribbon/fluidsize/main.js
 create mode 100644 ribbon/fluidsize/package.json
 create mode 100644 ribbon/integrationwithotherwidgets/App.vue
 create mode 100644 ribbon/integrationwithotherwidgets/main.js
 create mode 100644 ribbon/integrationwithotherwidgets/package.json
 create mode 100644 ribbon/popuplayout/App.vue
 create mode 100644 ribbon/popuplayout/main.js
 create mode 100644 ribbon/popuplayout/package.json
 create mode 100644 ribbon/ribbonatthebottom/App.vue
 create mode 100644 ribbon/ribbonatthebottom/main.js
 create mode 100644 ribbon/ribbonatthebottom/package.json
 create mode 100644 ribbon/righttoleftlayout/App.vue
 create mode 100644 ribbon/righttoleftlayout/main.js
 create mode 100644 ribbon/righttoleftlayout/package.json
 create mode 100644 ribbon/scrolling/App.vue
 create mode 100644 ribbon/scrolling/main.js
 create mode 100644 ribbon/scrolling/package.json
 create mode 100644 ribbon/verticalribbon/App.vue
 create mode 100644 ribbon/verticalribbon/main.js
 create mode 100644 ribbon/verticalribbon/package.json
 create mode 100644 ribbon/verticalrightposition/App.vue
 create mode 100644 ribbon/verticalrightposition/main.js
 create mode 100644 ribbon/verticalrightposition/package.json
 create mode 100644 scheduler/agendaview/App.vue
 create mode 100644 scheduler/agendaview/main.js
 create mode 100644 scheduler/agendaview/package.json
 create mode 100644 scheduler/appointmentcustomization/App.vue
 create mode 100644 scheduler/appointmentcustomization/main.js
 create mode 100644 scheduler/appointmentcustomization/package.json
 create mode 100644 scheduler/appointmentrestrictions/App.vue
 create mode 100644 scheduler/appointmentrestrictions/main.js
 create mode 100644 scheduler/appointmentrestrictions/package.json
 create mode 100644 scheduler/appointmentsexacttimerendering/App.vue
 create mode 100644 scheduler/appointmentsexacttimerendering/main.js
 create mode 100644 scheduler/appointmentsexacttimerendering/package.json
 create mode 100644 scheduler/appointmentstatuses/App.vue
 create mode 100644 scheduler/appointmentstatuses/main.js
 create mode 100644 scheduler/appointmentstatuses/package.json
 create mode 100644 scheduler/bindingtoicalendar/App.vue
 create mode 100644 scheduler/bindingtoicalendar/main.js
 create mode 100644 scheduler/bindingtoicalendar/package.json
 create mode 100644 scheduler/bindingtojson/App.vue
 create mode 100644 scheduler/bindingtojson/main.js
 create mode 100644 scheduler/bindingtojson/package.json
 create mode 100644 scheduler/contextmenu/App.vue
 create mode 100644 scheduler/contextmenu/main.js
 create mode 100644 scheduler/contextmenu/package.json
 create mode 100644 scheduler/dataexport/App.vue
 create mode 100644 scheduler/dataexport/main.js
 create mode 100644 scheduler/dataexport/package.json
 create mode 100644 scheduler/dataprinting/App.vue
 create mode 100644 scheduler/dataprinting/main.js
 create mode 100644 scheduler/dataprinting/package.json
 create mode 100644 scheduler/defaultfunctionality/App.vue
 create mode 100644 scheduler/defaultfunctionality/main.js
 create mode 100644 scheduler/defaultfunctionality/package.json
 create mode 100644 scheduler/editdialog/App.vue
 create mode 100644 scheduler/editdialog/main.js
 create mode 100644 scheduler/editdialog/package.json
 create mode 100644 scheduler/events/App.vue
 create mode 100644 scheduler/events/main.js
 create mode 100644 scheduler/events/package.json
 create mode 100644 scheduler/fluidsize/App.vue
 create mode 100644 scheduler/fluidsize/main.js
 create mode 100644 scheduler/fluidsize/package.json
 create mode 100644 scheduler/hidetimeruler/App.vue
 create mode 100644 scheduler/hidetimeruler/main.js
 create mode 100644 scheduler/hidetimeruler/package.json
 create mode 100644 scheduler/hideweekends/App.vue
 create mode 100644 scheduler/hideweekends/main.js
 create mode 100644 scheduler/hideweekends/package.json
 create mode 100644 scheduler/keyboardnavigation/App.vue
 create mode 100644 scheduler/keyboardnavigation/main.js
 create mode 100644 scheduler/keyboardnavigation/package.json
 create mode 100644 scheduler/localization/App.vue
 create mode 100644 scheduler/localization/main.js
 create mode 100644 scheduler/localization/package.json
 create mode 100644 scheduler/monthviewweeknumbers/App.vue
 create mode 100644 scheduler/monthviewweeknumbers/main.js
 create mode 100644 scheduler/monthviewweeknumbers/package.json
 create mode 100644 scheduler/monthviewwithautorowheight/App.vue
 create mode 100644 scheduler/monthviewwithautorowheight/main.js
 create mode 100644 scheduler/monthviewwithautorowheight/package.json
 create mode 100644 scheduler/recurringappointments/App.vue
 create mode 100644 scheduler/recurringappointments/main.js
 create mode 100644 scheduler/recurringappointments/package.json
 create mode 100644 scheduler/resources/App.vue
 create mode 100644 scheduler/resources/main.js
 create mode 100644 scheduler/resources/package.json
 create mode 100644 scheduler/resourceswithcustomcolumnwidths/App.vue
 create mode 100644 scheduler/resourceswithcustomcolumnwidths/main.js
 create mode 100644 scheduler/resourceswithcustomcolumnwidths/package.json
 create mode 100644 scheduler/righttoleft/App.vue
 create mode 100644 scheduler/righttoleft/main.js
 create mode 100644 scheduler/righttoleft/package.json
 create mode 100644 scheduler/rowheight/App.vue
 create mode 100644 scheduler/rowheight/main.js
 create mode 100644 scheduler/rowheight/package.json
 create mode 100644 scheduler/rowheightconfiguration/App.vue
 create mode 100644 scheduler/rowheightconfiguration/main.js
 create mode 100644 scheduler/rowheightconfiguration/package.json
 create mode 100644 scheduler/timelineviews/App.vue
 create mode 100644 scheduler/timelineviews/main.js
 create mode 100644 scheduler/timelineviews/package.json
 create mode 100644 scheduler/timelineviewswithcustomslotwidth/App.vue
 create mode 100644 scheduler/timelineviewswithcustomslotwidth/main.js
 create mode 100644 scheduler/timelineviewswithcustomslotwidth/package.json
 create mode 100644 scheduler/timelineviewswithresources/App.vue
 create mode 100644 scheduler/timelineviewswithresources/main.js
 create mode 100644 scheduler/timelineviewswithresources/package.json
 create mode 100644 scheduler/timescalesconfiguration/App.vue
 create mode 100644 scheduler/timescalesconfiguration/main.js
 create mode 100644 scheduler/timescalesconfiguration/package.json
 create mode 100644 scheduler/timescaleszooming/App.vue
 create mode 100644 scheduler/timescaleszooming/main.js
 create mode 100644 scheduler/timescaleszooming/package.json
 create mode 100644 scheduler/timezones/App.vue
 create mode 100644 scheduler/timezones/main.js
 create mode 100644 scheduler/timezones/package.json
 create mode 100644 scheduler/verticalresources/App.vue
 create mode 100644 scheduler/verticalresources/main.js
 create mode 100644 scheduler/verticalresources/package.json
 create mode 100644 scheduler/worktime/App.vue
 create mode 100644 scheduler/worktime/main.js
 create mode 100644 scheduler/worktime/package.json
 create mode 100644 scrollbar/defaultfunctionality/App.vue
 create mode 100644 scrollbar/defaultfunctionality/main.js
 create mode 100644 scrollbar/defaultfunctionality/package.json
 create mode 100644 scrollbar/righttoleft/App.vue
 create mode 100644 scrollbar/righttoleft/main.js
 create mode 100644 scrollbar/righttoleft/package.json
 create mode 100644 scrollview/defaultfunctionality/App.vue
 create mode 100644 scrollview/defaultfunctionality/main.js
 create mode 100644 scrollview/defaultfunctionality/package.json
 create mode 100644 slider/defaultfunctionality/App.vue
 create mode 100644 slider/defaultfunctionality/main.js
 create mode 100644 slider/defaultfunctionality/package.json
 create mode 100644 slider/events/App.vue
 create mode 100644 slider/events/main.js
 create mode 100644 slider/events/package.json
 create mode 100644 slider/fluidsize/App.vue
 create mode 100644 slider/fluidsize/main.js
 create mode 100644 slider/fluidsize/package.json
 create mode 100644 slider/keyboardnavigation/App.vue
 create mode 100644 slider/keyboardnavigation/main.js
 create mode 100644 slider/keyboardnavigation/package.json
 create mode 100644 slider/layout/App.vue
 create mode 100644 slider/layout/main.js
 create mode 100644 slider/layout/package.json
 create mode 100644 slider/rangeslider/App.vue
 create mode 100644 slider/rangeslider/main.js
 create mode 100644 slider/rangeslider/package.json
 create mode 100644 slider/righttoleft/App.vue
 create mode 100644 slider/righttoleft/main.js
 create mode 100644 slider/righttoleft/package.json
 create mode 100644 slider/sliderlabels/App.vue
 create mode 100644 slider/sliderlabels/main.js
 create mode 100644 slider/sliderlabels/package.json
 create mode 100644 slider/slidertooltip/App.vue
 create mode 100644 slider/slidertooltip/main.js
 create mode 100644 slider/slidertooltip/package.json
 create mode 100644 slider/templates/App.vue
 create mode 100644 slider/templates/main.js
 create mode 100644 slider/templates/package.json
 create mode 100644 slider/twowaydatabinding/App.vue
 create mode 100644 slider/twowaydatabinding/main.js
 create mode 100644 slider/twowaydatabinding/package.json
 create mode 100644 slider/verticalslider/App.vue
 create mode 100644 slider/verticalslider/main.js
 create mode 100644 slider/verticalslider/package.json
 create mode 100644 sortable/connectedlist/App.vue
 create mode 100644 sortable/connectedlist/main.js
 create mode 100644 sortable/connectedlist/package.json
 create mode 100644 sortable/defaultfunctionality/App.vue
 create mode 100644 sortable/defaultfunctionality/main.js
 create mode 100644 sortable/defaultfunctionality/package.json
 create mode 100644 sortable/displayastable/App.vue
 create mode 100644 sortable/displayastable/main.js
 create mode 100644 sortable/displayastable/package.json
 create mode 100644 sortable/events/App.vue
 create mode 100644 sortable/events/main.js
 create mode 100644 sortable/events/package.json
 create mode 100644 splitter/api/App.vue
 create mode 100644 splitter/api/main.js
 create mode 100644 splitter/api/package.json
 create mode 100644 splitter/defaultfunctionality/App.vue
 create mode 100644 splitter/defaultfunctionality/main.js
 create mode 100644 splitter/defaultfunctionality/package.json
 create mode 100644 splitter/events/App.vue
 create mode 100644 splitter/events/main.js
 create mode 100644 splitter/events/package.json
 create mode 100644 splitter/fluidsize/App.vue
 create mode 100644 splitter/fluidsize/main.js
 create mode 100644 splitter/fluidsize/package.json
 create mode 100644 splitter/horizontalsplitter/App.vue
 create mode 100644 splitter/horizontalsplitter/main.js
 create mode 100644 splitter/horizontalsplitter/package.json
 create mode 100644 splitter/integrationwithjqxgrid/App.vue
 create mode 100644 splitter/integrationwithjqxgrid/main.js
 create mode 100644 splitter/integrationwithjqxgrid/package.json
 create mode 100644 splitter/integrationwithjqxtabs/App.vue
 create mode 100644 splitter/integrationwithjqxtabs/main.js
 create mode 100644 splitter/integrationwithjqxtabs/package.json
 create mode 100644 splitter/integrationwithjqxtree/App.vue
 create mode 100644 splitter/integrationwithjqxtree/main.js
 create mode 100644 splitter/integrationwithjqxtree/package.json
 create mode 100644 splitter/multiplesplitpanelswithjqxtabs/App.vue
 create mode 100644 splitter/multiplesplitpanelswithjqxtabs/main.js
 create mode 100644 splitter/multiplesplitpanelswithjqxtabs/package.json
 create mode 100644 splitter/nestedsidesplitters/App.vue
 create mode 100644 splitter/nestedsidesplitters/main.js
 create mode 100644 splitter/nestedsidesplitters/package.json
 create mode 100644 splitter/nestedsplitters/App.vue
 create mode 100644 splitter/nestedsplitters/main.js
 create mode 100644 splitter/nestedsplitters/package.json
 create mode 100644 splitter/simplecontainer/App.vue
 create mode 100644 splitter/simplecontainer/main.js
 create mode 100644 splitter/simplecontainer/package.json
 create mode 100644 splitter/splitterwithinjqxtabs/App.vue
 create mode 100644 splitter/splitterwithinjqxtabs/main.js
 create mode 100644 splitter/splitterwithinjqxtabs/package.json
 create mode 100644 splitter/togglebottompanel/App.vue
 create mode 100644 splitter/togglebottompanel/main.js
 create mode 100644 splitter/togglebottompanel/package.json
 create mode 100644 splitter/togglerightpanel/App.vue
 create mode 100644 splitter/togglerightpanel/main.js
 create mode 100644 splitter/togglerightpanel/package.json
 create mode 100644 splitter/verticalsplitter/App.vue
 create mode 100644 splitter/verticalsplitter/main.js
 create mode 100644 splitter/verticalsplitter/package.json
 create mode 100644 switchbutton/defaultfunctionality/App.vue
 create mode 100644 switchbutton/defaultfunctionality/main.js
 create mode 100644 switchbutton/defaultfunctionality/package.json
 create mode 100644 switchbutton/twowaydatabinding/App.vue
 create mode 100644 switchbutton/twowaydatabinding/main.js
 create mode 100644 switchbutton/twowaydatabinding/package.json
 create mode 100644 tabs/closebuttons/App.vue
 create mode 100644 tabs/closebuttons/main.js
 create mode 100644 tabs/closebuttons/package.json
 create mode 100644 tabs/collapsible/App.vue
 create mode 100644 tabs/collapsible/main.js
 create mode 100644 tabs/collapsible/package.json
 create mode 100644 tabs/defaultfunctionality/App.vue
 create mode 100644 tabs/defaultfunctionality/main.js
 create mode 100644 tabs/defaultfunctionality/package.json
 create mode 100644 tabs/draganddrop/App.vue
 create mode 100644 tabs/draganddrop/main.js
 create mode 100644 tabs/draganddrop/package.json
 create mode 100644 tabs/events/App.vue
 create mode 100644 tabs/events/main.js
 create mode 100644 tabs/events/package.json
 create mode 100644 tabs/fluidsize/App.vue
 create mode 100644 tabs/fluidsize/main.js
 create mode 100644 tabs/fluidsize/package.json
 create mode 100644 tabs/integrationwithotherwidgets/App.vue
 create mode 100644 tabs/integrationwithotherwidgets/main.js
 create mode 100644 tabs/integrationwithotherwidgets/package.json
 create mode 100644 tabs/keyboardnavigation/App.vue
 create mode 100644 tabs/keyboardnavigation/main.js
 create mode 100644 tabs/keyboardnavigation/package.json
 create mode 100644 tabs/loadingtabcontentswithajax/App.vue
 create mode 100644 tabs/loadingtabcontentswithajax/main.js
 create mode 100644 tabs/loadingtabcontentswithajax/package.json
 create mode 100644 tabs/mapinsidetab/App.vue
 create mode 100644 tabs/mapinsidetab/main.js
 create mode 100644 tabs/mapinsidetab/package.json
 create mode 100644 tabs/righttoleftlayout/App.vue
 create mode 100644 tabs/righttoleftlayout/main.js
 create mode 100644 tabs/righttoleftlayout/package.json
 create mode 100644 tabs/saveloadselectionusingcookies/App.vue
 create mode 100644 tabs/saveloadselectionusingcookies/main.js
 create mode 100644 tabs/saveloadselectionusingcookies/package.json
 create mode 100644 tabs/scrolling/App.vue
 create mode 100644 tabs/scrolling/main.js
 create mode 100644 tabs/scrolling/package.json
 create mode 100644 tabs/settings/App.vue
 create mode 100644 tabs/settings/main.js
 create mode 100644 tabs/settings/package.json
 create mode 100644 tabs/tabswithimages/App.vue
 create mode 100644 tabs/tabswithimages/main.js
 create mode 100644 tabs/tabswithimages/package.json
 create mode 100644 tabs/wizard/App.vue
 create mode 100644 tabs/wizard/main.js
 create mode 100644 tabs/wizard/package.json
 create mode 100644 tagcloud/addremoveupdatetags/App.vue
 create mode 100644 tagcloud/addremoveupdatetags/main.js
 create mode 100644 tagcloud/addremoveupdatetags/package.json
 create mode 100644 tagcloud/bindingtojson/App.vue
 create mode 100644 tagcloud/bindingtojson/main.js
 create mode 100644 tagcloud/bindingtojson/package.json
 create mode 100644 tagcloud/colorselection/App.vue
 create mode 100644 tagcloud/colorselection/main.js
 create mode 100644 tagcloud/colorselection/package.json
 create mode 100644 tagcloud/customtags/App.vue
 create mode 100644 tagcloud/customtags/main.js
 create mode 100644 tagcloud/customtags/package.json
 create mode 100644 tagcloud/defaultfunctionality/App.vue
 create mode 100644 tagcloud/defaultfunctionality/main.js
 create mode 100644 tagcloud/defaultfunctionality/package.json
 create mode 100644 tagcloud/fontsize/App.vue
 create mode 100644 tagcloud/fontsize/main.js
 create mode 100644 tagcloud/fontsize/package.json
 create mode 100644 tagcloud/showhidetags/App.vue
 create mode 100644 tagcloud/showhidetags/main.js
 create mode 100644 tagcloud/showhidetags/package.json
 create mode 100644 tagcloud/sortingfiltering/App.vue
 create mode 100644 tagcloud/sortingfiltering/main.js
 create mode 100644 tagcloud/sortingfiltering/package.json
 create mode 100644 textarea/bindingtojsondata/App.vue
 create mode 100644 textarea/bindingtojsondata/main.js
 create mode 100644 textarea/bindingtojsondata/package.json
 create mode 100644 textarea/defaultfunctionality/App.vue
 create mode 100644 textarea/defaultfunctionality/main.js
 create mode 100644 textarea/defaultfunctionality/package.json
 create mode 100644 textarea/fluidsize/App.vue
 create mode 100644 textarea/fluidsize/main.js
 create mode 100644 textarea/fluidsize/package.json
 create mode 100644 textarea/multiplevalues/App.vue
 create mode 100644 textarea/multiplevalues/main.js
 create mode 100644 textarea/multiplevalues/package.json
 create mode 100644 textarea/righttoleftlayout/App.vue
 create mode 100644 textarea/righttoleftlayout/main.js
 create mode 100644 textarea/righttoleftlayout/package.json
 create mode 100644 textarea/twowaydatabinding/App.vue
 create mode 100644 textarea/twowaydatabinding/main.js
 create mode 100644 textarea/twowaydatabinding/package.json
 create mode 100644 togglebutton/defaultfunctionality/App.vue
 create mode 100644 togglebutton/defaultfunctionality/main.js
 create mode 100644 togglebutton/defaultfunctionality/package.json
 create mode 100644 toolbar/buttongroupsintoolbar/App.vue
 create mode 100644 toolbar/buttongroupsintoolbar/main.js
 create mode 100644 toolbar/buttongroupsintoolbar/package.json
 create mode 100644 toolbar/cascadingcomboboxesintoolbar/App.vue
 create mode 100644 toolbar/cascadingcomboboxesintoolbar/main.js
 create mode 100644 toolbar/cascadingcomboboxesintoolbar/package.json
 create mode 100644 toolbar/defaultfunctionality/App.vue
 create mode 100644 toolbar/defaultfunctionality/main.js
 create mode 100644 toolbar/defaultfunctionality/package.json
 create mode 100644 toolbar/fluidsize/App.vue
 create mode 100644 toolbar/fluidsize/main.js
 create mode 100644 toolbar/fluidsize/package.json
 create mode 100644 toolbar/nonminimizabletools/App.vue
 create mode 100644 toolbar/nonminimizabletools/main.js
 create mode 100644 toolbar/nonminimizabletools/package.json
 create mode 100644 toolbar/resizabletoolbar/App.vue
 create mode 100644 toolbar/resizabletoolbar/main.js
 create mode 100644 toolbar/resizabletoolbar/package.json
 create mode 100644 toolbar/righttoleftlayout/App.vue
 create mode 100644 toolbar/righttoleftlayout/main.js
 create mode 100644 toolbar/righttoleftlayout/package.json
 create mode 100644 toolbar/settings/App.vue
 create mode 100644 toolbar/settings/main.js
 create mode 100644 toolbar/settings/package.json
 create mode 100644 toolbar/toolevents/App.vue
 create mode 100644 toolbar/toolevents/main.js
 create mode 100644 toolbar/toolevents/package.json
 create mode 100644 tooltip/closeonclick/App.vue
 create mode 100644 tooltip/closeonclick/main.js
 create mode 100644 tooltip/closeonclick/package.json
 create mode 100644 tooltip/defaultfunctionality/App.vue
 create mode 100644 tooltip/defaultfunctionality/main.js
 create mode 100644 tooltip/defaultfunctionality/package.json
 create mode 100644 tooltip/popover/App.vue
 create mode 100644 tooltip/popover/main.js
 create mode 100644 tooltip/popover/package.json
 create mode 100644 tooltip/tooltippositions/App.vue
 create mode 100644 tooltip/tooltippositions/main.js
 create mode 100644 tooltip/tooltippositions/package.json
 create mode 100644 tree/checkboxes/App.vue
 create mode 100644 tree/checkboxes/main.js
 create mode 100644 tree/checkboxes/package.json
 create mode 100644 tree/contextmenu/App.vue
 create mode 100644 tree/contextmenu/main.js
 create mode 100644 tree/contextmenu/package.json
 create mode 100644 tree/defaultfunctionality/App.vue
 create mode 100644 tree/defaultfunctionality/main.js
 create mode 100644 tree/defaultfunctionality/package.json
 create mode 100644 tree/draganddrop/App.vue
 create mode 100644 tree/draganddrop/main.js
 create mode 100644 tree/draganddrop/package.json
 create mode 100644 tree/dropdowntree/App.vue
 create mode 100644 tree/dropdowntree/main.js
 create mode 100644 tree/dropdowntree/package.json
 create mode 100644 tree/events/App.vue
 create mode 100644 tree/events/main.js
 create mode 100644 tree/events/package.json
 create mode 100644 tree/fluidsize/App.vue
 create mode 100644 tree/fluidsize/main.js
 create mode 100644 tree/fluidsize/package.json
 create mode 100644 tree/jsontree/App.vue
 create mode 100644 tree/jsontree/main.js
 create mode 100644 tree/jsontree/package.json
 create mode 100644 tree/keyboardnavigation/App.vue
 create mode 100644 tree/keyboardnavigation/main.js
 create mode 100644 tree/keyboardnavigation/package.json
 create mode 100644 tree/navigation/App.vue
 create mode 100644 tree/navigation/main.js
 create mode 100644 tree/navigation/package.json
 create mode 100644 tree/righttoleftlayout/App.vue
 create mode 100644 tree/righttoleftlayout/main.js
 create mode 100644 tree/righttoleftlayout/package.json
 create mode 100644 tree/settings/App.vue
 create mode 100644 tree/settings/main.js
 create mode 100644 tree/settings/package.json
 create mode 100644 tree/xmltree/App.vue
 create mode 100644 tree/xmltree/main.js
 create mode 100644 tree/xmltree/package.json
 create mode 100644 treegrid/advancedfiltering/App.vue
 create mode 100644 treegrid/advancedfiltering/main.js
 create mode 100644 treegrid/advancedfiltering/package.json
 create mode 100644 treegrid/aggregates/App.vue
 create mode 100644 treegrid/aggregates/main.js
 create mode 100644 treegrid/aggregates/package.json
 create mode 100644 treegrid/aggregatestemplate/App.vue
 create mode 100644 treegrid/aggregatestemplate/main.js
 create mode 100644 treegrid/aggregatestemplate/package.json
 create mode 100644 treegrid/celledit/App.vue
 create mode 100644 treegrid/celledit/main.js
 create mode 100644 treegrid/celledit/package.json
 create mode 100644 treegrid/columnalignment/App.vue
 create mode 100644 treegrid/columnalignment/main.js
 create mode 100644 treegrid/columnalignment/package.json
 create mode 100644 treegrid/columncheckboxes/App.vue
 create mode 100644 treegrid/columncheckboxes/main.js
 create mode 100644 treegrid/columncheckboxes/package.json
 create mode 100644 treegrid/columnformatting/App.vue
 create mode 100644 treegrid/columnformatting/main.js
 create mode 100644 treegrid/columnformatting/package.json
 create mode 100644 treegrid/columnhierarchicalcheckboxes/App.vue
 create mode 100644 treegrid/columnhierarchicalcheckboxes/main.js
 create mode 100644 treegrid/columnhierarchicalcheckboxes/package.json
 create mode 100644 treegrid/columnicons/App.vue
 create mode 100644 treegrid/columnicons/main.js
 create mode 100644 treegrid/columnicons/package.json
 create mode 100644 treegrid/columnreorder/App.vue
 create mode 100644 treegrid/columnreorder/main.js
 create mode 100644 treegrid/columnreorder/package.json
 create mode 100644 treegrid/columnresize/App.vue
 create mode 100644 treegrid/columnresize/main.js
 create mode 100644 treegrid/columnresize/package.json
 create mode 100644 treegrid/columnshierarchy/App.vue
 create mode 100644 treegrid/columnshierarchy/main.js
 create mode 100644 treegrid/columnshierarchy/package.json
 create mode 100644 treegrid/columnsmallicons/App.vue
 create mode 100644 treegrid/columnsmallicons/main.js
 create mode 100644 treegrid/columnsmallicons/package.json
 create mode 100644 treegrid/commandcolumn/App.vue
 create mode 100644 treegrid/commandcolumn/main.js
 create mode 100644 treegrid/commandcolumn/package.json
 create mode 100644 treegrid/conditionalformatting/App.vue
 create mode 100644 treegrid/conditionalformatting/main.js
 create mode 100644 treegrid/conditionalformatting/package.json
 create mode 100644 treegrid/conditionalrendering/App.vue
 create mode 100644 treegrid/conditionalrendering/main.js
 create mode 100644 treegrid/conditionalrendering/package.json
 create mode 100644 treegrid/contextmenu/App.vue
 create mode 100644 treegrid/contextmenu/main.js
 create mode 100644 treegrid/contextmenu/package.json
 create mode 100644 treegrid/createComponent/App.vue
 create mode 100644 treegrid/createComponent/main.js
 create mode 100644 treegrid/createComponent/package.json
 create mode 100644 treegrid/csvdata/App.vue
 create mode 100644 treegrid/csvdata/main.js
 create mode 100644 treegrid/csvdata/package.json
 create mode 100644 treegrid/customeditors/App.vue
 create mode 100644 treegrid/customeditors/main.js
 create mode 100644 treegrid/customeditors/package.json
 create mode 100644 treegrid/dataexport/App.vue
 create mode 100644 treegrid/dataexport/main.js
 create mode 100644 treegrid/dataexport/package.json
 create mode 100644 treegrid/datagrouping/App.vue
 create mode 100644 treegrid/datagrouping/main.js
 create mode 100644 treegrid/datagrouping/package.json
 create mode 100644 treegrid/dataprinting/App.vue
 create mode 100644 treegrid/dataprinting/main.js
 create mode 100644 treegrid/dataprinting/package.json
 create mode 100644 treegrid/defaultfunctionality/App.vue
 create mode 100644 treegrid/defaultfunctionality/main.js
 create mode 100644 treegrid/defaultfunctionality/package.json
 create mode 100644 treegrid/dialog/App.vue
 create mode 100644 treegrid/dialog/main.js
 create mode 100644 treegrid/dialog/package.json
 create mode 100644 treegrid/filtering/App.vue
 create mode 100644 treegrid/filtering/main.js
 create mode 100644 treegrid/filtering/package.json
 create mode 100644 treegrid/filteringapi/App.vue
 create mode 100644 treegrid/filteringapi/main.js
 create mode 100644 treegrid/filteringapi/package.json
 create mode 100644 treegrid/fluidsize/App.vue
 create mode 100644 treegrid/fluidsize/main.js
 create mode 100644 treegrid/fluidsize/package.json
 create mode 100644 treegrid/headertemplate/App.vue
 create mode 100644 treegrid/headertemplate/main.js
 create mode 100644 treegrid/headertemplate/package.json
 create mode 100644 treegrid/inlinerow/App.vue
 create mode 100644 treegrid/inlinerow/main.js
 create mode 100644 treegrid/inlinerow/package.json
 create mode 100644 treegrid/jsondata/App.vue
 create mode 100644 treegrid/jsondata/main.js
 create mode 100644 treegrid/jsondata/package.json
 create mode 100644 treegrid/keyboardnavigation/App.vue
 create mode 100644 treegrid/keyboardnavigation/main.js
 create mode 100644 treegrid/keyboardnavigation/package.json
 create mode 100644 treegrid/localdata/App.vue
 create mode 100644 treegrid/localdata/main.js
 create mode 100644 treegrid/localdata/package.json
 create mode 100644 treegrid/localization/App.vue
 create mode 100644 treegrid/localization/main.js
 create mode 100644 treegrid/localization/package.json
 create mode 100644 treegrid/lockrow/App.vue
 create mode 100644 treegrid/lockrow/main.js
 create mode 100644 treegrid/lockrow/package.json
 create mode 100644 treegrid/manualaggregates/App.vue
 create mode 100644 treegrid/manualaggregates/main.js
 create mode 100644 treegrid/manualaggregates/package.json
 create mode 100644 treegrid/nestedjsondata/App.vue
 create mode 100644 treegrid/nestedjsondata/main.js
 create mode 100644 treegrid/nestedjsondata/package.json
 create mode 100644 treegrid/nestedxmldata/App.vue
 create mode 100644 treegrid/nestedxmldata/main.js
 create mode 100644 treegrid/nestedxmldata/package.json
 create mode 100644 treegrid/paging/App.vue
 create mode 100644 treegrid/paging/main.js
 create mode 100644 treegrid/paging/package.json
 create mode 100644 treegrid/pagingapi/App.vue
 create mode 100644 treegrid/pagingapi/main.js
 create mode 100644 treegrid/pagingapi/package.json
 create mode 100644 treegrid/pagingbyrootrecords/App.vue
 create mode 100644 treegrid/pagingbyrootrecords/main.js
 create mode 100644 treegrid/pagingbyrootrecords/package.json
 create mode 100644 treegrid/pinnedfrozencolumn/App.vue
 create mode 100644 treegrid/pinnedfrozencolumn/main.js
 create mode 100644 treegrid/pinnedfrozencolumn/package.json
 create mode 100644 treegrid/propertyeditor/App.vue
 create mode 100644 treegrid/propertyeditor/main.js
 create mode 100644 treegrid/propertyeditor/package.json
 create mode 100644 treegrid/righttoleftlayout/App.vue
 create mode 100644 treegrid/righttoleftlayout/main.js
 create mode 100644 treegrid/righttoleftlayout/package.json
 create mode 100644 treegrid/rowdetails/App.vue
 create mode 100644 treegrid/rowdetails/main.js
 create mode 100644 treegrid/rowdetails/package.json
 create mode 100644 treegrid/searchfield/App.vue
 create mode 100644 treegrid/searchfield/main.js
 create mode 100644 treegrid/searchfield/package.json
 create mode 100644 treegrid/showorhidecolumn/App.vue
 create mode 100644 treegrid/showorhidecolumn/main.js
 create mode 100644 treegrid/showorhidecolumn/package.json
 create mode 100644 treegrid/sorting/App.vue
 create mode 100644 treegrid/sorting/main.js
 create mode 100644 treegrid/sorting/package.json
 create mode 100644 treegrid/sortingapi/App.vue
 create mode 100644 treegrid/sortingapi/main.js
 create mode 100644 treegrid/sortingapi/package.json
 create mode 100644 treegrid/tabdata/App.vue
 create mode 100644 treegrid/tabdata/main.js
 create mode 100644 treegrid/tabdata/package.json
 create mode 100644 treegrid/validation/App.vue
 create mode 100644 treegrid/validation/main.js
 create mode 100644 treegrid/validation/package.json
 create mode 100644 treegrid/virtualmode/App.vue
 create mode 100644 treegrid/virtualmode/main.js
 create mode 100644 treegrid/virtualmode/package.json
 create mode 100644 treegrid/virtualmodewithajax/App.vue
 create mode 100644 treegrid/virtualmodewithajax/main.js
 create mode 100644 treegrid/virtualmodewithajax/package.json
 create mode 100644 treegrid/xmldata/App.vue
 create mode 100644 treegrid/xmldata/main.js
 create mode 100644 treegrid/xmldata/package.json
 create mode 100644 treemap/automaticrendering/App.vue
 create mode 100644 treemap/automaticrendering/main.js
 create mode 100644 treemap/automaticrendering/package.json
 create mode 100644 treemap/bindingtojson/App.vue
 create mode 100644 treemap/bindingtojson/main.js
 create mode 100644 treemap/bindingtojson/package.json
 create mode 100644 treemap/bindingtotabdata/App.vue
 create mode 100644 treemap/bindingtotabdata/main.js
 create mode 100644 treemap/bindingtotabdata/package.json
 create mode 100644 treemap/customrendering/App.vue
 create mode 100644 treemap/customrendering/main.js
 create mode 100644 treemap/customrendering/package.json
 create mode 100644 treemap/defaultfunctionality/App.vue
 create mode 100644 treemap/defaultfunctionality/main.js
 create mode 100644 treemap/defaultfunctionality/package.json
 create mode 100644 treemap/fluidsize/App.vue
 create mode 100644 treemap/fluidsize/main.js
 create mode 100644 treemap/fluidsize/package.json
 create mode 100644 treemap/issues.txt
 create mode 100644 treemap/rangesrendering/App.vue
 create mode 100644 treemap/rangesrendering/main.js
 create mode 100644 treemap/rangesrendering/package.json
 create mode 100644 validator/defaultfunctionality/App.vue
 create mode 100644 validator/defaultfunctionality/main.js
 create mode 100644 validator/defaultfunctionality/package.json
 create mode 100644 validator/errorlabels/App.vue
 create mode 100644 validator/errorlabels/main.js
 create mode 100644 validator/errorlabels/package.json
 create mode 100644 validator/righttoleftlayout/App.vue
 create mode 100644 validator/righttoleftlayout/main.js
 create mode 100644 validator/righttoleftlayout/package.json
 create mode 100644 window/defaultfunctionality/App.vue
 create mode 100644 window/defaultfunctionality/main.js
 create mode 100644 window/defaultfunctionality/package.json
 create mode 100644 window/events/App.vue
 create mode 100644 window/events/main.js
 create mode 100644 window/events/package.json
 create mode 100644 window/keyboardnavigation/App.vue
 create mode 100644 window/keyboardnavigation/main.js
 create mode 100644 window/keyboardnavigation/package.json
 create mode 100644 window/multiplewindows/App.vue
 create mode 100644 window/multiplewindows/main.js
 create mode 100644 window/multiplewindows/package.json
 create mode 100644 window/righttoleftlayout/App.vue
 create mode 100644 window/righttoleftlayout/main.js
 create mode 100644 window/righttoleftlayout/package.json
 create mode 100644 window/settings/App.vue
 create mode 100644 window/settings/main.js
 create mode 100644 window/settings/package.json

diff --git a/README.md b/README.md
index cf4a4dee..d1db0f5d 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,127 @@
-# vue_demos
\ No newline at end of file
+# This GitHub repository contains all jQWidgets Vue Demos. 
+
+You can view them online here: https://www.jqwidgets.com/vue/.
+
+Build modern Web Apps with jQWidgets and Vue. jQWidgets Vue UI components will help you to build perfect looking web applications. Use the most advanced UI framework for Vue and save your time for the business logic. Choose from more than 60 UI components including Grid, Chart, Scheduler, Editor, TreeGrid and more. Our product supports native Vue features.
+
+Vue Buttons - https://www.jqwidgets.com/vue/vue-buttons/
+
+Vue BarGauge - https://www.jqwidgets.com/vue/vue-bargauge/
+
+Vue BulletChart - https://www.jqwidgets.com/vue/vue-bulletchart/
+
+Vue ComboBox - https://www.jqwidgets.com/vue/vue-combobox/
+
+Vue Calendar - https://www.jqwidgets.com/vue/vue-calendar/
+
+Vue Chart - https://www.jqwidgets.com/vue/vue-chart/
+
+Vue ColorPicker - https://www.jqwidgets.com/vue/vue-colorpicker/
+
+Vue ComplexInput - https://www.jqwidgets.com/vue/vue-complexinput/
+
+Vue Docking - https://www.jqwidgets.com/vue/vue-docking/
+
+Vue DropDownList - https://www.jqwidgets.com/vue/vue-dropdownlist/
+
+Vue DataTable - https://www.jqwidgets.com/vue/vue-datatable/
+
+Vue DateTimeInput - https://www.jqwidgets.com/vue/vue-datetimeinput/
+
+Vue Draw - https://www.jqwidgets.com/vue/vue-draw/
+
+Vue DragDrop - https://www.jqwidgets.com/vue/vue-dragdrop/
+
+Vue DockingLayout - https://www.jqwidgets.com/vue/vue-dockinglayout/
+
+Vue Editor - https://www.jqwidgets.com/vue/vue-editor/
+
+Vue Expander - https://www.jqwidgets.com/vue/vue-expander/
+
+Vue Form - https://www.jqwidgets.com/vue/vue-form/
+
+Vue FormattedInput - https://www.jqwidgets.com/vue/vue-formattedinput/
+
+Vue FileUpload - https://www.jqwidgets.com/vue/vue-fileupload/
+
+Vue Grid - https://www.jqwidgets.com/vue/vue-grid/
+
+Vue Gauge - https://www.jqwidgets.com/vue/vue-gauge/
+
+Vue Input - https://www.jqwidgets.com/vue/vue-input/
+
+Vue Layout - https://www.jqwidgets.com/vue/vue-layout/
+
+Vue ListMenu - https://www.jqwidgets.com/vue/vue-listmenu/
+
+Vue Loader - https://www.jqwidgets.com/vue/vue-loader/
+
+Vue ListBox - https://www.jqwidgets.com/vue/vue-listbox/
+
+Vue Knob - https://www.jqwidgets.com/vue/vue-knob/
+
+Vue Kanban - https://www.jqwidgets.com/vue/vue-Kanban/
+
+Vue MaskedInput - https://www.jqwidgets.com/vue/vue-maskedinput/
+
+Vue Menu - https://www.jqwidgets.com/vue/vue-menu/
+
+Vue NavBar - https://www.jqwidgets.com/vue/vue-navbar/
+
+Vue NavigationBar - https://www.jqwidgets.com/vue/vue-navigationbar/
+
+Vue Notification - https://www.jqwidgets.com/vue/vue-notification/
+
+Vue NumberInput - https://www.jqwidgets.com/vue/vue-numberinput/
+
+Vue Toolbar - https://www.jqwidgets.com/vue/vue-Toolbar/
+
+Vue TextArea - https://www.jqwidgets.com/vue/vue-textarea/
+
+Vue PasswordInput - https://www.jqwidgets.com/vue/vue-passwordinput/
+
+Vue Panel - https://www.jqwidgets.com/vue/vue-panel/
+
+Vue Popover - https://www.jqwidgets.com/vue/vue-popover/
+
+Vue PivotGrid - https://www.jqwidgets.com/vue/vue-pivotgrid/
+
+Vue ProgressBar - https://www.jqwidgets.com/vue/vue-progressbar/
+
+Vue Rating - https://www.jqwidgets.com/vue/vue-rating/
+
+Vue RangeSelector - https://www.jqwidgets.com/vue/vue-rangeselector/
+
+Vue ResponsivePanel - https://www.jqwidgets.com/vue/vue-responsivepanel/
+
+Vue Ribbon - https://www.jqwidgets.com/vue/vue-ribbon/
+
+Vue Scheduler - https://www.jqwidgets.com/vue/vue-scheduler/
+
+Vue Slider - https://www.jqwidgets.com/vue/vue-slider/
+
+Vue ScrollBar - https://www.jqwidgets.com/vue/vue-scrollbar/
+
+Vue Splitter - https://www.jqwidgets.com/vue/vue-splitter/
+
+Vue ScrollView - https://www.jqwidgets.com/vue/vue-scrollview/
+
+Vue Sortable - https://www.jqwidgets.com/vue/vue-sortable/
+
+Vue Tabs - https://www.jqwidgets.com/vue/vue-tabs/
+
+Vue Tree - https://www.jqwidgets.com/vue/vue-tree/
+
+Vue TreeGrid - https://www.jqwidgets.com/vue/vue-treegrid/
+
+Vue TreeMap - https://www.jqwidgets.com/vue/vue-treemap/
+
+Vue TagCloud - https://www.jqwidgets.com/vue/vue-tagcloud/
+
+Vue Tooltip - https://www.jqwidgets.com/vue/vue-tooltip/
+
+Vue Validator - https://www.jqwidgets.com/vue/vue-validator/
+
+Vue Window - https://www.jqwidgets.com/vue/vue-window/
+
+If you would like to contribute with new examples, we welcome pull requests and feedback! 
diff --git a/bargauge/addandremovevalues/App.vue b/bargauge/addandremovevalues/App.vue
new file mode 100644
index 00000000..d5ce2cba
--- /dev/null
+++ b/bargauge/addandremovevalues/App.vue
@@ -0,0 +1,132 @@
+<template>
+    <div>
+        <JqxBarGauge ref="myBarGauge" style="float: left"
+                     :width="getWidth" :height="600" :relativeInnerRadius="0.2" :max="500"
+                     :values="[450, 15, 330]" :baseValue="50" :startAngle="0" :endAngle="360"
+                     :title="'Nutritional Values'" :colorScheme="'scheme05'" :tooltip="tooltip"
+                     :barSpacing="9" :animationDuration="0" :labels="labels">
+        </JqxBarGauge>
+
+        <div style="margin-left: 50px; margin-top: 150px; float: left;">
+            <JqxListBox ref="myListBox" @checkChange="onCheckChange()"
+                        :width="230" :source="dataAdapter" :displayMember="'name'"
+                        :valueMember="'calories'" :checkboxes="true">
+            </JqxListBox>
+
+            <br />
+            <br />
+            <div ref='log'>
+                <strong>Summary calories: 970</strong>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
+    import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
+
+    export default {
+        components: {
+            JqxBarGauge,
+            JqxListBox
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('barGauge'),
+                tooltip: {
+                    visible: true,
+                    formatFunction: (value, index) => {
+                        let items = this.$refs.myListBox.getCheckedItems();
+                        let item = items[index];
+                        return item.label + ': ' + value + ' cal.';
+                    }
+                },
+                labels: {
+                    formatFunction: (value) => {
+                        return value + ' cal.';
+                    },
+                    precision: 0,
+                    indent: 15,
+                    connectorWidth: 1
+                },
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            const data = [{
+                'id': '1',
+                'name': 'Hot Chocolate',
+                'calories': '370'
+            }, {
+                'id': '2',
+                'name': 'Peppermint Hot Chocolate',
+                'calories': '440'
+            }, {
+                'id': '3',
+                'name': 'Salted Caramel Hot Chocolate',
+                'calories': '450'
+            }, {
+                'id': '4',
+                'name': 'White Hot Chocolate',
+                'calories': '420'
+            }, {
+                'id': '5',
+                'name': 'Caffe Americano',
+                'calories': '15'
+            }, {
+                'id': '6',
+                'name': 'Caffe Latte',
+                'calories': '190'
+            }, {
+                'id': '7',
+                'name': 'Caffe Mocha',
+                'calories': '330'
+            }];
+
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'name' },
+                    { name: 'calories', type: 'int' }
+                ],
+                id: 'id',
+                localdata: data
+            }
+        },
+        mounted: function () {
+            this.$refs.myListBox.checkIndex(2);
+            this.$refs.myListBox.checkIndex(5);
+            this.$refs.myListBox.checkIndex(6);
+        },
+        methods: {
+            onCheckChange: function () {
+                let items = this.$refs.myListBox.getCheckedItems();
+                let arrayOfItems = this.convertToArray(items);
+                let log = this.$refs.log;
+                log.innerHTML = '<strong>Summary calories: ' + this.getSum(arrayOfItems) + '</strong>';
+                this.$refs.myBarGauge.val(arrayOfItems);
+            },
+            getSum: function (array) {
+                array = array || [];
+                let sum = 0;
+                if (array.length) {
+                    for (let i = 0; i < array.length; i += 1) {
+                        sum += array[i];
+                    }
+                }
+                return sum;
+            },
+            convertToArray: function (items) {
+                let preparedArray = new Array(items.length);
+                for (let i = 0; i < items.length; i += 1) {
+                    preparedArray[i] = items[i].value;
+                }
+                return preparedArray;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/bargauge/addandremovevalues/main.js b/bargauge/addandremovevalues/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bargauge/addandremovevalues/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bargauge/addandremovevalues/package.json b/bargauge/addandremovevalues/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bargauge/addandremovevalues/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/bargauge/autochangevalue/App.vue b/bargauge/autochangevalue/App.vue
new file mode 100644
index 00000000..154b7398
--- /dev/null
+++ b/bargauge/autochangevalue/App.vue
@@ -0,0 +1,54 @@
+<template>
+    <JqxBarGauge ref="myBarGauge" @drawEnd="onDrawEnd()"
+                 :width="getWidth" :height="600" :relativeInnerRadius="0.6"
+                 :values="[25]" :formatFunction="formatFunction">
+    </JqxBarGauge>
+</template>
+
+<script>
+    import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
+
+    export default {
+        components: {
+            JqxBarGauge,
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('barGauge')
+            }
+        },
+        methods: {
+            formatFunction: function (value, index, color) {
+                let barGaugePalette = ['#307DD7', '#AA4643', '#89A54E', '#71588F', '#4198AF'];
+
+                if (value < 20) {
+                    return barGaugePalette[0];
+                }
+                if (value < 40) {
+                    return barGaugePalette[1];
+                }
+                if (value < 60) {
+                    return barGaugePalette[2];
+                }
+                if (value < 80) {
+                    return barGaugePalette[3];
+                }
+                if (value <= 100) {
+                    return barGaugePalette[4];
+                }
+            },
+            onDrawEnd: function () {
+                let values = [this.getRandomInt(1, 99)];
+                setTimeout(() => {
+                    this.$refs.myBarGauge.val(values);
+                }, 1000);
+            },
+            getRandomInt: function (min, max) {
+                return Math.floor(Math.random() * (max - min)) + min;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/bargauge/autochangevalue/main.js b/bargauge/autochangevalue/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bargauge/autochangevalue/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bargauge/autochangevalue/package.json b/bargauge/autochangevalue/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bargauge/autochangevalue/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/bargauge/createComponent/App.vue b/bargauge/createComponent/App.vue
new file mode 100644
index 00000000..be10cbd3
--- /dev/null
+++ b/bargauge/createComponent/App.vue
@@ -0,0 +1,36 @@
+<template>
+    <JqxBarGauge ref="myBarGauge" :autoCreate="false"></JqxBarGauge>
+</template>
+
+<script>
+    import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
+
+    export default {
+        components: {
+            JqxBarGauge,
+        },
+        mounted: function() {
+
+            const settings = {
+                width: 600,
+                height: 600,
+                max: 150,
+                values: [102, 115, 130, 137],
+                colorScheme: 'scheme02',
+                tooltip: {
+                    visible: true,
+                    formatFunction: (value) => {
+                        let realVal = parseInt(value);
+                        return ('Year: 2016<br/>Price Index:' + realVal);
+                    }
+                }
+            };   
+
+            this.$refs.myBarGauge.createComponent(settings);
+        }
+    }
+</script>
+
+<style scoped>
+	
+</style>
\ No newline at end of file
diff --git a/bargauge/createComponent/main.js b/bargauge/createComponent/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bargauge/createComponent/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bargauge/createComponent/package.json b/bargauge/createComponent/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bargauge/createComponent/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/bargauge/customtooltips/App.vue b/bargauge/customtooltips/App.vue
new file mode 100644
index 00000000..c837c576
--- /dev/null
+++ b/bargauge/customtooltips/App.vue
@@ -0,0 +1,50 @@
+<template>
+    <JqxBarGauge :width="getWidth" :height="570" :max="90" :labels="labels"
+                 :values="players" :baseValue="33" :startAngle="180" :endAngle="-65"
+                 :title="title" :colorScheme="'scheme04'" :tooltip="tooltip">
+    </JqxBarGauge>
+</template>
+
+<script>
+    import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
+
+    export default {
+        components: {
+            JqxBarGauge,
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('barGauge'),
+                players: [25, 46, 6, 55, 14, 22, 57, 40, 87, 20],
+                title: { text: 'Ranking', subtitle: '(boundary - 33 points)' },
+                labels: {
+                    formatFunction: (value) => {
+                        let realVal = parseInt(value);
+                        return realVal + ' pts';
+                    },
+                    font: { size: 12 },
+                    indent: 10
+                },
+                tooltip: {
+                    classname: 'myTooltip',
+                    formatFunction: (value) => {
+                        let realVal = parseInt(value);
+                        let player = this.players.indexOf(realVal) + 1;
+                        return ('Player ' + player + ': ' + realVal + ' points');
+                    },
+                    visible: true
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .myTooltip {
+        padding: 10px;
+        font-size: 1.2em;
+        border-style: dashed;
+        border-width: 3px;
+        border-radius: 4px;
+    }
+</style>
\ No newline at end of file
diff --git a/bargauge/customtooltips/main.js b/bargauge/customtooltips/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bargauge/customtooltips/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bargauge/customtooltips/package.json b/bargauge/customtooltips/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bargauge/customtooltips/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/bargauge/defaultfunctionality/App.vue b/bargauge/defaultfunctionality/App.vue
new file mode 100644
index 00000000..c3ac8e55
--- /dev/null
+++ b/bargauge/defaultfunctionality/App.vue
@@ -0,0 +1,27 @@
+<template>
+    <JqxBarGauge :width="getWidth" :height="600" :colorScheme="'scheme02'"
+                 :max="150" :values="values" :tooltip="tooltip" />
+</template>
+
+<script>
+    import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
+
+    export default {
+        components: {
+            JqxBarGauge
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('barGauge'),
+                tooltip: {
+                    visible: true,
+                    formatFunction: (value) => {
+                        let realVal = parseInt(value);
+                        return ('Year: 2016<br/>Price Index:' + realVal);
+                    }
+                },
+                values: [102, 115, 130, 137]
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/bargauge/defaultfunctionality/main.js b/bargauge/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bargauge/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bargauge/defaultfunctionality/package.json b/bargauge/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bargauge/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/bargauge/fluidsize/App.vue b/bargauge/fluidsize/App.vue
new file mode 100644
index 00000000..db6ba01c
--- /dev/null
+++ b/bargauge/fluidsize/App.vue
@@ -0,0 +1,29 @@
+<template>
+    <JqxBarGauge :width="'75%'" :height="'75%'"
+                 :colorScheme="'scheme11'" :values="values">
+    </JqxBarGauge>
+</template>
+
+<script>
+    import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
+
+    export default {
+        components: {
+            JqxBarGauge,
+        },
+        data: function () {
+            return {
+                values: [32, 11, 100, 49, 69, 20]
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/bargauge/fluidsize/main.js b/bargauge/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bargauge/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bargauge/fluidsize/package.json b/bargauge/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bargauge/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/bargauge/negativevalues/App.vue b/bargauge/negativevalues/App.vue
new file mode 100644
index 00000000..a4a25dd5
--- /dev/null
+++ b/bargauge/negativevalues/App.vue
@@ -0,0 +1,33 @@
+<template>
+    <JqxBarGauge :width="getWidth" :height="600" :values="values"
+                 :max="45" :min="-45" :baseValue="0" :labels="labels"
+                 :startAngle="270" :endAngle="90" :animationDuration="0"
+                 :relativeInnerRadius="0.2" :colorScheme="'scheme02'">
+    </JqxBarGauge>
+</template>
+
+<script>
+    import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
+
+    export default {
+        components: {
+            JqxBarGauge,
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('barGauge'),
+                values: [12, -35, -14.78, 29.5, 23.124, 41],
+                labels: {
+                    formatFunction: (value) => {
+                        return value + ' m';
+                    },
+                    precision: 1,
+                    indent: 15
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/bargauge/negativevalues/main.js b/bargauge/negativevalues/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bargauge/negativevalues/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bargauge/negativevalues/package.json b/bargauge/negativevalues/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bargauge/negativevalues/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/bargauge/sequentialgrowth/App.vue b/bargauge/sequentialgrowth/App.vue
new file mode 100644
index 00000000..fda4d420
--- /dev/null
+++ b/bargauge/sequentialgrowth/App.vue
@@ -0,0 +1,55 @@
+<template>
+    <JqxBarGauge ref="myBarGauge" @drawEnd="onDrawEnd($event)"
+                 :width="getWidth" :height="650" :values="arrayOfValues"
+                 :barSpacing="14" :labels="labels" :animationDuration="300"
+                 :startAngle="180" :endAngle="-180" :colorScheme="'scheme02'"
+                 :relativeInnerRadius="0.2">
+    </JqxBarGauge>
+</template>
+
+<script>
+    import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
+
+    export default {
+        components: {
+            JqxBarGauge,
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('barGauge'),
+                arrayOfValues: [20, 0, 0, 0],
+                labels: { precision: 0, indent: 15, connectorWidth: 1 }
+            }
+        },
+        beforeCreate: function () {
+
+            this.arrayA = [20, 60, 0, 0];
+            this.arrayB = [20, 60, 80, 0];
+            this.arrayC = [20, 60, 80, 100];
+            this.loop = 0;
+
+        },
+        methods: {
+            onDrawEnd: function (event) {
+                switch (this.loop) {
+                    case 0:
+                        this.$refs.myBarGauge.val(this.arrayA);
+                        break;
+                    case 1:
+                        this.$refs.myBarGauge.val(this.arrayB);
+                        break;
+                    case 2:
+                        this.$refs.myBarGauge.val(this.arrayC);
+                        break;
+                    default:
+                        console.log('Render time is finished.');
+                        break;
+                }
+                this.loop += 1;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/bargauge/sequentialgrowth/main.js b/bargauge/sequentialgrowth/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bargauge/sequentialgrowth/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bargauge/sequentialgrowth/package.json b/bargauge/sequentialgrowth/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bargauge/sequentialgrowth/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/bargauge/updatevalues/App.vue b/bargauge/updatevalues/App.vue
new file mode 100644
index 00000000..074bd4d5
--- /dev/null
+++ b/bargauge/updatevalues/App.vue
@@ -0,0 +1,82 @@
+<template>
+    <div>
+        <JqxBarGauge ref="myBarGauge" style="float: left"
+                     :width="getWidth" :height="570" :relativeInnerRadius="0.5" :max="255"
+                     :values="[187, 255, 170]" :startAngle="0" :endAngle="90"
+                     :customColorScheme="customColorScheme" :colorScheme="'rgb'"
+                     :title="title" :labels="labels">
+        </JqxBarGauge>
+
+        <div style="float: left">
+
+            <span style="font-style: italic;">Red</span>
+
+            <JqxSlider ref="redSlider" @change="updateValues()"
+                       :theme="'artic'" :mode="'fixed'" :min="0" :max="255"
+                       :ticksFrequency="25.5" :value="170" :step="25.5">
+            </JqxSlider>
+
+            <span style="font-style: italic;">Green</span>
+
+            <JqxSlider ref="greenSlider" @change="updateValues()"
+                       :theme="'artic'" :mode="'fixed'" :min="0" :max="255"
+                       :ticksFrequency="25.5" :value="255" :step="25.5">
+            </JqxSlider>
+
+            <span style="font-style: italic;">Blue</span>
+
+            <JqxSlider ref="blueSlider" @change="updateValues()"
+                       :theme="'artic'" :mode="'fixed'" :min="0" :max="255"
+                       :ticksFrequency="25.5" :value="187" :step="25.5">
+            </JqxSlider>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
+    import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
+
+    export default {
+        components: {
+            JqxBarGauge,
+            JqxSlider
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('barGauge'),
+                customColorScheme: {
+                    name: 'rgb',
+                    colors: ['#307DD7', '#89A54E', '#AA4643']
+                },
+                title: {
+                    text: 'jqxBarGauge',
+                    font: {
+                        size: 40
+                    },
+                    verticalAlignment: 'top',
+                    margin: 0,
+                    subtitle: {
+                        text: '( visualization of "RGB" color proportions )',
+                        font: {
+                            size: 20
+                        }
+                    }
+                },
+                labels: { precision: 0, indent: 10 }
+            }
+        },
+        methods: {
+            updateValues: function () {
+                const red = this.$refs.redSlider.val();
+                const green = this.$refs.greenSlider.val();
+                const blue = this.$refs.blueSlider.val();
+                this.$refs.myBarGauge.val([blue, green, red]);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/bargauge/updatevalues/main.js b/bargauge/updatevalues/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bargauge/updatevalues/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bargauge/updatevalues/package.json b/bargauge/updatevalues/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bargauge/updatevalues/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/bulletchart/defaultfunctionality/App.vue b/bulletchart/defaultfunctionality/App.vue
new file mode 100644
index 00000000..a696a5bf
--- /dev/null
+++ b/bulletchart/defaultfunctionality/App.vue
@@ -0,0 +1,49 @@
+<template>
+    <JqxBulletChart :width="getWidth" :height="80" :barSize="'40%'" :labelsFormat="'c'"
+                    :showToolTip="true" :title="title" :description="description"
+                    :ranges="ranges" :pointer="pointer" :target="target" :ticks="ticks">
+    </JqxBulletChart>
+</template>
+
+<script>
+    import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
+
+    export default {
+        components: {
+            JqxBulletChart
+        },
+        data: function () {
+            return {
+
+                getWidth: getWidth('bulletChart'),
+                title: 'Revenue 2014 YTD',
+                description: '(U.S. $ in thousands)',
+                ranges: [
+                    { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
+                    { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
+                    { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
+                ],
+                pointer: {
+                    value: 270,
+                    label: 'Revenue 2014 YTD',
+                    size: '25%',
+                    color: 'Black'
+                },
+                target: {
+                    value: 260,
+                    label: 'Revenue 2013 YTD',
+                    size: 4,
+                    color: 'Black'
+                },
+                ticks: {
+                    position: 'both',
+                    interval: 50,
+                    size: 10
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/bulletchart/defaultfunctionality/main.js b/bulletchart/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bulletchart/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bulletchart/defaultfunctionality/package.json b/bulletchart/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bulletchart/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/bulletchart/fluidsize/App.vue b/bulletchart/fluidsize/App.vue
new file mode 100644
index 00000000..36aa8c70
--- /dev/null
+++ b/bulletchart/fluidsize/App.vue
@@ -0,0 +1,48 @@
+<template>
+    <JqxBulletChart :width="'80%'" :height="80" :barSize="'40%'" :labelsFormat="'c'"
+                    :showToolTip="true" :title="title" :description="description"
+                    :ranges="ranges" :pointer="pointer" :target="target" :ticks="ticks">
+    </JqxBulletChart>
+</template>
+
+<script>
+    import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
+
+    export default {
+        components: {
+            JqxBulletChart
+        },
+        data: function () {
+            return {
+
+                title: 'Revenue 2014 YTD',
+                description: '(U.S. $ in thousands)',
+                ranges: [
+                    { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
+                    { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
+                    { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
+                ],
+                pointer: {
+                    value: 270,
+                    label: 'Revenue 2014 YTD',
+                    size: '25%',
+                    color: 'Black'
+                },
+                target: {
+                    value: 260,
+                    label: 'Revenue 2013 YTD',
+                    size: 4,
+                    color: 'Black'
+                },
+                ticks: {
+                    position: 'both',
+                    interval: 50,
+                    size: 10
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/bulletchart/fluidsize/main.js b/bulletchart/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bulletchart/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bulletchart/fluidsize/package.json b/bulletchart/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bulletchart/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/bulletchart/labelsformatting/App.vue b/bulletchart/labelsformatting/App.vue
new file mode 100644
index 00000000..7ff7540b
--- /dev/null
+++ b/bulletchart/labelsformatting/App.vue
@@ -0,0 +1,64 @@
+<template>
+    <JqxBulletChart :width="getWidth" :height="500" :barSize="'35%'" :labelsFormat="'c'"
+                    :title="'Temperature in Boston, Mass.'" :description="'on 28 May'"
+                    :showToolTip="true" :labelsFormatFunction="labelsFormatFunction"
+                    :tooltipFormatFunction="tooltipFormatFunction" :ticks="ticks"
+                    :ranges="ranges" :pointer="pointer" :target="target" :orientation="'vertical'">
+    </JqxBulletChart>
+</template>
+
+<script>
+    import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
+
+    export default {
+        components: {
+            JqxBulletChart
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('bulletChart'),
+                ranges: [
+                    { startValue: 0, endValue: 10, color: '#0099FF', opacity: 1 },
+                    { startValue: 10, endValue: 15, color: '#006600', opacity: 1 },
+                    { startValue: 15, endValue: 20, color: '#FF6600', opacity: 1 },
+                    { startValue: 20, endValue: 25, color: '#FF4526', opacity: 1 }
+                ],
+                pointer: { value: 11, size: '25%', color: '#181818' },
+                target: { value: 15, size: 4, color: '#181818' },
+                ticks: { position: 'both', interval: 5, size: 10 },
+            }
+        },
+        methods: {
+            labelsFormatFunction: function (value, position) {
+                let labelsColor;
+                if (value < 10) {
+                    labelsColor = '#0099FF';
+                }
+                else if (value < 15) {
+                    labelsColor = '#006600';
+                }
+                else if (value < 20) {
+                    labelsColor = '#FF6600';
+                }
+                else {
+                    labelsColor = '#FF4526';
+                }
+                if (position == 'near') {
+                    return '<span style="color: ' + labelsColor + ';">' + (value * 1.8 + 32) + '°F</span>';
+                }
+                else {
+                    return value + '°C';
+                }
+            },
+            tooltipFormatFunction: function (value, target) {
+                return '<div>Temperature on May 28: <strong>' +
+                    (value * 1.8 + 32) + '°F</strong> (' + value +
+                    '°C)</div><div>Average temperature in May: <strong>' +
+                    (target * 1.8 + 32) + '°F</strong> (' + target + '°C)</div>'
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/bulletchart/labelsformatting/main.js b/bulletchart/labelsformatting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bulletchart/labelsformatting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bulletchart/labelsformatting/package.json b/bulletchart/labelsformatting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bulletchart/labelsformatting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/bulletchart/multipleranges/App.vue b/bulletchart/multipleranges/App.vue
new file mode 100644
index 00000000..4a7c06f4
--- /dev/null
+++ b/bulletchart/multipleranges/App.vue
@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <label style="font-size: 13px; font-family: Verdana">
+            Hover over the pointer or target for more information.
+        </label>
+        <JqxBulletChart :width="getWidth" :height="100" :barSize="'50%'" :ranges="ranges" :ticks="ticks"
+                        :title="'Student grade'" :description="'(in points)'" :pointer="pointer"
+                        :target="target" :showToolTip="true" :tooltipFormatFunction="tooltipFormatFunction">
+        </JqxBulletChart>
+    </div>
+</template>
+
+<script>
+    import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
+
+    export default {
+        components: {
+            JqxBulletChart
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('bulletChart'),
+                ranges: [
+                    { startValue: 0, endValue: 60, color: '#191970' },
+                    { startValue: 60, endValue: 70, color: '#191970' },
+                    { startValue: 70, endValue: 80, color: '#191970' },
+                    { startValue: 80, endValue: 90, color: '#191970' },
+                    { startValue: 90, endValue: 100, color: '#191970' }
+                ],
+                pointer: { value: 83, label: 'Grade', size: '25%', color: '#1E90FF' },
+                target: { value: 75, label: 'Average grade', size: 4, color: '#00FFFF' },
+                ticks: { position: 'far', interval: 10, size: 10 }
+            }
+        },
+        methods: {
+            pointsToGrade: function (points) {
+                let grade;
+                if (points < 60) {
+                    grade = 'E';
+                }
+                else if (points < 70) {
+                    grade = 'D';
+                }
+                else if (points < 80) {
+                    grade = 'C';
+                }
+                else if (points < 90) {
+                    grade = 'B';
+                }
+                else {
+                    grade = 'A';
+                }
+                return grade;
+            },
+            tooltipFormatFunction: function (value, target) {
+                let currentGrade = this.pointsToGrade(value);
+                let averageGrade = this.pointsToGrade(target);
+                return '<div>Grade: <strong>' + currentGrade + '</strong> (' + value +
+                    ' points)</div><div>Average grade: <strong>' + averageGrade +
+                    '</strong> (' + target + ' points)</div>';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/bulletchart/multipleranges/main.js b/bulletchart/multipleranges/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bulletchart/multipleranges/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bulletchart/multipleranges/package.json b/bulletchart/multipleranges/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bulletchart/multipleranges/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/bulletchart/negativevalues/App.vue b/bulletchart/negativevalues/App.vue
new file mode 100644
index 00000000..85fdd63f
--- /dev/null
+++ b/bulletchart/negativevalues/App.vue
@@ -0,0 +1,33 @@
+<template>
+    <JqxBulletChart 
+        :width="getWidth" :height="80" :barSize="'40%'" :ranges="ranges" 
+        :title="'Profit'" :description="'(1000s)'" :ticks="ticks" 
+        :pointer="pointer" :target="target" :showToolTip="true">
+    </JqxBulletChart>
+</template>
+
+<script>
+    import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
+
+    export default {
+        components: {
+            JqxBulletChart
+        },
+        data: function () { 
+            return {
+                getWidth: getWidth('bulletChart'),
+                ranges: [
+                    { startValue: -50, endValue: 150, color: '#000000', opacity: 0.5 },
+                    { startValue: 150, endValue: 200, color: '#000000', opacity: 0.3 },
+                    { startValue: 200, endValue: 250, color: '#000000', opacity: 0.1 }
+                ],
+                pointer: { value: -20, label: 'Profit', size: '25%', color: 'Black' },
+                target: { value: 200, label: 'Target profit', size: 4, color: 'Black' },
+                ticks:{ position: 'far', interval: 50, size: 10 }
+            }
+        }
+    }
+</script>
+
+<style>   
+</style>
\ No newline at end of file
diff --git a/bulletchart/negativevalues/main.js b/bulletchart/negativevalues/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bulletchart/negativevalues/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bulletchart/negativevalues/package.json b/bulletchart/negativevalues/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bulletchart/negativevalues/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/bulletchart/rangesstyling/App.vue b/bulletchart/rangesstyling/App.vue
new file mode 100644
index 00000000..7e3a0d3d
--- /dev/null
+++ b/bulletchart/rangesstyling/App.vue
@@ -0,0 +1,33 @@
+<template>
+    <JqxBulletChart 
+        :width="getWidth" :height="80" :barSize="'40%'" :ranges="ranges" 
+        :title="'Revenue 2014 YTD'" :description="'(U.S. $ in thousands)'" :ticks="ticks" 
+        :pointer="pointer" :target="target" :showToolTip="true" :labelsFormat="'c'">
+    </JqxBulletChart>
+</template>
+
+<script>
+    import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
+
+    export default {
+        components: {
+            JqxBulletChart
+        },
+        data: function () { 
+            return {
+                getWidth: getWidth('bulletChart'),
+                ranges: [
+                    { startValue: 0, endValue: 200, color: '#CC0000', opacity: 1 },
+                    { startValue: 200, endValue: 250, color: '#FFD633', opacity: 1 },
+                    { startValue: 250, endValue: 300, color: '#00CC00', opacity: 1 }
+                ],
+                pointer: { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: '' },
+                target: { value: 260, label: 'Revenue 2013 YTD', size: 4, color: '' },
+                ticks: { position: 'far', interval: 50, size: 10 }
+            }
+        }
+    }
+</script>
+
+<style>   
+</style>
\ No newline at end of file
diff --git a/bulletchart/rangesstyling/main.js b/bulletchart/rangesstyling/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bulletchart/rangesstyling/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bulletchart/rangesstyling/package.json b/bulletchart/rangesstyling/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bulletchart/rangesstyling/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/bulletchart/righttoleftlayout/App.vue b/bulletchart/righttoleftlayout/App.vue
new file mode 100644
index 00000000..6eb44c7c
--- /dev/null
+++ b/bulletchart/righttoleftlayout/App.vue
@@ -0,0 +1,35 @@
+<template>
+    <div style="margin-left: 1em">
+
+        <JqxBulletChart :width="getWidth" :height="80" :barSize="'40%'" :ranges="ranges" :rtl="true"
+                        :title="'Revenue 2014 YTD'" :description="'(U.S. $ in thousands)'" :ticks="ticks"
+                        :pointer="pointer" :target="target" :showToolTip="true" :labelsFormat="'c'">
+        </JqxBulletChart>
+    </div>
+</template>
+
+<script>
+    import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
+
+    export default {
+        components: {
+            JqxBulletChart
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('bulletChart'),
+                ranges: [
+                    { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
+                    { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
+                    { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
+                ],
+                pointer: { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black' },
+                target: { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' },
+                ticks: { position: 'far', interval: 50, size: 10 }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/bulletchart/righttoleftlayout/main.js b/bulletchart/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bulletchart/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bulletchart/righttoleftlayout/package.json b/bulletchart/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bulletchart/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/bulletchart/settings/App.vue b/bulletchart/settings/App.vue
new file mode 100644
index 00000000..30daab9f
--- /dev/null
+++ b/bulletchart/settings/App.vue
@@ -0,0 +1,200 @@
+<template>
+    <div>
+        <JqxBulletChart ref="myBulletChart" style="float: left; margin-left: 10px"
+                        :width="getWidth" :height="80" :barSize="'40%'" :ranges="ranges" :ticks="ticks"
+                        :title="'Revenue 2014 YTD'" :description="'(U.S. $ in thousands)'" :animationDuration="0"
+                        :pointer="pointer" :target="target" :labelsFormat="'c'" :showToolTip="true">
+        </JqxBulletChart>
+        <JqxExpander style="float: left; margin-left: 60px"
+                     :width="210" :height="550" :toggleMode="'none'" :showArrow="false">
+
+            <div>jqxBulletChart Settings</div>
+            <div>
+                <div style="padding: 5px">
+                    <JqxCheckBox ref="showLabelsCheckbox" @change="showLabelsCheckboxChange($event)" :checked="true">Show Labels</JqxCheckBox>
+                    <ul style="list-style: none;padding: 0; margin-top: 10px; margin-left: 20px; font-family: Verdana; font-size: 12px">
+                        <li>
+                            <JqxRadioButton ref="nearRadio" @checked="nearRadioChecked()" :checked="false" :groupName="'position'">Near</JqxRadioButton>
+                        </li>
+                        <li>
+                            <JqxRadioButton ref="farRadio" @checked="farRadioChecked()" :checked="false" :groupName="'position'" style="margin-top: 5px">Far</JqxRadioButton>
+                        </li>
+                        <li>
+                            <JqxRadioButton ref="bothRadio" @checked="bothRadioChecked()" :checked="true" :groupName="'position'" style="margin-top: 5px">Both</JqxRadioButton>
+                        </li>
+                    </ul>
+                    <br />
+                    <div>Labels Format:</div>
+                    <ul style="list-style: none; padding: 0; margin-top: 10px; margin-left: 20px; font-family: Verdana; font-size: 12px">
+                        <li>
+                            <JqxRadioButton ref="currencyRadio" @checked="currencyRadioChecked()" :checked="true" :groupName="'format'">Currency</JqxRadioButton>
+                        </li>
+                        <li>
+                            <JqxRadioButton ref="percentRadio" @checked="percentRadioChecked()" :checked="false" :groupName="'format'" style="margin-top: 5px">Percent</JqxRadioButton>
+                        </li>
+                        <li>
+                            <JqxRadioButton ref="noneRadio" @checked="noneRadioChecked()" :checked="false" :groupName="'format'" style="margin-top: 5px">None</JqxRadioButton>
+                        </li>
+                    </ul>
+                    <br />
+                    <JqxCheckBox ref="enableAnimationCheckbox" @change="enableAnimationCheckboxChange($event)" :checked="false">Enable Animation</JqxCheckBox>
+                    <br />
+                    <div>Pointer Value:</div>
+                    <JqxSlider ref="valueSlider" @change="valueSliderChange($event)" style="padding-left: 5px"
+                               :width="175" :min="0" :max="300" :step="10" :showTicks="false"
+                               :mode="'fixed'" :showButtons="false" :value="270">
+                    </JqxSlider>
+                    <br />
+                    <div>Pointer Color:</div>
+                    <JqxDropDownList ref="pointerDropDownList" @change="pointerDropDownListChange($event)"
+                                     :width="'100%'" :height="25" :selectedIndex="4"
+                                     :source="colorChoices" :autoDropDownHeight="true">
+                    </JqxDropDownList>
+                    <br />
+                    <div>Target Color:</div>
+                    <JqxDropDownList ref="targetDropDownList" @change="targetDropDownListChange($event)"
+                                     :width="'100%'" :height="25" :selectedIndex="4"
+                                     :source="colorChoices" :autoDropDownHeight="true">
+                    </JqxDropDownList>
+                    <br />
+                    <JqxCheckBox ref="disabledCheckbox" @change="disabledCheckboxChange($event)" :checked="false" style="margin-bottom: 5px">Disabled</JqxCheckBox>
+                    <JqxCheckBox ref="rtlCheckbox" @change="rtlCheckboxChange($event)" :checked="false">Right-to-Left</JqxCheckBox>
+                </div>
+            </div>
+        </JqxExpander>
+    </div>
+</template>
+
+<script>
+    import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
+    import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+    import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
+    import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
+    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
+
+    export default {
+        components: {
+            JqxBulletChart,
+            JqxExpander,
+            JqxCheckBox,
+            JqxRadioButton,
+            JqxSlider,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('bulletChart'),
+                ranges: [
+                    { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
+                    { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
+                    { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
+                ],
+                pointer: { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: '' },
+                target: { value: 260, label: 'Revenue 2013 YTD', size: 4, color: '' },
+                ticks: { position: 'both', interval: 50, size: 10 },
+                colorChoices: ['Black', 'Red', 'Green', 'Blue', 'From theme']
+            }
+        },
+        methods: {
+            showLabelsCheckboxChange: function (event) {
+                let checked = event.args.checked;
+                if (checked) {
+                    this.$refs.nearRadio.enable();
+                    this.$refs.farRadio.enable();
+                    this.$refs.bothRadio.enable();
+
+                    if (this.$refs.nearRadio.checked === true) {
+                        this.$refs.myBulletChart.ticks = { position: 'near' };
+                    }
+                    else if (this.$refs.farRadio.checked === true) {
+                        this.$refs.myBulletChart.ticks = { position: 'far' };
+                    }
+                    else {
+                        this.$refs.myBulletChart.ticks = { position: 'both' };
+                    }
+                }
+                else {
+                    this.$refs.myBulletChart.ticks = { position: 'none' };
+                    this.$refs.nearRadio.disable();
+                    this.$refs.farRadio.disable();
+                    this.$refs.bothRadio.disable();
+                }
+            },
+
+            nearRadioChecked: function () {
+                this.$refs.myBulletChart.ticks = { position: 'near' };
+            }, farRadioChecked: function () {
+                this.$refs.myBulletChart.ticks = { position: 'far' };
+            },
+            bothRadioChecked: function () {
+                this.$refs.myBulletChart.ticks = { position: 'both' };
+            },
+            currencyRadioChecked: function () {
+                this.$refs.myBulletChart.labelsFormat = 'c';
+            },
+            percentRadioChecked: function () {
+                this.$refs.myBulletChart.labelsFormat = 'p';
+            },
+            noneRadioChecked: function () {
+                this.$refs.myBulletChart.labelsFormat = null;
+            },
+            enableAnimationCheckboxChange: function (event) {
+                let checked = event.args.checked;
+                if (checked) {
+                    this.$refs.myBulletChart.animationDuration = 400;
+                }
+                else {
+                    this.$refs.myBulletChart.animationDuration = 0;
+                }
+            },
+            valueSliderChange: function (event) {
+                let value = event.args.value;
+                this.$refs.myBulletChart.val(value);
+            },
+            pointerDropDownListChange: function (event) {
+                let choice = event.args.item.label;
+                let newColor;
+                if (choice != 'From theme') {
+                    newColor = choice;
+                }
+                else {
+                    newColor = '';
+                }
+                this.$refs.myBulletChart.pointer = { color: newColor };
+            },
+            targetDropDownListChange: function (event) {
+                let choice = event.args.item.label;
+                let newColor;
+                if (choice != 'From theme') {
+                    newColor = choice;
+                }
+                else {
+                    newColor = '';
+                }
+                this.$refs.myBulletChart.target = { color: newColor };
+            },
+            disabledCheckboxChange: function (event) {
+                let checked = event.args.checked;
+                if (checked) {
+                    this.$refs.myBulletChart.disabled = true;
+                }
+                else {
+                    this.$refs.myBulletChart.disabled = false;
+                }
+            },
+            rtlCheckboxChange: function (event) {
+                let checked = event.args.checked;
+                if (checked) {
+                    this.$refs.myBulletChart.rtl = true;
+                }
+                else {
+                    this.$refs.myBulletChart.rtl = false;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/bulletchart/settings/main.js b/bulletchart/settings/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bulletchart/settings/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bulletchart/settings/package.json b/bulletchart/settings/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bulletchart/settings/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/bulletchart/verticalbulletchart/App.vue b/bulletchart/verticalbulletchart/App.vue
new file mode 100644
index 00000000..c3732ad9
--- /dev/null
+++ b/bulletchart/verticalbulletchart/App.vue
@@ -0,0 +1,32 @@
+<template>
+    <JqxBulletChart :width="getWidth" :height="500" :barSize="'35%'" :ranges="ranges" :ticks="ticks"
+                    :title="'Revenue 2014 YTD'" :description="'(U.S. $ in thousands)'" :animationDuration="0"
+                    :pointer="pointer" :target="target" :showToolTip="true" :orientation="'vertical'">
+    </JqxBulletChart>
+</template>
+
+<script>
+    import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
+
+    export default {
+        components: {
+            JqxBulletChart
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('bulletChart'),
+                ranges: [
+                    { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
+                    { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
+                    { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
+                ],
+                pointer: { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black' },
+                target: { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' },
+                ticks: { position: 'far', interval: 50, size: 10 }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/bulletchart/verticalbulletchart/main.js b/bulletchart/verticalbulletchart/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/bulletchart/verticalbulletchart/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/bulletchart/verticalbulletchart/package.json b/bulletchart/verticalbulletchart/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/bulletchart/verticalbulletchart/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/buttongroup/defaultfunctionality/App.vue b/buttongroup/defaultfunctionality/App.vue
new file mode 100644
index 00000000..8d2f0fe0
--- /dev/null
+++ b/buttongroup/defaultfunctionality/App.vue
@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <JqxButtonGroup ref="myButtonGroup" @buttonclick="groupOnBtnClick($event)">
+            <button style="padding: 4px 16px" id='Left' value='Left'></button>
+            <button style="padding: 4px 16px" id='Center' value='Center'></button>
+            <button style="padding: 4px 16px" id='Right' value='Right'></button>
+        </JqxButtonGroup>
+
+        <div style="margin-top: 10px">
+            <h4>Modes</h4>
+            <JqxRadioButton @checked="myDefaultModeButtonChecked()" :checked="true">Default</JqxRadioButton>
+            <JqxRadioButton @checked="myRadioModeButtonChecked()">RadioButtons</JqxRadioButton>
+            <JqxRadioButton @checked="myCheckBoxModeButtonChecked()">CheckBoxes</JqxRadioButton>
+        </div>
+
+        <div ref="myLog" style="margin-top: 10px;"></div>
+    </div>
+</template>
+
+<script>
+
+    import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
+    import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
+
+    export default {
+        components: {
+            JqxButtonGroup,
+            JqxRadioButton
+        },
+        methods: {
+
+            myDefaultModeButtonChecked: function () {
+                this.$refs.myButtonGroup.mode = 'default';
+            },
+            myRadioModeButtonChecked: function () {
+                this.$refs.myButtonGroup.mode = 'radio';
+            },
+            myCheckBoxModeButtonChecked: function () {
+                this.$refs.myButtonGroup.mode = 'checkbox';
+            },
+            groupOnBtnClick: function (event) {
+                let clickedButton = event.args.button;
+                this.$refs.myLog.innerHTML = `Clicked: ${clickedButton[0].id}`;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/buttongroup/defaultfunctionality/main.js b/buttongroup/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/buttongroup/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/buttongroup/defaultfunctionality/package.json b/buttongroup/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/buttongroup/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/buttongroup/templates/App.vue b/buttongroup/templates/App.vue
new file mode 100644
index 00000000..5a65512e
--- /dev/null
+++ b/buttongroup/templates/App.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div>Default</div>
+    <JqxButtonGroup :mode="'checkbox'">
+      <button style="padding: 4px 16px" value='Left'></button>
+      <button style="padding: 4px 16px" value='Center'></button>
+      <button style="padding: 4px 16px" value='Right'></button>
+    </JqxButtonGroup>
+    <br />
+
+    <div>Primary</div>
+    <JqxButtonGroup :mode="'checkbox'" :template="'primary'">
+      <button style="padding: 4px 16px" value='Left'></button>
+      <button style="padding: 4px 16px" value='Center'></button>
+      <button style="padding: 4px 16px" value='Right'></button>
+    </JqxButtonGroup>
+    <br />
+
+    <div>Success</div>
+    <JqxButtonGroup :mode="'checkbox'" :template="'success'">
+      <button style="padding: 4px 16px" value='Left'></button>
+      <button style="padding: 4px 16px" value='Center'></button>
+      <button style="padding: 4px 16px" value='Right'></button>
+    </JqxButtonGroup>
+    <br />
+
+    <div>Info</div>
+    <JqxButtonGroup :mode="'checkbox'" :template="'info'">
+      <button style="padding: 4px 16px" value='Left'></button>
+      <button style="padding: 4px 16px" value='Center'></button>
+      <button style="padding: 4px 16px" value='Right'></button>
+    </JqxButtonGroup>
+    <br />
+
+    <div>Warning</div>
+    <JqxButtonGroup :mode="'checkbox'" :template="'warning'">
+      <button style="padding: 4px 16px" value='Left'></button>
+      <button style="padding: 4px 16px" value='Center'></button>
+      <button style="padding: 4px 16px" value='Right'></button>
+    </JqxButtonGroup>
+    <br />
+
+    <div>Danger</div>
+    <JqxButtonGroup :mode="'checkbox'" :template="'danger'">
+      <button style="padding: 4px 16px" value='Left'></button>
+      <button style="padding: 4px 16px" value='Center'></button>
+      <button style="padding: 4px 16px" value='Right'></button>
+    </JqxButtonGroup>
+  </div>
+</template>
+
+    <script>
+
+    import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
+
+    export default {
+        components: {
+            JqxButtonGroup
+        }
+    }
+</script>
+
+<style>   
+</style>
\ No newline at end of file
diff --git a/buttongroup/templates/main.js b/buttongroup/templates/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/buttongroup/templates/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/buttongroup/templates/package.json b/buttongroup/templates/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/buttongroup/templates/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/buttons/defaultfunctionality/App.vue b/buttons/defaultfunctionality/App.vue
new file mode 100644
index 00000000..e3786fd0
--- /dev/null
+++ b/buttons/defaultfunctionality/App.vue
@@ -0,0 +1,74 @@
+<template>
+    <div>
+        <div style='margin-top: 20px'>
+            <JqxButton ref="button" :width="120" :height="40" :textPosition="'center'" v-on:click="buttonClicked()">
+                Button
+            </JqxButton>
+        </div>
+        <div style='margin-top: 20px'>
+            <JqxButton ref="submitButton" :width="120" :height="40" :textPosition="'center'" v-on:click="submitButtonClicked()">
+                Submit
+            </JqxButton>
+        </div>
+        <div style='margin-top: 20px'>
+            <JqxButton ref="imageButton" :width="120" :height="40" :textPosition="'center'"
+                       :imgSrc="'../images/facebook.png'" v-on:click="imageButtonClicked()">
+            </JqxButton>
+        </div>
+        <div style='margin-top: 20px'>
+            <JqxButton ref="myTextImageButton" :width="120" :height="40"
+                       :textImageRelation="'imageBeforeText'" :textPosition="'left'" :imgSrc="'../images/twitter.png'"
+                       v-on:click="textImageButtonClicked()">
+                Button
+            </JqxButton>
+        </div>
+        <div style='margin-top: 20px'>
+            <JqxButton ref="myHTMLButton" :width="120" :height="40" :textPosition="'center'" v-on:click="hTMLButtonClicked()">
+                <span style='font-weight: bold; '>HTML Button</span>
+            </JqxButton>
+        </div>
+        <div style='margin-top: 20px'>
+            <JqxButton ref="disabledButton" :width="120" :height="40" :textPosition="'center'" :disabled="true">
+                Disabled
+            </JqxButton>
+        </div>
+        <div style='margin-top:1em'>Events:</div>
+        <div ref="events"></div>
+    </div>
+</template>
+
+<script>
+
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxButton
+        },
+        methods: {
+            buttonClicked: function () {
+                this.$refs.events.innerHTML = '<span>Button Clicked</span>';
+            },
+            submitButtonClicked: function () {
+                this.$refs.events.innerHTML = '<span>Submit Button Clicked</span>';
+            },
+            imageButtonClicked: function () {
+                this.$refs.events.innerHTML = '<span>Image Button Clicked</span>';
+            },
+            textImageButtonClicked: function () {
+                this.$refs.events.innerHTML = '<span>Text/Image Button Clicked</span>';
+                this.$refs.myTextImageButton.textImageRelation = "textBeforeImage";
+                this.$refs.myTextImageButton.imgPosition = "left";
+                this.$refs.myTextImageButton.textPosition = "center";
+            },
+            hTMLButtonClicked: function () {
+                this.$refs.events.innerHTML = '<span>HTML Button Clicked</span>';
+                this.$refs.myHTMLButton.textPosition = "top";
+                this.$refs.myHTMLButton.value = "<span style='font-style: italic; position: relative; right: 8px'>Thanks for clicking me!</span>";
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/buttons/defaultfunctionality/main.js b/buttons/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/buttons/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/buttons/defaultfunctionality/package.json b/buttons/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/buttons/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/buttons/fluidsize/App.vue b/buttons/fluidsize/App.vue
new file mode 100644
index 00000000..b619e60d
--- /dev/null
+++ b/buttons/fluidsize/App.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <b>Checkbox</b>
+    <JqxCheckBox style="margin-top: 10px" :width="'30%'">eLearning</JqxCheckBox>
+    <JqxCheckBox style="margin-top: 5px; margin-bottom: 10px" :width="'30%'">Mobile</JqxCheckBox>
+
+    <b>Radio Button</b>
+    <JqxRadioButton style="margin-top: 10px" :width="'30%'">On</JqxRadioButton>
+    <JqxRadioButton style="margin-top: 5px; margin-bottom: 10px" :width="'30%'">Off</JqxRadioButton>
+
+    <b>DropDown Button</b>
+    <JqxDropDownButton ref="myDropDownButton" style="margin-top: 10px; margin-bottom: 10px" :width="'50%'" :height="25">
+      <div>
+        <ul>
+          <li>Education</li>
+          <li>Financial services</li>
+          <li>Government</li>
+          <li>Manufacturing</li>
+          <li>
+            Solutions
+            <ul>
+              <li>eLearning</li>
+              <li>Mobile</li>
+              <li>RIA</li>
+              <li>Training</li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </JqxDropDownButton>
+
+    <b>Switch Button</b>
+    <JqxSwitchButton style="margin-top: 10px" :width="'20%'"></JqxSwitchButton>
+  </div>
+</template>
+
+    <script>
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+    import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
+    import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
+    import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
+
+    export default {
+        components: {
+            JqxCheckBox,
+            JqxRadioButton,
+            JqxDropDownButton,
+            JqxSwitchButton
+        },
+        mounted: function() {
+            let dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">DropDownButton</div>';
+            this.$refs.myDropDownButton.setContent(dropDownContent);
+        }
+    }
+</script>
+
+<style>   
+</style>
\ No newline at end of file
diff --git a/buttons/fluidsize/main.js b/buttons/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/buttons/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/buttons/fluidsize/package.json b/buttons/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/buttons/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/buttons/imageposition/App.vue b/buttons/imageposition/App.vue
new file mode 100644
index 00000000..33d57f5e
--- /dev/null
+++ b/buttons/imageposition/App.vue
@@ -0,0 +1,71 @@
+<template>
+<div>
+    <table>
+        <tr>
+          <td>Top</td>
+          <td>Top Left</td>
+          <td>Top Right</td>
+        </tr>
+        <tr>
+          <td>
+            <JqxButton :width="120" :height="50" :imgSrc="'../images/twitter.png'" :imgPosition="'top'"></JqxButton>
+          </td>
+          <td>
+            <JqxButton :width="120" :height="50" :imgSrc="'../images/twitter.png'" :imgPosition="'topLeft'"></JqxButton>
+          </td>
+          <td>
+            <JqxButton :width="120" :height="50" :imgSrc="'../images/twitter.png'" :imgPosition="'topRight'"></JqxButton>
+          </td>
+        </tr>
+    </table>
+    <table>
+        <tr>
+          <td>Center</td>
+          <td>Left</td>
+          <td>Right</td>
+        </tr>
+        <tr>
+          <td>
+            <JqxButton :width="120" :height="50" :imgSrc="'../images/twitter.png'" :imgPosition="'center'"></JqxButton>
+          </td>
+          <td>
+            <JqxButton :width="120" :height="50" :imgSrc="'../images/twitter.png'" :imgPosition="'left'"></JqxButton>
+          </td>
+          <td>
+            <JqxButton :width="120" :height="50" :imgSrc="'../images/twitter.png'" :imgPosition="'right'"></JqxButton>
+          </td>
+        </tr>
+    </table>
+    <table>
+        <tr>
+          <td>Bottom</td>
+          <td>Bottom Left</td>
+          <td>Bottom Right</td>
+        </tr>
+        <tr>
+          <td>
+            <JqxButton :width="120" :height="50" :imgSrc="'../images/twitter.png'" :imgPosition="'bottom'"></JqxButton>
+          </td>
+          <td>
+            <JqxButton :width="120" :height="50" :imgSrc="'../images/twitter.png'" :imgPosition="'bottomLeft'"></JqxButton>
+          </td>
+          <td>
+            <JqxButton :width="120" :height="50" :imgSrc="'../images/twitter.png'" :imgPosition="'bottomRight'"></JqxButton>
+          </td>
+        </tr>
+    </table>
+</div>
+</template>
+
+    <script>
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxButton
+        }
+    }
+</script>
+
+<style>   
+</style>
\ No newline at end of file
diff --git a/buttons/imageposition/main.js b/buttons/imageposition/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/buttons/imageposition/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/buttons/imageposition/package.json b/buttons/imageposition/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/buttons/imageposition/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/buttons/images/App.vue b/buttons/images/App.vue
new file mode 100644
index 00000000..62422b96
--- /dev/null
+++ b/buttons/images/App.vue
@@ -0,0 +1,377 @@
+<template>
+<div>
+    <h3>Image Before Text</h3>
+<table>
+    <tr>
+        <td>Image Left/Text Left</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'left'" :textPosition="'left'" value=''
+                :textImageRelation="'imageBeforeText'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Image Left/Text Center</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'left'" :textPosition="'center'" 
+                :textImageRelation="'imageBeforeText'" :imgSrc="'../../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Image Left/Text Right</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'left'" :textPosition="'right'" 
+                :textImageRelation="'imageBeforeText'" :imgSrc="'../../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+    </tr>
+    <tr>
+        <td>Image Center/Text Left</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'center'" :textPosition="'left'" 
+                :textImageRelation="'imageBeforeText'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Image Center/Text Center</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'center'" :textPosition="'center'" 
+                :textImageRelation="'imageBeforeText'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Image Center/Text Right</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'center'" :textPosition="'right'" 
+                :textImageRelation="'imageBeforeText'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+    </tr>
+    <tr>
+        <td>Image Right/Text Left</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'right'" :textPosition="'left'" 
+                :textImageRelation="'imageBeforeText'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Image Right/Text Center</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'right'" :textPosition="'center'" 
+                :textImageRelation="'imageBeforeText'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Image Right/Text Right</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'right'" :textPosition="'right'" 
+                :textImageRelation="'imageBeforeText'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+    </tr>
+</table>
+<h3>Text Before Image</h3>
+<table>
+    <tr>
+        <td>Text Left/Image Left</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'left'" :textPosition="'left'" 
+                :textImageRelation="'textBeforeImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Text Left/Image Center</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'center'" :textPosition="'left'" 
+                :textImageRelation="'textBeforeImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Text Left/Image Right</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'right'" :textPosition="'left'" 
+                :textImageRelation="'textBeforeImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+    </tr>
+    <tr>
+        <td>Text Center/Image Left</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'left'" :textPosition="'center'" 
+                :textImageRelation="'textBeforeImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Text Center/Image Center</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'center'" :textPosition="'center'" 
+                :textImageRelation="'textBeforeImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Text Center/Image Right</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'right'" :textPosition="'center'" 
+                :textImageRelation="'textBeforeImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+    </tr>
+    <tr>
+        <td>Text Right/Image Left</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'left'" :textPosition="'right'" 
+                :textImageRelation="'textBeforeImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Text Right/Image Center</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'center'" :textPosition="'right'" 
+                :textImageRelation="'textBeforeImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Text Right/Image Right</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'right'" :textPosition="'right'" 
+                :textImageRelation="'textBeforeImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+    </tr>
+</table>
+<h3>Image Above Text</h3>
+<table>
+    <tr>
+        <td>Image Left/Text Left</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'left'" :textPosition="'left'" 
+                :textImageRelation="'imageAboveText'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Image Left/Text Center</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'left'" :textPosition="'left'" 
+                :textImageRelation="'imageAboveText'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Image Left/Text Right</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'left'" :textPosition="'right'" 
+                :textImageRelation="'imageAboveText'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+    </tr>
+    <tr>
+        <td>Image Center/Text Left</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'center'" :textPosition="'left'" 
+                :textImageRelation="'imageAboveText'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Image Center/Text Center</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'center'" :textPosition="'center'" 
+                :textImageRelation="'imageAboveText'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Image Center/Text Right</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'center'" :textPosition="'right'" 
+                :textImageRelation="'imageAboveText'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+    </tr>
+    <tr>
+        <td>Image Right/Text Left</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'right'" :textPosition="'left'" 
+                :textImageRelation="'imageAboveText'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Image Right/Text Center</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'right'" :textPosition="'center'" 
+                :textImageRelation="'imageAboveText'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Image Right/Text Right</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'right'" :textPosition="'right'" 
+                :textImageRelation="'imageAboveText'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+    </tr>
+</table>
+<h3>Text Above Image</h3>
+<table>
+    <tr>
+        <td>Text Left/Image Left</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'left'" :textPosition="'top'" 
+                :textImageRelation="'textAboveImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Text Left/Image Center</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'center'" :textPosition="'left'" 
+                :textImageRelation="'textAboveImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Text Left/Image Right</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'right'" :textPosition="'left'" 
+                :textImageRelation="'textAboveImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+    </tr>
+    <tr>
+        <td>Text Center/Image Left</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'left'" :textPosition="'center'" 
+                :textImageRelation="'textAboveImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Text Center/Image Center</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'center'" :textPosition="'center'" 
+                :textImageRelation="'textAboveImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Text Center/Image Right</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'right'" :textPosition="'center'" 
+                :textImageRelation="'textAboveImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+    </tr>
+    <tr>
+        <td>Text Right/Image Left</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'left'" :textPosition="'right'" 
+                :textImageRelation="'textAboveImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Text Right/Image Center</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'center'" :textPosition="'right'" 
+                :textImageRelation="'textAboveImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Text Right/Image Right</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'right'" :textPosition="'right'" 
+                :textImageRelation="'textAboveImage'" :imgSrc="'../images/twitter.png'">
+              Button
+            </JqxButton>
+        </td>
+    </tr>
+</table>
+<h3>Overlay(Text and Image can be one over another)</h3>
+<table>
+    <tr>
+        <td>Image Left/Text Left</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'left'" :textPosition="'left'" 
+                :textImageRelation="'overlay'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Image Left/Text Center</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'left'" :textPosition="'center'" 
+                :textImageRelation="'overlay'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Image Left/Text Right</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'left'" :textPosition="'right'" 
+                :textImageRelation="'overlay'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+    </tr>
+    <tr>
+        <td>Image Center/Text Left</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'center'" :textPosition="'left'" 
+                :textImageRelation="'overlay'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+            </td>
+        <td>Image Center/Text Center</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'center'" :textPosition="'center'" 
+                :textImageRelation="'overlay'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Image Center/Text Right</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'center'" :textPosition="'right'" 
+                :textImageRelation="'overlay'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+    </tr>
+    <tr>
+        <td>Image Right/Text Left</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'right'" :textPosition="'left'" 
+                :textImageRelation="'overlay'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+            </td>
+        <td>Image Right/Text Center</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'right'" :textPosition="'center'" 
+                :textImageRelation="'overlay'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+        <td>Image Right/Text Right</td>
+        <td>
+            <JqxButton :width="120" :imgPosition="'right'" :textPosition="'right'" 
+                :textImageRelation="'overlay'" :imgSrc="'../images/facebook.png'">
+              Button
+            </JqxButton>
+        </td>
+    </tr>
+</table>
+</div>
+</template>
+
+    <script>
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxButton
+        }
+    }
+</script>
+
+<style>   
+</style>
\ No newline at end of file
diff --git a/buttons/images/main.js b/buttons/images/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/buttons/images/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/buttons/images/package.json b/buttons/images/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/buttons/images/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/buttons/righttoleftlayout/App.vue b/buttons/righttoleftlayout/App.vue
new file mode 100644
index 00000000..69754460
--- /dev/null
+++ b/buttons/righttoleftlayout/App.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <b>Checkbox</b>
+    <JqxCheckBox style="margin-top: 10px" :width="85" :rtl="true">eLearning</JqxCheckBox>
+    <JqxCheckBox style="margin-top: 5px; margin-bottom: 10px" :width="85" :rtl="true">Mobile</JqxCheckBox>
+
+    <b>Radio Button</b>
+    <JqxRadioButton style="margin-top: 10px" :width="85" :rtl="true">On</JqxRadioButton>
+    <JqxRadioButton style="margin-top: 5px; margin-bottom: 10px" :width="85" :rtl="true">Off</JqxRadioButton>
+
+    <b>DropDown Button</b>
+    <JqxDropDownButton ref="myDropDownButton" style="margin-top: 10px; margin-bottom: 10px" :width="180" :height="25" :rtl="true">
+      <div>
+        <ul>
+          <li>Education</li>
+          <li>Financial services</li>
+          <li>Government</li>
+          <li>Manufacturing</li>
+          <li>
+            Solutions
+            <ul>
+              <li>eLearning</li>
+              <li>Mobile</li>
+              <li>RIA</li>
+              <li>Training</li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </JqxDropDownButton>
+
+    <b>Switch Button</b>
+    <JqxSwitchButton style="margin-top: 10px" :width="100"></JqxSwitchButton>
+  </div>
+</template>
+
+    <script>
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+    import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
+    import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
+    import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
+
+    export default {
+        components: {
+            JqxCheckBox,
+            JqxRadioButton,
+            JqxDropDownButton,
+            JqxSwitchButton
+        },
+        mounted: function() {
+            let dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">DropDownButton</div>';
+            this.$refs.myDropDownButton.setContent(dropDownContent);
+        }
+    }
+</script>
+
+<style>   
+</style>
\ No newline at end of file
diff --git a/buttons/righttoleftlayout/main.js b/buttons/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/buttons/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/buttons/righttoleftlayout/package.json b/buttons/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/buttons/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/buttons/templates/App.vue b/buttons/templates/App.vue
new file mode 100644
index 00000000..01e990f6
--- /dev/null
+++ b/buttons/templates/App.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <JqxButton :width="80" style="float: left">Default</JqxButton>
+    <JqxButton :template="'primary'" :width="80" style="float: left; margin-left: 4px">Primary</JqxButton>
+    <JqxButton :template="'info'"    :width="80" style="float: left; margin-left: 4px">Info</JqxButton>
+    <JqxButton :template="'success'" :width="80" style="float: left; margin-left: 4px">Success</JqxButton>
+    <JqxButton :template="'warning'" :width="80" style="float: left; margin-left: 4px">Warning</JqxButton>
+    <JqxButton :template="'danger'"  :width="80" style="float: left; margin-left: 4px">Danger</JqxButton>
+    <JqxButton :template="'inverse'" :width="80" style="float: left; margin-left: 4px">Inverse</JqxButton>
+    <JqxButton :template="'link'"    :width="80" style="float: left">Link</JqxButton>
+  </div>
+</template>
+
+    <script>
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxButton
+        }
+    }
+</script>
+
+<style>   
+</style>
\ No newline at end of file
diff --git a/buttons/templates/main.js b/buttons/templates/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/buttons/templates/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/buttons/templates/package.json b/buttons/templates/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/buttons/templates/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/buttons/textposition/App.vue b/buttons/textposition/App.vue
new file mode 100644
index 00000000..ec5050a6
--- /dev/null
+++ b/buttons/textposition/App.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <table>
+        <tr>
+          <td>
+            <JqxButton :width="120" :height="50" :textPosition="'topLeft'">Top Left</JqxButton>
+          </td>
+          <td>
+            <JqxButton :width="120" :height="50" :textPosition="'top'">Top</JqxButton>
+          </td>
+          <td>
+            <JqxButton :width="120" :height="50" :textPosition="'topRight'">Top Right</JqxButton>
+          </td>
+        </tr>
+    </table>
+    <table>
+      <tr>
+        <td>
+          <JqxButton :width="120" :height="50" :textPosition="'left'">Left</JqxButton>
+        </td>
+        <td>
+          <JqxButton :width="120" :height="50" :textPosition="'center'">Center</JqxButton>
+        </td>
+        <td>
+          <JqxButton :width="120" :height="50" :textPosition="'right'">Right</JqxButton>
+        </td>
+      </tr>
+    </table>
+    <table>
+      <tr>
+        <td>
+          <JqxButton :width="120" :height="50" :textPosition="'bottomLeft'">Bottom Left</JqxButton>
+        </td>
+        <td>
+          <JqxButton :width="120" :height="50" :textPosition="'bottom'">Bottom</JqxButton>
+        </td>
+        <td>
+          <JqxButton :width="120" :height="50" :textPosition="'bottomRight'">Bottom Left</JqxButton>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+    <script>
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxButton
+        }
+    }
+</script>
+
+<style>   
+</style>
\ No newline at end of file
diff --git a/buttons/textposition/main.js b/buttons/textposition/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/buttons/textposition/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/buttons/textposition/package.json b/buttons/textposition/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/buttons/textposition/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/calendar/defaultfunctionality/App.vue b/calendar/defaultfunctionality/App.vue
new file mode 100644
index 00000000..498b2ede
--- /dev/null
+++ b/calendar/defaultfunctionality/App.vue
@@ -0,0 +1,16 @@
+<template>
+  <JqxCalendar :width="220" :height="220"></JqxCalendar>
+</template>
+
+    <script>
+    import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
+
+    export default {
+        components: {
+            JqxCalendar
+        }
+    }
+</script>
+
+<style>   
+</style>
\ No newline at end of file
diff --git a/calendar/defaultfunctionality/main.js b/calendar/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/calendar/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/calendar/defaultfunctionality/package.json b/calendar/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/calendar/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/calendar/disabled/App.vue b/calendar/disabled/App.vue
new file mode 100644
index 00000000..32f7eeec
--- /dev/null
+++ b/calendar/disabled/App.vue
@@ -0,0 +1,16 @@
+<template>
+  <JqxCalendar :width="220" :height="220" :disabled="true"></JqxCalendar>
+</template>
+
+    <script>
+    import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
+
+    export default {
+        components: {
+            JqxCalendar
+        }
+    }
+</script>
+
+<style>   
+</style>
\ No newline at end of file
diff --git a/calendar/disabled/main.js b/calendar/disabled/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/calendar/disabled/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/calendar/disabled/package.json b/calendar/disabled/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/calendar/disabled/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/calendar/displayweekendsstyle/App.vue b/calendar/displayweekendsstyle/App.vue
new file mode 100644
index 00000000..2b0262d5
--- /dev/null
+++ b/calendar/displayweekendsstyle/App.vue
@@ -0,0 +1,19 @@
+<template>
+  <JqxCalendar 
+  :width="220" :height="220" 
+  :enableOtherMonthDays="false" :enableWeekend="true"> 
+  </JqxCalendar>
+</template>
+
+    <script>
+    import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
+
+    export default {
+        components: {
+            JqxCalendar
+        }
+    }
+</script>
+
+<style>   
+</style>
\ No newline at end of file
diff --git a/calendar/displayweekendsstyle/main.js b/calendar/displayweekendsstyle/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/calendar/displayweekendsstyle/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/calendar/displayweekendsstyle/package.json b/calendar/displayweekendsstyle/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/calendar/displayweekendsstyle/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/calendar/events/App.vue b/calendar/events/App.vue
new file mode 100644
index 00000000..df1f483b
--- /dev/null
+++ b/calendar/events/App.vue
@@ -0,0 +1,46 @@
+<template>
+    <div style="float: left">
+        <JqxCalendar ref="myCalendar" style="margin-top: 3px" v-on:change="myCalendarEvent($event)" v-on:viewChange="myCalendarEvent($event)"
+                     :width="220" :height="220">
+        </JqxCalendar>
+        <div style="margin-left: 0; margin-top: 20px; float: left">
+            <div>
+                <span>Events:</span>
+                <JqxPanel ref="myPanel" :width="600" :height="250"></JqxPanel>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
+    import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
+
+    export default {
+        components: {
+            JqxCalendar,
+            JqxPanel
+        },
+        methods: {
+            myCalendarEvent: function (event) {
+                let date = event.args.date;
+                let view = event.args.view;
+                let viewFrom = view.from;
+                let viewTo = view.to;
+                this.$refs.myPanel.clearcontent();
+                if (event.type === 'viewChange') {
+                    this.$refs.myPanel.prepend('<div style="margin-top: 5px;">Event Type: viewChange<br/>Date: ' + date + '<br/>View: ' + viewFrom + ' - ' + viewTo + '</div>');
+                }
+                else {
+                    this.$refs.myPanel.prepend('<div style="margin-top: 5px;">Event Type: change<br/>Date: ' + date + '</div>');
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-panel {
+        border: none !important;
+    }
+</style>
\ No newline at end of file
diff --git a/calendar/events/main.js b/calendar/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/calendar/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/calendar/events/package.json b/calendar/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/calendar/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/calendar/firstdayoftheweek/App.vue b/calendar/firstdayoftheweek/App.vue
new file mode 100644
index 00000000..ce544870
--- /dev/null
+++ b/calendar/firstdayoftheweek/App.vue
@@ -0,0 +1,47 @@
+<template>
+    <div>
+        <JqxCalendar ref="myCalendar" style="margin-top: 3px"
+                     :width="220" :height="220" :enableTooltips="false">
+        </JqxCalendar>
+
+        <br /><br />
+        <div>Choose the first day of the week</div>
+        <br /><br />
+        <JqxDropDownList ref="myDropDownList" v-on:select="myDropDownListOnSelect($event)"
+                         :width="220" :height="25" :source="days"
+                         :selectedIndex="6" :autoDropDownHeight="true">
+        </JqxDropDownList>
+    </div>
+</template>
+
+<script>
+    import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
+    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
+
+    export default {
+        components: {
+            JqxCalendar,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
+            }
+        },
+        methods: {
+            myDropDownListOnSelect: function (event) {
+                let index = event.args.index;
+                if (index === 6) {
+                    index = -1;
+                }
+                this.$refs.myCalendar.firstDayOfWeek = index + 1;
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-panel {
+        border: none !important;
+    }
+</style>
\ No newline at end of file
diff --git a/calendar/firstdayoftheweek/main.js b/calendar/firstdayoftheweek/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/calendar/firstdayoftheweek/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/calendar/firstdayoftheweek/package.json b/calendar/firstdayoftheweek/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/calendar/firstdayoftheweek/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/calendar/fluidsize/App.vue b/calendar/fluidsize/App.vue
new file mode 100644
index 00000000..a5142923
--- /dev/null
+++ b/calendar/fluidsize/App.vue
@@ -0,0 +1,27 @@
+<template>
+<div style="min-width: 200px; min-height: 200px; width: 30%; height: 30%">
+  <JqxCalendar :width="'100%'" :height="'100%'"></JqxCalendar>
+</div>
+</template>
+
+    <script>
+    import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
+    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
+
+    export default {
+        components: {
+            JqxCalendar,
+            JqxDropDownList
+        }
+    }
+</script>
+
+<style>   
+    html, body {
+      width: 100vw;
+      height: 100vh;
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+    }
+</style>
\ No newline at end of file
diff --git a/calendar/fluidsize/main.js b/calendar/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/calendar/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/calendar/fluidsize/package.json b/calendar/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/calendar/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/calendar/hideothermonthdays/App.vue b/calendar/hideothermonthdays/App.vue
new file mode 100644
index 00000000..4620f7cf
--- /dev/null
+++ b/calendar/hideothermonthdays/App.vue
@@ -0,0 +1,16 @@
+<template>
+  <JqxCalendar :width="220" :height="220" :showOtherMonthDays="false"></JqxCalendar>
+</template>
+
+    <script>
+    import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
+
+    export default {
+        components: {
+            JqxCalendar
+        }
+    }
+</script>
+
+<style>   
+</style>
\ No newline at end of file
diff --git a/calendar/hideothermonthdays/main.js b/calendar/hideothermonthdays/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/calendar/hideothermonthdays/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/calendar/hideothermonthdays/package.json b/calendar/hideothermonthdays/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/calendar/hideothermonthdays/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/calendar/keyboardnavigation/App.vue b/calendar/keyboardnavigation/App.vue
new file mode 100644
index 00000000..1b3ddc70
--- /dev/null
+++ b/calendar/keyboardnavigation/App.vue
@@ -0,0 +1,31 @@
+<template>
+<div>
+  <JqxCalendar style="float: left" :width="220" :height="220"></JqxCalendar>
+
+  <div style="font-family: Verdana; font-size: 12px; width: 400px; margin-left: 20px; float: left">
+    <ul>
+        <li><b>Tab</b> - Like other widgets, the jqxCalendar widget receives focus by tabbing into it. Once focus is received, users will be able to use the keyboard to change the Calendar's selection. A second tab will take the user out of the date picker widget.</li>
+        <li><b>Shift+Tab</b> - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous focusable element in the tab order.</li>
+        <li><b>Up Arrow</b> and <b>Down Arrow</b> - goes to the same day of the week in the previous or next week respectively. If the user advances past the end of the month they continue into the next or previous month as appropriate.</li>
+        <li><b>Left Arrow</b> and <b>Right Arrow</b> - advances one day to the next.</li>
+        <li><b>Home</b> - Moves to the first day of the current month.</li>
+        <li><b>End</b> - Moves to the last day of the current month.</li>
+        <li><b>Page Up</b> - Moves to the same date in the previous month.</li>
+        <li><b>Page Down</b> - Moves to the same date in the next month.</li>
+    </ul>
+  </div>
+</div>
+</template>
+
+    <script>
+    import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
+
+    export default {
+        components: {
+            JqxCalendar
+        }
+    }
+</script>
+
+<style>   
+</style>
\ No newline at end of file
diff --git a/calendar/keyboardnavigation/main.js b/calendar/keyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/calendar/keyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/calendar/keyboardnavigation/package.json b/calendar/keyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/calendar/keyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/calendar/localization/App.vue b/calendar/localization/App.vue
new file mode 100644
index 00000000..7c327941
--- /dev/null
+++ b/calendar/localization/App.vue
@@ -0,0 +1,81 @@
+<template>
+    <div>
+        <JqxCalendar ref="myCalendar" style="float: left; margin-right: 20px"
+                     :width="220" :height="220" :enableTooltips="false">
+        </JqxCalendar>
+
+        <div style="float: left">
+            <div style="float: left; font-family: Verdana; font-size: 13px">
+                Choose Culture
+            </div>
+            <br /> <br />
+
+            <JqxDropDownList ref="myDropDownList" style="float: left" v-on:select="myDropDownListOnSelect($event)"
+                             :width="220" :height="25" :selectedIndex="3" :source="availableCultures">
+            </JqxDropDownList>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
+    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
+
+    export default {
+        components: {
+            JqxCalendar,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                availableCultures: [
+                    'Czech (Czech Republic)', 'German (Germany)', 'English (Canada)', 'English (United States)', 'French (France)',
+                    'Italian (Italy)', 'Japanese (Japan)', 'Hebrew (Israel)', 'Russian (Russia)', 'Croatian (Croatia)', 'Sanskrit (India)'
+                ]
+            }
+        },
+        methods: {
+            myDropDownListOnSelect: function (event) {
+                let index = event.args.index;
+                switch (index) {
+                    case 0:
+                        this.$refs.myCalendar.culture = 'cs-CZ';
+                        break;
+                    case 1:
+                        this.$refs.myCalendar.culture = 'de-DE';
+                        break;
+                    case 2:
+                        this.$refs.myCalendar.culture = 'en-CA';
+                        break;
+                    case 3:
+                        this.$refs.myCalendar.culture = 'en-US';
+                        break;
+                    case 4:
+                        this.$refs.myCalendar.culture = 'fr-FR';
+                        break;
+                    case 5:
+                        this.$refs.myCalendar.culture = 'it-IT';
+                        break;
+                    case 6:
+                        this.$refs.myCalendar.culture = 'ja-JP';
+                        break;
+                    case 7:
+                        this.$refs.myCalendar.culture = 'he-IL';
+                        break;
+                    case 8:
+                        this.$refs.myCalendar.culture = 'ru-RU';
+                        break;
+                    case 9:
+                        this.$refs.myCalendar.culture = 'hr';
+                        break;
+                    case 10:
+                        this.$refs.myCalendar.culture = 'sa-IN';
+                        break;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/calendar/localization/main.js b/calendar/localization/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/calendar/localization/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/calendar/localization/package.json b/calendar/localization/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/calendar/localization/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/calendar/rangeselection/App.vue b/calendar/rangeselection/App.vue
new file mode 100644
index 00000000..92aea262
--- /dev/null
+++ b/calendar/rangeselection/App.vue
@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <JqxCalendar ref="myCalendar" @change="myCalendarOnChange($event)"
+                     :width="220" :height="220"
+                     :selectionMode="'range'" :value="value">
+        </JqxCalendar>
+
+        <div ref="log"></div>
+    </div>
+</template>
+
+<script>
+    import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
+
+    export default {
+        components: {
+            JqxCalendar
+        },
+        data: function () {
+            return {
+                value: new Date(2016, 7, 7)
+            }
+        },
+        mounted: function () {
+            let date1 = new Date();
+            date1.setFullYear(2016, 7, 7);
+            let date2 = new Date();
+            date2.setFullYear(2016, 7, 15);
+            this.$refs.myCalendar.setRange(date1, date2);
+        },
+        methods: {
+            myCalendarOnChange: function (event) {
+                let selection = event.args.range;
+                this.$refs.log.innerHTML = '<div>From: ' + selection.from.toLocaleDateString() + ' <br/>To: ' + selection.to.toLocaleDateString() + '</div>';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/calendar/rangeselection/main.js b/calendar/rangeselection/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/calendar/rangeselection/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/calendar/rangeselection/package.json b/calendar/rangeselection/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/calendar/rangeselection/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/calendar/restrictdaterange/App.vue b/calendar/restrictdaterange/App.vue
new file mode 100644
index 00000000..78462fe4
--- /dev/null
+++ b/calendar/restrictdaterange/App.vue
@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <div>The navigation is restricted from 01/01/2010 to 01/01/2020</div>
+        <br />
+        <JqxCalendar :width="220" :height="220"
+                     :min="min" :max="max">
+        </JqxCalendar>
+    </div>
+</template>
+
+<script>
+    import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
+
+    export default {
+        components: {
+            JqxCalendar
+        },
+        data: function () {
+            return {
+                min: new Date(2010, 0, 1),
+                max: new Date(2019, 11, 31)
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/calendar/restrictdaterange/main.js b/calendar/restrictdaterange/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/calendar/restrictdaterange/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/calendar/restrictdaterange/package.json b/calendar/restrictdaterange/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/calendar/restrictdaterange/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/calendar/restricteddates/App.vue b/calendar/restricteddates/App.vue
new file mode 100644
index 00000000..a635968d
--- /dev/null
+++ b/calendar/restricteddates/App.vue
@@ -0,0 +1,33 @@
+<template>
+    <JqxCalendar :width="220" :height="220" :restrictedDates="restrictedDates">
+    </JqxCalendar>
+</template>
+
+<script>
+    import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
+
+    export default {
+        components: {
+            JqxCalendar
+        },
+        data: function () {
+            return {
+                restrictedDates: this.restrictedDates
+            }
+        },
+        beforeCreate: function () {
+            let date = new Date();
+            date.setHours(0, 0, 0);
+            date.setDate(2);
+            let date2 = new Date();
+            date2.setHours(0, 0, 0);
+            date2.setDate(3);
+            this.restrictedDates = [];
+            this.restrictedDates.push(date);
+            this.restrictedDates.push(date2);
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/calendar/restricteddates/main.js b/calendar/restricteddates/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/calendar/restricteddates/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/calendar/restricteddates/package.json b/calendar/restricteddates/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/calendar/restricteddates/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/calendar/righttoleftlayout/App.vue b/calendar/righttoleftlayout/App.vue
new file mode 100644
index 00000000..16bf6daa
--- /dev/null
+++ b/calendar/righttoleftlayout/App.vue
@@ -0,0 +1,19 @@
+<template>
+    <JqxCalendar
+            :width="220" :height="220" 
+            :rtl="true" :culture="'he-IL'">
+    </JqxCalendar>
+</template>
+
+    <script>
+    import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
+
+    export default {
+        components: {
+            JqxCalendar
+        }
+    }
+</script>
+
+<style>   
+</style>
\ No newline at end of file
diff --git a/calendar/righttoleftlayout/main.js b/calendar/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/calendar/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/calendar/righttoleftlayout/package.json b/calendar/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/calendar/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/calendar/showweekoftheyear/App.vue b/calendar/showweekoftheyear/App.vue
new file mode 100644
index 00000000..08e48171
--- /dev/null
+++ b/calendar/showweekoftheyear/App.vue
@@ -0,0 +1,19 @@
+<template>
+    <JqxCalendar
+            :width="220" :height="220" 
+            :showWeekNumbers="true"  :rowHeaderWidth="25">
+    </JqxCalendar>
+</template>
+
+    <script>
+    import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
+
+    export default {
+        components: {
+            JqxCalendar
+        }
+    }
+</script>
+
+<style>   
+</style>
\ No newline at end of file
diff --git a/calendar/showweekoftheyear/main.js b/calendar/showweekoftheyear/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/calendar/showweekoftheyear/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/calendar/showweekoftheyear/package.json b/calendar/showweekoftheyear/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/calendar/showweekoftheyear/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/calendar/specialdates/App.vue b/calendar/specialdates/App.vue
new file mode 100644
index 00000000..f8783c3b
--- /dev/null
+++ b/calendar/specialdates/App.vue
@@ -0,0 +1,32 @@
+<template>
+    <JqxCalendar ref="myCalendar"
+            :width="220" :height="220" 
+            :enableTooltips="true">
+    </JqxCalendar>
+</template>
+
+    <script>
+    import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
+
+    export default {
+        components: {
+            JqxCalendar
+        },
+        mounted: function() {
+            let date1 = new Date();
+            let date2 = new Date();
+            let date3 = new Date();
+
+            date1.setDate(5);
+            date2.setDate(15);
+            date3.setDate(16);
+
+            this.$refs.myCalendar.addSpecialDate(date1, '', 'Special Date1');
+            this.$refs.myCalendar.addSpecialDate(date2, '', 'Special Date2');
+            this.$refs.myCalendar.addSpecialDate(date3, '', 'Special Date3');
+        }
+    }
+</script>
+
+<style>   
+</style>
\ No newline at end of file
diff --git a/calendar/specialdates/main.js b/calendar/specialdates/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/calendar/specialdates/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/calendar/specialdates/package.json b/calendar/specialdates/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/calendar/specialdates/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/calendar/twowaydatabinding/App.vue b/calendar/twowaydatabinding/App.vue
new file mode 100644
index 00000000..6884736f
--- /dev/null
+++ b/calendar/twowaydatabinding/App.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <div>{{ date.toString() }}</div><br />
+
+        <JqxCalendar :width="220" :height="220" v-model="date"/>
+    </div>
+</template>
+
+<script>
+    import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
+
+    export default {
+        components: {
+            JqxCalendar
+        },
+        data: function () {
+            return {
+                date: new Date()
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/calendar/twowaydatabinding/main.js b/calendar/twowaydatabinding/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/calendar/twowaydatabinding/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/calendar/twowaydatabinding/package.json b/calendar/twowaydatabinding/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/calendar/twowaydatabinding/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/100stackedareaseries/App.vue b/chart/100stackedareaseries/App.vue
new file mode 100644
index 00000000..d0e680e9
--- /dev/null
+++ b/chart/100stackedareaseries/App.vue
@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <JqxChart style="width: 850px; height: 500px"
+                  :title="'Web Traffic Analysis'" :description="'Unique monthly site visitors (percentage stacked)'"
+                  :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+                  :valueAxis="valueAxis" :colorScheme="'scheme06'" :seriesGroups="seriesGroups">
+        </JqxChart>
+    </div>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                padding: { left: 10, top: 5, right: 10, bottom: 5 },
+                xAxis:
+                    {
+                        type: 'date',
+                        baseUnit: 'day',
+                        dataField: 'Date',
+                        valuesOnTicks: true,
+                        labels: {
+                            formatFunction: (value) => {
+                                return value.getDate();
+                            }
+                        },
+                        gridLines: { visible: false },
+                        toolTipFormatFunction: (value) => {
+                            return value.getDate() + '-' + this.months[value.getMonth()] + '-' + value.getFullYear();
+                        }
+                    },
+                valueAxis:
+                    {
+                        title: { text: 'Daily visitors' },
+                        labels: { horizontalAlignment: 'right' }
+                    },
+                seriesGroups:
+                    [
+                        {
+                            type: 'stackedarea100',
+                            series: [
+                                { dataField: 'SearchNonPaid', displayText: 'Organic Search Traffic' },
+                                { dataField: 'SearchPaid', displayText: 'Paid Search Traffic' },
+                                { dataField: 'Referral', displayText: 'Referral Traffic' }
+                            ]
+                        }
+                    ]
+            }
+        },
+        beforeCreate: function () {
+            this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+            this.source =
+                {
+                    datatype: 'tab',
+                    datafields: [
+                        { name: 'Date' },
+                        { name: 'Referral' },
+                        { name: 'SearchPaid' },
+                        { name: 'SearchNonPaid' }
+                    ],
+                    url: '../sampledata/website_analytics.txt'
+                };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/100stackedareaseries/main.js b/chart/100stackedareaseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/100stackedareaseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/100stackedareaseries/package.json b/chart/100stackedareaseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/100stackedareaseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/100stackedcolumns/App.vue b/chart/100stackedcolumns/App.vue
new file mode 100644
index 00000000..3bc6dc97
--- /dev/null
+++ b/chart/100stackedcolumns/App.vue
@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <JqxChart style="width: 850px; height: 500px"
+                  :title="'Fitness & exercise weekly scorecard'" :description="'Time spent in vigorous exercise by activity'"
+                  :showLegend="true" :enableAnimations="true" :padding="padding"
+                  :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+                  :valueAxis="valueAxis" :colorScheme="'scheme04'" :seriesGroups="seriesGroups">
+        </JqxChart>
+    </div>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Day: 'Monday', Running: 30, Swimming: 5, Cycling: 25, Riding: 10 },
+                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Riding: 15 },
+                    { Day: 'Wednesday', Running: 30, Swimming: 5, Cycling: 25, Riding: 25 },
+                    { Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45, Riding: 15 },
+                    { Day: 'Friday', Running: 5, Swimming: 20, Cycling: 25, Riding: 5 },
+                    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Riding: 30 },
+                    { Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 5, Riding: 20 }
+                ],
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                xAxis:
+                    {
+                        dataField: 'Day',
+                        tickMarks: {
+                            visible: true,
+                            interval: 1,
+                            color: '#BCBCBC'
+                        },
+                        gridLines: {
+                            visible: true,
+                            interval: 1,
+                            color: '#BCBCBC'
+                        },
+                        axisSize: 'auto'
+                    },
+                valueAxis:
+                    {
+                        unitInterval: 10,
+                        title: { text: 'Time in minutes' },
+                        tickMarks: { color: '#BCBCBC' },
+                        gridLines: { color: '#BCBCBC' },
+                        labels: {
+                            horizontalAlignment: 'right',
+                            formatSettings: { sufix: '%' }
+                        }
+                    },
+                seriesGroups:
+                    [
+                        {
+                            type: 'stackedcolumn100',
+                            columnsGapPercent: 100,
+                            seriesGapPercent: 5,
+                            series: [
+                                { dataField: 'Running', displayText: 'Running' },
+                                { dataField: 'Swimming', displayText: 'Swimming' },
+                                { dataField: 'Cycling', displayText: 'Cycling' }
+                            ]
+                        }
+                    ]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/100stackedcolumns/main.js b/chart/100stackedcolumns/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/100stackedcolumns/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/100stackedcolumns/package.json b/chart/100stackedcolumns/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/100stackedcolumns/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/100stackedlineseries/App.vue b/chart/100stackedlineseries/App.vue
new file mode 100644
index 00000000..5988f260
--- /dev/null
+++ b/chart/100stackedlineseries/App.vue
@@ -0,0 +1,81 @@
+<template>
+    <div>
+        <JqxChart style="width: 850px; height: 500px"
+                  :title="'Web Site Traffic Analysis'" :description="'Monthly unique visitors (percentage stacked)'"
+                  :showLegend="true" :enableAnimations="true" :padding="padding"
+                  :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+                  :valueAxis="valueAxis" :colorScheme="'scheme04'" :seriesGroups="seriesGroups">
+        </JqxChart>
+    </div>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+
+                titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
+                padding: { left: 5, top: 5, right: 15, bottom: 5 },
+                xAxis:
+                    {
+                        type: 'date',
+                        baseUnit: 'day',
+                        textRotationAngle: 0,
+                        dataField: 'Date',
+                        labels:
+                            {
+                                formatFunction: (value) => {
+                                    return value.getDate();
+                                }
+                            },
+                        toolTipFormatFunction: (value) => {
+                            return value.getDate() + '-' + this.months[value.getMonth()] + '-' + value.getFullYear();
+                        },
+                        valuesOnTicks: false,
+                        gridLines: { interval: 31 }
+                    },
+                valueAxis:
+                    {
+                        title: { text: 'Daily Visits<br>' },
+                        labels: { horizontalAlignment: 'right' }
+                    },
+                seriesGroups:
+                    [
+                        {
+                            type: 'stackedline100',
+                            series: [
+                                { dataField: 'Referral', displayText: 'Referral Traffic' },
+                                { dataField: 'SearchPaid', displayText: 'Paid Search Traffic' },
+                                { dataField: 'SearchNonPaid', displayText: 'Organic Search Traffic' }
+                            ]
+                        }
+                    ]
+            }
+        },
+        beforeCreate: function () {
+            this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+            this.source =
+                {
+                    datatype: 'tab',
+                    datafields: [
+                        { name: 'Date' },
+                        { name: 'Referral' },
+                        { name: 'SearchPaid' },
+                        { name: 'SearchNonPaid' }
+                    ],
+                    url: '../sampledata/website_analytics.txt'
+                };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/100stackedlineseries/main.js b/chart/100stackedlineseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/100stackedlineseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/100stackedlineseries/package.json b/chart/100stackedlineseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/100stackedlineseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/alternatingbackgroundcolor/App.vue b/chart/alternatingbackgroundcolor/App.vue
new file mode 100644
index 00000000..0ca2e4dd
--- /dev/null
+++ b/chart/alternatingbackgroundcolor/App.vue
@@ -0,0 +1,114 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'Weather in Geneva, Switzerland'" :description="'Climatological Information about Geneva'"
+                  :showLegend="true" :enableAnimations="true" :enableCrosshairs="true" :padding="padding"
+                  :titlePadding="titlePadding" :source="data" :xAxis="xAxis"
+                  :valueAxis="valueAxis" :colorScheme="'scheme05'" :seriesGroups="seriesGroups">
+        </JqxChart>
+
+        <br />
+        <br />
+
+        <JqxCheckBox ref="checkboxSwapAxis" v-on:change="checkboxSwapAxisOnChange($event)" style="margin-top: 5px">
+            Swap X and Y axes
+        </JqxCheckBox>
+    </div>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+
+    export default {
+        components: {
+            JqxChart,
+            JqxCheckBox
+        },
+        data: function () {
+            return {
+                data: [
+                    { 'month': 'Jan', 'min': -1.9, 'max': 3.7, 'avg': 0.2 },
+                    { 'month': 'Feb', 'min': -0.9, 'max': 5.9, 'avg': 1.1 },
+                    { 'month': 'Mar', 'min': 0.8, 'max': 9.8, 'avg': 4.9 },
+                    { 'month': 'Apr', 'min': 4.1, 'max': 13.9, 'avg': 8.7 },
+                    { 'month': 'May', 'min': 8.0, 'max': 18.4, 'avg': 13.1 },
+                    { 'month': 'Jun', 'min': 11.3, 'max': 22.2, 'avg': 16.6 },
+                    { 'month': 'Jul', 'min': 13.3, 'max': 25.3, 'avg': 18.4 },
+                    { 'month': 'Aug', 'min': 13.0, 'max': 24.4, 'avg': 17.6 },
+                    { 'month': 'Sep', 'min': 10.3, 'max': 20.8, 'avg': 14.3 },
+                    { 'month': 'Oct', 'min': 6.6, 'max': 14.9, 'avg': 9.2 },
+                    { 'month': 'Nov', 'min': 2.1, 'max': 8.4, 'avg': 4.2 },
+                    { 'month': 'Dec', 'min': -0.5, 'max': 4.5, 'avg': 1.5 }
+                ],
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                padding: { left: 10, top: 5, right: 10, bottom: 5 },
+                xAxis:
+                    {
+                        textRotationAngle: 0,
+                        dataField: 'month',
+                        unitInterval: 1,
+                        tickMarks: {
+                            visible: true,
+                            step: 1,
+                            color: '#888888'
+                        },
+                        gridLines: {
+                            visible: true,
+                            step: 1,
+                            color: '#888888'
+                        }
+                    },
+                valueAxis:
+                    {
+                        unitInterval: 5,
+                        title: { text: 'Temperature [C]' },
+                        tickMarks: { color: '#888888' },
+                        minValue: -5,
+                        maxValue: 30,
+                        alternatingBackgroundColor: '#E5E5E5',
+                        alternatingBackgroundColor2: '#F5F5F5',
+                        alternatingBackgroundOpacity: 0.5
+                    },
+                seriesGroups:
+                    [
+                        {
+                            type: 'rangecolumn',
+                            columnsGapPercent: 100,
+                            toolTipFormatFunction: this.toolTipCustomFormatFn,
+                            series: [
+                                { dataFieldTo: 'max', displayText: 'Temperature Range', dataFieldFrom: 'min', opacity: 1 }
+                            ]
+                        },
+                        {
+                            type: 'spline',
+                            toolTipFormatFunction: this.toolTipCustomFormatFn,
+                            series: [
+                                { dataField: 'avg', displayText: 'Average Temperature', opacity: 1, lineWidth: 2 }
+                            ]
+                        }
+                    ]
+            }
+        },
+        methods: {
+            toolTipCustomFormatFn: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
+                let dataItem = this.data[itemIndex];
+                return '<DIV style="text-align:left"><b>Month: ' +
+                    categoryValue + '</b><br />Min: ' +
+                    dataItem.min + '&deg;<br />Max: ' +
+                    dataItem.max + '&deg;<br />Average: ' +
+                    dataItem.avg + '&deg;</DIV>';
+            },
+            checkboxSwapAxisOnChange: function (event) {
+                let swap = event.args.checked;
+                for (let i = 0; i < this.$refs.myChart.seriesGroups.length; i++) {
+                    this.$refs.myChart.seriesGroups[i].orientation = swap ? 'horizontal' : 'vertical';
+                }
+                this.$refs.myChart.refresh();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/alternatingbackgroundcolor/main.js b/chart/alternatingbackgroundcolor/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/alternatingbackgroundcolor/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/alternatingbackgroundcolor/package.json b/chart/alternatingbackgroundcolor/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/alternatingbackgroundcolor/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/areaseries/App.vue b/chart/areaseries/App.vue
new file mode 100644
index 00000000..5be29041
--- /dev/null
+++ b/chart/areaseries/App.vue
@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'U.S. Stock Market Index Performance'" :description="'NASDAQ Composite compared to S&P 500'"
+                  :showLegend="true" :enableAnimations="true" :enableCrosshairs="true" :padding="padding"
+                  :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+                  :valueAxis="valueAxis" :colorScheme="'scheme05'" :seriesGroups="seriesGroups">
+        </JqxChart>
+    </div>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                padding: { left: 10, top: 5, right: 10, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Date',
+                    type: 'date',
+                    baseUnit: 'month',
+                    minValue: new Date(2014, 0, 1),
+                    maxValue: new Date(2014, 11, 1),
+                    valuesOnTicks: true,
+                    labels: {
+                        angle: -45,
+                        rotationPoint: 'topright',
+                        offset: { x: 0, y: -15 },
+                        formatFunction: (value) => {
+                            return this.months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
+                        },
+                    },
+                    toolTipFormatFunction: (value) => {
+                        return value.getDate() + '-' + this.months[value.getMonth()] + '-' + value.getFullYear();
+                    }
+                },
+                valueAxis: {
+                    title: { text: 'Daily Closing Price<br>' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'area',
+                        alignEndPointsWithIntervals: true,
+                        series: [
+                            { dataField: 'NASDAQ', displayText: 'NASDAQ', opacity: 0.7 },
+                            { dataField: 'S&P 500', displayText: 'S&P 500', opacity: 0.8 }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+            this.source =
+                {
+                    datatype: 'csv',
+                    datafields: [
+                        { name: 'Date' },
+                        { name: 'S&P 500' },
+                        { name: 'NASDAQ' }
+                    ],
+                    url: '../sampledata/nasdaq_vs_sp500.txt'
+                };
+
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/areaseries/main.js b/chart/areaseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/areaseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/areaseries/package.json b/chart/areaseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/areaseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/areasplineseries/App.vue b/chart/areasplineseries/App.vue
new file mode 100644
index 00000000..98aa56d2
--- /dev/null
+++ b/chart/areasplineseries/App.vue
@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'U.S. History Home Prices (1950-2010)'" :description="'Source: http://www.econ.yale.edu/~shiller/data.htm'"
+                  :showLegend="true" :enableAnimations="true" :padding="padding"
+                  :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+                  :colorScheme="'scheme05'" :seriesGroups="seriesGroups">
+        </JqxChart>
+    </div>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                padding: { left: 15, top: 5, right: 20, bottom: 5 },
+                titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Year',
+                    minValue: 1950,
+                    maxValue: 2010,
+                    unitInterval: 5,
+                    valuesOnTicks: true
+                },
+                seriesGroups: [
+                    {
+                        alignEndPointsWithIntervals: false,
+                        type: 'splinearea',
+                        valueAxis:
+                            {
+                                visible: true,
+                                unitInterval: 20,
+                                title: { text: 'Index Value' },
+                                labels: {
+                                    horizontalAlignment: 'right',
+                                    formatSettings: { decimalPlaces: 0 }
+                                }
+                            },
+                        series: [
+                            { dataField: 'HPI', displayText: 'Real Home Price Index', opacity: 0.7 },
+                            { dataField: 'BuildCost', displayText: 'Building Cost Index', opacity: 0.9 }
+                        ]
+                    },
+                    {
+                        type: 'spline',
+                        alignEndPointsWithIntervals: false,
+                        valueAxis:
+                            {
+                                title: { text: 'Interest Rate' },
+                                position: 'right',
+                                unitInterval: 0.01,
+                                maxValue: 0.2,
+                                labels: { formatSettings: { decimalPlaces: 2 } },
+                                tickMarks: {
+                                    visible: true,
+                                    interval: 0.005,
+                                },
+                                gridLines: {
+                                    visible: false,
+                                    interval: 0.01
+                                }
+                            },
+                        series: [
+                            { dataField: 'Rate', displayText: 'Interest Rate', opacity: 1.0, lineWidth: 4, dashStyle: '4,4' }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    datatype: 'tab',
+                    datafields: [
+                        { name: 'Year' },
+                        { name: 'HPI' },
+                        { name: 'BuildCost' },
+                        { name: 'Population' },
+                        { name: 'Rate' }
+                    ],
+                    url: '../sampledata/homeprices.txt'
+                };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/areasplineseries/main.js b/chart/areasplineseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/areasplineseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/areasplineseries/package.json b/chart/areasplineseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/areasplineseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/axiscustomoffsets/App.vue b/chart/axiscustomoffsets/App.vue
new file mode 100644
index 00000000..5d6db0a1
--- /dev/null
+++ b/chart/axiscustomoffsets/App.vue
@@ -0,0 +1,220 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'Custom labels, grid lines and tick marks offsets'" :description="''"
+                  :enableAnimations="false" :padding="padding"
+                  :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+                  :valueAxis="valueAxis" :seriesGroups="seriesGroups">
+        </JqxChart>
+
+        <table>
+            <tbody>
+                <tr>
+                    <td style="width: 300px"><b>xAxis settings</b></td>
+                    <td style="width: 300px"><b>valueAxis settings</b></td>
+                </tr>
+                <tr>
+                    <td>
+                        <p>Label, tick marks & grid lines visibility:</p>
+                        <JqxDropDownList ref="dropDownLabelsVisibility_xAxis" v-on:change="dropDownLabelsVisibility_xAxisOnChange($event)"
+                                         :width="235" :height="25" :selectedIndex="0"
+                                         :dropDownHeight="80" :source="visibilityOptions">
+                        </JqxDropDownList>
+                    </td>
+                    <td>
+                        <p>Label, tick marks & grid lines visibility:</p>
+                        <JqxDropDownList ref="dropDownLabelsVisibility_valueAxis" v-on:change="dropDownLabelsVisibility_valueAxisOnChange($event)"
+                                         :width="235" :height="25" :selectedIndex="0"
+                                         :dropDownHeight="80" :source="visibilityOptions">
+                        </JqxDropDownList>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <p>Custom positions:</p>
+                        <JqxInput ref="inputCustomPosition_xAxis" :width="50" :height="22"></JqxInput>
+                        <JqxButton ref="btnAddCustomPosition_xAxis" v-on:click="btnAddCustomPosition_xAxisOnClick()">Add</JqxButton>
+                        <JqxButton ref="btnRemoveCustomPosition_xAxis" v-on:click="btnRemoveCustomPosition_xAxisOnClick()">Remove</JqxButton>
+                        <JqxListBox ref="listboxCustomPositions_xAxis" style="margin-top: 10px"
+                                    :width="235" :height="80" :source="[10, 20]">
+                        </JqxListBox>
+                    </td>
+                    <td>
+                        <p>Custom positions:</p>
+                        <JqxInput ref="inputCustomPosition_valueAxis" :width="50" :height="22"></JqxInput>
+                        <JqxButton ref="btnAddCustomPosition_valueAxis" v-on:click="btnAddCustomPosition_valueAxisOnClick()">Add</JqxButton>
+                        <JqxButton ref="btnRemoveCustomPosition_valueAxis" v-on:click="btnRemoveCustomPosition_valueAxisOnClick()">Remove</JqxButton>
+                        <JqxListBox ref="listboxCustomPositions_valueAxis" style="margin-top: 10px"
+                                    :width="235" :height="80" :source="[10, 20]">
+                        </JqxListBox>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
+    import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+    import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
+
+    export default {
+        components: {
+            JqxChart,
+            JqxDropDownList,
+            JqxInput,
+            JqxButton,
+            JqxListBox
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { a: 0.1535, b: 0.5 },
+                    { a: 0.48, b: 20.5 },
+                    { a: 10, b: 60 },
+                    { a: 100, b: 80 },
+                    { a: 200, b: 90 },
+                    { a: 245.11, b: 100.13 },
+                    { a: 300.13, b: 150.13 },
+                    { a: 340, b: 200 }
+                ],
+                visibilityOptions: [true, false, 'custom'],
+                padding: { left: 5, top: 5, right: 15, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'a',
+                    logarithmicScale: true,
+                    logarithmicScaleBase: 2,
+                    labels: {
+                        visible: true,
+                        custom: [{ value: 10 }, { value: 20 }]
+                    },
+                    gridLines:
+                        {
+                            visible: true,
+                            custom: [{ value: 10 }, { value: 20 }]
+                        },
+                    tickMarks:
+                        {
+                            visible: true,
+                            custom: [{ value: 10 }, { value: 20 }]
+                        },
+                    flip: false
+                },
+                valueAxis: {
+                    logarithmicScale: true,
+                    logarithmicScaleBase: 2,
+                    title: { text: '' },
+                    labels: {
+                        horizontalAlignment: 'right',
+                        custom: [{ value: 10 }, { value: 20 }]
+                    },
+                    gridLines: {
+                        custom: [{ value: 10 }, { value: 20 }]
+                    },
+                    tickMarks: {
+                        custom: [{ value: 10 }, { value: 20 }]
+                    },
+                    flip: false
+                },
+                seriesGroups:
+                    [
+                        {
+                            type: 'scatter',
+                            series: [
+                                { dataField: 'a', displayText: 'A', symbolType: 'diamond', symbolSize: 10 },
+                                { dataField: 'b', displayText: 'B', symbolType: 'triangle_up', symbolSize: 10 }
+                            ]
+                        }
+                    ]
+            }
+        },
+        methods: {
+            dropDownLabelsVisibility_xAxisOnChange: function (event) {
+                let value = event.args.item.value;
+                this.$refs.myChart.xAxis.labels.visible = value == 'false' ? false : value;
+                this.$refs.myChart.xAxis.gridLines.visible = value == 'false' ? false : value;
+                this.$refs.myChart.xAxis.tickMarks.visible = value == 'false' ? false : value;
+                this.$refs.myChart.refresh();
+            },
+            dropDownLabelsVisibility_valueAxisOnChange: function (event) {
+                let value = event.args.item.value;
+                this.$refs.myChart.valueAxis.labels.visible = value == 'false' ? false : value;
+                this.$refs.myChart.valueAxis.gridLines.visible = value == 'false' ? false : value;
+                this.$refs.myChart.valueAxis.tickMarks.visible = value == 'false' ? false : value;
+                this.$refs.myChart.refresh();
+            },
+            btnAddCustomPosition_xAxisOnClick: function () {
+                let value = this.$refs.inputCustomPosition_xAxis.val();
+                if (!isNaN(parseFloat(value))) {
+                    this.$refs.listboxCustomPositions_xAxis.addItem(parseFloat(value));
+                    let items = this.$refs.listboxCustomPositions_xAxis.getItems();
+                    let customOffsets = [];
+                    for (let i = 0; i < items.length; i++) {
+                        customOffsets.push({ value: parseFloat(items[i].value) });
+                    }
+                    this.$refs.myChart.xAxis.labels.custom = customOffsets;
+                    this.$refs.myChart.xAxis.gridLines.custom = customOffsets;
+                    this.$refs.myChart.xAxis.tickMarks.custom = customOffsets;
+                    this.$refs.myChart.refresh();
+                }
+            },
+            btnAddCustomPosition_valueAxisOnClick: function () {
+                let value = this.$refs.inputCustomPosition_valueAxis.val();
+                if (!isNaN(parseFloat(value))) {
+                    this.$refs.listboxCustomPositions_valueAxis.addItem(parseFloat(value));
+                    let items = this.$refs.listboxCustomPositions_valueAxis.getItems();
+                    let customOffsets = [];
+                    for (let i = 0; i < items.length; i++) {
+                        customOffsets.push({ value: parseFloat(items[i].value) });
+                    }
+                    this.$refs.myChart.valueAxis.labels.custom = customOffsets;
+                    this.$refs.myChart.valueAxis.gridLines.custom = customOffsets;
+                    this.$refs.myChart.valueAxis.tickMarks.custom = customOffsets;
+                    this.$refs.myChart.refresh();
+                }
+            },
+            btnRemoveCustomPosition_xAxisOnClick: function () {
+                let idx = this.$refs.listboxCustomPositions_xAxis.selectedIndex;
+                if (idx == -1)
+                    return;
+                this.$refs.listboxCustomPositions_xAxis.removeAt(idx);
+                let items = this.$refs.listboxCustomPositions_xAxis.getItems();
+                let customOffsets = [];
+                for (let i = 0; i < items.length; i++) {
+                    customOffsets.push({ value: parseFloat(items[i].value) });
+                }
+                this.$refs.myChart.xAxis.labels.custom = customOffsets;
+                this.$refs.myChart.xAxis.gridLines.custom = customOffsets;
+                this.$refs.myChart.xAxis.tickMarks.custom = customOffsets;
+                this.$refs.myChart.refresh();
+            },
+            btnRemoveCustomPosition_valueAxisOnClick: function () {
+                let idx = this.$refs.listboxCustomPositions_valueAxis.selectedIndex;
+                if (idx == -1)
+                    return;
+                this.$refs.listboxCustomPositions_valueAxis.removeAt(idx);
+                let items = this.$refs.listboxCustomPositions_valueAxis.getItems();
+                let customOffsets = [];
+                for (let i = 0; i < items.length; i++) {
+                    customOffsets.push({ value: parseFloat(items[i].value) });
+                }
+                this.$refs.myChart.valueAxis.labels.custom = customOffsets;
+                this.$refs.myChart.valueAxis.gridLines.custom = customOffsets;
+                this.$refs.myChart.valueAxis.tickMarks.custom = customOffsets;
+                this.$refs.myChart.refresh();
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        width: fit-content;
+        display: inline-block;
+        margin: 2px;
+    }
+</style>
\ No newline at end of file
diff --git a/chart/axiscustomoffsets/main.js b/chart/axiscustomoffsets/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/axiscustomoffsets/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/axiscustomoffsets/package.json b/chart/axiscustomoffsets/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/axiscustomoffsets/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/axiscustomoffsetsandcolorbands/App.vue b/chart/axiscustomoffsetsandcolorbands/App.vue
new file mode 100644
index 00000000..1fef0b5e
--- /dev/null
+++ b/chart/axiscustomoffsetsandcolorbands/App.vue
@@ -0,0 +1,91 @@
+<template>
+    <JqxChart ref="myChart" style="width: 850px; height: 500px"
+              :title="'Custom labels, grid lines and tick marks offsets'"
+              :description="'This example demonstrates how to use labels, tick marks and grid lines at custom offsets'"
+              :enableAnimations="false" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { a: 0.1535, b: 0.5 },
+                    { a: 0.48, b: 20.5 },
+                    { a: 10, b: 60 },
+                    { a: 100, b: 80 },
+                    { a: 200, b: 90 },
+                    { a: 245.11, b: 100.13 },
+                    { a: 300.13, b: 150.13 },
+                    { a: 340, b: 200 }
+                ],
+                padding: { left: 5, top: 5, right: 15, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'a',
+                    logarithmicScale: true,
+                    logarithmicScaleBase: 2,
+                    labels: {
+                        visible: 'custom', // show only custom labels. Change to true to show all labels or false to hide all
+                        custom: [{ value: 10 }, { value: 20 }, { value: 'custom label at offset 100', offset: 100 }], // an array of items representing custom labels
+                        // if the item has an offset property, the item is rendered at that offset, otherwise the value is mapped to an offset
+                        // corresponding to its position on the axis scale. If an item has both a value and an offset property, the value
+                        // property is not mappped to an offset, and instead it's just used to display the label
+                        // the format function shows how to format the labels before they are displayed
+                        formatFunction: (value) => {
+                            return "{" + value + "}";
+                        }
+                    },
+                    gridLines:
+                        {
+                            visible: 'custom', // show only custom grid lines. Change to true to show all grid lines or false to hide all
+                            custom: [{ value: 10 }, { value: 20 }, { offset: 100 }]
+                        },
+                    tickMarks:
+                        {
+                            visible: 'custom', // show only custom tick marks. Change to true to show all tick marks or false to hide all
+                            custom: [{ value: 10 }, { value: 20 }, { offset: 100 }]
+                        },
+                    flip: false
+                },
+                valueAxis: {
+                    logarithmicScale: true,
+                    logarithmicScaleBase: 2,
+                    title: { text: 'Value' },
+                    labels: {
+                        horizontalAlignment: 'right',
+                        custom: [{ value: 10 }, { value: 20 }, { offset: 90, value: 'custom' }]
+                    },
+                    gridLines: {
+                        custom: [{ value: 10 }, { value: 20 }, { offset: 90 }]
+                    },
+                    tickMarks: {
+                        custom: [{ value: 10 }, { value: 20 }, { offset: 90 }]
+                    },
+                    flip: false
+                },
+                seriesGroups: [
+                    {
+                        type: 'scatter',
+                        series: [
+                            { dataField: 'a', displayText: 'A', symbolType: 'diamond', symbolSize: 10 },
+                            { dataField: 'b', displayText: 'B', symbolType: 'triangle_up', symbolSize: 10 }
+                        ],
+                        bands: [{ from: 64, to: 256, color: 'red', opacity: 0.2 }]
+                    }
+                ]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/axiscustomoffsetsandcolorbands/main.js b/chart/axiscustomoffsetsandcolorbands/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/axiscustomoffsetsandcolorbands/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/axiscustomoffsetsandcolorbands/package.json b/chart/axiscustomoffsetsandcolorbands/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/axiscustomoffsetsandcolorbands/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/axisoffsettovalue/App.vue b/chart/axisoffsettovalue/App.vue
new file mode 100644
index 00000000..0cb113ee
--- /dev/null
+++ b/chart/axisoffsettovalue/App.vue
@@ -0,0 +1,112 @@
+<template>
+    <div>
+        <div style="width: 850px; height: 500px" @mousemove="myChartOnMousemove($event)">
+            <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                      @click="myChartOnClick($event)"
+                      :title="'Custom labels, grid lines and tick marks offsets'"
+                      :description="'This example demonstrates how to use labels, tick marks and grid lines at custom offsets'"
+                      :enableAnimations="false" :padding="padding"
+                      :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+                      :valueAxis="valueAxis" :seriesGroups="seriesGroups">
+            </JqxChart>
+        </div>
+
+        <div ref="eventText" style="width:600px; height: 30px"></div>
+    </div>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { a: 0.1535, b: 0.5 },
+                    { a: 0.48, b: 20.5 },
+                    { a: 10, b: 60 },
+                    { a: 100, b: 80 },
+                    { a: 200, b: 90 },
+                    { a: 245.11, b: 100.13 },
+                    { a: 300.13, b: 150.13 },
+                    { a: 340, b: 200 }
+                ],
+                padding: { left: 5, top: 5, right: 15, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'a',
+                    logarithmicScale: true,
+                    logarithmicScaleBase: 2,
+                    valuesOnTicks: true
+                },
+                valueAxis: {
+                    padding: { right: 0 },
+                    flip: false,
+                    logarithmicScale: true,
+                    logarithmicScaleBase: 2,
+                    title: { text: 'Value' },
+                    labels: {
+                        horizontalAlignment: 'right'
+                    }
+                },
+                seriesGroups:
+                    [
+                        {
+                            type: 'line',
+                            radius: 200,
+                            series: [
+                                { dataField: 'a', displayText: 'A', symbolType: 'square', symbolSize: 6, dashStyle: '4,4', lineWidth: 1 },
+                                { dataField: 'b', displayText: 'B', symbolType: 'circle', symbolSize: 6, lineWidth: 1 }
+                            ]
+                        }
+                    ]
+            }
+        },
+        beforeCreate: function () {
+            this.cursorRedDotElement = null;
+        },
+        methods: {
+            myChartOnMousemove: function (event) {
+                let position = this.cursorPositionRelativeToChart(event);
+                // get the xAxis value
+                let xvalue = this.$refs.myChart.getXAxisValue(position.x, 0);
+                // get the valueAxis value
+                let yvalue = this.$refs.myChart.getValueAxisValue(position.y, 0);
+                // prepare event data text
+                let eventData = 'x: ' + position.x + '; y: ' + position.y + '; xValue: ' + xvalue + '; yValue: ' + yvalue;
+                // display the event data text
+                this.$refs.eventText.innerHTML = eventData;
+                // display a small dot at the cursor position
+                let instance = this.$refs.myChart.getInstance();
+                let renderer = instance.renderer;
+                if (this.cursorRedDotElement)
+                    renderer.attr(this.cursorRedDotElement, { cx: position.x - 13, cy: position.y - 42 });
+                else
+                    this.cursorRedDotElement = renderer.circle(position.x, position.y, 1, { fill: 'red', stroke: 'red' });
+            },
+            myChartOnClick: function (event) {
+                let position = this.cursorPositionRelativeToChart(event);
+                // get the xAxis value
+                let xvalue = this.$refs.myChart.getXAxisValue(position.x, 0);
+                // get the valueAxis value
+                let yvalue = this.$refs.myChart.getValueAxisValue(position.y, 0);
+                // prepare event data text
+                let eventData = 'x: ' + position.x + '; y: ' + position.y + '; xValue: ' + xvalue + '; yValue: ' + yvalue;
+                alert(eventData);
+            },
+            cursorPositionRelativeToChart: function (event) {
+                // get the x/y coordinates of the mouse cursor relative to the chart element
+                let x = event.pageX || event.clientX || event.screenX;
+                let y = event.pageY || event.clientY || event.screenY;
+
+                return { x: x, y: y };
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/axisoffsettovalue/main.js b/chart/axisoffsettovalue/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/axisoffsettovalue/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/axisoffsettovalue/package.json b/chart/axisoffsettovalue/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/axisoffsettovalue/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/axisorientation/App.vue b/chart/axisorientation/App.vue
new file mode 100644
index 00000000..6ae2d923
--- /dev/null
+++ b/chart/axisorientation/App.vue
@@ -0,0 +1,87 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'Fitness & exercise weekly scorecard'" :description="'Time spent in vigorous exercise by activity'"
+                  :enableAnimations="false" :enableAxisTextAnimation="true" :padding="padding"
+                  :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis" :animationDuration="1000"
+                  :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme01'" :showLegend="true">
+        </JqxChart>
+
+        <div style="margin-top: 10px">
+            <div style="float: left">
+                <JqxCheckBox v-on:change="flipValueAxisOnChange($event)">
+                    Invert value axis
+                </JqxCheckBox>
+                <JqxCheckBox style="margin-top: 5px" v-on:change="flipXAxisOnChange($event)">
+                    Invert x-axis
+                </JqxCheckBox>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+
+    export default {
+        components: {
+            JqxChart,
+            JqxCheckBox
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
+                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
+                    { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
+                    { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
+                    { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
+                    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
+                    { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Day',
+                    unitInterval: 1
+                },
+                valueAxis: {
+                    minValue: 0,
+                    maxValue: 100,
+                    unitInterval: 10,
+                    title: { text: 'Time in minutes' },
+                    labels: {
+                        horizontalAlignment: 'right'
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'stackedcolumn',
+                        columnsGapPercent: 50,
+                        seriesGapPercent: 5,
+                        series: [
+                            { dataField: 'Running', displayText: 'Running' },
+                            { dataField: 'Swimming', displayText: 'Swimming' },
+                            { dataField: 'Cycling', displayText: 'Cycling' }
+                        ]
+                    }
+                ]
+            }
+        },
+        methods: {
+            flipValueAxisOnChange: function (event) {
+                this.$refs.myChart.valueAxis.flip = event.args.checked;
+                this.$refs.myChart.refresh();
+            },
+            flipXAxisOnChange: function (event) {
+                this.$refs.myChart.xAxis.flip = event.args.checked;
+                this.$refs.myChart.refresh();
+            }
+        }
+
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/axisorientation/main.js b/chart/axisorientation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/axisorientation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/axisorientation/package.json b/chart/axisorientation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/axisorientation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/axisposition/App.vue b/chart/axisposition/App.vue
new file mode 100644
index 00000000..f5b5beaf
--- /dev/null
+++ b/chart/axisposition/App.vue
@@ -0,0 +1,113 @@
+<template>
+    <JqxChart ref="myChart" style="width: 850px; height: 500px"
+              :title="'U.S. Historical Home Prices (1950-2011)'" :description="'Source: http://www.econ.yale.edu/~shiller/data.htm'"
+              :enableAnimations="true" :showLegend="true" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+              :seriesGroups="seriesGroups" :colorScheme="'scheme04'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart,
+        },
+        data: function () {
+
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                padding: { left: 20, top: 5, right: 20, bottom: 5 },
+                titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Year',
+                    minValue: 1947,
+                    maxValue: 2012,
+                    unitInterval: 5,
+                    tickMarks: {
+                        visible: true,
+                        interval: 1,
+                        dashStyle: '1,2'
+                    },
+                    gridLines: {
+                        visible: true,
+                        interval: 5,
+                        dashStyle: '1,3'
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'line',
+                        valueAxis:
+                            {
+                                unitInterval: 20,
+                                maxValue: 400,
+                                title: { text: 'U.S. Population (millions)' },
+                                gridLines: { visible: false }
+                            },
+                        series: [
+                            { dataField: 'Population', displayText: 'Population' }
+                        ]
+                    },
+                    {
+                        type: 'spline',
+                        valueAxis:
+                            {
+                                title: { text: 'Interest rate' },
+                                position: 'right',
+                                unitInterval: 0.01,
+                                maxValue: 0.2,
+                                visible: true,
+                                gridLines: { visible: false },
+                                labels: {
+                                    horizontalAlignment: 'left'
+                                }
+                            },
+                        series: [
+                            { dataField: 'Rate', displayText: 'Interest Rate' }
+                        ]
+                    },
+                    {
+                        type: 'spline',
+                        valueAxis:
+                            {
+                                title: { text: 'Index Value' },
+                                position: 'right',
+                                unitInterval: 20,
+                                maxValue: 200,
+                                gridLines: { visible: false },
+                                labels: {
+                                    formatSettings:
+                                        {
+                                            decimalPlaces: 0
+                                        },
+                                    horizontalAlignment: 'left'
+                                }
+                            },
+                        series: [
+                            { dataField: 'HPI', displayText: 'Real Home Price Index' },
+                            { dataField: 'BuildCost', displayText: 'Building Cost Index' }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'tab',
+                datafields: [
+                    { name: 'Year' },
+                    { name: 'HPI' },
+                    { name: 'BuildCost' },
+                    { name: 'Population' },
+                    { name: 'Rate' }
+                ],
+                url: '../sampledata/homeprices.txt'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/axisposition/main.js b/chart/axisposition/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/axisposition/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/axisposition/package.json b/chart/axisposition/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/axisposition/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/axissettings/App.vue b/chart/axissettings/App.vue
new file mode 100644
index 00000000..7547fcd5
--- /dev/null
+++ b/chart/axissettings/App.vue
@@ -0,0 +1,252 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'Electricity prices in Europe between 2004 and 2014'" :description="'Source: Eurostat'"
+                  :enableAnimations="true" :showLegend="true" :padding="padding"
+                  :titlePadding="titlePadding" :source="data" :xAxis="xAxis"
+                  :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme04'">
+        </JqxChart>
+
+        <table style="padding-left: 30px; padding-top: 10px">
+            <tr style="height: 50px">
+                <td style="width: 300px"><b>[value] axis properties:</b></td>
+                <td><b>xAxis properties:</b></td>
+            </tr>
+            <tr>
+                <td>
+                    Left padding:
+                    <JqxSlider @change="sliderValueAxisLeftPaddingOnChange($event)"
+                               :width="250" :min="0" :max="50" :step="1"
+                               :value="0" :ticksFrequency="5" :mode="'fixed'">
+                    </JqxSlider>
+                </td>
+                <td>
+                    Top padding:
+                    <JqxSlider @change="sliderXAxisTopPaddingOnChange($event)"
+                               :width="250" :min="0" :max="50" :step="1"
+                               :value="0" :ticksFrequency="5" :mode="'fixed'">
+                    </JqxSlider>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Right padding:
+                    <JqxSlider @change="sliderValueAxisRightPaddingOnChange($event)"
+                               :width="250" :min="0" :max="50" :step="1"
+                               :value="0" :ticksFrequency="5" :mode="'fixed'">
+                    </JqxSlider>
+                </td>
+                <td>
+                    Bottom padding:
+                    <JqxSlider @change="sliderXAxisBottomPaddingOnChange($event)"
+                               :width="250" :min="0" :max="50" :step="1"
+                               :value="0" :ticksFrequency="5" :mode="'fixed'">
+                    </JqxSlider>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Labels angle:
+                    <JqxSlider @change="sliderValueAxisAngleOnChange($event)"
+                               :width="250" :min="0" :max="360" :step="1"
+                               :value="0" :ticksFrequency="30" :mode="'fixed'">
+                    </JqxSlider>
+                </td>
+                <td>
+                    Labels angle:
+                    <JqxSlider @change="sliderXAxisAngleOnChange($event)"
+                               :width="250" :min="0" :max="360" :step="1"
+                               :value="0" :ticksFrequency="30" :mode="'fixed'">
+                    </JqxSlider>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Position:
+                    <table>
+                        <tr>
+                            <td>
+                                <JqxRadioButton style="margin-left: 10px" @change="btnLeftOnChange($event)"
+                                                :width="60" :height="25" :groupName="'valueAxis'">
+                                    Left
+                                </JqxRadioButton>
+                            </td>
+                            <td>
+                                <JqxRadioButton style="margin-left: 10px" @change="btnRightOnChange($event)"
+                                                :width="62" :height="25" :checked="true" :groupName="'valueAxis'">
+                                    Right
+                                </JqxRadioButton>
+                            </td>
+                        </tr>
+                    </table>
+                </td>
+                <td>
+                    Position:
+                    <table>
+                        <tr>
+                            <td>
+                                <JqxRadioButton style="margin-left: 10px" @change="btnTopOnChange($event)"
+                                                :width="60" :height="25" :groupName="'xAxis'">
+                                    Top
+                                </JqxRadioButton>
+                            </td>
+                            <td>
+                                <JqxRadioButton style="margin-left: 10px" @change="btnBottomOnChange($event)"
+                                                :width="80" :height="25" :checked="true" :groupName="'xAxis'">
+                                    Bottom
+                                </JqxRadioButton>
+                            </td>
+                        </tr>
+                    </table>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <JqxCheckBox :height="25" @change="btnValueAxisFlipOnChange($event)">
+                        Flip valueAxis Positions
+                    </JqxCheckBox>
+                </td>
+                <td>
+                    <JqxCheckBox :height="25" @change="btnXAxisFlipOnChange($event)">
+                        Flip xAxis Positions
+                    </JqxCheckBox>
+                </td>
+            </tr>
+        </table>
+    </div>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+    import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
+    import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+
+    export default {
+        components: {
+            JqxChart,
+            JqxSlider,
+            JqxRadioButton,
+            JqxCheckBox
+        },
+        data: function () {
+            return {
+                data: [
+                    { year: 2004, price: 0.1437 },
+                    { year: 2005, price: 0.1470 },
+                    { year: 2006, price: 0.1510 },
+                    { year: 2007, price: 0.1605 },
+                    { year: 2008, price: 0.1647 },
+                    { year: 2009, price: 0.1736 },
+                    { year: 2010, price: 0.1766 },
+                    { year: 2011, price: 0.1902 },
+                    { year: 2012, price: 0.1978 },
+                    { year: 2013, price: 0.2113 },
+                    { year: 2014, price: 0.2178 }
+                ],
+                padding: { left: 5, top: 5, right: 15, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    padding: { top: 0, bottom: 0 },
+                    labels: { angle: 0 },
+                    dataField: 'year',
+                    displayText: 'Year',
+                    valuesOnTicks: false,
+                    gridLines: { color: '#CDCDCD' },
+                    tickMarks: { color: '#CDCDCD' }
+                },
+                valueAxis: {
+                    position: 'right',
+                    padding: { left: 0, right: 0 },
+                    title: { text: '<br><br>Price EUR / kWh' },
+                    labels: {
+                        visible: true,
+                        angle: 0,
+                        formatSettings: { decimalPlaces: 4, sufix: ' €' }
+                    },
+                    tickMarks: {
+                        visible: true,
+                        color: '#CDCDCD',
+                        size: 5
+                    },
+                    gridLines: {
+                        visible: true,
+                        color: '#CDCDCD',
+                    },
+                    alternatingBackgroundColor: '#EFEFEF',
+                    alternatingBackgroundColor2: '#CECECE',
+                    alternatingBackgroundOpacity: 0.2
+                },
+                seriesGroups: [
+                    {
+                        type: 'stepline',
+                        series: [
+                            { formatSettings: { decimalPlaces: 4 }, dataField: 'price', displayText: 'Price per kWh', showLabels: true, symbolType: 'circle' }
+                        ]
+                    }
+                ]
+            }
+        },
+        methods: {
+            sliderValueAxisLeftPaddingOnChange: function (event) {
+                this.$refs.myChart.valueAxis.padding.left = event.args.value;
+                this.$refs.myChart.refresh();
+            },
+            sliderValueAxisRightPaddingOnChange: function (event) {
+                this.$refs.myChart.valueAxis.padding.right = event.args.value;
+                this.$refs.myChart.refresh();
+            },
+            sliderValueAxisAngleOnChange: function (event) {
+                this.$refs.myChart.valueAxis.labels.angle = event.args.value;
+                this.$refs.myChart.refresh();
+            },
+            sliderXAxisTopPaddingOnChange: function (event) {
+                this.$refs.myChart.xAxis.padding.top = event.args.value;
+                this.$refs.myChart.refresh();
+            },
+            sliderXAxisBottomPaddingOnChange: function (event) {
+                this.$refs.myChart.xAxis.padding.bottom = event.args.value;
+                this.$refs.myChart.refresh();
+            },
+            sliderXAxisAngleOnChange: function (event) {
+                this.$refs.myChart.xAxis.labels.angle = event.args.value;
+                this.$refs.myChart.refresh();
+            },
+            btnLeftOnChange: function (event) {
+                if (event.args.checked) {
+                    this.$refs.myChart.valueAxis.position = 'left';
+                    this.$refs.myChart.refresh();
+                }
+            },
+            btnRightOnChange: function (event) {
+                if (event.args.checked) {
+                    this.$refs.myChart.valueAxis.position = 'right';
+                    this.$refs.myChart.refresh();
+                }
+            },
+            btnTopOnChange: function (event) {
+                if (event.args.checked) {
+                    this.$refs.myChart.xAxis.position = 'top';
+                    this.$refs.myChart.refresh();
+                }
+            },
+            btnBottomOnChange: function (event) {
+                if (event.args.checked) {
+                    this.$refs.myChart.xAxis.position = 'bottom';
+                    this.$refs.myChart.refresh();
+                }
+            },
+            btnValueAxisFlipOnChange: function (event) {
+                this.$refs.myChart.valueAxis.flip = event.args.checked;
+                this.$refs.myChart.refresh();
+            },
+            btnXAxisFlipOnChange: function (event) {
+                this.$refs.myChart.xAxis.flip = event.args.checked;
+                this.$refs.myChart.refresh();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/axissettings/main.js b/chart/axissettings/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/axissettings/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/axissettings/package.json b/chart/axissettings/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/axissettings/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/barseries/App.vue b/chart/barseries/App.vue
new file mode 100644
index 00000000..8258dbad
--- /dev/null
+++ b/chart/barseries/App.vue
@@ -0,0 +1,59 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Top 5 most populated countries'" :description="'Statistics for 2011'"
+              :enableAnimations="true" :showLegend="true" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Country: 'China', Population: 1347350000, Percent: 19.18 },
+                    { Country: 'India', Population: 1210193422, Percent: 17.22 },
+                    { Country: 'USA', Population: 313912000, Percent: 4.47 },
+                    { Country: 'Indonesia', Population: 237641326, Percent: 3.38 },
+                    { Country: 'Brazil', Population: 192376496, Percent: 2.74 }
+                ],
+                padding: { left: 20, top: 5, right: 20, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Country',
+                    gridLines: { visible: true },
+                    flip: false
+                },
+                valueAxis: {
+                    flip: true,
+                    labels: {
+                        visible: true,
+                        formatFunction: (value) => {
+                            return parseInt(value) / 1000000;
+                        }
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        orientation: 'horizontal',
+                        columnsGapPercent: 50,
+                        toolTipFormatSettings: { thousandsSeparator: ',' },
+                        series: [
+                            { dataField: 'Population', displayText: 'Population (millions)' }
+                        ]
+                    }
+                ]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/barseries/main.js b/chart/barseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/barseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/barseries/package.json b/chart/barseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/barseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/bublechart/App.vue b/chart/bublechart/App.vue
new file mode 100644
index 00000000..10287877
--- /dev/null
+++ b/chart/bublechart/App.vue
@@ -0,0 +1,99 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'Sales by City in Q1 and Q2, and YoY sales growth'"
+                  :description="'(the size of the circles represents relative YoY growth)'"
+                  :enableAnimations="true" :showLegend="true" :padding="padding"
+                  :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+                  :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme04'">
+        </JqxChart>
+
+        <table style="width: 550px">
+            <tbody>
+                <tr>
+                    <td>
+                        <p>Select Serie 1 Symbol:</p>
+                        <JqxDropDownList ref="dropDownSerie1Symbol" v-on:change="dropDown1OnChange($event)"
+                                         :width="200" :height="25" :selectedIndex="0"
+                                         :dropDownHeight="100" :source="symbolsList">
+                        </JqxDropDownList>
+                    </td>
+                    <td>
+                        <p>Select Serie 2 Symbol:</p>
+                        <JqxDropDownList ref="dropDownSerie2Symbol" v-on:change="dropDown2OnChange($event)"
+                                         :width="200" :height="25" :selectedIndex="0"
+                                         :dropDownHeight="100" :source="symbolsList">
+                        </JqxDropDownList>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
+
+    export default {
+        components: {
+            JqxChart,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { City: 'New York', SalesQ1: 310500, SalesQ2: 210500, YoYGrowthQ1: 1.05, YoYGrowthQ2: 1.25 },
+                    { City: 'London', SalesQ1: 120000, SalesQ2: 169000, YoYGrowthQ1: 1.15, YoYGrowthQ2: 0.95 },
+                    { City: 'Paris', SalesQ1: 205000, SalesQ2: 275500, YoYGrowthQ1: 1.45, YoYGrowthQ2: 1.15 },
+                    { City: 'Tokyo', SalesQ1: 187000, SalesQ2: 130100, YoYGrowthQ1: 0.45, YoYGrowthQ2: 0.55 },
+                    { City: 'Berlin', SalesQ1: 187000, SalesQ2: 113000, YoYGrowthQ1: 1.65, YoYGrowthQ2: 1.05 },
+                    { City: 'San Francisco', SalesQ1: 142000, SalesQ2: 102000, YoYGrowthQ1: 0.75, YoYGrowthQ2: 0.15 },
+                    { City: 'Chicago', SalesQ1: 171000, SalesQ2: 124000, YoYGrowthQ1: 0.75, YoYGrowthQ2: 0.65 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'City',
+                    valuesOnTicks: false
+                },
+                valueAxis: {
+                    unitInterval: 50000,
+                    minValue: 50000,
+                    maxValue: 350000,
+                    title: { text: 'Sales ($)<br>' },
+                    labels: {
+                        formatSettings: { prefix: '$', thousandsSeparator: ',' },
+                        horizontalAlignment: 'right'
+                    }
+                },
+                seriesGroups:
+                    [
+                        {
+                            type: 'bubble',
+                            series: [
+                                { dataField: 'SalesQ1', radiusDataField: 'YoYGrowthQ1', minRadius: 10, maxRadius: 30, displayText: 'Sales in Q1' },
+                                { dataField: 'SalesQ2', radiusDataField: 'YoYGrowthQ2', minRadius: 10, maxRadius: 30, displayText: 'Sales in Q2' }
+                            ]
+                        }
+                    ],
+                symbolsList: ['circle', 'diamond', 'square', 'triangle_up', 'triangle_down', 'triangle_left', 'triangle_right']
+            }
+        },
+        methods: {
+            dropDown1OnChange: function (event) {
+                let value = event.args.item.value;
+                this.$refs.myChart.seriesGroups[0].series[0].symbolType = value;
+                this.$refs.myChart.update();
+            },
+            dropDown2OnChange: function (event) {
+                let value = event.args.item.value;
+                this.$refs.myChart.seriesGroups[0].series[1].symbolType = value;
+                this.$refs.myChart.update();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/bublechart/main.js b/chart/bublechart/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/bublechart/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/bublechart/package.json b/chart/bublechart/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/bublechart/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/candlestickchart/App.vue b/chart/candlestickchart/App.vue
new file mode 100644
index 00000000..40c04098
--- /dev/null
+++ b/chart/candlestickchart/App.vue
@@ -0,0 +1,135 @@
+<template>
+    <div>
+        <JqxChart style="width: 850px; height: 500px"
+                  :title="'S&P 500 Candlestick Chart'"
+                  :description="'(June 2010 - November 2014)'"
+                  :enableAnimations="true" :enableCrosshairs="true" :animationDuration="1500"
+                  :source="dataAdapter" :xAxis="xAxis"
+                  :seriesGroups="seriesGroups" :colorScheme="'scheme17'" :padding="padding">
+        </JqxChart>
+    </div>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                xAxis: {
+                    dataField: 'Date',
+                    labels: {
+                        formatFunction: (value) => {
+                            return value.getDate() + '-' + this.months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
+                        }
+                    },
+                    type: 'date',
+                    valuesOnTicks: true,
+                    minValue: new Date(2014, 1, 1),
+                    maxValue: new Date(2014, 10, 1),
+                    rangeSelector: {
+                        padding: { left: 25, right: 10, top: 10, bottom: 10 },
+                        backgroundColor: 'white',
+                        dataField: 'SPClose',
+                        baseUnit: 'month',
+                        serieType: 'area',
+                        gridLines: { visible: false },
+                        labels:
+                            {
+                                formatFunction: (value) => {
+                                    return this.months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
+                                }
+                            }
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'candlestick',
+                        columnsMaxWidth: 15,
+                        columnsMinWidth: 5,
+                        toolTipFormatFunction: this.toolTipCustomFormatFn,
+                        valueAxis:
+                            {
+                                description: 'S&P 500<br>'
+                            },
+                        series: [
+                            {
+                                dataFieldClose: 'SPClose',
+                                displayTextClose: 'S&P Close price',
+                                dataFieldOpen: 'SPOpen',
+                                displayTextOpen: 'S&P Open price',
+                                dataFieldHigh: 'SPHigh',
+                                displayTextHigh: 'S&P High price',
+                                dataFieldLow: 'SPLow',
+                                displayTextLow: 'S&P Low price',
+                                displayText: 'S&P 500',
+                                lineWidth: 1
+                            }
+                        ]
+                    },
+                    {
+                        type: 'line',
+                        valueAxis:
+                            {
+                                position: 'right',
+                                title: { text: '<br>Daily Volume' },
+                                gridLines: { visible: false },
+                                labels: {
+                                    formatFunction: (value) => {
+                                        return (parseInt(value) / 1000000) + 'M';
+                                    }
+                                }
+                            },
+                        series: [
+                            {
+                                dataField: 'SPVolume',
+                                displayText: 'Volume',
+                                lineWidth: 1
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+            this.source = {
+                datatype: 'tsv',
+                datafields: [
+                    { name: 'Date' },
+                    { name: 'SPOpen' },
+                    { name: 'SPHigh' },
+                    { name: 'SPLow' },
+                    { name: 'SPClose' },
+                    { name: 'SPVolume' },
+                    { name: 'SPAdjClose' }
+                ],
+                url: '../sampledata/nasdaq_vs_sp500_detailed.txt'
+            };
+        },
+        methods: {
+            toolTipCustomFormatFn: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
+                let dataItem = this.dataAdapter.records[itemIndex];
+                let volume = dataItem.SPVolume;
+                return '<DIV style="text-align:left"><b>Date: ' +
+                    categoryValue.getDate() + '-' + this.months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
+                    '</b><br />Open price: $' + value.open +
+                    '</b><br />Close price: $' + value.close +
+                    '</b><br />Low price: $' + value.low +
+                    '</b><br />High price: $' + value.high +
+                    '</b><br />Daily volume: ' + volume +
+                    '</DIV>';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/candlestickchart/main.js b/chart/candlestickchart/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/candlestickchart/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/candlestickchart/package.json b/chart/candlestickchart/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/candlestickchart/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/chartannotations/App.vue b/chart/chartannotations/App.vue
new file mode 100644
index 00000000..656d1657
--- /dev/null
+++ b/chart/chartannotations/App.vue
@@ -0,0 +1,149 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Country economic comparison'"
+              :description="'Per capita GDP and Debt in 2010'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+              :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Country',
+                    flip: false,
+                    gridLines: { visible: false }
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        columnsGapPercent: 50,
+                        toolTipFormatSettings: { sufix: ' USD', thousandsSeparator: ',' },
+                        valueAxis:
+                            {
+                                title: {
+                                    text: 'GDP & Debt per Capita (USD)<br>'
+                                },
+                                gridLines: { visible: false }
+                            },
+                        series:
+                            [
+                                { dataField: 'GDP', displayText: 'GDP per Capita' },
+                                { dataField: 'Debt', displayText: 'Debt per Capita' }
+                            ]
+                    },
+                    {
+                        type: 'line',
+                        valueAxis:
+                            {
+                                unitInterval: 10,
+                                visible: true,
+                                position: 'right',
+                                title: { text: 'Debt (% of GDP)' },
+                                gridLines: { visible: false },
+                                labels: {
+                                    horizontalAlignment: 'left',
+                                    formatSettings: { sufix: '%' }
+                                }
+                            },
+                        series:
+                            [
+                                {
+                                    linesUnselectMode: 'click',
+                                    dataField: 'DebtPercent',
+                                    displayText: 'Debt (% of GDP)',
+                                    labels:
+                                        {
+                                            visible: true,
+                                            'class': this.fnLabelsClass,
+                                            backgroundColor: 'white',
+                                            padding: { left: 5, right: 5, top: 1, bottom: 1 },
+                                            borderColor: this.fnLabelsBorderColor,
+                                            backgroundOpacity: 0.7,
+                                            borderOpacity: 0.7
+                                        }
+                                }
+                            ],
+                        bands: [
+                            {
+                                minValue: 90, maxValue: 90, fillColor: 'red', lineWidth: 2, dashStyle: '2,2'
+                            }
+                        ],
+                        annotations: [
+                            {
+                                type: 'rect',
+                                yValue: 90,
+                                xValue: 6,
+                                offset: { x: -45, y: -25 },
+                                width: 90,
+                                height: 20,
+                                fillColor: '#EFEFEF',
+                                lineColor: 'red',
+                                text: {
+                                    value: 'Debt threshold',
+                                    offset: {
+                                        x: 2,
+                                        y: 2
+                                    },
+                                    'class': 'redLabel',
+                                    angle: 0
+                                }
+                            }
+                        ],
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'csv',
+                datafields: [
+                    { name: 'Country' },
+                    { name: 'GDP' },
+                    { name: 'DebtPercent' },
+                    { name: 'Debt' }
+                ],
+                url: '../sampledata/gdp_dept_2010.txt'
+            };
+        },
+        methods: {
+            fnLabelsClass: function (value, itemIndex, serie, group) {
+                if (value > 100)
+                    return 'redLabel';
+                return 'greenLabel';
+            },
+            fnLabelsBorderColor: function (value, itemIndex, serie, group) {
+                if (value > 100)
+                    return '#FF0000';
+                return '#89A54E';
+            }
+        }
+    }
+</script>
+
+<style>
+    .redLabel {
+        fill: #FF0000;
+        color: #FF0000;
+        font-size: 11px;
+        font-family: Verdana;
+    }
+
+    .greenLabel {
+        fill: #89A54E;
+        color: #89A54E;
+        font-size: 11px;
+        font-family: Verdana;
+    }
+</style>
\ No newline at end of file
diff --git a/chart/chartannotations/main.js b/chart/chartannotations/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/chartannotations/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/chartannotations/package.json b/chart/chartannotations/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/chartannotations/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/chartcrosshairs/App.vue b/chart/chartcrosshairs/App.vue
new file mode 100644
index 00000000..a06e402b
--- /dev/null
+++ b/chart/chartcrosshairs/App.vue
@@ -0,0 +1,72 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'U.S. Stock Market Index Performance'"
+              :description="'NASDAQ Composite compared to S&P 500'"
+              :showLegend="true" :enableAnimations="true" :enableCrosshairs="true"
+              :crosshairsDashStyle="'2,2'" :crosshairsLineWidth="1.0" :crosshairsColor="'#888888'"
+              :padding="padding" :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+              :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                padding: { left: 10, top: 5, right: 30, bottom: 5 },
+                titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Date',
+                    formatFunction: (value) => {
+                        return value.getDate() + '-' + this.months[value.getMonth()] + '-' + value.getFullYear();
+                    },
+                    type: 'date',
+                    baseUnit: 'month',
+                    minValue: '01-01-2014',
+                    maxValue: '01-01-2015',
+                    unitInterval: 1,
+                    valuesOnTicks: true,
+                    gridLines: { interval: 3 },
+                    labels: {
+                        angle: -45,
+                        rotationPoint: 'topright',
+                        offset: { x: 0, y: -25 }
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'line',
+                        valueAxis:
+                            { title: { text: 'Daily Closing Price<br><br>' } },
+                        series: [
+                            { dataField: 'S&P 500', displayText: 'S&P 500' },
+                            { dataField: 'NASDAQ', displayText: 'NASDAQ' }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'csv',
+                datafields: [
+                    { name: 'Date' },
+                    { name: 'S&P 500' },
+                    { name: 'NASDAQ' }
+                ],
+                url: '../sampledata/nasdaq_vs_sp500.txt'
+            };
+
+            this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/chartcrosshairs/main.js b/chart/chartcrosshairs/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/chartcrosshairs/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/chartcrosshairs/package.json b/chart/chartcrosshairs/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/chartcrosshairs/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/chartevents/App.vue b/chart/chartevents/App.vue
new file mode 100644
index 00000000..aeeadc5c
--- /dev/null
+++ b/chart/chartevents/App.vue
@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <div style="width: 850px; height: 500px" @mouseleave="chartEvent($event)" @mouseenter="chartEvent($event)">
+            <JqxChart style="width: 850px; height: 500px"
+                      @click="chartEvent($event)" @toggle="chartEvent($event)"
+                      :title="'Fitness & exercise weekly scorecard'"
+                      :description="'Time spent in vigorous exercise'"
+                      :showToolTip="false" :enableAnimations="true" :padding="padding"
+                      :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+                      :seriesGroups="seriesGroups" :colorScheme="'scheme04'">
+            </JqxChart>
+        </div>
+
+        <div ref="eventText" style="width: 600px; height: 30px"></div>
+    </div>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
+                    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
+                    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
+                    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
+                    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
+                    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
+                    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Day',
+                    type: 'basic'
+                },
+                seriesGroups:
+                    [
+                        {
+                            type: 'column',
+                            valueAxis:
+                                {
+                                    minValue: 0,
+                                    maxValue: 100,
+                                    unitInterval: 10,
+                                    title: { text: 'Time in minutes' }
+                                },
+                            series: [
+                                { dataField: 'Keith', displayText: 'Keith' },
+                                { dataField: 'Erica', displayText: 'Erica' },
+                                { dataField: 'George', displayText: 'George' }
+                            ]
+                        }
+                    ]
+            }
+        },
+        methods: {
+            chartEvent: function (event) {
+                let eventData;
+                if (event) {
+                    if (event.args) {
+                        if (event.type == 'toggle') {
+                            eventData = '<div><b>Last Event: </b>' + event.type + '<b>, Serie DataField: </b>' + event.args.serie.dataField + '<b>, visible: </b>' + event.args.state + '</div>';
+                            return;
+                        }
+                        eventData = '<div><b>Last Event: </b>' + event.type + '<b>, Serie DataField: </b>' + event.args.serie.dataField + '<b>, Value: </b>' + event.args.elementValue + '</div>';
+                    } else {
+                        eventData = '<div><b>Last Event: </b>' + event.type + '';
+                    }
+
+                    this.$refs.eventText.innerHTML = eventData;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/chartevents/main.js b/chart/chartevents/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/chartevents/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/chartevents/package.json b/chart/chartevents/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/chartevents/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/chartprinting/App.vue b/chart/chartprinting/App.vue
new file mode 100644
index 00000000..6229c8cc
--- /dev/null
+++ b/chart/chartprinting/App.vue
@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'Economic comparison'"
+                  :description="'GDP and Debt in 2010'"
+                  :showLegend="true" :enableAnimations="true" :padding="padding"
+                  :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+                  :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+        </JqxChart>
+
+        <br />
+        <br />
+
+        <JqxButton v-on:click="btnOnClick()" width="80">Print</JqxButton>
+    </div>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxChart,
+            JqxButton
+        },
+        data: function () {
+
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Country'
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        columnsGapPercent: 50,
+                        valueAxis:
+                            {
+                                unitInterval: 5000,
+                                title: { text: 'GDP & Debt per Capita($)<br>' }
+                            },
+                        series: [
+                            { dataField: 'GDP', displayText: 'GDP per Capita' },
+                            { dataField: 'Debt', displayText: 'Debt per Capita' }
+                        ]
+                    },
+                    {
+                        type: 'line',
+                        valueAxis:
+                            {
+                                unitInterval: 10,
+                                title: { text: 'Debt (% of GDP)' },
+                                gridLines: { visible: false },
+                                position: 'right'
+                            },
+                        series: [
+                            { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    datatype: 'csv',
+                    datafields: [
+                        { name: 'Country' },
+                        { name: 'GDP' },
+                        { name: 'DebtPercent' },
+                        { name: 'Debt' }
+                    ],
+                    url: '../sampledata/gdp_dept_2010.txt'
+                };
+        },
+        methods: {
+            btnOnClick: function () {
+                let content = this.$refs.myChart.$el.outerHTML;
+                let newWindow = window.open('', '', 'width=800, height=500'),
+                    document = newWindow.document.open(),
+                    pageContent =
+                        '<!DOCTYPE html>' +
+                        '<html>' +
+                        '<head>' +
+                        '<meta charset="utf-8" />' +
+                        '<title>jQWidgets Chart</title>' +
+                        '        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>' +
+                        '<body>' + content + '</body></html>';
+                try {
+                    document.write(pageContent);
+                    document.close();
+                    newWindow.print();
+                    newWindow.close();
+                }
+                catch (error) {
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/chartprinting/main.js b/chart/chartprinting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/chartprinting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/chartprinting/package.json b/chart/chartprinting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/chartprinting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/chartrangeselectorevents/App.vue b/chart/chartrangeselectorevents/App.vue
new file mode 100644
index 00000000..8223237e
--- /dev/null
+++ b/chart/chartrangeselectorevents/App.vue
@@ -0,0 +1,160 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  @click="dumpEventInfo($event)" @toggle="dumpEventInfo($event)"
+                  @rangeSelectionChanging="dumpEventInfo($event)" @rangeSelectionChanged="dumpEventInfo($event)"
+                  @refreshBegin="dumpEventInfo($event)" @refreshEnd="dumpEventInfo($event)"
+                  :title="'S&P 500 Index value and daily volume'"
+                  :description="'(June 2010 - November 2014)'"
+                  :enableCrosshairs="true" :enableAnimations="true" :padding="padding"
+                  :animationDuration="1500" :source="dataAdapter" :xAxis="xAxis"
+                  :seriesGroups="seriesGroups" :colorScheme="'scheme17'">
+        </JqxChart>
+
+        <div ref="eventsText" style="width: 847px; height: 200px; overflow: scroll; border: 1px solid lightgrey"></div>
+    </div>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                padding: { left: 20, top: 5, right: 20, bottom: 5 },
+                xAxis: {
+                    dataField: 'Date',
+                    type: 'date',
+                    valuesOnTicks: true,
+                    minValue: new Date(2014, 1, 1),
+                    maxValue: new Date(2014, 10, 1),
+                    labels:
+                        {
+                            formatFunction: (value) => {
+                                return value.getDate() + '-' + this.months[value.getMonth()] + '<br>' + value.getFullYear().toString();
+                            }
+                        },
+                    gridLines: { visible: false },
+                    rangeSelector: {
+                        size: 100,
+                        padding: { top: 10, bottom: 0 },
+                        backgroundColor: 'white',
+                        dataField: 'SPClose',
+                        baseUnit: 'month',
+                        showGridLines: false,
+                        formatFunction: (value) => {
+                            return this.months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
+                        }
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'line',
+                        linesUnselectMode: 'click',
+                        toolTipFormatFunction: this.toolTipCustomFormatFn,
+                        valueAxis:
+                            {
+                                title: { text: 'S&P 500<br>' },
+                                gridLines: { visible: false },
+                            },
+                        series: [
+                            {
+                                dataField: 'SPClose',
+                                displayText: 'S&P Index Value',
+                                lineWidth: 1
+                            }
+                        ]
+                    },
+                    {
+                        type: 'area',
+                        toolTipFormatFunction: this.toolTipCustomFormatFn,
+                        linesUnselectMode: 'click',
+                        valueAxis:
+                            {
+                                position: 'right',
+                                title: { text: '<br>Daily Volume' },
+                                gridLines: { visible: false },
+                                labels:
+                                    {
+                                        formatFunction: (value) => {
+                                            return value / 1000000 + 'M';
+                                        }
+                                    }
+                            },
+                        series: [
+                            {
+                                dataField: 'SPVolume',
+                                displayText: 'S&P Index Volume',
+                                lineWidth: 1,
+                                opacity: 0.2
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+            this.source =
+                {
+                    datatype: 'tsv',
+                    datafields: [
+                        { name: 'Date' },
+                        { name: 'SPOpen' },
+                        { name: 'SPHigh' },
+                        { name: 'SPLow' },
+                        { name: 'SPClose' },
+                        { name: 'SPVolume' },
+                        { name: 'SPAdjClose' }
+                    ],
+                    url: '../sampledata/nasdaq_vs_sp500_detailed.txt'
+                };
+        },
+        methods: {
+            toolTipCustomFormatFn: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
+                let dataItem = this.dataAdapter.records[itemIndex];
+                let volume = dataItem.SPVolume;
+                return '<DIV style="text-align:left"><b>Date: ' +
+                    categoryValue.getDate() + '-' + this.months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
+                    '</b><br />Index value: ' + value +
+                    '</b><br />Daily volume: ' + volume +
+                    '</DIV>';
+            },
+            dumpEventInfo: function (event) {
+                if (event.args) {
+                    let args = event.args;
+                    if (event.type.indexOf('refresh') != -1) {
+                        if (this.$refs.myChart.getInstance() != args.instance)
+                            return;
+                    }
+                    let date = new Date();
+                    let line = 'Time: ' + (date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()) + ', event: ' + event.type;
+                    if (args.elementIndex)
+                        line += ', element index: ' + args.elementIndex;
+                    if (args.elementValue) {
+                        line += ', value: ' + args.elementValue;
+                    }
+                    if (event.type == 'toggle') {
+                        line += ', series group index: ' + this.$refs.myChart.seriesGroups.indexOf(args.seriesGroup);
+                        line += ', visible: ' + args.state;
+                    }
+                    if (event.type.indexOf('rangeSelection') != -1) {
+                        line += ', minValue: ' + args.minValue.getFullYear() + '-' + (args.minValue.getMonth() + 1) + '-' + args.minValue.getDate();
+                        line += ', maxValue: ' + args.maxValue.getFullYear() + '-' + (args.maxValue.getMonth() + 1) + '-' + args.maxValue.getDate();
+                    }
+                    let textArea = this.$refs.eventsText;
+
+                    textArea.innerHTML = line + '<br />' + textArea.innerHTML;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/chartrangeselectorevents/main.js b/chart/chartrangeselectorevents/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/chartrangeselectorevents/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/chartrangeselectorevents/package.json b/chart/chartrangeselectorevents/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/chartrangeselectorevents/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/chartwithgrid/App.vue b/chart/chartwithgrid/App.vue
new file mode 100644
index 00000000..5fca8654
--- /dev/null
+++ b/chart/chartwithgrid/App.vue
@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid" v-on:filter="gridOnFilter()"
+                 :width="850" :height="230" :filterable="true"
+                 :source="dataAdapter" :columns="columns" :showfilterrow="true">
+        </JqxGrid>
+
+        <JqxChart ref="myChart" style="width: 850px; height: 500px; margin-top: 50px"
+                  :title="'Fitness & exercise weekly scorecard'"
+                  :description="'Time spent in vigorous exercise'"
+                  :showLegend="true" :enableAnimations="true" :padding="padding"
+                  :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+                  :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+        </JqxChart>
+    </div>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+    import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
+
+    export default {
+        components: {
+            JqxChart,
+            JqxGrid
+        },
+        data: function () {
+            return {
+                sampleData: this.sampleData,
+                dataAdapter: new jqx.dataAdapter({
+                    datafields: [
+                        { name: "Day", type: "string" },
+                        { name: "Keith", type: "number" },
+                        { name: "Erica", type: "number" },
+                        { name: "George", type: "number" }
+                    ],
+                    localdata: this.sampleData,
+                    datatype: 'array'
+                }),
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Day',
+                    gridLines: { visible: true }
+                },
+                seriesGroups:
+                    [
+                        {
+                            type: 'column',
+                            columnsGapPercent: 50,
+                            seriesGapPercent: 0,
+                            valueAxis:
+                                {
+                                    visible: true,
+                                    unitInterval: 10,
+                                    minValue: 0,
+                                    maxValue: 100,
+                                    title: { text: 'Time in minutes' }
+                                },
+                            series: [
+                                { dataField: 'Keith', displayText: 'Keith' },
+                                { dataField: 'Erica', displayText: 'Erica' },
+                                { dataField: 'George', displayText: 'George' }
+                            ]
+                        }
+                    ],
+                columns: [
+                    { text: "Day", width: '40%', datafield: "Day", filteritems: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"], filtertype: "checkedlist" },
+                    { text: "Keith", width: '20%', datafield: "Keith" },
+                    { text: "Erica", width: '20%', datafield: "Erica" },
+                    { text: "George", width: '20%', datafield: "George" }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.sampleData = [
+                { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
+                { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
+                { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
+                { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
+                { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
+                { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
+                { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
+            ];
+        },
+        methods: {
+            gridOnFilter: function () {
+                const rows = this.$refs.myGrid.getrows();
+                this.$refs.myChart.source = rows;
+                this.$refs.myChart.refresh();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/chartwithgrid/main.js b/chart/chartwithgrid/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/chartwithgrid/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/chartwithgrid/package.json b/chart/chartwithgrid/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/chartwithgrid/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/chartwithtabs/App.vue b/chart/chartwithtabs/App.vue
new file mode 100644
index 00000000..7281a341
--- /dev/null
+++ b/chart/chartwithtabs/App.vue
@@ -0,0 +1,193 @@
+<template>
+    <JqxTabs :width="750" :height="560">
+        <ul>
+            <li style="margin-left: 30px">
+                <div style="height: 20px; margin-top: 5px">
+                    <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left">
+                        Candlestick Chart
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div style="height: 20px; margin-top: 5px">
+                    <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left">
+                        Line Chart
+                    </div>
+                </div>
+            </li>
+        </ul>
+        <div style="overflow: hidden">
+            <JqxChart style="width: 100%; height: 100%"
+                      :title="'S&P 500 Candlestick Chart'"
+                      :description="'(January 2014 - November 2014)'"
+                      :enableAnimations="true" :animationDuration="1500" :enableCrosshairs="true" :padding="padding"
+                      :source="dataAdapter" :xAxis="xAxis"
+                      :seriesGroups="seriesGroups" :colorScheme="'scheme17'">
+            </JqxChart>
+        </div>
+        <div style="overflow: hidden">
+            <JqxChart style="width: 100%; height: 100%"
+                      :title="'U.S. Stock Market Index Performance (2014)'"
+                      :description="'(NASDAQ Composite compared to S&P 500)'"
+                      :showLegend="true" :enableAnimations="true" :padding="padding"
+                      :animationDuration="1500" :source="dataAdapter2" :xAxis="xAxis2"
+                      :seriesGroups="seriesGroups2" :colorScheme="'scheme04'">
+            </JqxChart>
+        </div>
+    </JqxTabs>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+
+    export default {
+        components: {
+            JqxChart,
+            JqxTabs
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                dataAdapter2: new jqx.dataAdapter(this.source2, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source2.url + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 50, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Date',
+                    formatFunction: (value) => {
+                        return value.getDate() + '-' + this.months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
+                    },
+                    type: 'date',
+                    valuesOnTicks: true,
+                    minValue: new Date(2014, 0, 1),
+                    maxValue: new Date(2014, 11, 1)
+                },
+                xAxis2: {
+                    dataField: 'Date',
+                    type: 'date',
+                    baseUnit: 'month',
+                    unitInterval: 1,
+                    valuesOnTicks: true,
+                    labels: {
+                        formatFunction: (value) => {
+                            return this.months[value.getMonth()];
+                        }
+                    },
+                    toolTipFormatFunction: (value) => {
+                        return value.getDate() + '-' + this.months[value.getMonth()] + '-' + value.getFullYear();
+                    },
+                    tickMarks: { visible: true, unitInterval: 1 },
+                    gridLines: { visible: true, unitInterval: 3 }
+                },
+                seriesGroups: [
+                    {
+                        type: 'candlestick',
+                        columnsMinWidth: 4,
+                        toolTipFormatFunction: this.toolTipCustomFormatFn,
+                        valueAxis:
+                            {
+                                title: { text: 'S&P 500<br>' },
+                                minValue: 1500
+                            },
+                        series: [
+                            {
+                                dataFieldClose: 'SPClose',
+                                displayTextClose: 'S&P Close price',
+                                dataFieldOpen: 'SPOpen',
+                                displayTextOpen: 'S&P Open price',
+                                dataFieldHigh: 'SPHigh',
+                                displayTextHigh: 'S&P High price',
+                                dataFieldLow: 'SPLow',
+                                displayTextLow: 'S&P Low price',
+                                displayText: 'S&P 500',
+                                lineWidth: 1
+                            }
+                        ]
+                    },
+                    {
+                        type: 'line',
+                        valueAxis:
+                            {
+                                position: 'right',
+                                title: { text: '<br>Daily Volume' },
+                                gridLines: { visible: false },
+                                tickMarks: { visible: false },
+                                labels: {
+                                    formatFunction: (value) => {
+                                        return value / 1000000 + 'M';
+                                    }
+                                }
+                            },
+                        series: [
+                            {
+                                dataField: 'SPVolume',
+                                displayText: 'Volume',
+                                lineWidth: 1
+                            }
+                        ]
+                    }
+                ],
+                seriesGroups2: [
+                    {
+                        type: 'line',
+                        valueAxis:
+                            {
+                                unitInterval: 500,
+                                visible: true,
+                                title: { text: 'Daily Closing Price' }
+                            },
+                        series: [
+                            { dataField: 'S&P 500', displayText: 'S&P 500' },
+                            { dataField: 'NASDAQ', displayText: 'NASDAQ' }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+            this.source = {
+                datatype: 'tsv',
+                datafields: [
+                    { name: 'Date' },
+                    { name: 'SPOpen' },
+                    { name: 'SPHigh' },
+                    { name: 'SPLow' },
+                    { name: 'SPClose' },
+                    { name: 'SPVolume' },
+                    { name: 'SPAdjClose' }
+                ],
+                url: '../sampledata/nasdaq_vs_sp500_detailed.txt'
+            };
+
+            this.source2 = {
+                datatype: 'csv',
+                datafields: [
+                    { name: 'Date' },
+                    { name: 'S&P 500' },
+                    { name: 'NASDAQ' }
+                ],
+                url: '../sampledata/nasdaq_vs_sp500.txt'
+            };
+        },
+        methods: {
+            toolTipCustomFormatFn: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
+                let dataItem = this.dataAdapter.records[itemIndex];
+                let volume = dataItem.SPVolume;
+                return '<DIV style="text-align:left"><b>Date: ' +
+                    categoryValue.getDate() + '-' + this.months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
+                    '</b><br />Open price: $' + value.open +
+                    '</b><br />Close price: $' + value.close +
+                    '</b><br />Low price: $' + value.low +
+                    '</b><br />High price: $' + value.high +
+                    '</b><br />Daily volume: ' + volume +
+                    '</DIV>';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/chartwithtabs/main.js b/chart/chartwithtabs/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/chartwithtabs/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/chartwithtabs/package.json b/chart/chartwithtabs/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/chartwithtabs/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/colorbands/App.vue b/chart/colorbands/App.vue
new file mode 100644
index 00000000..ca404af4
--- /dev/null
+++ b/chart/colorbands/App.vue
@@ -0,0 +1,80 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Monthly Project Schedule'"
+              :description="'Website update plan'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="data" :xAxis="xAxis"
+              :seriesGroups="seriesGroups" :colorScheme="'scheme03'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+
+    export default {
+        components: {
+            JqxChart,
+            JqxTabs
+        },
+        data: function () {
+            return {
+                data: [
+                    { Person: 'Planning', M1_From: 2, M1_To: 5, M2_From: 5, M2_To: 10 },
+                    { Person: 'Dev 1', M1_From: 5, M1_To: 7, M2_From: 9, M2_To: 17 },
+                    { Person: 'Dev 2', M1_From: 5, M1_To: 12, M2_From: 14, M2_To: 22 },
+                    { Person: 'QA 1', M1_From: 7, M1_To: 14, M2_From: 14, M2_To: 25 }
+                ],
+                padding: { left: 5, top: 5, right: 10, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Person',
+                    unitInterval: 1,
+                    tickMarks: {
+                        visible: true,
+                        interval: 1,
+                        color: '#BCBCBC'
+                    }
+                },
+                seriesGroups: [
+                    {
+                        orientation: 'horizontal',
+                        type: 'rangecolumn',
+                        columnsGapPercent: 100,
+                        toolTipFormatFunction: this.toolTipCustomFormatFn,
+                        valueAxis:
+                            {
+                                flip: true,
+                                minValue: 1,
+                                maxValue: 30,
+                                unitInterval: 1,
+                                title: { text: 'Day' },
+                                tickMarks: { color: '#BCBCBC' }
+                            },
+                        series: [
+                            { dataFieldFrom: 'M1_From', dataFieldTo: 'M1_To', displayText: 'Sprint 1', opacity: 1 },
+                            { dataFieldFrom: 'M2_From', dataFieldTo: 'M2_To', displayText: 'Sprint 2', opacity: 1 }
+                        ],
+                        bands:
+                            [
+                                { minValue: 13, maxValue: 16, color: '#00FF00', opacity: 0.15 },
+                                { minValue: 24, maxValue: 27, color: '#0000FF', opacity: 0.20 },
+                                { minValue: 29, maxValue: 29, color: '#FF0000', opacity: 0.5, lineWidth: 3 }
+                            ]
+                    }
+                ]
+            }
+        },
+        methods: {
+            toolTipCustomFormatFn: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
+                var dataItem = this.data[itemIndex];
+                return '<DIV style="text-align:left"><b>Team: ' + categoryValue +
+                    '</b><br />Start day: ' + value.from +
+                    '<br />End day: ' + value.to;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/colorbands/main.js b/chart/colorbands/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/colorbands/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/colorbands/package.json b/chart/colorbands/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/colorbands/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/colorbandsxaxis/App.vue b/chart/colorbandsxaxis/App.vue
new file mode 100644
index 00000000..0eda9fa3
--- /dev/null
+++ b/chart/colorbandsxaxis/App.vue
@@ -0,0 +1,97 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'US Homeownership rate & recessions (1965-2014)'"
+              :description="'(sources: US Census bureau, Wikipedia)'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme03'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 10, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Year',
+                    tickMarks: {
+                        visible: true,
+                        interval: 1,
+                        color: '#BCBCBC'
+                    },
+                    labels: { angle: -90 },
+                    unitInterval: 1,
+                    flip: false,
+                    bands: this.bands() // attach the color bands to the xAxis
+                },
+                valueAxis: {
+                    title: { text: 'Homeownership rate<br>' },
+                    labels: {
+                        formatSettings: { sufix: '%' }
+                    },
+                    flip: false
+                },
+                seriesGroups:
+                    [
+                        {
+                            type: 'line',
+                            series: [
+                                { dataField: 'Northeast', displayText: 'NorthEast' },
+                                { dataField: 'South' },
+                                { dataField: 'Midwest', displayText: 'MidWest' },
+                                { dataField: 'West' },
+                                { dataField: 'UnitedStates', displayText: 'United States' },
+                            ]
+                        }
+                    ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'tsv',
+                datafields: [
+                    { name: 'Year' },
+                    { name: 'Northeast' },
+                    { name: 'South' },
+                    { name: 'Midwest' },
+                    { name: 'West' },
+                    { name: 'UnitedStates' }
+                ],
+                url: '../sampledata/us_homeownership_rate.csv'
+            };
+        },
+        methods: {
+            bands: function () {
+                const recessions =
+                    [
+                        { from: 1969.91, to: 1970.83 },
+                        { from: 1973.83, to: 1975.25 },
+                        { from: 1980, to: 1980.58 },
+                        { from: 1981.58, to: 1982.83 },
+                        { from: 1990.58, to: 1991.25 },
+                        { from: 2001.25, to: 2001.83 },
+                        { from: 2007.91, to: 2009.5 }
+                    ];
+
+                let bands = [];
+
+                for (let i = 0; i < recessions.length; i++) {
+                    bands.push({ minValue: recessions[i].from, maxValue: recessions[i].to, fillColor: 'red', opacity: 0.2 });
+                }
+
+                return bands;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/colorbandsxaxis/main.js b/chart/colorbandsxaxis/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/colorbandsxaxis/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/colorbandsxaxis/package.json b/chart/colorbandsxaxis/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/colorbandsxaxis/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/columnlocaldata/App.vue b/chart/columnlocaldata/App.vue
new file mode 100644
index 00000000..2876ccc2
--- /dev/null
+++ b/chart/columnlocaldata/App.vue
@@ -0,0 +1,64 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Fitness & exercise weekly scorecard'"
+              :description="'Time spent in vigorous exercise'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
+                    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
+                    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
+                    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
+                    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
+                    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
+                    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Day',
+                    showGridLines: true
+                },
+                seriesGroups:
+                    [
+                        {
+                            type: 'column',
+                            columnsGapPercent: 50,
+                            seriesGapPercent: 0,
+                            valueAxis:
+                                {
+                                    unitInterval: 10,
+                                    minValue: 0,
+                                    maxValue: 100,
+                                    displayValueAxis: true,
+                                    description: 'Time in minutes',
+                                    axisSize: 'auto',
+                                    tickMarksColor: '#888888'
+                                },
+                            series: [
+                                { dataField: 'Keith', displayText: 'Keith' },
+                                { dataField: 'Erica', displayText: 'Erica' },
+                                { dataField: 'George', displayText: 'George' }
+                            ]
+                        }
+                    ]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/columnlocaldata/main.js b/chart/columnlocaldata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/columnlocaldata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/columnlocaldata/package.json b/chart/columnlocaldata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/columnlocaldata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/columnrange/App.vue b/chart/columnrange/App.vue
new file mode 100644
index 00000000..222dad55
--- /dev/null
+++ b/chart/columnrange/App.vue
@@ -0,0 +1,86 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Weather in Geneva, Switzerland'"
+              :description="'Climatological Information about Geneva'"
+              :showLegend="true" :enableAnimations="true" :padding="padding" :enableCrosshairs="true"
+              :titlePadding="titlePadding" :source="data" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme05'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                data: [
+                    { 'month': 'Jan', 'min': -1.9, 'max': 3.7, 'avg': 0.2 },
+                    { 'month': 'Feb', 'min': -0.9, 'max': 5.9, 'avg': 1.1 },
+                    { 'month': 'Mar', 'min': 0.8, 'max': 9.8, 'avg': 4.9 },
+                    { 'month': 'Apr', 'min': 4.1, 'max': 13.9, 'avg': 8.7 },
+                    { 'month': 'May', 'min': 8.0, 'max': 18.4, 'avg': 13.1 },
+                    { 'month': 'Jun', 'min': 11.3, 'max': 22.2, 'avg': 16.6 },
+                    { 'month': 'Jul', 'min': 13.3, 'max': 25.3, 'avg': 18.4 },
+                    { 'month': 'Aug', 'min': 13.0, 'max': 24.4, 'avg': 17.6 },
+                    { 'month': 'Sep', 'min': 10.3, 'max': 20.8, 'avg': 14.3 },
+                    { 'month': 'Oct', 'min': 6.6, 'max': 14.9, 'avg': 9.2 },
+                    { 'month': 'Nov', 'min': 2.1, 'max': 8.4, 'avg': 4.2 },
+                    { 'month': 'Dec', 'min': -0.5, 'max': 4.5, 'avg': 1.5 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'month',
+                    unitInterval: 1,
+                    gridLines: {
+                        step: 3
+                    }
+                },
+                valueAxis: {
+                    minValue: -5,
+                    maxValue: 30,
+                    unitInterval: 5,
+                    title: { text: 'Temperature [C]<br>' },
+                    labels: {
+                        horizontalAlignment: 'right',
+                        formatSettings: { sufix: '°' }
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'rangecolumn',
+                        columnsGapPercent: 50,
+                        toolTipFormatFunction: this.toolTipCustomFormatFn,
+                        series: [
+                            { dataFieldTo: 'max', displayText: 'Temperature Range', dataFieldFrom: 'min', opacity: 1 }
+                        ]
+                    },
+                    {
+                        type: 'spline',
+                        toolTipFormatFunction: this.toolTipCustomFormatFn,
+                        series: [
+                            { dataField: 'avg', displayText: 'Average Temperature', opacity: 1, lineWidth: 2 }
+                        ]
+                    }
+                ]
+            }
+        },
+        methods: {
+            toolTipCustomFormatFn: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
+                let dataItem = this.data[itemIndex];
+                return '<div style="text-align:left"><b>Month: ' +
+                    categoryValue + '</b><br />Min: ' +
+                    dataItem.min + '°<br />Max: ' +
+                    dataItem.max + '°<br />Average: ' +
+                    dataItem.avg + '°</div>';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/columnrange/main.js b/chart/columnrange/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/columnrange/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/columnrange/package.json b/chart/columnrange/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/columnrange/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/columnseries/App.vue b/chart/columnseries/App.vue
new file mode 100644
index 00000000..9337aa37
--- /dev/null
+++ b/chart/columnseries/App.vue
@@ -0,0 +1,78 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Economic comparison'"
+              :description="'GDP and Debt in 2010'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+              :columnSeriesOverlap="false" :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Country',
+                    gridLines: { visible: true },
+                    valuesOnTicks: false
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        valueAxis:
+                            {
+                                visible: true,
+                                unitInterval: 5000,
+                                title: { text: 'GDP & Debt per Capita($)<br>' }
+                            },
+                        series: [
+                            { dataField: 'GDP', displayText: 'GDP per Capita' },
+                            { dataField: 'Debt', displayText: 'Debt per Capita' }
+                        ]
+                    },
+                    {
+                        type: 'line',
+                        valueAxis:
+                            {
+                                visible: true,
+                                position: 'right',
+                                unitInterval: 10,
+                                title: { text: 'Debt (% of GDP)' },
+                                gridLines: { visible: false },
+                                labels: { horizontalAlignment: 'left' }
+                            },
+                        series: [
+                            { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    datatype: 'csv',
+                    datafields: [
+                        { name: 'Country' },
+                        { name: 'GDP' },
+                        { name: 'DebtPercent' },
+                        { name: 'Debt' }
+                    ],
+                    url: '../sampledata/gdp_dept_2010.txt'
+                };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/columnseries/main.js b/chart/columnseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/columnseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/columnseries/package.json b/chart/columnseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/columnseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/columnseriesspacing/App.vue b/chart/columnseriesspacing/App.vue
new file mode 100644
index 00000000..84cade31
--- /dev/null
+++ b/chart/columnseriesspacing/App.vue
@@ -0,0 +1,272 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'Columns spacing and padding'"
+                  :description="'Example with two series groups and three series in each group'"
+                  :showLegend="true" :enableAnimations="false" :padding="padding"
+                  :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+                  :columnSeriesOverlap="true" :seriesGroups="seriesGroups" :colorScheme="'scheme04'">
+        </JqxChart>
+
+        <table style="padding-left: 30px; padding-top: 10px">
+            <tr style="height: 50px">
+                <td style="width: 300px">
+                    <b>Series group 1:</b>
+                </td>
+                <td>
+                    <b>Series group 2:</b>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <JqxCheckBox ref="btnEnableSeriesGroup1" v-on:change="updateSeriesGroupsVisibility()"
+                                 :width="120" :height="25" :checked="true">
+                        Visible
+                    </JqxCheckBox>
+                </td>
+                <td>
+                    <JqxCheckBox ref="btnEnableSeriesGroup2" v-on:change="updateSeriesGroupsVisibility()"
+                                 :width="120" :height="25" :checked="false">
+                        Visible
+                    </JqxCheckBox>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <JqxCheckBox ref="btnStackedSeriesGroup1" v-on:change="updateSeriesGroupsStacking()"
+                                 :width="120" :height="25" :checked="false">
+                        Stacked
+                    </JqxCheckBox>
+                </td>
+                <td>
+                    <JqxCheckBox ref="btnStackedSeriesGroup2" v-on:change="updateSeriesGroupsStacking()"
+                                 :width="120" :height="25" :checked="false">
+                        Stacked
+                    </JqxCheckBox>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Space between columns / padding:
+                    <JqxSlider v-on:change="sliderColumnsGapPercent($event, 0)"
+                               :width="250" :min="0" :max="99" :value="25"
+                               :ticksFrequency="5" :step="1" :mode="'fixed'">
+                    </JqxSlider>
+                </td>
+                <td>
+                    Space between columns / padding:
+                    <JqxSlider v-on:change="sliderColumnsGapPercent($event, 1)"
+                               :width="250" :min="0" :max="99" :value="25"
+                               :ticksFrequency="5" :step="1" :mode="'fixed'">
+                    </JqxSlider>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Space between series:
+                    <JqxSlider v-on:change="sliderSeriesGap($event, 0)"
+                               :width="250" :min="0" :max="100" :value="10"
+                               :ticksFrequency="5" :step="1" :mode="'fixed'">
+                    </JqxSlider>
+                </td>
+                <td>
+                    Space between series:
+                    <JqxSlider v-on:change="sliderSeriesGap($event, 1)"
+                               :width="250" :min="0" :max="100" :value="25"
+                               :ticksFrequency="5" :step="1" :mode="'fixed'">
+                    </JqxSlider>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Minimum column :width:
+                    <JqxSlider v-on:change="sliderMinWidth($event, 0)"
+                               :width="250" :min=" 0" :max="50" :value="0"
+                               :ticksFrequency="5" :step=" 1" :mode="'fixed'">
+                    </JqxSlider>
+                </td>
+                <td>
+                    Minimum column :width:
+                    <JqxSlider v-on:change="sliderMinWidth($event ,1)"
+                               :width="250" :min=" 0" :max="50" :value="0"
+                               :ticksFrequency="5" :step=" 1" :mode="'fixed'">
+                    </JqxSlider>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Maximum column :width:
+                    <JqxSlider v-on:change="sliderMaxWidth($event, 0)"
+                               :width="250" :min=" 1" :max="120" :value="40"
+                               :ticksFrequency="20" :step=" 1" :mode="'fixed'">
+                    </JqxSlider>
+                </td>
+                <td>
+                    Maximum column :width:
+                    <JqxSlider v-on:change="sliderMaxWidth($event, 1)"
+                               :width="250" :min=" 1" :max="120" :value="40"
+                               :ticksFrequency="20" :step=" 1" :mode="'fixed'">
+                    </JqxSlider>
+                </td>
+            </tr>
+        </table>
+
+    </div>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+    import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
+
+    export default {
+        components: {
+            JqxChart,
+            JqxCheckBox,
+            JqxSlider
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Position: 0, Serie1: 30, Serie2: 5, Serie3: 25, Serie4: 30, Serie5: 10, Serie6: 5 },
+                    { Position: 1, Serie1: 25, Serie2: 25, Serie3: 5, Serie4: 20, Serie5: 20, Serie6: 10 },
+                    { Position: 3, Serie1: 30, Serie2: 5, Serie3: 25, Serie4: 10, Serie5: 20, Serie6: 15 },
+                    { Position: 6, Serie1: 35, Serie2: 25, Serie3: 45, Serie4: 5, Serie5: 30, Serie6: 20 },
+                    { Position: 7, Serie1: 5, Serie2: 20, Serie3: 25, Serie4: 20, Serie5: 40, Serie6: 15 },
+                    { Position: 9, Serie1: 30, Serie2: 10, Serie3: 30, Serie4: 10, Serie5: 5, Serie6: 20 },
+                    { Position: 10, Serie1: 60, Serie2: 45, Serie3: 10, Serie4: 20, Serie5: 10, Serie6: 15 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Position',
+                    tickMarks: {
+                        visible: true,
+                        interval: 1,
+                        color: '#BCBCBC'
+                    },
+                    gridLines: {
+                        visible: true,
+                        interval: 1,
+                        color: '#BCBCBC'
+                    },
+                    flip: false,
+                    valuesOnTicks: false
+                },
+                valueAxis: {
+                    unitInterval: 10,
+                    title: { text: 'Value' },
+                    tickMarks: { color: '#BCBCBC' },
+                    gridLines: { color: '#BCBCBC' },
+                    labels: {
+                        horizontalAlignment: 'right'
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        columnsGapPercent: 25,
+                        seriesGapPercent: 10,
+                        columnsMaxWidth: 40,
+                        columnsMinWidth: 1,
+                        series: [
+                            { dataField: 'Serie1', displayText: 'Serie1' },
+                            { dataField: 'Serie2', displayText: 'Serie2' },
+                            { dataField: 'Serie3', displayText: 'Serie3' }
+                        ]
+                    }
+                ]
+            }
+        },
+        methods: {
+            updateSeriesGroupsVisibility: function () {
+                this.$refs.myChart.seriesGroups = [];
+
+                if (this.$refs.btnEnableSeriesGroup1.checked) {
+                    this.$refs.myChart.seriesGroups[0] =
+                        {
+                            type: 'column',
+                            columnsGapPercent: 25,
+                            seriesGapPercent: 10,
+                            columnsMaxWidth: 40,
+                            columnsMinWidth: 1,
+                            series: [
+                                { dataField: 'Serie1', displayText: 'Serie1' },
+                                { dataField: 'Serie2', displayText: 'Serie2' },
+                                { dataField: 'Serie3', displayText: 'Serie3' }
+                            ]
+                        };
+                }
+
+                if (this.$refs.btnEnableSeriesGroup2.checked) {
+                    let index = this.$refs.myChart.seriesGroups.length > 0 ? 1 : 0;
+
+                    this.$refs.myChart.seriesGroups[index] =
+                        {
+                            type: 'column',
+                            greyScale: true,
+                            columnsGapPercent: 25,
+                            seriesGapPercent: 10,
+                            columnsMaxWidth: 40,
+                            columnsMinWidth: 1,
+                            series: [
+                                { dataField: 'Serie4', displayText: 'Serie4' },
+                                { dataField: 'Serie5', displayText: 'Serie5' },
+                                { dataField: 'Serie6', displayText: 'Serie6' }
+                            ]
+                        };
+                }
+                this.updateSeriesGroupsStacking();
+            },
+            updateSeriesGroupsStacking: function () {
+                if (this.$refs.btnEnableSeriesGroup1.checked) {
+                    if (this.$refs.btnStackedSeriesGroup1.checked) {
+                        this.$refs.myChart.seriesGroups[0].type = 'stackedcolumn';
+                    }
+                    else {
+                        this.$refs.myChart.seriesGroups[0].type = 'column';
+                    }
+                }
+
+                if (this.$refs.btnEnableSeriesGroup2.checked) {
+                    if (this.$refs.btnStackedSeriesGroup2.checked) {
+                        this.$refs.myChart.seriesGroups[this.$refs.myChart.seriesGroups.length - 1].type = 'stackedcolumn';
+                    }
+                    else {
+                        this.$refs.myChart.seriesGroups[this.$refs.myChart.seriesGroups.length - 1].type = 'column';
+                    }
+                }
+                this.$refs.myChart.refresh();
+            },
+            sliderColumnsGapPercent: function (event, series) {
+                this.eventHandler(event, series, 'columnsGapPercent');
+            },
+            sliderSeriesGap: function (event, series) {
+                this.eventHandler(event, series, 'seriesGapPercent');
+            },
+            sliderMinWidth: function (event, series) {
+                this.eventHandler(event, series, 'columnsMinWidth');
+            },
+            sliderMaxWidth: function (event, series) {
+                this.eventHandler(event, series, 'columnsMaxWidth');
+            },
+            eventHandler: function (event, series, propName) {
+                let seriesGroups = this.$refs.myChart.seriesGroups;
+                if (seriesGroups.length !== 0) {
+                    if (seriesGroups.length < 2) {
+                        let serieDataField = seriesGroups[0].series[0].dataField;
+                        let serie = serieDataField == 'Serie1' ? 0 : 1;
+                        if (series !== serie) return;
+                        seriesGroups[0][propName] = event.args.value;
+                    } else {
+                        seriesGroups[series][propName] = event.args.value;
+                    }
+                    this.$refs.myChart.refresh();
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/columnseriesspacing/main.js b/chart/columnseriesspacing/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/columnseriesspacing/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/columnseriesspacing/package.json b/chart/columnseriesspacing/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/columnseriesspacing/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/columnserieswithlabels/App.vue b/chart/columnserieswithlabels/App.vue
new file mode 100644
index 00000000..35585fdc
--- /dev/null
+++ b/chart/columnserieswithlabels/App.vue
@@ -0,0 +1,82 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Economic comparison'"
+              :description="'GDP and Debt in 2010'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+              :seriesGroups="seriesGroups" :colorScheme="'scheme02'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    position: 'top',
+                    dataField: 'Country',
+                    gridLines: { visible: true }
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        columnsGapPercent: 50,
+                        valueAxis:
+                            {
+                                title: { text: 'GDP & Debt per Capita($)' }
+                            },
+                        series: [
+                            {
+                                dataField: 'GDP',
+                                displayText: 'GDP per Capita',
+                                labels: {
+                                    visible: true,
+                                    verticalAlignment: 'top',
+                                    offset: { x: 0, y: -20 }
+                                },
+                                formatFunction: (value) => {
+                                    return Math.round(value / 1000) + 'K';
+                                }
+                            },
+                            {
+                                dataField: 'Debt',
+                                displayText: 'Debt per Capita',
+                                labels: {
+                                    visible: true,
+                                    verticalAlignment: 'top',
+                                    offset: { x: 0, y: -20 }
+                                },
+                                formatFunction: (value) => {
+                                    return Math.round(value / 1000) + 'K';
+                                }
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'csv',
+                datafields: [
+                    { name: 'Country' },
+                    { name: 'GDP' },
+                    { name: 'DebtPercent' },
+                    { name: 'Debt' }
+                ],
+                url: '../sampledata/gdp_dept_2010.txt'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/columnserieswithlabels/main.js b/chart/columnserieswithlabels/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/columnserieswithlabels/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/columnserieswithlabels/package.json b/chart/columnserieswithlabels/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/columnserieswithlabels/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/columnserieswithmissingvalues/App.vue b/chart/columnserieswithmissingvalues/App.vue
new file mode 100644
index 00000000..699fcb46
--- /dev/null
+++ b/chart/columnserieswithmissingvalues/App.vue
@@ -0,0 +1,75 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Average store sales per hour'"
+              :description="''"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme02'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData:[
+                    { Hour: 1, Sales: 135 },
+                    { Hour: 3, Sales: 145 },
+                    { Hour: 5, Sales: 90 },
+                    { Hour: 15, Sales: 66 },
+                    { Hour: 17, Sales: 43 },
+                    { Hour: 18, Sales: 122 },
+                    { Hour: 22, Sales: 59 },
+                    { Hour: 23, Sales: 70 }
+                ],
+                padding: { left: 5, top: 5, right: 10, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Hour',
+                    minValue: 0,
+                    maxValue: 23,
+                    unitInterval: 1,
+                    valuesOnTicks: false,
+                    labels: {
+                        angle: 0,
+                        formatFunction: (value) => {
+                            return value.toString();
+                        }
+                    },
+                    tickMarks: {
+                        visible: true,
+                        interval: 1
+                    },
+                    gridLines: {
+                        visible: true,
+                        interval: 3
+                    }
+                },
+                valueAxis: {
+                    visible: true,
+                    minValue: 0,
+                    maxValue: 200,
+                    unitInterval: 50,
+                    title: { text: 'Sales ($)<br>' },
+                    labels: { horizontalAlignment: 'right' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        series: [
+                            { dataField: 'Sales', displayText: 'Sales', showLabels: true }
+                        ]
+                    }
+                ]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/columnserieswithmissingvalues/main.js b/chart/columnserieswithmissingvalues/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/columnserieswithmissingvalues/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/columnserieswithmissingvalues/package.json b/chart/columnserieswithmissingvalues/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/columnserieswithmissingvalues/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/columnseriewithconditionalcolors/App.vue b/chart/columnseriewithconditionalcolors/App.vue
new file mode 100644
index 00000000..4dd89cd0
--- /dev/null
+++ b/chart/columnseriewithconditionalcolors/App.vue
@@ -0,0 +1,91 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'U.S. GDP Percentage Change'"
+              :description="'(source: Bureau of Economic Analysis)'"
+              :showLegend="false" :enableAnimations="true" :padding="padding" :borderLineWidth="1"
+              :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis" :showBorderLine="true"
+              :seriesGroups="seriesGroups" :colorScheme="'scheme05'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                padding: { left: 10, top: 5, right: 10, bottom: 5 },
+                titlePadding: { left: 50, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Quarter',
+                    unitInterval: 1,
+                    textRotationAngle: -75,
+                    formatFunction: (value) => {
+                        return value;
+                    },
+                    valuesOnTicks: false
+                },
+                valueAxis: {
+                    visible: true,
+                    minValue: 0,
+                    maxValue: 200,
+                    unitInterval: 50,
+                    title: { text: 'Sales ($)<br>' },
+                    labels: { horizontalAlignment: 'right' }
+                },
+                seriesGroups:
+                [
+                    {
+                        type: 'column',
+                        valueAxis:
+                            {
+                                description: 'Percentage Change',
+                                formatFunction: (value) => {
+                                    return value + '%';
+                                },
+                                maxValue: 10,
+                                minValue: -10,
+                                unitInterval: 2
+                            },
+                        series:
+                            [
+                                {
+                                    dataField: 'Change',
+                                    displayText: 'Change',
+                                    toolTipFormatFunction: (value, itemIndex, serie, group, categoryValue, categoryAxis) => {
+                                        return '<DIV style="text-align:left";><b>Year-Quarter: </b>' + categoryValue
+                                            + '<br /><b>GDP Change:</b> ' + value + ' %</DIV>'
+                                    },
+                                    // Modify this function to return the desired colors.
+                                    // jqxChart will call the function for each data point.
+                                    // Sequential points that have the same color will be
+                                    // grouped automatically in a line segment
+                                    colorFunction: (value, itemIndex, serie, group) => {
+                                        return (value < 0) ? '#CC1133' : '#55CC55';
+                                    }
+                                }
+                            ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.source = {
+                datatype: 'csv',
+                datafields: [
+                    { name: 'Quarter' },
+                    { name: 'Change' }
+                ],
+                url: '../sampledata/us_gdp_2008-2013.csv'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/columnseriewithconditionalcolors/main.js b/chart/columnseriewithconditionalcolors/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/columnseriewithconditionalcolors/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/columnseriewithconditionalcolors/package.json b/chart/columnseriewithconditionalcolors/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/columnseriewithconditionalcolors/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/columnsrange/App.vue b/chart/columnsrange/App.vue
new file mode 100644
index 00000000..54dfa047
--- /dev/null
+++ b/chart/columnsrange/App.vue
@@ -0,0 +1,62 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Logarithmic Column Range'"
+              :description="'logarithmic scale with base 2'"
+              :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme07'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { a: 0.35, b: 14.5, c: 0.35, d: 0.1 },
+                    { a: 1, b: 2.5, c: 1, d: 0.2 },
+                    { a: 10, b: 0.5, c: 10, d: 50 },
+                    { a: 100, b: 205, c: 100, d: 40 },
+                    { a: 1, b: 100, c: 1, d: 200 },
+                    { a: 5.11, b: 10.13, c: 5.11, d: 0.2 },
+                    { a: 20.13, b: 10.13, c: 20.13, d: 4 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    gridLines: { dashStyle: '2,2' },
+                    tickMarks: { dashStyle: '1,2' }
+                },
+                valueAxis: {
+                    logarithmicScale: true,
+                    logarithmicScaleBase: 2,
+                    unitInterval: 1,
+                    title: { text: 'Value' },
+                    labels: {
+                        formatSettings: { decimalPlaces: 3 },
+                        horizontalAlignment: 'right'
+                    },
+                    gridLines: { dashStyle: '2,2' },
+                    tickMarks: { dashStyle: '1,2' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'rangecolumn',
+                        series: [
+                            { dataFieldFrom: 'a', dataFieldTo: 'b', displayText: 'from A to B' },
+                            { dataFieldFrom: 'c', dataFieldTo: 'd', displayText: 'from C to D' }
+                        ]
+                    }
+                ]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/columnsrange/main.js b/chart/columnsrange/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/columnsrange/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/columnsrange/package.json b/chart/columnsrange/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/columnsrange/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/columnswithbase10logarithmicaxis/App.vue b/chart/columnswithbase10logarithmicaxis/App.vue
new file mode 100644
index 00000000..32ab8d76
--- /dev/null
+++ b/chart/columnswithbase10logarithmicaxis/App.vue
@@ -0,0 +1,66 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Logarithmic Scale Axis Example'"
+              :description="'Sample logarithmic scale axis with base 10 and baseline at 1'"
+              :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { a: 0.35, b: 14.5 },
+                    { a: 1, b: 2.5 },
+                    { a: 10, b: 0.2 },
+                    { a: 100, b: 205 },
+                    { a: 1, b: 100 },
+                    { a: 5.11, b: 10.13 },
+                    { a: 20.13, b: 10.13 },
+                    { a: 600, b: 300 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: '',
+                    title: { visible: false, text: '' },
+                    gridLines: { visible: true },
+                    tickMarks: { visible: true }
+                },
+                valueAxis: {
+                    logarithmicScale: true,
+                    logarithmicScaleBase: 10,
+                    baselineValue: 1,
+                    unitInterval: 1,
+                    title: { text: 'Value' },
+                    tickMarks: { interval: 1 },
+                    gridLines: { interval: 1 },
+                    labels: {
+                        formatSettings: { decimalPlaces: 1 },
+                        horizontalAlignment: 'right'
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        series: [
+                            { dataField: 'a', displayText: 'A' },
+                            { dataField: 'b', displayText: 'B' }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/columnswithbase10logarithmicaxis/main.js b/chart/columnswithbase10logarithmicaxis/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/columnswithbase10logarithmicaxis/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/columnswithbase10logarithmicaxis/package.json b/chart/columnswithbase10logarithmicaxis/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/columnswithbase10logarithmicaxis/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/columnswithlogarithmicaxis/App.vue b/chart/columnswithlogarithmicaxis/App.vue
new file mode 100644
index 00000000..261974d3
--- /dev/null
+++ b/chart/columnswithlogarithmicaxis/App.vue
@@ -0,0 +1,67 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Logarithmic Scale Axis Example'"
+              :description="'Sample logarithmic scale axis with base 2'"
+              :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { a: 0.35, b: 14.5 },
+                    { a: 1, b: 2.5 },
+                    { a: 10, b: 0.2 },
+                    { a: 100, b: 205 },
+                    { a: 1, b: 100 },
+                    { a: 5.11, b: 10.13 },
+                    { a: 20.13, b: 10.13 },
+                    { a: 600, b: 300 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: ''
+                },
+                valueAxis: {
+                    logarithmicScale: true,
+                    logarithmicScaleBase: 2,
+                    unitInterval: 1,
+                    title: { text: 'Value' },
+                    labels: {
+                        formatSettings: { decimalPlaces: 3 },
+                        horizontalAlignment: 'right'
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        series: [
+                            { dataField: 'a', displayText: 'A' },
+                            { dataField: 'b', displayText: 'B' }
+                        ]
+                    },
+                    {
+                        type: 'line',
+                        series: [
+                            { dataField: 'a', displayText: 'A2' },
+                            { dataField: 'b', displayText: 'B2' }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/columnswithlogarithmicaxis/main.js b/chart/columnswithlogarithmicaxis/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/columnswithlogarithmicaxis/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/columnswithlogarithmicaxis/package.json b/chart/columnswithlogarithmicaxis/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/columnswithlogarithmicaxis/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/createComponent/App.vue b/chart/createComponent/App.vue
new file mode 100644
index 00000000..c67a1e89
--- /dev/null
+++ b/chart/createComponent/App.vue
@@ -0,0 +1,90 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px;" 
+              ref="myChart" :autoCreate="false">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        mounted: function () {
+            const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+            const source = {
+                datatype: "csv",
+                datafields: [
+                    { name: 'Date' },
+                    { name: 'S&P 500' },
+                    { name: 'NASDAQ' }
+                ],
+                url: '../sampledata/nasdaq_vs_sp500.txt'
+            };
+
+            const dataAdapter = new jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
+
+            const settings = {
+                title: 'U.S. Stock Market Index Performance',
+                description: 'NASDAQ Composite compared to S&P 500',
+                enableAnimations: true,
+                showLegend: true,
+                padding: { left: 10, top: 5, right: 10, bottom: 5 },
+                titlePadding: { left: 50, top: 0, right: 0, bottom: 10 },
+                source: dataAdapter,
+                xAxis:
+                    {
+                        dataField: 'Date',
+                        formatFunction: (value) => {
+                            return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
+                        },
+                        type: 'date',
+                        baseUnit: 'month',
+                        valuesOnTicks: true,
+                        minValue: '01-01-2014',
+                        maxValue: '01-01-2015',
+                        tickMarks: {
+                            visible: true,
+                            interval: 1,
+                            color: '#BCBCBC'
+                        },
+                        unitInterval: 1,
+                        gridLines: {
+                            visible: true,
+                            interval: 3,
+                            color: '#BCBCBC'
+                        },
+                        labels: {
+                            angle: -45,
+                            rotationPoint: 'topright',
+                            offset: { x: 0, y: -25 }
+                        }
+                    },
+                valueAxis:
+                    {
+                        visible: true,
+                        title: { text: 'Daily Closing Price<br>' },
+                        tickMarks: { color: '#BCBCBC' }
+                    },
+                colorScheme: 'scheme04',
+                seriesGroups:
+                    [
+                        {
+                            type: 'line',
+                            series: [
+                                { dataField: 'S&P 500', displayText: 'S&P 500' },
+                                { dataField: 'NASDAQ', displayText: 'NASDAQ' }
+                            ]
+                        }
+                    ]
+            };
+
+            this.$refs.myChart.createComponent(settings);
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/createComponent/main.js b/chart/createComponent/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/createComponent/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/createComponent/package.json b/chart/createComponent/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/createComponent/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/customdrawing/App.vue b/chart/customdrawing/App.vue
new file mode 100644
index 00000000..c4796283
--- /dev/null
+++ b/chart/customdrawing/App.vue
@@ -0,0 +1,91 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Map of the European Union'"
+              :description="''"
+              :padding="padding" :titlePadding="titlePadding" :source="dataAdapter"
+              :drawBefore="drawBefore" :draw="draw">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                padding: { left: 10, top: 5, right: 10, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'id' },
+                    { name: 'path' },
+                    { name: 'europe' },
+                    { name: 'eu' }
+                ],
+                /* EU map definitions in JSON derived from  http://commons.wikimedia.org/wiki/File:116_000_map_of_Europe.svg */
+                url: '../sampledata/europe.txt'
+            };
+        },
+        methods: {
+            drawBefore: function (renderer, rect) {
+                renderer.rect(rect.x, rect.y, rect.width, rect.height, { fill: 'lightblue' });
+            },
+            draw: function (renderer, rect) {
+                let records = this.dataAdapter.records;
+                let wScale = rect.width / 13000
+                let hScale = (rect.height) / 8500;
+
+                for (let i = 0; i < records.length; i++) {
+                    let path = this.transformPath(records[i].path, wScale, hScale, 62, 22);
+                    let pathElement = renderer.path(path, { stroke: 'black' });
+                    if (records[i].eu == 'true') {
+                        renderer.attr(pathElement, { fill: 'blue' });
+                    }
+                    else {
+                        renderer.attr(pathElement, { fill: '#DEDEDE' });
+                    }
+                }
+            },
+            transformPath: function (path, wScale, hScale, xOffset, yOffset) {
+                let output = '';
+                for (let i = 0; i < path.length; i++) {
+                    if (path[i] == 'C' || path[i] == 'M' || path[i] == 'L') {
+                        output += path[i];
+                        i++;
+
+                        let j = i;
+                        while (j + 1 < path.length && !(path[j + 1] == 'C' || path[j + 1] == 'M' || path[j + 1] == 'L' || path[j + 1] == 'z'))
+                            j++;
+                        let value = path.substring(i, j);
+                        let pointsString = value.split(' ');
+                        for (let s = 0; s < pointsString.length; s++) {
+                            if (pointsString[s].length == 0)
+                                continue;
+                            let pointString = pointsString[s].split(',');
+                            let point = { x: pointString[0], y: pointString[1] };
+                            point.x = point.x * wScale + xOffset;
+                            point.y = point.y * hScale + yOffset;
+                            output += ' ' + point.x + ',' + point.y + ' ';
+                        }
+                        i = j - 1;
+                    }
+                    else {
+                        output += path[i];
+                    }
+                }
+                return output;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/customdrawing/main.js b/chart/customdrawing/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/customdrawing/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/customdrawing/package.json b/chart/customdrawing/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/customdrawing/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/customstyling/App.vue b/chart/customstyling/App.vue
new file mode 100644
index 00000000..24e8592e
--- /dev/null
+++ b/chart/customstyling/App.vue
@@ -0,0 +1,103 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'U.S. Stock Market Index Performance'"
+              :description="'NASDAQ Composite compared to S&P 500'"
+              :showLegend="true" :enableAnimation="true" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme04'"
+              :backgroundImage="'../images/chart_background.jpg'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                padding: { left: 10, top: 5, right: 30, bottom: 5 },
+                titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Date',
+                    type: 'date',
+                    baseUnit: 'month',
+                    unitInterval: 1,
+                    minValue: '01-01-2014',
+                    maxValue: '01-01-2015',
+                    tickMarks: {
+                        visible: true,
+                        interval: 1,
+                        color: '#FFFFFF',
+                        dashStyle: '2,1'
+                    },
+                    gridLines: {
+                        visible: true,
+                        interval: 1,
+                        color: '#FFFFFF',
+                        dashStyle: '2,1'
+                    },
+                    labels:
+                        {
+                            angle: -45,
+                            rotationPoint: 'topright',
+                            offset: { x: 0, y: -25 },
+                            formatFunction: (value) => {
+                                return value.getDate() + '-' + this.months[value.getMonth()] + '-' + value.getFullYear();
+                            }
+                        }
+                },
+                valueAxis: {
+                    displayValueAxis: true,
+                    title: { text: 'Daily Closing Price<br>' },
+                    gridLines: {
+                        dashStyle: '2,1',
+                        color: '#FFFFFF'
+                    },
+                    tickMarks: {
+                        dashStyle: '2,1',
+                        color: '#FFFFFF'
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'line',
+                        series: [
+                            { dataField: 'S&P 500', displayText: 'S&P 500', lineColor: '#FFFFFF', lineColorSelected: '#DDDDDD', fillColor: '#FFFFFF' },
+                            { dataField: 'NASDAQ', displayText: 'NASDAQ', lineColor: '#0FF0FF', lineColorSelected: '#2EE2EE', fillColor: '#0FF0FF' }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+            this.source = {
+                datatype: 'csv',
+                datafields: [
+                    { name: 'Date' },
+                    { name: 'S&P 500' },
+                    { name: 'NASDAQ' }
+                ],
+                url: '../sampledata/nasdaq_vs_sp500.txt'
+            };
+        }
+    };
+</script>
+
+<style>
+    .jqx-chart-axis-text, .jqx-chart-label-text, .jqx-chart-legend-text, .jqx-chart-axis-description, .jqx-chart-title-text, .jqx-chart-title-description {
+        fill: #ffffff;
+        color: #ffffff;
+    }
+
+    .myChart div {
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+</style>
\ No newline at end of file
diff --git a/chart/customstyling/main.js b/chart/customstyling/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/customstyling/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/customstyling/package.json b/chart/customstyling/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/customstyling/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/darkbackground/App.vue b/chart/darkbackground/App.vue
new file mode 100644
index 00000000..9eaa4da7
--- /dev/null
+++ b/chart/darkbackground/App.vue
@@ -0,0 +1,128 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'U.S. Stock Market Index Performance'"
+              :description="'NASDAQ Composite compared to S&P 500'"
+              :showLegend="true" :enableAnimation="true" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme02'"
+              :backgroundColor="'#2e3338'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                padding: { left: 10, top: 5, right: 10, bottom: 5 },
+                titlePadding: { left: 50, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Date',
+                    formatFunction: (value) => {
+                        return value.getDate() + '-' + this.months[value.getMonth()] + '-' + value.getFullYear();
+                    },
+                    type: 'date',
+                    baseUnit: 'month',
+                    valuesOnTicks: true,
+                    minValue: '01-01-2014',
+                    maxValue: '01-01-2015',
+                    tickMarks: {
+                        visible: true,
+                        interval: 1,
+                        color: '#BCBCBC'
+                    },
+                    unitInterval: 1,
+                    gridLines: {
+                        visible: true,
+                        interval: 3,
+                        color: '#BCBCBC'
+                    },
+                    labels: {
+                        angle: -45,
+                        rotationPoint: 'topright',
+                        offset: { x: 0, y: -25 }
+                    }
+                },
+                valueAxis: {
+                    visible: true,
+                    title: { text: 'Daily Closing Price<br>' },
+                    tickMarks: { color: '#BCBCBC' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'spline',
+                        toolTipBackground: '#2e3338',
+                        toolTipFormatFunction: this.toolTipCustomFormatFn,
+                        series: [
+                            { dataField: 'S&P 500', displayText: 'S&P 500' },
+                            { dataField: 'NASDAQ', displayText: 'NASDAQ' }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+            this.source = {
+                datatype: 'csv',
+                datafields: [
+                    { name: 'Date' },
+                    { name: 'S&P 500' },
+                    { name: 'NASDAQ' }
+                ],
+                url: '../sampledata/nasdaq_vs_sp500.txt'
+            };
+        },
+        methods: {
+            toolTipCustomFormatFn: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
+                let dataItem = this.dataAdapter.records[itemIndex];
+                return '<DIV style="background: #2e3338; text-align:left"><b>Date: </b>' +
+                    categoryValue.getDate() + '-' + this.months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() + '<br /><br /><b>NASDAQ: </b>' +
+                    this.dataAdapter.formatNumber(dataItem['NASDAQ'], 'f') + '<br /><b>S&P 500: </b>' +
+                    this.dataAdapter.formatNumber(dataItem['S&P 500'], 'f') + '</DIV>';
+            }
+        }
+    };
+</script>
+
+<style>
+    .jqx-chart-axis-text,
+    .jqx-chart-label-text,
+    .jqx-chart-tooltip-text,
+    .jqx-chart-legend-text {
+        fill: #fafafa;
+        color: #fafafa;
+        font-size: 12px;
+        font-family: Verdana;
+    }
+
+    .jqx-chart-axis-description {
+        fill: #fafafa;
+        color: #fafafa;
+        font-size: 12px;
+        font-family: Verdana;
+    }
+
+    .jqx-chart-title-text {
+        fill: #fafafa;
+        color: #fafafa;
+        font-size: 14px;
+        font-weight: bold;
+        font-family: Verdana;
+    }
+
+    .jqx-chart-title-description {
+        fill: #fafafa;
+        color: #fafafa;
+        font-size: 13px;
+        font-weight: normal;
+        font-family: Verdana;
+    }
+</style>
\ No newline at end of file
diff --git a/chart/darkbackground/main.js b/chart/darkbackground/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/darkbackground/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/darkbackground/package.json b/chart/darkbackground/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/darkbackground/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/dashboard/App.vue b/chart/dashboard/App.vue
new file mode 100644
index 00000000..10fb12f6
--- /dev/null
+++ b/chart/dashboard/App.vue
@@ -0,0 +1,226 @@
+<template>
+    <table cellpadding="0" cellspacing="0">
+        <tr>
+            <td>
+                <JqxChart style="width: 400px; height: 180px"
+                          :title="'Cluster capacity'" :description="''"
+                          :showLegend="false" :enableAnimations="true" :padding="padding"
+                          :titlePadding="titlePadding" :source="data1" :showToolTips="true"
+                          :seriesGroups="seriesGroups" :colorScheme="'scheme05'"
+                          :backgroundColor="'#FAFAFA'" :drawBefore="drawBefore">
+                </JqxChart>
+            </td>
+            <td>
+                <JqxChart style="width: 400px; height: 180px"
+                          :title="'Avg. CPU %'" :description="''"
+                          :showLegend="false" :enableAnimations="true" :padding="padding"
+                          :titlePadding="titlePadding" :source="data2" :showToolTips="true"
+                          :seriesGroups="seriesGroups" :colorScheme="'scheme05'"
+                          :backgroundColor="'#FAFAFA'" :drawBefore="drawBefore">
+                </JqxChart>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <JqxChart style="width: 400px; height: 180px"
+                          :title="'Storage capacity [TB]'" :description="''"
+                          :showLegend="false" :enableAnimations="true" :padding="padding"
+                          :titlePadding="titlePadding" :source="data3" :showToolTips="true"
+                          :seriesGroups="seriesGroups" :colorScheme="'scheme05'"
+                          :backgroundColor="'#FAFAFA'" :drawBefore="drawBefore">
+                </JqxChart>
+            </td>
+            <td>
+                <JqxChart style="width: 400px; height: 180px"
+                          :title="'Network utilization %'" :description="''"
+                          :showLegend="false" :enableAnimations="true" :padding="padding"
+                          :titlePadding="titlePadding" :source="data4" :showToolTips="true"
+                          :seriesGroups="seriesGroups" :colorScheme="'scheme05'"
+                          :backgroundColor="'#FAFAFA'" :drawBefore="drawBefore">
+                </JqxChart>
+            </td>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <JqxChart style="width: 800px; height: 300px"
+                          :title="'Get request per second & response latencies'" :description="''"
+                          :showLegend="false" :enableAnimations="true" :padding="padding"
+                          :titlePadding="titlePadding" :source="data5" :showToolTips="true"
+                          :seriesGroups="seriesGroups2" :colorScheme="'scheme05'"
+                          :backgroundColor="'#FAFAFA'" :drawBefore="drawBefore">
+                </JqxChart>
+            </td>
+        </tr>
+    </table>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                data1: [
+                    { text: 'Used', value: 55 },
+                    { text: 'Available', value: 9 }
+                ],
+                data2: [
+                    { text: 'Used', value: 37 },
+                    { text: 'Available', value: 63 }
+                ],
+                data3: [
+                    { text: 'Used', value: 89.3 },
+                    { text: 'Available', value: 166.7 }
+                ],
+                data4: [
+                    { text: 'Used', value: 47 },
+                    { text: 'Available', value: 53 }
+                ],
+                data5: [
+                    { hour: 0, latency: 235, requests: 3500 },
+                    { hour: 1, latency: 231, requests: 3400 },
+                    { hour: 2, latency: 217, requests: 3350 },
+                    { hour: 3, latency: 215, requests: 3260 },
+                    { hour: 4, latency: 225, requests: 3320 },
+                    { hour: 5, latency: 235, requests: 3400 },
+                    { hour: 6, latency: 239, requests: 3550 },
+                    { hour: 7, latency: 255, requests: 4100 },
+                    { hour: 8, latency: 251, requests: 4200 },
+                    { hour: 9, latency: 259, requests: 4500 },
+                    { hour: 10, latency: 265, requests: 4560 },
+                    { hour: 11, latency: 257, requests: 4500 },
+                    { hour: 12, latency: 265, requests: 4490 },
+                    { hour: 13, latency: 261, requests: 4400 },
+                    { hour: 14, latency: 258, requests: 4350 },
+                    { hour: 15, latency: 257, requests: 4340 },
+                    { hour: 16, latency: 255, requests: 4200 },
+                    { hour: 17, latency: 245, requests: 4050 },
+                    { hour: 18, latency: 241, requests: 4020 },
+                    { hour: 19, latency: 239, requests: 3900 },
+                    { hour: 20, latency: 237, requests: 3810 },
+                    { hour: 21, latency: 236, requests: 3720 },
+                    { hour: 22, latency: 235, requests: 3610 },
+                    { hour: 23, latency: 239, requests: 3550 },
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 5, top: 5, right: 5, bottom: 5 },
+                seriesGroups: [
+                    {
+                        type: 'donut',
+                        useGradientColors: false,
+                        series:
+                            [
+                                {
+                                    showLabels: false,
+                                    enableSelection: true,
+                                    displayText: 'text',
+                                    dataField: 'value',
+                                    labelRadius: 120,
+                                    initialAngle: 90,
+                                    radius: 60,
+                                    innerRadius: 50,
+                                    centerOffset: 0
+                                }
+                            ]
+                    }
+                ],
+                xAxis: {
+                    dataField: 'hour',
+                    displayText: 'Hour',
+                },
+                seriesGroups2: [
+                    {
+                        type: 'column',
+                        valueAxis:
+                            {
+                                title: { text: 'Request Latency [ms]<br>' },
+                                position: 'left'
+                            },
+                        toolTipFormatSettings: { sufix: ' ms' },
+                        series:
+                            [
+                                {
+                                    dataField: 'latency',
+                                    displayText: 'Request latency',
+                                    colorFunction: (value, itemIndex, serie, group) => {
+                                        return (value > this.latencyThreshold) ? '#CC1133' : '#55CC55';
+                                    }
+                                }
+                            ],
+                        bands:
+                            [
+                                {
+                                    minValue: this.latencyThreshold,
+                                    maxValue: this.latencyThreshold,
+                                    lineWidth: 1,
+                                    color: 'red'
+                                }
+                            ]
+                    },
+                    {
+                        type: 'spline',
+                        valueAxis:
+                            {
+                                title: { text: 'Get Requests per second' },
+                                position: 'right'
+                            },
+                        toolTipFormatSettings: { sufix: ' req/s' },
+                        series:
+                            [
+                                {
+                                    dataField: 'requests',
+                                    displayText: 'Get requests',
+                                    lineColor: '#343F9B',
+                                    lineWidth: 2
+                                }
+                            ]
+                    },
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.counter = 0;
+            this.latencyThreshold = 260;
+        },
+        methods: {
+            drawBefore: function (renderer, rect) {
+                let value;
+
+                if (this.counter === 0) {
+                    value = this.data1[0].value;
+                } else if (this.counter === 1) {
+                    value = this.data2[0].value;
+                } else if (this.counter === 2) {
+                    value = this.data3[0].value;
+                } else if (this.counter === 3) {
+                    value = this.data4[0].value;
+                }
+
+                let sz = renderer.measureText(value, 0, { 'class': 'chart-inner-text' });
+                renderer.text(
+                    value,
+                    rect.x + (rect.width - sz.width) / 2,
+                    rect.y + rect.height / 2,
+                    0,
+                    0,
+                    0,
+                    { 'class': 'chart-inner-text' }
+                );
+
+                this.counter++;
+            }
+        }
+    }
+</script>
+
+<style>
+    .chart-inner-text {
+        fill: #00BAFF;
+        color: #00BAFF;
+        font-size: 30px;
+        font-family: Verdana;
+    }
+</style>
\ No newline at end of file
diff --git a/chart/dashboard/main.js b/chart/dashboard/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/dashboard/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/dashboard/package.json b/chart/dashboard/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/dashboard/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/datetimexaxisrangeselection/App.vue b/chart/datetimexaxisrangeselection/App.vue
new file mode 100644
index 00000000..a99df4db
--- /dev/null
+++ b/chart/datetimexaxisrangeselection/App.vue
@@ -0,0 +1,104 @@
+<template>
+    <JqxChart style="width: 800px; height: 500px"
+              @rangeSelectionChanging="chartChange($event)"
+              :title="'Tesla Motors Stock Price'"
+              :description="'(June 2010 - March 2014)'"
+              :enableCrosshairs="true" :enableAnimations="true" :padding="padding" :xAxis="xAxis"
+              :titlePadding="titlePadding" :source="dataAdapter" :animationDuration="1500"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 30, bottom: 5 },
+                titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Date',
+                    minValue: new Date(2012, 0, 1),
+                    maxValue: new Date(2013, 11, 31),
+                    type: 'date',
+                    baseUnit: 'day',
+                    labels:
+                        {
+                            formatFunction: (value) => {
+                                return value.getDate() + '-' + this.months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
+                            }
+                        },
+                    rangeSelector: {
+                        size: 80,
+                        padding: { /*left: 0, right: 0,*/top: 0, bottom: 0 },
+                        minValue: new Date(2010, 5, 1),
+                        backgroundColor: 'white',
+                        dataField: 'Close',
+                        baseUnit: 'month',
+                        gridLines: { visible: false },
+                        serieType: 'area',
+                        labels: {
+                            formatFunction: (value) => {
+                                return this.months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
+                            }
+                        }
+                    }
+                },
+                valueAxis: {
+                    title: { text: 'Price per share [USD]<br><br>' },
+                    labels: { horizontalAlignment: 'right' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'line',
+                        toolTipFormatFunction: this.toolTipCustomFormatFn,
+                        series: [
+                            { dataField: 'Close', displayText: 'Close Price', lineWidth: 1, lineWidthSelected: 1 }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    datatype: 'csv',
+                    datafields: [
+                        { name: 'Date' },
+                        { name: 'Open' },
+                        { name: 'High' },
+                        { name: 'Low' },
+                        { name: 'Close' },
+                        { name: 'Volume' },
+                        { name: 'AdjClose' }
+                    ],
+                    url: '../sampledata/TSLA_stockprice.csv'
+                };
+
+            this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        },
+        methods: {
+            toolTipCustomFormatFn: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
+                let dataItem = this.dataAdapter.records[itemIndex];
+                return '<DIV style="text-align:left"><b>Date: ' +
+                    categoryValue.getDate() + '-' + this.months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
+                    '</b><br />Open price: $' + dataItem.Open +
+                    '</b><br />Close price: $' + dataItem.Close +
+                    '</b><br />Daily volume: ' + dataItem.Volume +
+                    '</DIV>';
+            },
+            chartChange: function (event) {
+                const args = event.args;
+                args.instance.description = args.minValue.getFullYear() + ' - ' + args.maxValue.getFullYear();
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/datetimexaxisrangeselection/main.js b/chart/datetimexaxisrangeselection/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/datetimexaxisrangeselection/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/datetimexaxisrangeselection/package.json b/chart/datetimexaxisrangeselection/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/datetimexaxisrangeselection/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/donutlabels/App.vue b/chart/donutlabels/App.vue
new file mode 100644
index 00000000..90b3a816
--- /dev/null
+++ b/chart/donutlabels/App.vue
@@ -0,0 +1,59 @@
+<template>
+    <JqxChart style="width: 800px; height: 500px"
+              :title="'Desktop browsers share'"
+              :description="'(source: wikipedia.org)'"
+              :showLegend="false" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter"
+              :showBorderLine="true" :seriesGroups="seriesGroups" :colorScheme="'scheme02'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                seriesGroups: [
+                    {
+                        type: 'donut',
+                        showLabels: true,
+                        series:
+                            [
+                                {
+                                    dataField: 'Share',
+                                    displayText: 'Browser',
+                                    labelRadius: 120,
+                                    initialAngle: 15,
+                                    radius: 170,
+                                    innerRadius: 70,
+                                    centerOffset: 0,
+                                    formatSettings: { sufix: '%', decimalPlaces: 1 }
+                                }
+                            ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.source = {
+                datatype: 'csv',
+                datafields: [
+                    { name: 'Browser' },
+                    { name: 'Share' }
+                ],
+                url: '../sampledata/desktop_browsers_share_dec2011.txt'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/donutlabels/main.js b/chart/donutlabels/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/donutlabels/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/donutlabels/package.json b/chart/donutlabels/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/donutlabels/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/donutseries/App.vue b/chart/donutseries/App.vue
new file mode 100644
index 00000000..568c5487
--- /dev/null
+++ b/chart/donutseries/App.vue
@@ -0,0 +1,84 @@
+<template>
+    <JqxChart style="width: 800px; height: 500px"
+              :title="'Mobile & Desktop browsers share'"
+              :description="'(source: wikipedia.org)'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter" :legendLayout="legendLayout"
+              :showBorderLine="true" :seriesGroups="seriesGroups" :colomnSeriesOverlap="false">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                legendLayout: { left: 520, top: 170, width: 300, height: 200, flow: 'vertical' },
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                seriesGroups: [
+                    {
+                        type: 'donut',
+                        offsetX: 250,
+                        source: this.dataAdapter_mobile,
+                        xAxis: {
+                            formatSettings: { prefix: 'Mobile ' }
+                        },
+                        series: [
+                            {
+                                dataField: 'Share',
+                                displayText: 'Browser',
+                                labelRadius: 120,
+                                initialAngle: 10,
+                                radius: 130,
+                                innerRadius: 90,
+                                centerOffset: 0,
+                                formatSettings: { sufix: '%', decimalPlaces: 1 }
+                            }
+                        ]
+                    },
+                    {
+                        type: 'donut',
+                        offsetX: 250,
+                        source: this.dataAdapter_desktop,
+                        colorScheme: 'scheme02',
+                        xAxis: {
+                            formatSettings: { prefix: 'Desktop ' }
+                        },
+                        series: [
+                            {
+                                dataField: 'Share',
+                                displayText: 'Browser',
+                                labelRadius: 120,
+                                initialAngle: 10,
+                                radius: 70,
+                                innerRadius: 30,
+                                centerOffset: 0,
+                                formatSettings: { sufix: '%', decimalPlaces: 1 }
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.source = {
+                datatype: 'csv',
+                datafields: [
+                    { name: 'Browser' },
+                    { name: 'Share' }
+                ],
+                url: '../sampledata/desktop_browsers_share_dec2011.txt'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/donutseries/main.js b/chart/donutseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/donutseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/donutseries/package.json b/chart/donutseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/donutseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/exporttoimage/App.vue b/chart/exporttoimage/App.vue
new file mode 100644
index 00000000..e08f0a4d
--- /dev/null
+++ b/chart/exporttoimage/App.vue
@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 800px; height: 500px"
+                  :title="'Economic comparison'"
+                  :description="'GDP and Debt in 2010'"
+                  :showLegend="true" :enableAnimations="true" :padding="padding"
+                  :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+                  :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+        </JqxChart>
+
+        <div style="margin-top: 10px">
+            <JqxButton v-on:click="jpegButtonOnClick()">
+                Save As JPEG
+            </JqxButton>
+            <JqxButton v-on:click="pngButtonOnClick()">
+                Save As PNG
+            </JqxButton>
+            <JqxButton v-on:click="pdfButtonOnClick()">
+                Save As PDF
+            </JqxButton>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxChart,
+            JqxButton
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Country'
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        columnsGapPercent: 50,
+                        valueAxis:
+                            {
+                                unitInterval: 5000,
+                                title: { text: 'GDP & Debt per Capita($)<br>' }
+                            },
+                        series: [
+                            { dataField: 'GDP', displayText: 'GDP per Capita' },
+                            { dataField: 'Debt', displayText: 'Debt per Capita' }
+                        ]
+                    },
+                    {
+                        type: 'line',
+                        valueAxis:
+                            {
+                                unitInterval: 10,
+                                title: { text: 'Debt (% of GDP)<br>' },
+                                position: 'right',
+                                gridLines: { visible: false }
+                            },
+                        series: [
+                            { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.source =
+                {
+                    datatype: 'csv',
+                    datafields: [
+                        { name: 'Country' },
+                        { name: 'GDP' },
+                        { name: 'DebtPercent' },
+                        { name: 'Debt' }
+                    ],
+                    url: '../sampledata/gdp_dept_2010.txt'
+                };
+        },
+        methods: {
+            jpegButtonOnClick: function () {
+                this.$refs.myChart.saveAsJPEG('myChart.jpeg', 'https://www.jqwidgets.com/export_server/export.php');
+            },
+            pngButtonOnClick: function () {
+                this.$refs.myChart.saveAsPNG('myChart.png', 'https://www.jqwidgets.com/export_server/export.php');
+            },
+            pdfButtonOnClick: function () {
+                this.$refs.myChart.saveAsPDF('myChart.pdf', 'https://www.jqwidgets.com/export_server/export.php');
+            }
+        }
+    };
+</script>
+
+<style>
+    .jqx-button {
+        width: 94px;
+        display: inline-block;
+        margin: 2px;
+    }
+</style>
\ No newline at end of file
diff --git a/chart/exporttoimage/issue.txt b/chart/exporttoimage/issue.txt
new file mode 100644
index 00000000..802f2e29
--- /dev/null
+++ b/chart/exporttoimage/issue.txt
@@ -0,0 +1,10 @@
+JqxButton -> default styles: width, inline-blockimport Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/exporttoimage/main.js b/chart/exporttoimage/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/exporttoimage/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/exporttoimage/package.json b/chart/exporttoimage/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/exporttoimage/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/fluidsize/App.vue b/chart/fluidsize/App.vue
new file mode 100644
index 00000000..717483b0
--- /dev/null
+++ b/chart/fluidsize/App.vue
@@ -0,0 +1,82 @@
+<template> 
+    <JqxChart style="width: 80%; height: 50%"
+        :title="'Economic comparison'" 
+        :description="'GDP and Debt in 2010'"
+        :showLegend="true" :enableAnimations="true" :padding="padding"
+        :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+        :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+    </JqxChart>
+</template>
+
+    <script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+            },
+            data: function () {
+                return {
+                    dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                    xAxis: {
+                        dataField: 'Country',
+                        gridLines: { visible: true }
+                    },
+                    seriesGroups: [
+                        {
+                            type: 'column',
+                            columnsGapPercent: 50,
+                            valueAxis:
+                                {
+                                    unitInterval: 5000,
+                                    title: { text: 'GDP & Debt per Capita($)<br>' }
+                                },
+                            series: [
+                                { dataField: 'GDP', displayText: 'GDP per Capita' },
+                                { dataField: 'Debt', displayText: 'Debt per Capita' }
+                            ]
+                        },
+                        {
+                            type: 'line',
+                            valueAxis:
+                                {
+                                    unitInterval: 10,
+                                    title: { text: 'Debt (% of GDP)<br>' },
+                                    position: 'right',
+                                    gridLines: { visible: false }
+                                },
+                            series: [
+                                { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' }
+                            ]
+                        }
+                    ]
+                }
+            },
+        beforeCreate: function() {
+
+            this.source =
+            {
+                datatype: 'csv',
+                datafields: [
+                    { name: 'Country' },
+                    { name: 'GDP' },
+                    { name: 'DebtPercent' },
+                    { name: 'Debt' }
+                ],
+                url: '../sampledata/gdp_dept_2010.txt'
+            };
+        }
+    };
+    </script>
+
+<style>
+    html, body {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      padding: 0;
+      margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/chart/fluidsize/main.js b/chart/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/fluidsize/package.json b/chart/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/funnelchart/App.vue b/chart/funnelchart/App.vue
new file mode 100644
index 00000000..4ffc19e6
--- /dev/null
+++ b/chart/funnelchart/App.vue
@@ -0,0 +1,63 @@
+<template> 
+    <JqxChart style="width: 850px; height: 500px"
+        :title="'Funnel chart'" 
+        :description="'This example demonstrates funnel chart with positive and negative values'"
+        :showLegend="true" :enableAnimations="true" :padding="padding"
+        :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+        :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme02'">
+    </JqxChart>
+</template>
+
+    <script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function() {
+            return {
+                sampleData: [
+                    { Index: '1', SerieA: -30, SerieB: -10, SerieC: -25 },
+                    { Index: '2', SerieA: -25, SerieB: -25, SerieC: 10 },
+                    { Index: '3', SerieA: 30, SerieB: 15, SerieC: 25 },
+                    { Index: '4', SerieA: 35, SerieB: 25, SerieC: 45 },
+                    { Index: '5', SerieA: 20, SerieB: 15, SerieC: 25 }
+                ],
+                padding: { left: 15, top: 15, right: 15, bottom: 15 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Index',
+                    tickMarks: {
+                        visible: true,
+                        interval: 1
+                    },
+                    gridLines: {
+                        visible: true,
+                        interval: 1
+                    }
+                },
+                valueAxis: {
+                    labels: { horizontalAlignment: 'right' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        columnsGapPercent: 20,
+                        seriesGapPercent: 20,
+                        columnsTopWidthPercent: 100,
+                        columnsBottomWidthPercent: 30,
+                        series: [
+                            { dataField: 'SerieA', displayText: 'Serie A', labels: { visible: true } },
+                            { dataField: 'SerieB', displayText: 'Serie B', labels: { visible: true } },
+                            { dataField: 'SerieC', displayText: 'Serie C', labels: { visible: true } }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+    </script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/funnelchart/main.js b/chart/funnelchart/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/funnelchart/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/funnelchart/package.json b/chart/funnelchart/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/funnelchart/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/greyscaleseries/App.vue b/chart/greyscaleseries/App.vue
new file mode 100644
index 00000000..e23365be
--- /dev/null
+++ b/chart/greyscaleseries/App.vue
@@ -0,0 +1,117 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'Fitness & exercise weekly scorecard'"
+                  :description="'Time spent in vigorous exercise by activity'"
+                  :showLegend="true" :enableAnimations="false" :padding="padding"
+                  :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+                  :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme05'">
+        </JqxChart>
+        <div style="margin-top: 10px">
+            <div style="float: left">
+                <JqxCheckBox :width="120" v-on:change="runningOnChange($event)">
+                    Running
+                </JqxCheckBox>
+                <JqxCheckBox :width="120" v-on:change="swimmingOnChange($event)">
+                    Swimming
+                </JqxCheckBox>
+            </div>
+            <div style="float: left">
+                <JqxCheckBox :width="120" :checked="true" v-on:change="cyclingOnChange($event)">
+                    Cycling
+                </JqxCheckBox>
+                <JqxCheckBox :width="120" v-on:change="goalOnChange($event)">
+                    Personal Goal
+                </JqxCheckBox>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+
+    export default {
+        components: {
+            JqxChart,
+            JqxCheckBox
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
+                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
+                    { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
+                    { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
+                    { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
+                    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
+                    { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Day',
+                    unitInterval: 1,
+                    tickMarks: {
+                        visible: true,
+                        interval: 1,
+                        color: '#CACACA'
+                    },
+                    gridLines: {
+                        visible: false,
+                        interval: 1,
+                        color: '#CACACA'
+                    }
+                },
+                valueAxis: {
+                    minValue: 0,
+                    maxValue: 100,
+                    unitInterval: 10,
+                    title: { text: 'Time in minutes' },
+                    tickMarks: { color: '#CACACA' },
+                    gridLines: { color: '#CACACA' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'splinearea',
+                        series: [
+                            { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
+                        ]
+                    },
+                    {
+                        type: 'stackedcolumn',
+                        columnsGapPercent: 50,
+                        seriesGapPercent: 5,
+                        series: [
+                            { greyScale: true, dataField: 'Running', displayText: 'Running' },
+                            { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
+                            { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
+                        ]
+                    }
+                ]
+            }
+        },
+        methods: {
+            runningOnChange: function (event) {
+                this.$refs.myChart.seriesGroups[1].series[0].greyScale = !event.args.checked;
+                this.$refs.myChart.refresh();
+            },
+            cyclingOnChange: function (event) {
+                this.$refs.myChart.seriesGroups[1].series[2].greyScale = !event.args.checked;
+                this.$refs.myChart.refresh();
+            },
+            swimmingOnChange: function (event) {
+                this.$refs.myChart.seriesGroups[1].series[1].greyScale = !event.args.checked;
+                this.$refs.myChart.refresh();
+            },
+            goalOnChange: function (event) {
+                this.$refs.myChart.seriesGroups[0].series[0].greyScale = !event.args.checked;
+                this.$refs.myChart.refresh();
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/greyscaleseries/main.js b/chart/greyscaleseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/greyscaleseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/greyscaleseries/package.json b/chart/greyscaleseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/greyscaleseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/gridlinesdashstyle/App.vue b/chart/gridlinesdashstyle/App.vue
new file mode 100644
index 00000000..33c2e4d1
--- /dev/null
+++ b/chart/gridlinesdashstyle/App.vue
@@ -0,0 +1,79 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'CPI inflation comparison by country'"
+              :description="'Years: 2011 vs 2012'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :seriesGroups="seriesGroups" :colorScheme="'scheme02'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Country: 'Switzerland', Inflation2012: -0.95, Inflation2011: -0.72 },
+                    { Country: 'USA', Inflation2012: 2.35, Inflation2011: 2.96 },
+                    { Country: 'Germany', Inflation2012: 2.03, Inflation2011: 2.10 },
+                    { Country: 'India', Inflation2012: 8.38, Inflation2011: 6.49 },
+                    { Country: 'China', Inflation2012: 3.34, Inflation2011: 4.06 },
+                    { Country: 'Canada', Inflation2012: 2.05, Inflation2011: 2.30 }
+                ],
+                padding: { left: 20, top: 5, right: 20, bottom: 5 },
+                titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Country',
+                    gridLines: {
+                        visible: true,
+                        dashStyle: '2,2',
+                        color: 'grey'
+                    },
+                    tickMarks: {
+                        dashStyle: '2,2',
+                        color: 'grey'
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        orientation: 'horizontal',
+                        columnsGapPercent: 50,
+                        valueAxis:
+                            {
+                                visible: true,
+                                minValue: -5,
+                                maxValue: 10,
+                                unitInterval: 1,
+                                labels: {
+                                    formatSettings: { sufix: '%' }
+                                },
+                                gridLines: {
+                                    dashStyle: '2,2',
+                                    color: 'grey'
+                                },
+                                tickMarks:
+                                    {
+                                        dashStyle: '2,2',
+                                        color: 'grey'
+                                    }
+                            },
+                        toolTipFormatSettings: { sufix: '%' },
+                        series: [
+                            { dataField: 'Inflation2012', displayText: 'Inflation 2012' },
+                            { dataField: 'Inflation2011', displayText: 'Inflation 2011' }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/gridlinesdashstyle/main.js b/chart/gridlinesdashstyle/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/gridlinesdashstyle/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/gridlinesdashstyle/package.json b/chart/gridlinesdashstyle/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/gridlinesdashstyle/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/intervalandsteps/App.vue b/chart/intervalandsteps/App.vue
new file mode 100644
index 00000000..a255f464
--- /dev/null
+++ b/chart/intervalandsteps/App.vue
@@ -0,0 +1,223 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'Chart unit interval and steps example'"
+                  :description="''"
+                  :showLegend="true" :enableAnimations="false" :padding="padding"
+                  :titlePadding="titlePadding" :source="data" :xAxis="xAxis" :enableCrosshairs="false"
+                  :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme05'">
+        </JqxChart>
+
+        <table>
+            <tbody>
+                <tr>
+                    <td>
+                        <table>
+                            <tbody>
+                                <tr style="height: 50px"><td colspan='2'><b>xAxis Settings:</b></td></tr>
+                                <tr>
+                                    <td>Labels step</td>
+                                    <td>
+                                        <JqxNumberInput v-on:valueChanged="inputxAxisLabelsStepOnValueChange($event)"
+                                                        :width="50" :height="25" :min="1" :max="10"
+                                                        :inputMode="'simple'" :decimalDigits="0"
+                                                        :digits="2" :spinButtons="true" :value="2">
+                                        </JqxNumberInput>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>Grid lines step</td>
+                                    <td>
+                                        <JqxNumberInput v-on:valueChanged="inputxAxisGridLinesStepOnValueChange($event)"
+                                                        :width="50" :height="25" :min="1" :max="10"
+                                                        :inputMode="'simple'" :decimalDigits="0"
+                                                        :digits="2" :spinButtons="true" :value="1">
+                                        </JqxNumberInput>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>Tick marks step</td>
+                                    <td>
+                                        <JqxNumberInput v-on:valueChanged="inputxAxisTickMarksStepOnValueChange($event)"
+                                                        :width="50" :height="25" :min="1" :max="10"
+                                                        :inputMode="'simple'" :decimalDigits="0"
+                                                        :digits="2" :spinButtons="true" :value="1">
+                                        </JqxNumberInput>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>Unit interval</td>
+                                    <td>
+                                        <JqxNumberInput v-on:valueChanged="inputxAxisUnitIntervalOnValueChange($event)"
+                                                        :width="50" :height="25" :min="1" :max="10"
+                                                        :inputMode="'simple'" :decimalDigits="0"
+                                                        :digits="2" :spinButtons="true" :value="1">
+                                        </JqxNumberInput>
+                                    </td>
+                                </tr>
+                                <tr style="height: 40px">
+                                    <td colspan='2'>
+                                        <JqxCheckBox :width="200" :height="25" v-on:change="btnValuesBetweenTicksOnChange($event)">
+                                            Value's between ticks
+                                        </JqxCheckBox>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </td>
+                    <td>
+                        <table style="padding-left: 100px">
+                            <tbody>
+                                <tr style="height: 50px"><td colspan='2'><b>valueAxis Settings:</b></td></tr>
+                                <tr>
+                                    <td>Labels step</td>
+                                    <td>
+                                        <JqxNumberInput v-on:valueChanged="inputvalueAxisLabelsStepOnValueChange($event)"
+                                                        :width="50" :height="25" :min="1" :max="10"
+                                                        :inputMode="'simple'" :decimalDigits="0"
+                                                        :digits="2" :spinButtons="true" :value="1">
+                                        </JqxNumberInput>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>Grid lines step</td>
+                                    <td>
+                                        <JqxNumberInput v-on:valueChanged="inputvalueAxisGridLinesStepOnValueChange($event)"
+                                                        :width="50" :height="25" :min="1" :max="10"
+                                                        :inputMode="'simple'" :decimalDigits="0"
+                                                        :digits="2" :spinButtons="true" :value="1">
+                                        </JqxNumberInput>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>Tick marks step</td>
+                                    <td>
+                                        <JqxNumberInput v-on:valueChanged="inputvalueAxisTickMarksStepOnValueChange($event)"
+                                                        :width="50" :height="25" :min="1" :max="10"
+                                                        :inputMode="'simple'" :decimalDigits="0"
+                                                        :digits="2" :spinButtons="true" :value="1">
+                                        </JqxNumberInput>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>Unit interval</td>
+                                    <td>
+                                        <JqxNumberInput v-on:valueChanged="inputvalueAxisUnitIntervalOnValueChange($event)"
+                                                        :width="50" :height="25" :min="1" :max="10"
+                                                        :inputMode="'simple'" :decimalDigits="0"
+                                                        :digits="2" :spinButtons="true" :value="5">
+                                        </JqxNumberInput>
+                                    </td>
+                                </tr>
+                                <tr style="height: 40px">
+                                    <td colspan='2'>
+                                        <JqxCheckBox :width="200" :height="25" v-on:change="btnvalueAxisValuesBetweenTicksOnChange($event)">
+                                            Value's between ticks
+                                        </JqxCheckBox>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxNumberInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+
+    export default {
+        components: {
+            JqxChart,
+            JqxNumberInput,
+            JqxCheckBox
+        },
+        data: function () {
+            return {
+                data: [12, 3, 16, 12, 24, 15, 17, 9, 31, 25, 15, 5, 8, 19, 23, 15, 31, 26, 11, 19, 5, 1, 8, 18, 12, 3, 16, 12, 24, 15, 17, 9, 31, 25, 15, 5, 8, 19, 23, 15, 31, 26, 11, 19, 5, 1, 8, 18, 5, 12, 11],
+                padding: { left: 10, top: 5, right: 10, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    unitInterval: 1,
+                    gridLines: { step: 1 },
+                    tickMarks: { step: 1 },
+                    labels: { step: 2 }
+                },
+                valueAxis: {
+                    title: { text: 'Value<br>' },
+                    unitInterval: 5,
+                    gridLines: { step: 1 },
+                    tickMarks: { step: 1 },
+                    labels: { step: 1 },
+                    minValue: 0
+                },
+                seriesGroups: [
+                    {
+                        type: 'line',
+                        series:
+                            [
+                                { displayText: 'value', opacity: 0.7 }
+                            ]
+                    }
+                ]
+            }
+        },
+        methods: {
+            inputxAxisLabelsStepOnValueChange: function (event) {
+                let value = event.args.value;
+                this.$refs.myChart.xAxis.labels.step = parseInt(value);
+                this.$refs.myChart.refresh();
+            },
+            inputxAxisGridLinesStepOnValueChange: function (event) {
+                let value = event.args.value;
+                this.$refs.myChart.xAxis.gridLines.step = parseInt(value);
+                this.$refs.myChart.refresh();
+            },
+            inputxAxisTickMarksStepOnValueChange: function (event) {
+                let value = event.args.value;
+                this.$refs.myChart.xAxis.tickMarks.step = parseInt(value);
+                this.$refs.myChart.refresh();
+            },
+            inputxAxisUnitIntervalOnValueChange: function (event) {
+                let value = event.args.value;
+                this.$refs.myChart.xAxis.unitInterval = parseInt(value);
+                this.$refs.myChart.refresh();
+            },
+            inputvalueAxisLabelsStepOnValueChange: function (event) {
+                let value = event.args.value;
+                this.$refs.myChart.valueAxis.labels.step = parseInt(value);
+                this.$refs.myChart.refresh();
+            },
+            inputvalueAxisGridLinesStepOnValueChange: function (event) {
+                let value = event.args.value;
+                this.$refs.myChart.valueAxis.gridLines.step = parseInt(value);
+                this.$refs.myChart.refresh();
+            },
+            inputvalueAxisTickMarksStepOnValueChange: function (event) {
+                let value = event.args.value;
+                this.$refs.myChart.valueAxis.tickMarks.step = parseInt(value);
+                this.$refs.myChart.refresh();
+            },
+            inputvalueAxisUnitIntervalOnValueChange: function (event) {
+                let value = event.args.value;
+                this.$refs.myChart.valueAxis.unitInterval = parseInt(value);
+                this.$refs.myChart.refresh();
+            },
+            btnValuesBetweenTicksOnChange: function (event) {
+                this.$refs.myChart.xAxis.valuesOnTicks = !event.args.checked;
+                this.$refs.myChart.refresh();
+            },
+            btnvalueAxisValuesBetweenTicksOnChange: function (event) {
+                this.$refs.myChart.valueAxis.valuesOnTicks = !event.args.checked;
+                this.$refs.myChart.refresh();
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/intervalandsteps/main.js b/chart/intervalandsteps/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/intervalandsteps/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/intervalandsteps/package.json b/chart/intervalandsteps/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/intervalandsteps/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/lineseries/App.vue b/chart/lineseries/App.vue
new file mode 100644
index 00000000..720d68f3
--- /dev/null
+++ b/chart/lineseries/App.vue
@@ -0,0 +1,84 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'U.S. Stock Market Index Performance'"
+              :description="'NASDAQ Composite compared to S&P 500'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme04'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                padding: { left: 10, top: 5, right: 10, bottom: 5 },
+                titlePadding: { left: 50, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Date',
+                    formatFunction: (value) => {
+                        return value.getDate() + '-' + this.months[value.getMonth()] + '-' + value.getFullYear();
+                    },
+                    type: 'date',
+                    baseUnit: 'month',
+                    valuesOnTicks: true,
+                    minValue: '01-01-2014',
+                    maxValue: '01-01-2015',
+                    tickMarks: {
+                        visible: true,
+                        interval: 1,
+                        color: '#BCBCBC'
+                    },
+                    unitInterval: 1,
+                    gridLines: {
+                        visible: true,
+                        interval: 3,
+                        color: '#BCBCBC'
+                    },
+                    labels: {
+                        angle: -45,
+                        rotationPoint: 'topright',
+                        offset: { x: 0, y: -25 }
+                    }
+                },
+                valueAxis: {
+                    visible: true,
+                    title: { text: 'Daily Closing Price<br>' },
+                    tickMarks: { color: '#BCBCBC' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'line',
+                        series:
+                            [
+                                { dataField: 'S&P 500', displayText: 'S&P 500' },
+                                { dataField: 'NASDAQ', displayText: 'NASDAQ' }
+                            ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+            this.source = {
+                datatype: "csv",
+                datafields: [
+                    { name: 'Date' },
+                    { name: 'S&P 500' },
+                    { name: 'NASDAQ' }
+                ],
+                url: '../sampledata/nasdaq_vs_sp500.txt'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/lineseries/main.js b/chart/lineseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/lineseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/lineseries/package.json b/chart/lineseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/lineseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/lineseriesmarkers/App.vue b/chart/lineseriesmarkers/App.vue
new file mode 100644
index 00000000..8b5ff65f
--- /dev/null
+++ b/chart/lineseriesmarkers/App.vue
@@ -0,0 +1,83 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Fitness & exercise weekly scorecard'"
+              :description="'Time spent in vigorous exercise by activity'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme05'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Day: 'Monday', Running: 30, Swimming: 10, Cycling: 25, Goal: 40 },
+                    { Day: 'Tuesday', Running: 25, Swimming: 15, Cycling: 10, Goal: 50 },
+                    { Day: 'Wednesday', Running: 30, Swimming: 10, Cycling: 25, Goal: 60 },
+                    { Day: 'Thursday', Running: 40, Swimming: 20, Cycling: 25, Goal: 40 },
+                    { Day: 'Friday', Running: 45, Swimming: 20, Cycling: 25, Goal: 50 },
+                    { Day: 'Saturday', Running: 30, Swimming: 20, Cycling: 30, Goal: 60 },
+                    { Day: 'Sunday', Running: 20, Swimming: 30, Cycling: 10, Goal: 90 }
+                ],
+                padding: { left: 10, top: 10, right: 15, bottom: 10 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Day',
+                    unitInterval: 1,
+                    tickMarks: { visible: true, interval: 1 },
+                    gridLinesInterval: { visible: true, interval: 1 },
+                    valuesOnTicks: false,
+                    padding: { bottom: 10 }
+                },
+                valueAxis: {
+                    unitInterval: 10,
+                    minValue: 0,
+                    maxValue: 50,
+                    title: { text: 'Time in minutes<br><br>' },
+                    labels: { horizontalAlignment: 'right' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'line',
+                        series: [
+                            {
+                                dataField: 'Swimming',
+                                symbolType: 'square',
+                                labels: {
+                                    visible: true,
+                                    backgroundColor: '#FEFEFE',
+                                    backgroundOpacity: 0.2,
+                                    borderColor: '#7FC4EF',
+                                    borderOpacity: 0.7,
+                                    padding: { left: 5, right: 5, top: 0, bottom: 0 }
+                                }
+                            },
+                            {
+                                dataField: 'Running',
+                                symbolType: 'square',
+                                labels: {
+                                    visible: true,
+                                    backgroundColor: '#FEFEFE',
+                                    backgroundOpacity: 0.2,
+                                    borderColor: '#7FC4EF',
+                                    borderOpacity: 0.7,
+                                    padding: { left: 5, right: 5, top: 0, bottom: 0 }
+                                }
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/lineseriesmarkers/main.js b/chart/lineseriesmarkers/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/lineseriesmarkers/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/lineseriesmarkers/package.json b/chart/lineseriesmarkers/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/lineseriesmarkers/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/lineseriewithconditionalcolors/App.vue b/chart/lineseriewithconditionalcolors/App.vue
new file mode 100644
index 00000000..381163f3
--- /dev/null
+++ b/chart/lineseriewithconditionalcolors/App.vue
@@ -0,0 +1,84 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'U.S. GDP Percentage Change'"
+              :description="'(source: Bureau of Economic Analysis)'"
+              :showLegend="false" :enableAnimations="true" :padding="padding" :borderLineWidth="1"
+              :titlePadding="titlePadding" :source="dataAdapter" :categoryAxis="categoryAxis"
+              :showBorderLine="true" :seriesGroups="seriesGroups" :colorScheme="'scheme05'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 10, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                categoryAxis: {
+                    dataField: 'Quarter',
+                    unitInterval: 1,
+                    textRotationAngle: -75,
+                    formatFunction: (value) => {
+                        return value;
+                    },
+                    valuesOnTicks: false
+                },
+                xAxis: {
+                    dataField: 'Day',
+                    unitInterval: 1,
+                    tickMarks: { visible: true, interval: 1 },
+                    gridLinesInterval: { visible: true, interval: 1 },
+                    valuesOnTicks: false,
+                    padding: { bottom: 10 }
+                },
+                seriesGroups: [
+                    {
+                        type: 'line',
+                        valueAxis:
+                            {
+                                description: 'Percentage Change',
+                                formatFunction: (value) => {
+                                    return value + '%';
+                                }
+                            },
+                        series:
+                            [
+                                {
+                                    dataField: 'Change',
+                                    displayText: 'Change',
+                                    // Modify this function to return desired colors.
+                                    // jqxChart will call the function for each data point.
+                                    // Sequential points that have the same color will be
+                                    // grouped automatically in a line segment
+                                    colorFunction: (value) => {
+                                        return (value < 0) ? '#FF0000' : '#00FF00';
+                                    }
+                                }
+                            ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.source =
+                {
+                    datatype: 'csv',
+                    datafields: [
+                        { name: 'Quarter' },
+                        { name: 'Change' }
+                    ],
+                    url: '../sampledata/us_gdp_2008-2013.csv'
+                };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/lineseriewithconditionalcolors/main.js b/chart/lineseriewithconditionalcolors/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/lineseriewithconditionalcolors/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/lineseriewithconditionalcolors/package.json b/chart/lineseriewithconditionalcolors/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/lineseriewithconditionalcolors/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/lineseriewithmissingpoints/App.vue b/chart/lineseriewithmissingpoints/App.vue
new file mode 100644
index 00000000..af7a158f
--- /dev/null
+++ b/chart/lineseriewithmissingpoints/App.vue
@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'Line serie with missing points'"
+                  :description="'Sample line serie with missing and invalid values'"
+                  :showLegend="true" :padding="padding"
+                  :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+                  :seriesGroups="seriesGroups" :colorScheme="'scheme05'">
+        </JqxChart>
+
+        <p style="font-family: Verdana; font-size: 12px">Select missing points display mode:</p>
+
+        <JqxDropDownList v-on:select="dropDownOnSelect($event)"
+                         :width="220" :height="25" :selectedIndex="0"
+                         :dropDownHeight="77" :source="['skip','zero','connect']">
+        </JqxDropDownList>
+    </div>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxChart,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                sampleData: [29, undefined, 10, 15, 10, undefined, NaN, 30, 25, undefined, 33, 19, 11],
+                padding: { left: 5, top: 5, right: 15, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    text: 'x',
+                    valuesOnTicks: false
+                },
+                seriesGroups: [
+                    {
+                        type: 'line',
+                        toolTipFormatFunction: (value, itemIndex, serie, group, categoryValue, categoryAxis) => {
+                            return '<DIV style="text-align:left"><b>Index:</b> ' +
+                                itemIndex + '<br /><b>Value:</b> ' +
+                                value + '<br /></DIV>';
+                        },
+                        valueAxis:
+                            {
+                                title: { text: 'Value<br>' }
+                            },
+                        series:
+                            [
+                                { emptyPointsDisplay: 'skip', displayText: 'Value', lineWidth: 2, symbolSize: 8, symbolType: 'circle' }
+                            ]
+                    }
+                ]
+            }
+        },
+        methods: {
+            dropDownOnSelect: function (event) {
+                let args = event.args;
+
+                if (args) {
+                    let value = args.item.value;
+                    this.$refs.myChart.seriesGroups[0].series[0].emptyPointsDisplay = value;
+                    this.$refs.myChart.update();
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/lineseriewithmissingpoints/main.js b/chart/lineseriewithmissingpoints/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/lineseriewithmissingpoints/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/lineseriewithmissingpoints/package.json b/chart/lineseriewithmissingpoints/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/lineseriewithmissingpoints/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/lineseriewithmultipledatasources/App.vue b/chart/lineseriewithmultipledatasources/App.vue
new file mode 100644
index 00000000..8e929939
--- /dev/null
+++ b/chart/lineseriewithmultipledatasources/App.vue
@@ -0,0 +1,99 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Fitness & exercise weekly scorecard'"
+              :description="'Time spent in vigorous exercise'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="days" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme02'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                days: [
+                    { Day: 'Monday' },
+                    { Day: 'Tuesday' },
+                    { Day: 'Wednesday' },
+                    { Day: 'Thursday' },
+                    { Day: 'Friday' },
+                    { Day: 'Saturday' },
+                    { Day: 'Sunday' }
+                ],
+                padding: { left: 5, top: 5, right: 40, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Day',
+                    gridLines: { visible: true }
+                },
+                valueAxis: {
+                    visible: true,
+                    title: { text: 'Time in minutes' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'stackedline',
+                        source: this.Keith,
+                        series: [
+                            { dataField: 'Minutes', displayText: 'Keith' }
+                        ]
+                    },
+                    {
+                        type: 'stackedline',
+                        source: this.Erica,
+                        series: [
+                            { dataField: 'Minutes', displayText: 'Erica' }
+                        ]
+                    },
+                    {
+                        type: 'stackedline',
+                        source: this.George,
+                        series: [
+                            { dataField: 'Minutes', displayText: 'George' }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.Keith = [
+                { Minutes: 30 },
+                { Minutes: 25 },
+                { Minutes: 30 },
+                { Minutes: 35 },
+                { Minutes: 20 },
+                { Minutes: 30 },
+                { Minutes: 60 }
+            ];
+
+            this.Erica = [
+                { Minutes: 15 },
+                { Minutes: 25 },
+                { Minutes: 20 },
+                { Minutes: 25 },
+                { Minutes: 20 },
+                { Minutes: 20 },
+                { Minutes: 45 }
+            ];
+
+            this.George = [
+                { Minutes: 25 },
+                { Minutes: 30 },
+                { Minutes: 25 },
+                { Minutes: 45 },
+                { Minutes: 25 },
+                { Minutes: 30 },
+                { Minutes: 90 }
+            ];
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/lineseriewithmultipledatasources/main.js b/chart/lineseriewithmultipledatasources/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/lineseriewithmultipledatasources/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/lineseriewithmultipledatasources/package.json b/chart/lineseriewithmultipledatasources/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/lineseriewithmultipledatasources/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/liveupdates/App.vue b/chart/liveupdates/App.vue
new file mode 100644
index 00000000..e0b08685
--- /dev/null
+++ b/chart/liveupdates/App.vue
@@ -0,0 +1,118 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'Live updates demo'" :enableAxisTextAnimation="true"
+                  :description="''" :animationDuration="1000"
+                  :showLegend="true" :enableAnimations="true" :padding="padding"
+                  :titlePadding="titlePadding" :source="data" :xAxis="xAxis"
+                  :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme03'">
+        </JqxChart>
+        <table style="width: 680px">
+            <tbody>
+                <tr>
+                    <td style="padding-left: 50px">
+                        <p>Select the series type:</p>
+                        <JqxDropDownList v-on:change="seriesOnChange($event)"
+                                         :width="200" :height="25" :selectedIndex="2"
+                                         :dropDownHeight="100" :source="seriesList">
+                        </JqxDropDownList>
+                    </td>
+                    <td>
+                        <p>Select color scheme:</p>
+                        <JqxDropDownList v-on:change="colorsOnChange($event)"
+                                         :width="200" :height="25" :selectedIndex="2"
+                                         :dropDownHeight="100" :source="colorsSchemesList">
+                        </JqxDropDownList>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxChart,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                data: [
+                    { a: 100, b: 200, c: 1 },
+                    { a: 120, b: 140, c: 2 },
+                    { a: 100, b: 110, c: 3 },
+                    { a: 90, b: 135, c: 4 },
+                    { a: 70, b: 210, c: 5 },
+                    { a: 170, b: 210, c: 5 },
+                    { a: 270, b: 350, c: 5 },
+                    { a: 710, b: 410, c: 5 },
+                    { a: 230, b: 305, c: 5 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    unitInterval: 1,
+                    gridLines: { interval: 2 },
+                    valuesOnTicks: false
+                },
+                valueAxis: {
+                    minValue: 0,
+                    maxValue: 1000,
+                    title: { text: 'Index Value' },
+                    labels: { horizontalAlignment: 'right' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        columnsGapPercent: 50,
+                        alignEndPointsWithIntervals: true,
+                        series: [
+                            { dataField: 'a', displayText: 'a', opacity: 1, lineWidth: 1, symbolType: 'circle', fillColorSymbolSelected: 'white', radius: 15 },
+                            { dataField: 'b', displayText: 'b', opacity: 1, lineWidth: 1, symbolType: 'circle', fillColorSymbolSelected: 'white', radius: 15 }
+                        ]
+                    }
+                ],
+                colorsSchemesList: ['scheme01', 'scheme02', 'scheme03', 'scheme04', 'scheme05', 'scheme06', 'scheme07', 'scheme08'],
+                seriesList: ['splinearea', 'spline', 'column', 'scatter', 'stackedcolumn', 'stackedsplinearea', 'stackedspline']
+            }
+        },
+        mounted: function () {
+            let data = this.$refs.myChart.source;
+            let timer = setInterval(() => {
+                let max = 800;
+                for (let i = 0; i < data.length; i++) {
+                    data[i].a = Math.max(100, (Math.random() * 1000) % max);
+                    data[i].b = Math.max(100, (Math.random() * 1000) % max);
+                }
+                this.$refs.myChart.update();
+            }, 3000);
+        },
+        methods: {
+            colorsOnChange: function (event) {
+                let value = event.args.item.value;
+                this.$refs.myChart.colorScheme = value;
+                this.$refs.myChart.update();
+            },
+            seriesOnChange: function (event) {
+                let args = event.args;
+                if (args) {
+                    let value = args.item.value;
+                    let isLine = value.indexOf('line') != -1;
+                    let isArea = value.indexOf('area') != -1;
+                    let group = this.$refs.myChart.seriesGroups[0];
+                    group.series[0].opacity = group.series[1].opacity = isArea ? 0.7 : 1;
+                    group.series[0].lineWidth = group.series[1].lineWidth = isLine ? 2 : 1;
+                    group.type = value;
+                    this.$refs.myChart.update();
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/liveupdates/main.js b/chart/liveupdates/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/liveupdates/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/liveupdates/package.json b/chart/liveupdates/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/liveupdates/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/liveupdateseverysecond/App.vue b/chart/liveupdateseverysecond/App.vue
new file mode 100644
index 00000000..a517f40e
--- /dev/null
+++ b/chart/liveupdateseverysecond/App.vue
@@ -0,0 +1,130 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'Live updates demo'" :enableAxisTextAnimation="true"
+                  :description="''" :animationDuration="1000"
+                  :showLegend="true" :enableAnimations="false" :padding="padding"
+                  :titlePadding="titlePadding" :source="data" :xAxis="xAxis"
+                  :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme03'">
+        </JqxChart>
+        <table style="width: 680px">
+            <tbody>
+                <tr>
+                    <td style="padding-left: 50px">
+                        <p>Select the series type:</p>
+                        <JqxDropDownList @change="seriesOnChange($event)"
+                                         :width="200" :height="25" :selectedIndex="0"
+                                         :dropDownHeight="100" :source="seriesList">
+                        </JqxDropDownList>
+                    </td>
+                    <td>
+                        <p>Select color scheme:</p>
+                        <JqxDropDownList @change="colorsOnChange($event)"
+                                         :width="200" :height="25" :selectedIndex="2"
+                                         :dropDownHeight="100" :source="colorsSchemesList">
+                        </JqxDropDownList>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxChart,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                data: this.data,
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'timestamp',
+                    type: 'date',
+                    baseUnit: 'second',
+                    unitInterval: 5,
+                    formatFunction: (value) => {
+                        return jqx.dataFormat.formatdate(value, 'hh:mm:ss', 'en-us');
+                    },
+                    gridLines: { step: 2 },
+                    valuesOnTicks: true,
+                    labels: { angle: -45, offset: { x: -17, y: 0 } }
+                },
+                valueAxis: {
+                    minValue: 0,
+                    maxValue: 1000,
+                    title: { text: 'Index Value' },
+                    labels: { horizontalAlignment: 'right' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'line',
+                        columnsGapPercent: 50,
+                        alignEndPointsWithIntervals: true,
+                        valueAxis:
+                        {
+                            minValue: 0,
+                            maxValue: 1000,
+                            title: { text: 'Index Value' }
+                        },
+                        series: [
+                            { dataField: 'value', displayText: 'value', opacity: 1, lineWidth: 2, symbolType: 'circle', fillColorSymbolSelected: 'white', symbolSize: 4 }
+                        ]
+                    }
+                ],
+                colorsSchemesList: ['scheme01', 'scheme02', 'scheme03', 'scheme04', 'scheme05', 'scheme06', 'scheme07', 'scheme08'],
+                seriesList: ['line', 'area', 'stepline', 'steparea', 'splinearea', 'spline', 'column', 'scatter', 'stackedcolumn', 'stackedsplinearea', 'stackedspline']
+            }
+        },
+        beforeCreate: function () {
+            this.data = [];
+
+            let max = 800;
+            let timestamp = new Date();
+            for (let i = 0; i < 60; i++) {
+                timestamp.setMilliseconds(0);
+                timestamp.setSeconds(timestamp.getSeconds() - 1);
+                this.data.push({ timestamp: new Date(timestamp.valueOf()), value: Math.max(100, (Math.random() * 1000) % max) });
+            }
+            this.data = this.data.reverse();
+        },
+        mounted: function () {
+            let data = this.$refs.myChart.source;
+            let timer = setInterval(() => {
+                let max = 800;
+                if (data.length >= 60) {
+                    data.splice(0, 1);
+                }
+                let timestamp = new Date();
+                timestamp.setSeconds(timestamp.getSeconds());
+                timestamp.setMilliseconds(0);
+                data.push({ timestamp: timestamp, value: Math.max(100, (Math.random() * 1000) % max) });
+                this.$refs.myChart.update();
+            }, 1000);
+        },
+        methods: {
+            colorsOnChange: function (event) {
+                let value = event.args.item.value;
+                this.$refs.myChart.colorScheme = value;
+                this.$refs.myChart.update();
+            },
+            seriesOnChange: function (event) {
+                let args = event.args;
+                if (args) {
+                    let value = args.item.value;
+                    this.$refs.myChart.seriesGroups[0].type = value;
+                    this.$refs.myChart.update();
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/liveupdateseverysecond/main.js b/chart/liveupdateseverysecond/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/liveupdateseverysecond/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/liveupdateseverysecond/package.json b/chart/liveupdateseverysecond/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/liveupdateseverysecond/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/liveupdatesperformance/App.vue b/chart/liveupdatesperformance/App.vue
new file mode 100644
index 00000000..b1b0165b
--- /dev/null
+++ b/chart/liveupdatesperformance/App.vue
@@ -0,0 +1,142 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'Live updates performance'" :enableAxisTextAnimation="true"
+                  :description="'Data changes every 100 milliseconds'"
+                  :showLegend="true" :enableAnimations="false" :padding="padding"
+                  :titlePadding="titlePadding" :source="data" :xAxis="xAxis"
+                  :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+        </JqxChart>
+        <table style="width: 680px">
+            <tbody>
+                <tr>
+                    <td style="padding-left: 50px">
+                        <p>Pause / Resume updates:</p>
+
+                        <JqxButton ref="myBtn" @click="btnOnClick($event)" :width="160">
+                            Pause
+                        </JqxButton>
+                    </td>
+                    <td>
+                        <p>Select color scheme:</p>
+                        <JqxDropDownList @change="colorsOnChange($event)"
+                                         :width="200" :height="25" :selectedIndex="2"
+                                         :dropDownHeight="100" :source="colorsSchemesList">
+                        </JqxDropDownList>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxChart,
+            JqxButton,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                data: this.data,
+                padding: { left: 10, top: 10, right: 10, bottom: 10 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'key',
+                    unitInterval: 1,
+                    valuesOnTicks: true,
+                    gridLines: { visible: false }
+                },
+                valueAxis: {
+                    minValue: 0,
+                    maxValue: 750,
+                    title: { text: 'Index Value<br>' },
+                },
+                seriesGroups: [
+                    {
+                        type: 'line',
+                        useGradientColors: false,
+                        series: [
+                            { dataField: 'value1', displayText: 'value1', lineWidth: 2, symbolType: 'circle' }
+                        ]
+                    },
+                    {
+                        type: 'spline',
+                        useGradientColors: false,
+                        columnsGapPercent: 50,
+                        alignEndPointsWithIntervals: true,
+                        series: [
+                            { dataField: 'value2', displayText: 'value2' }
+                        ]
+                    },
+                    {
+                        type: 'column',
+                        useGradientColors: false,
+                        columnsGapPercent: 50,
+                        alignEndPointsWithIntervals: true,
+                        series: [
+                            { dataField: 'value3', displayText: 'value3' }
+                        ]
+                    }
+                ],
+                colorsSchemesList: ['scheme01', 'scheme02', 'scheme03', 'scheme04', 'scheme05', 'scheme06', 'scheme07', 'scheme08']
+            }
+        },
+        beforeCreate: function () {
+            this.data = [];
+            let max = 200;
+            let timestamp = new Date();
+            for (let i = 0; i < 20; i++) {
+                this.data.push({
+                    key: i,
+                    value1: (Math.random() * 200) % 200 + 200,
+                    value2: (Math.random() * 200) % 200 + 500,
+                    value3: (Math.random() * 200) % 200,
+                });
+            }
+        },
+        mounted: function () {
+            this.timer = setInterval(this.timerFunction, this.refreshTimeout());
+        },
+        methods: {
+            btnOnClick: function (event) {
+                if (this.timer) {
+                    clearInterval(this.timer);
+                    this.$refs.myBtn.val('Resume');
+                    this.timer = undefined;
+                }
+                else {
+                    this.timer = setInterval(this.timerFunction, this.refreshTimeout());
+                    this.$refs.myBtn.val('Pause');
+                }
+            },
+            colorsOnChange: function (event) {
+                let value = event.args.item.value;
+                this.$refs.myChart.colorScheme = value;
+                this.$refs.myChart.update();
+            },
+            timerFunction: function () {
+                let data = this.$refs.myChart.source;
+                data.splice(0, 1);
+                data.push({
+                    key: data[data.length - 1].key + 1,
+                    value1: (Math.random() * 200) % 200 + 200,
+                    value2: (Math.random() * 200) % 200 + 500,
+                    value3: (Math.random() * 200) % 200,
+                });
+                this.$refs.myChart.update();
+            },
+            refreshTimeout: function () {
+                return 100;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/liveupdatesperformance/main.js b/chart/liveupdatesperformance/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/liveupdatesperformance/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/liveupdatesperformance/package.json b/chart/liveupdatesperformance/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/liveupdatesperformance/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/logarithmicXaxis/App.vue b/chart/logarithmicXaxis/App.vue
new file mode 100644
index 00000000..0f80659b
--- /dev/null
+++ b/chart/logarithmicXaxis/App.vue
@@ -0,0 +1,61 @@
+<template>
+    <JqxChart ref="myChart" style="width: 850px; height: 500px"
+              :title="'Logarithmic Scale x-Axis Example'"
+              :description="'Horizontal axis with base 2 logarithmic scale'"
+              :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { a: 0.1535, b: 0.5 },
+                    { a: 0.48, b: 20.5 },
+                    { a: 10, b: 60 },
+                    { a: 100, b: 80 },
+                    { a: 200, b: 90 },
+                    { a: 245.11, b: 100.13 },
+                    { a: 300.13, b: 150.13 },
+                    { a: 340, b: 200 }
+                ],
+                padding: { left: 15, top: 5, right: 15, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'a',
+                    logarithmicScale: true,
+                    logarithmicScaleBase: 2
+                },
+                valueAxis: {
+                    logarithmicScale: false,
+                    logarithmicScaleBase: 2,
+                    title: { text: 'Value' },
+                    labels:
+                        {
+                            horizontalAlignment: 'right'
+                        }
+                },
+                seriesGroups: [
+                    {
+                        type: 'line',
+                        series: [
+                            { dataField: 'a', displayText: 'A', symbolType: 'square', symbolSize: 6, dashStyle: '4,4', lineWidth: 1 },
+                            { dataField: 'b', displayText: 'B', symbolType: 'circle', symbolSize: 6, lineWidth: 1 }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/logarithmicXaxis/main.js b/chart/logarithmicXaxis/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/logarithmicXaxis/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/logarithmicXaxis/package.json b/chart/logarithmicXaxis/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/logarithmicXaxis/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/logarithmicaxisbaseline/App.vue b/chart/logarithmicaxisbaseline/App.vue
new file mode 100644
index 00000000..926b7e43
--- /dev/null
+++ b/chart/logarithmicaxisbaseline/App.vue
@@ -0,0 +1,61 @@
+<template>
+    <JqxChart ref="myChart" style="width: 850px; height: 500px"
+              :title="'Logarithmic Scale Axis Example'"
+              :description="'Sample logarithmic scale axis with base 2 and baseline 8'"
+              :enableAnimations="false" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [{ a: 0.35, b: 14.5 }, { a: 1, b: 2.5 }, { a: 10, b: 0.2 }, { a: 100, b: 205 }, { a: 1, b: 100 }, { a: 5.11, b: 10.13 }, { a: 20.13, b: 10.13 }, { a: 600, b: 300 }],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: ''
+                },
+                valueAxis: {
+                    logarithmicScale: true,
+                    logarithmicScaleBase: 2,
+                    baselineValue: 8,
+                    unitInterval: 1,
+                    title: { text: 'Value' },
+                    tickMarks: { interval: 1 },
+                    gridLines: { interval: 1 },
+                    labels: {
+                        formatSettings: { decimalPlaces: 3 },
+                        horizontalAlignment: 'right'
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        series: [
+                            { dataField: 'a', displayText: 'A' },
+                            { dataField: 'b', displayText: 'B' }
+                        ]
+                    },
+                    {
+                        type: 'line',
+                        series: [
+                            { dataField: 'a', displayText: 'A2' },
+                            { dataField: 'b', displayText: 'B2' }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/logarithmicaxisbaseline/main.js b/chart/logarithmicaxisbaseline/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/logarithmicaxisbaseline/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/logarithmicaxisbaseline/package.json b/chart/logarithmicaxisbaseline/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/logarithmicaxisbaseline/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/logarithmicwaterfallseries/App.vue b/chart/logarithmicwaterfallseries/App.vue
new file mode 100644
index 00000000..4e2b3f0d
--- /dev/null
+++ b/chart/logarithmicwaterfallseries/App.vue
@@ -0,0 +1,63 @@
+<template>
+    <JqxChart ref="myChart" style="width: 850px; height: 500px"
+              :title="'Waterfall series with logarithmic axis'"
+              :description="'Logarithmic base 2'"
+              :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { a: 3, b: 9 },
+                    { a: 5, b: 7 },
+                    { a: 2, b: 9 },
+                    { a: 10, b: 15 },
+                    { a: 9, b: 7 },
+                    { a: 15, b: 10 },
+                    { a: 7, b: 5 },
+                    { total: true }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    gridLines: { visible: true },
+                    tickMarks: { visible: true }
+                },
+                valueAxis: {
+                    logarithmicScale: true,
+                    logarithmicScaleBase: 2,
+                    title: { text: 'Value<br>' },
+                    labels:
+                        {
+                            formatSettings: { decimalPlaces: 2 },
+                            horizontalAlignment: 'right'
+                        }
+                },
+                seriesGroups: [
+                    {
+                        type: 'waterfall',
+                        columnsMaxWidth: 50,
+                        series:
+                            [
+                                { dataField: 'a', displayText: 'A' },
+                                { dataField: 'b', displayText: 'B', summary: 'total' }
+                            ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/logarithmicwaterfallseries/main.js b/chart/logarithmicwaterfallseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/logarithmicwaterfallseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/logarithmicwaterfallseries/package.json b/chart/logarithmicwaterfallseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/logarithmicwaterfallseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/multipleseriestypes/App.vue b/chart/multipleseriestypes/App.vue
new file mode 100644
index 00000000..6dff6b61
--- /dev/null
+++ b/chart/multipleseriestypes/App.vue
@@ -0,0 +1,81 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Fitness & exercise weekly scorecard'"
+              :description="'Time spent in vigorous exercise by activity'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis" :borderLineColor="'#888888'"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme05'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
+                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
+                    { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
+                    { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
+                    { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
+                    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
+                    { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Day',
+                    unitInterval: 1,
+                    tickMarks:
+                        {
+                            visible: true,
+                            interval: 1,
+                            color: '#888888'
+                        },
+                    gridLines: {
+                        visible: false,
+                        interval: 1,
+                        color: '#888888'
+                    },
+                    axisSize: 'auto'
+                },
+                valueAxis: {
+                    visible: true,
+                    unitInterval: 10,
+                    minValue: 0,
+                    maxValue: 100,
+                    title: { text: 'Time in minutes' },
+                    tickMarks: { color: '#888888' },
+                    gridLines: { color: '#888888' },
+                    axisSize: 'auto'
+                },
+                seriesGroups: [
+                    {
+                        type: 'splinearea',
+                        series: [
+                            { dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
+                        ]
+                    },
+                    {
+                        type: 'stackedcolumn',
+                        columnsGapPercent: 50,
+                        seriesGapPercent: 5,
+                        series: [
+                            { dataField: 'Running', displayText: 'Running' },
+                            { dataField: 'Swimming', displayText: 'Swimming' },
+                            { dataField: 'Cycling', displayText: 'Cycling' }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/multipleseriestypes/main.js b/chart/multipleseriestypes/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/multipleseriestypes/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/multipleseriestypes/package.json b/chart/multipleseriestypes/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/multipleseriestypes/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/negativebarseries/App.vue b/chart/negativebarseries/App.vue
new file mode 100644
index 00000000..a44aa5cc
--- /dev/null
+++ b/chart/negativebarseries/App.vue
@@ -0,0 +1,58 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'CPI inflation comparison by country'"
+              :description="'Years: 2011 vs 2012'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme02'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Country: 'Switzerland', Inflation2012: -0.95, Inflation2011: -0.72 },
+                    { Country: 'USA', Inflation2012: 2.35, Inflation2011: 2.96 },
+                    { Country: 'Germany', Inflation2012: 2.03, Inflation2011: 2.10 },
+                    { Country: 'India', Inflation2012: 8.38, Inflation2011: 6.49 },
+                    { Country: 'China', Inflation2012: 3.34, Inflation2011: 4.06 },
+                    { Country: 'Canada', Inflation2012: 2.05, Inflation2011: 2.30 }
+                ],
+                padding: { left: 20, top: 5, right: 20, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Country'
+                },
+                valueAxis: {
+                    title: { visible: false },
+                    unitInterval: 1,
+                    minValue: -5,
+                    maxValue: 10,
+                    labels: { formatSettings: { sufix: '%' } }
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        orientation: 'horizontal',
+                        columnsGapPercent: 50,
+                        toolTipFormatSettings: { sufix: '%' },
+                        series: [
+                            { dataField: 'Inflation2012', displayText: 'Inflation 2012' },
+                            { dataField: 'Inflation2011', displayText: 'Inflation 2011' }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/negativebarseries/main.js b/chart/negativebarseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/negativebarseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/negativebarseries/package.json b/chart/negativebarseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/negativebarseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/negativevalues/App.vue b/chart/negativevalues/App.vue
new file mode 100644
index 00000000..4c046b10
--- /dev/null
+++ b/chart/negativevalues/App.vue
@@ -0,0 +1,70 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Weather in Geneva, Switzerland'"
+              :description="'Climatological Information about Geneva'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme05'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'month',
+                    displayText: 'Month',
+                    unitInterval: 1,
+                    gridLines: { interval: 3 }
+                },
+                valueAxis: {
+                    unitInterval: 5,
+                    title: {
+                        visible: true,
+                        text: 'Temperature [C]<br>'
+                    },
+                    labels: {
+                        formatSettings: {
+                            decimalPlaces: 1,
+                            negativeWithBrackets: false
+                        },
+                        horizontalAlignment: 'right'
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        series: [
+                            { dataField: 'max', displayText: 'Max Temperature' },
+                            { dataField: 'min', displayText: 'Min Temperature' }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    datatype: 'json',
+                    datafields: [
+                        { name: 'month' },
+                        { name: 'min' },
+                        { name: 'max' },
+                    ],
+                    url: '../sampledata/weather_geneva.txt'
+                };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/negativevalues/main.js b/chart/negativevalues/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/negativevalues/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/negativevalues/package.json b/chart/negativevalues/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/negativevalues/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/nondatexaxisrangeselection/App.vue b/chart/nondatexaxisrangeselection/App.vue
new file mode 100644
index 00000000..bd29f041
--- /dev/null
+++ b/chart/nondatexaxisrangeselection/App.vue
@@ -0,0 +1,76 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Range selector with regular x-axis'"
+              :description="'In this example the range selector works with (non-date) axis'"
+              :showLegend="false" :enableAnimations="true" :padding="padding"
+              :source="dataAdapter" :xAxis="xAxis" :enableCrosshairs="true"
+              :animationDuration="1500" :seriesGroups="seriesGroups" :colorScheme="'scheme02'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 20, bottom: 5 },
+                xAxis: {
+                    minValue: 175,
+                    maxValue: 550,
+                    flip: false,
+                    valuesOnTicks: true,
+                    rangeSelector: {
+                        serieType: 'area',
+                        padding: { top: 20, bottom: 0 },
+                        backgroundColor: 'white',
+                        size: 110,
+                        gridLines: { visible: false },
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'line',
+                        toolTipFormatFunction: this.toolTipCustomFormatFn,
+                        valueAxis:
+                            {
+                                flip: false,
+                                title: { text: 'Value<br><br>' }
+                            },
+                        series: [
+                            { dataField: 'Close', lineWidth: 1, lineWidthSelected: 1 }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    datatype: 'csv',
+                    datafields: [
+                        { name: 'Date' },
+                        { name: 'Open' },
+                        { name: 'High' },
+                        { name: 'Low' },
+                        { name: 'Close' },
+                        { name: 'Volume' },
+                        { name: 'AdjClose' }
+                    ],
+                    url: '../sampledata/TSLA_stockprice.csv'
+                };
+        },
+        methods: {
+            toolTipCustomFormatFn: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
+                return 'Index: ' + itemIndex + ", Value: " + value;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/nondatexaxisrangeselection/main.js b/chart/nondatexaxisrangeselection/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/nondatexaxisrangeselection/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/nondatexaxisrangeselection/package.json b/chart/nondatexaxisrangeselection/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/nondatexaxisrangeselection/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/ohlcchart/App.vue b/chart/ohlcchart/App.vue
new file mode 100644
index 00000000..dc2b513e
--- /dev/null
+++ b/chart/ohlcchart/App.vue
@@ -0,0 +1,142 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'NASDAQ and S&P 500 - OHLC Example'"
+              :description="'(June 2010 - November 2014)'"
+              :enableCrosshairs="true" :enableAnimations="true" :padding="padding"
+              :source="dataAdapter" :xAxis="xAxis" :animationDuration="1500"
+              :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                xAxis: {
+                    dataField: 'Date',
+                    labels:
+                        {
+                            formatFunction: (value) => {
+                                return value.getDate() + '-' + this.months[value.getMonth()] + '<br>' + value.getFullYear().toString();
+                            }
+                        },
+                    type: 'date',
+                    valuesOnTicks: true,
+                    minValue: new Date(2014, 8, 20),
+                    maxValue: new Date(2014, 10, 1),
+                    rangeSelector: {
+                        serieType: 'area',
+                        padding: { left: 25, right: 10, top: 10, bottom: 10 },
+                        backgroundColor: 'white',
+                        dataField: 'SPClose',
+                        baseUnit: 'month',
+                        gridLines: { visible: false },
+                        labels:
+                            {
+                                formatFunction: (value) => {
+                                    return this.months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
+                                }
+                            }
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'ohlc',
+                        toolTipFormatFunction: this.toolTipCustomFormatFn,
+                        valueAxis:
+                            {
+                                description: 'S&P 500<br>'
+                            },
+                        series: [
+                            {
+                                dataFieldClose: 'SPClose',
+                                displayTextClose: 'S&P Close price',
+                                dataFieldOpen: 'SPOpen',
+                                displayTextOpen: 'S&P Open price',
+                                dataFieldHigh: 'SPHigh',
+                                displayTextHigh: 'S&P High price',
+                                dataFieldLow: 'SPLow',
+                                displayTextLow: 'S&P Low price',
+                                displayText: 'S&P 500',
+                                lineWidth: 1
+                            }
+                        ]
+                    },
+                    {
+                        type: 'line',
+                        toolTipFormatFunction: this.toolTipCustomFormatFn,
+                        valueAxis:
+                            {
+                                position: 'right',
+                                title: { text: '<br>NASDAQ' },
+                                gridLines: { visible: false }
+                            },
+                        series: [
+                            {
+                                dataField: 'NQClose',
+                                dataFieldClose: 'NQClose',
+                                displayTextClose: 'Nasdaq Close price',
+                                dataFieldOpen: 'NQOpen',
+                                displayTextOpen: 'Nasdaq Open price',
+                                dataFieldHigh: 'NQHigh',
+                                displayTextHigh: 'Nasdaq High price',
+                                dataFieldLow: 'NQLow',
+                                displayTextLow: 'Nasdaq Low price',
+                                displayText: 'NASDAQ',
+                                lineWidth: 1
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+            this.source =
+                {
+                    datatype: 'tsv',
+                    datafields: [
+                        { name: 'Date' },
+                        { name: 'SPOpen' },
+                        { name: 'SPHigh' },
+                        { name: 'SPLow' },
+                        { name: 'SPClose' },
+                        { name: 'SPVolume' },
+                        { name: 'SPAdjClose' },
+                        { name: 'NQOpen' },
+                        { name: 'NQHigh' },
+                        { name: 'NQLow' },
+                        { name: 'NQClose' },
+                        { name: 'NQVolume' },
+                        { name: 'NQAdjClose' }
+                    ],
+                    url: '../sampledata/nasdaq_vs_sp500_detailed.txt'
+                };
+        },
+        methods: {
+            toolTipCustomFormatFn: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
+                var dataItem = this.dataAdapter.records[itemIndex];
+                var volume = serie == 0 ? dataItem.SPVolume : dataItem.NQVolume;
+                return '<DIV style="text-align:left"><b>Date: ' +
+                    categoryValue.getDate() + '-' + this.months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
+                    '</b><br />Open price: $' + value.open +
+                    '</b><br />Close price: $' + value.close +
+                    '</b><br />Low price: $' + value.low +
+                    '</b><br />High price: $' + value.high +
+                    '</b><br />Daily volume: ' + volume +
+                    '</DIV>';
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/ohlcchart/main.js b/chart/ohlcchart/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/ohlcchart/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/ohlcchart/package.json b/chart/ohlcchart/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/ohlcchart/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/partialpieseries/App.vue b/chart/partialpieseries/App.vue
new file mode 100644
index 00000000..9ab2a960
--- /dev/null
+++ b/chart/partialpieseries/App.vue
@@ -0,0 +1,127 @@
+<template>
+    <div>
+        <JqxChart style="width: 400px; height: 250px; float: left"
+                  :title="''"
+                  :description="charts[0].title"
+                  :showLegend="true" :enableAnimations="false" :padding="padding"
+                  :titlePadding="titlePadding" :source="charts[0].dataSource" :showBorderLine="true"
+                  :seriesGroups="seriesGroups" :colorScheme="'scheme03'">
+        </JqxChart>
+
+        <JqxChart style="width: 400px; height: 250px; float: left"
+                  :title="''"
+                  :description="charts[1].title"
+                  :showLegend="true" :enableAnimations="false" :padding="padding"
+                  :titlePadding="titlePadding" :source="charts[1].dataSource" :showBorderLine="true"
+                  :seriesGroups="seriesGroups" :colorScheme="'scheme03'">
+        </JqxChart>
+
+        <JqxChart style="width: 400px; height: 250px; float: left"
+                  :title="''"
+                  :description="charts[2].title"
+                  :showLegend="true" :enableAnimations="false" :padding="padding"
+                  :titlePadding="titlePadding" :source="charts[2].dataSource" :showBorderLine="true"
+                  :seriesGroups="seriesGroups" :colorScheme="'scheme03'">
+        </JqxChart>
+
+        <JqxChart style="width: 400px; height: 250px; float: left"
+                  :title="''"
+                  :description="charts[3].title"
+                  :showLegend="true" :enableAnimations="false" :padding="padding"
+                  :titlePadding="titlePadding" :source="charts[3].dataSource" :showBorderLine="true"
+                  :seriesGroups="seriesGroups" :colorScheme="'scheme03'">
+        </JqxChart>
+    </div>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                charts: [
+                    { title: 'Stat counter', label: 'Stat', dataSource: this.dataStatCounter },
+                    { title: 'W3C counter', label: 'W3C', dataSource: this.dataW3CCounter },
+                    { title: 'Wikimedia', label: 'Wikimedia', dataSource: this.dataWikimedia },
+                    { title: 'Net Applications', label: 'NetApp', dataSource: this.dataNetApplications }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                seriesGroups: [
+                    {
+                        type: 'pie',
+                        showLegend: true,
+                        enableSeriesToggle: true,
+                        series:
+                            [
+                                {
+                                    dataField: 'Share',
+                                    displayText: 'Browser',
+                                    showLabels: true,
+                                    labelRadius: 160,
+                                    labelLinesEnabled: true,
+                                    labelLinesAngles: true,
+                                    labelsAutoRotate: false,
+                                    initialAngle: 0,
+                                    radius: 125,
+                                    minAngle: 0,
+                                    maxAngle: 180,
+                                    centerOffset: 0,
+                                    offsetY: 170,
+                                    formatFunction: (value, itemIdx, serieIndex, groupIndex) => {
+                                        if (isNaN(value))
+                                            return value;
+                                        return value + '%';
+                                    }
+                                }
+                            ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.dataStatCounter = [
+                { Browser: 'Chrome', Share: 45.6 },
+                { Browser: 'IE', Share: 24.6 },
+                { Browser: 'Firefox', Share: 20.4 },
+                { Browser: 'Safari', Share: 5.1 },
+                { Browser: 'Opera', Share: 1.3 },
+                { Browser: 'Other', Share: 3.0 }
+            ];
+
+            this.dataW3CCounter = [
+                { Browser: 'Chrome', Share: 34.1 },
+                { Browser: 'IE', Share: 20.3 },
+                { Browser: 'Firefox', Share: 18.3 },
+                { Browser: 'Safari', Share: 17.8 },
+                { Browser: 'Opera', Share: 2.7 },
+                { Browser: 'Other', Share: 6.8 }
+            ];
+
+            this.dataWikimedia = [
+                { Browser: 'Chrome', Share: 42.7 },
+                { Browser: 'IE', Share: 18.0 },
+                { Browser: 'Firefox', Share: 15.3 },
+                { Browser: 'Safari', Share: 6.1 },
+                { Browser: 'Opera', Share: 2.4 },
+                { Browser: 'Other', Share: 15.6 }
+            ];
+
+            this.dataNetApplications = [
+                { Browser: 'Chrome', Share: 16.4 },
+                { Browser: 'IE', Share: 55.2 },
+                { Browser: 'Firefox', Share: 18.0 },
+                { Browser: 'Safari', Share: 5.8 },
+                { Browser: 'Opera', Share: 1.3 },
+                { Browser: 'Other', Share: 3.4 }
+            ];
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/partialpieseries/main.js b/chart/partialpieseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/partialpieseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/partialpieseries/package.json b/chart/partialpieseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/partialpieseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/partialpolarchart/App.vue b/chart/partialpolarchart/App.vue
new file mode 100644
index 00000000..ba943b79
--- /dev/null
+++ b/chart/partialpolarchart/App.vue
@@ -0,0 +1,156 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'Sales volume and revenue by city'"
+                  :description="'(revenue in thousands)'"
+                  :showLegend="true" :enableAnimations="false" :padding="padding"
+                  :titlePadding="titlePadding" :source="dataset" :xAxis="xAxis"
+                  :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+        </JqxChart>
+
+        <table style="width: 850px">
+            <tbody>
+                <tr>
+                    <td style="padding-left: 50px">
+                        <p style="font-family: Verdana; font-size: 12px">Move the slider to change start angle:</p>
+                        <JqxSlider @change="sliderStartAngle($event)"
+                                   :width="240" :min="0" :max="360" :step="1"
+                                   :ticksFrequency="20" :mode="'fixed'">
+                        </JqxSlider>
+                    </td>
+                    <td>
+                        <p style="font-family: Verdana; font-size: 12px">Move the slider to change end angle:</p>
+                        <JqxSlider @change="sliderEndAngle($event)"
+                                   :width="240" :min="0" :max="360" :step="1"
+                                   :ticksFrequency="20" :mode="'fixed'" :value="90">
+                        </JqxSlider>
+                    </td>
+                </tr>
+                <tr>
+                    <td style="padding-left: 50px">
+                        <p style="font-family: Verdana; font-size: 12px">Move the slider to rotate:</p>
+                        <JqxSlider @change="sliderRotate($event)"
+                                   :width="240" :min="0" :max="360" :step="1"
+                                   :ticksFrequency="20" :mode="'fixed'">
+                        </JqxSlider>
+                    </td>
+                    <td>
+                        <p style="font-family: Verdana; font-size: 12px">Move the slider to change the radius:</p>
+                        <JqxSlider @change="sliderRadius($event)"
+                                   :width="240" :min="80" :max="140" :step="1"
+                                   :ticksFrequency="20" :mode="'fixed'" :value="120">
+                        </JqxSlider>
+                    </td>
+                </tr>
+                <tr style="height: 15px"></tr>
+                <tr>
+                    <td style="padding-left: 50px">
+                        <JqxCheckBox @change="checkBoxTicksBetween($event)"
+                                     :width="220" :height="25">
+                            Tick marks between values
+                        </JqxCheckBox>
+                    </td>
+                    <td>
+                        <JqxCheckBox @change="checkBoxAutoRotate($event)"
+                                     :width="220" :height="25" :checked="true">
+                            Auto rotate axis text
+                        </JqxCheckBox>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+
+    export default {
+        components: {
+            JqxChart,
+            JqxSlider,
+            JqxCheckBox
+        },
+        data: function () {
+            return {
+                dataset: [
+                    { City: 'London', SalesCountJan: 210, SalesRevenueJan: 123 },
+                    { City: 'Madrid', SalesCountJan: 190, SalesRevenueJan: 114 },
+                    { City: 'Munich', SalesCountJan: 201, SalesRevenueJan: 112 },
+                    { City: 'Amsterdam', SalesCountJan: 110, SalesRevenueJan: 98 },
+                    { City: 'Paris', SalesCountJan: 105, SalesRevenueJan: 93 },
+                    { City: 'Prague', SalesCountJan: 54, SalesRevenueJan: 100 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 5 },
+                xAxis: {
+                    dataField: 'City',
+                    valuesOnTicks: true,
+                    labels: { autoRotate: true }
+                },
+                valueAxis: {
+                    labels: {
+                        formatSettings: { decimalPlaces: 0 },
+                        autoRotate: true
+                    }
+                },
+                seriesGroups: [
+                    {
+                        polar: true,
+                        endAngle: 270,
+                        radius: 120,
+                        type: 'line',
+                        series: [
+                            { dataField: 'SalesCountJan', displayText: 'Sales count', opacity: 0.7, radius: 2, lineWidth: 2, symbolType: 'circle' },
+                            { dataField: 'SalesRevenueJan', displayText: 'Revenue', opacity: 0.7, radius: 2, lineWidth: 2, symbolType: 'square' }
+                        ]
+                    }
+                ]
+            }
+        },
+        methods: {
+            sliderStartAngle: function (event) {
+                let value = event.args.value;
+                this.$refs.myChart.seriesGroups[0].startAngle = value;
+                this.$refs.myChart.update();
+            },
+            sliderEndAngle: function (event) {
+                let value = 360 - event.args.value;
+                this.$refs.myChart.seriesGroups[0].endAngle = value;
+                this.$refs.myChart.update();
+            },
+            sliderRotate: function (event) {
+                let value = event.args.value;
+                let endAngle = this.$refs.myChart.seriesGroups[0].endAngle;
+                if (isNaN(endAngle))
+                    endAngle = 360;
+                let startAngle = this.$refs.myChart.seriesGroups[0].startAngle;
+                if (isNaN(startAngle))
+                    startAngle = 0;
+                let diff = endAngle - startAngle;
+                this.$refs.myChart.seriesGroups[0].startAngle = value;
+                this.$refs.myChart.seriesGroups[0].endAngle = value + diff;
+                this.$refs.myChart.update();
+            },
+            sliderRadius: function (event) {
+                let value = event.args.value;
+                this.$refs.myChart.seriesGroups[0].radius = value;
+                this.$refs.myChart.update();
+            },
+            checkBoxTicksBetween: function (event) {
+                this.$refs.myChart.xAxis.valuesOnTicks = !event.args.checked;
+                this.$refs.myChart.update();
+            },
+            checkBoxAutoRotate: function (event) {
+                this.$refs.myChart.xAxis.labels.autoRotate = event.args.checked;
+                this.$refs.myChart.valueAxis.labels.autoRotate = event.args.checked;
+                this.$refs.myChart.update();
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/partialpolarchart/main.js b/chart/partialpolarchart/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/partialpolarchart/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/partialpolarchart/package.json b/chart/partialpolarchart/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/partialpolarchart/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/percentagestackedcolumns/App.vue b/chart/percentagestackedcolumns/App.vue
new file mode 100644
index 00000000..dd385d0f
--- /dev/null
+++ b/chart/percentagestackedcolumns/App.vue
@@ -0,0 +1,61 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Logarithmic Scale Axis Example'"
+              :description="'Percentage Stacked Columns with logarithmic scale axis (base 2)'"
+              :enableAnimations="false" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :seriesGroups="seriesGroups" :valueAxis="valueAxis">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [{ a: 0.35, b: 14.5 }, { a: 1, b: 2.5 }, { a: 10, b: 0.2 }, { a: 100, b: 205 }, { a: 1, b: 100 }, { a: 5.11, b: 10.13 }, { a: 20.13, b: 10.13 }, { a: 600, b: 300 }],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: ''
+                },
+                valueAxis: {
+                    logarithmicScale: true,
+                    logarithmicScaleBase: 2,
+                    unitInterval: 1,
+                    tickMarks: { interval: 1 },
+                    gridLines: { interval: 1 },
+                    title: { text: 'Value' },
+                    labels: {
+                        formatSettings: { decimalPlaces: 3, sufix: '' },
+                        horizontalAlignment: 'right'
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'stackedcolumn100',
+                        columnsGapPercent: 50,
+                        series: [
+                            { dataField: 'a', displayText: 'A' },
+                            { dataField: 'b', displayText: 'B' }
+                        ]
+                    },
+                    {
+                        type: 'stackedline100',
+                        series: [
+                            { dataField: 'a', displayText: 'A' },
+                            { dataField: 'b', displayText: 'B' }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/percentagestackedcolumns/main.js b/chart/percentagestackedcolumns/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/percentagestackedcolumns/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/percentagestackedcolumns/package.json b/chart/percentagestackedcolumns/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/percentagestackedcolumns/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/pieseries/App.vue b/chart/pieseries/App.vue
new file mode 100644
index 00000000..def1527b
--- /dev/null
+++ b/chart/pieseries/App.vue
@@ -0,0 +1,55 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Desktop browsers share'"
+              :description="'(source: wikipedia.org)'"
+              :showLegend="false" :enableAnimations="false" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter" :showBorderLine="true"
+              :seriesGroups="seriesGroups" :colorScheme="'scheme02'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                seriesGroups: [
+                    {
+                        type: 'pie',
+                        showLabels: true,
+                        series: [{
+                            dataField: 'Share',
+                            displayText: 'Browser',
+                            labelRadius: 120,
+                            initialAngle: 15,
+                            radius: 170,
+                            centerOffset: 0,
+                            formatSettings: { sufix: '%', decimalPlaces: 1 }
+                        }]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    datatype: 'csv',
+                    datafields: [
+                        { name: 'Browser' },
+                        { name: 'Share' }
+                    ],
+                    url: '../sampledata/desktop_browsers_share_dec2011.txt'
+                };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/pieseries/main.js b/chart/pieseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/pieseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/pieseries/package.json b/chart/pieseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/pieseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/pieserieslegend/App.vue b/chart/pieserieslegend/App.vue
new file mode 100644
index 00000000..2f8edffa
--- /dev/null
+++ b/chart/pieserieslegend/App.vue
@@ -0,0 +1,64 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Mobile browsers share'"
+              :description="'(source: wikipedia.org)'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter" :showBorderLine="true"
+              :seriesGroups="seriesGroups" :colorScheme="'scheme03'" :legendLayout="legendLayout">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                legendLayout: { left: 700, top: 160, width: 300, height: 200, flow: 'vertical' },
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                seriesGroups: [
+                    {
+                        type: 'pie',
+                        showLabels: true,
+                        series:
+                            [
+                                {
+                                    dataField: 'Share',
+                                    displayText: 'Browser',
+                                    labelRadius: 170,
+                                    initialAngle: 15,
+                                    radius: 145,
+                                    centerOffset: 0,
+                                    formatFunction: (value) => {
+                                        if (isNaN(value))
+                                            return value;
+                                        return parseFloat(value) + '%';
+                                    },
+                                }
+                            ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.source =
+                {
+                    datatype: 'csv',
+                    datafields: [
+                        { name: 'Browser' },
+                        { name: 'Share' }
+                    ],
+                    url: '../sampledata/mobile_browsers_share_dec2011.txt'
+                };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/pieserieslegend/main.js b/chart/pieserieslegend/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/pieserieslegend/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/pieserieslegend/package.json b/chart/pieserieslegend/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/pieserieslegend/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/polarseries/App.vue b/chart/polarseries/App.vue
new file mode 100644
index 00000000..255ed0b7
--- /dev/null
+++ b/chart/polarseries/App.vue
@@ -0,0 +1,143 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'U.S. Real Home Price vs Building Cost Indeces (1950-2010)'"
+                  :description="'Source: http://www.econ.yale.edu/~shiller/data.htm'"
+                  :showLegend="true" :enableAnimations="true" :padding="padding"
+                  :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+                  :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+        </JqxChart>
+
+        <table style="width: 850px">
+            <tbody>
+                <tr>
+                    <td style="padding-left: 50px">
+                        <p style="font-family: Verdana; font-size: 12px">Move the slider to rotate:</p>
+
+                        <JqxSlider @change="sliderStartAngle($event)"
+                                   :width="240" :min="0" :max="360" :step="1"
+                                   :ticksFrequency="20" :mode="'fixed'">
+                        </JqxSlider>
+
+                    </td>
+                    <td>
+                        <p style="font-family: Verdana; font-size: 12px">Select the series type::</p>
+
+                        <JqxDropDownList @change="dropDownListSeries($event)"
+                                         :width="200" :height="25" :source="seriesList"
+                                         :selectedIndex="0" :dropDownHeight="100">
+                        </JqxDropDownList>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td style="padding-left: 50px">
+                        <p style="font-family: Verdana; font-size: 12px">Move the slider to change the radius:</p>
+
+                        <JqxSlider @change="sliderRadius($event)"
+                                   :width="240" :min="80" :max="140" :step="1"
+                                   :ticksFrequency="20" :mode="'fixed'" :value="120">
+                        </JqxSlider>
+
+                    </td>
+                    <td>
+                        <p style="font-family: Verdana; font-size: 12px">Select color scheme:</p>
+
+                        <JqxDropDownList @change="dropDownListColor($event)"
+                                         :width="200" :height="25" :source="colorsSchemesList"
+                                         :selectedIndex="2" :dropDownHeight="100">
+                        </JqxDropDownList>
+
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxChart,
+            JqxSlider,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 5 },
+                xAxis: {
+                    dataField: 'Year',
+                    unitInterval: 10,
+                    maxValue: 2010,
+                    valuesOnTicks: true,
+                    labels: { autoRotate: true }
+                },
+                seriesGroups: [
+                    {
+                        polar: true,
+                        radius: 120,
+                        type: 'splinearea',
+                        valueAxis:
+                            {
+                                labels: {
+                                    formatSettings: { decimalPlaces: 0 },
+                                    autoRotate: true
+                                }
+                            },
+                        series: [
+                            { dataField: 'HPI', displayText: 'Real Home Price Index', opacity: 0.7, lineWidth: 1, radius: 2 },
+                            { dataField: 'BuildCost', displayText: 'Building Cost Index', opacity: 0.7, lineWidth: 1, radius: 2 }
+                        ]
+                    }
+                ],
+                colorsSchemesList: ['scheme01', 'scheme02', 'scheme03', 'scheme04', 'scheme05', 'scheme06', 'scheme07', 'scheme08'],
+                seriesList: ['splinearea', 'spline', 'column', 'scatter', 'stackedcolumn', 'stackedsplinearea', 'stackedspline']
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    datatype: 'tab',
+                    datafields: [
+                        { name: 'Year' },
+                        { name: 'HPI' },
+                        { name: 'BuildCost' },
+                        { name: 'Population' },
+                        { name: 'Rate' }
+                    ],
+                    url: '../sampledata/homeprices.txt'
+                };
+        },
+        methods: {
+            sliderStartAngle: function (event) {
+                let value = event.args.value;
+                this.$refs.myChart.seriesGroups[0].startAngle = value;
+                this.$refs.myChart.seriesGroups[0].endAngle = value + 360;
+                this.$refs.myChart.update();
+            },
+            sliderRadius: function (event) {
+                let value = event.args.value;
+                this.$refs.myChart.seriesGroups[0].radius = value;
+                this.$refs.myChart.update();
+            },
+            dropDownListColor: function (event) {
+                let value = event.args.item.value;
+                this.$refs.myChart.colorScheme = value;
+            },
+            dropDownListSeries: function (event) {
+                let value = event.args.item.value;
+                this.$refs.myChart.seriesGroups[0].type = value;
+                this.$refs.myChart.update();
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/polarseries/main.js b/chart/polarseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/polarseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/polarseries/package.json b/chart/polarseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/polarseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/polarseriesbands/App.vue b/chart/polarseriesbands/App.vue
new file mode 100644
index 00000000..ff54627f
--- /dev/null
+++ b/chart/polarseriesbands/App.vue
@@ -0,0 +1,171 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'U.S. Real Home Price vs Building Cost Indeces (1950-2010)'"
+                  :description="'Source: http://www.econ.yale.edu/~shiller/data.htm'"
+                  :showLegend="true" :enableAnimations="true" :padding="padding"
+                  :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+                  :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+        </JqxChart>
+
+        <table style="width: 850px">
+            <tbody>
+                <tr>
+                    <td style="padding-left: 50px">
+                        <p style="font-family: Verdana; font-size: 12px">Move the slider to rotate:</p>
+
+                        <JqxSlider @change="sliderStartAngle($event)"
+                                   :width="240" :min="0" :max="360" :step="1"
+                                   :ticksFrequency="20" :mode="'fixed'">
+                        </JqxSlider>
+
+                    </td>
+                    <td>
+                        <p style="font-family: Verdana; font-size: 12px">Select the series type:</p>
+
+                        <JqxDropDownList @change="dropDownListSeries($event)"
+                                         :width="200" :height="25" :source="seriesList"
+                                         :selectedIndex="1" :dropDownHeight="100">
+                        </JqxDropDownList>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td style="padding-left: 50px">
+                        <p style="font-family: Verdana; font-size: 12px">Move the slider to change the radius:</p>
+
+                        <JqxSlider @change="sliderRadius($event)"
+                                   :width="240" :min="80" :max="140" :step="1"
+                                   :ticksFrequency="20" :mode="'fixed'" :value="120">
+                        </JqxSlider>
+
+                    </td>
+                    <td>
+                        <p style="font-family: Verdana; font-size: 12px">Select color scheme:</p>
+
+                        <JqxDropDownList @change="dropDownListColor($event)"
+                                         :width="200" :height="25" :source="colorsSchemesList"
+                                         :selectedIndex="0" :dropDownHeight="100">
+                        </JqxDropDownList>
+
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxChart,
+            JqxSlider,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 5 },
+                xAxis: {
+                    dataField: 'Year',
+                    unitInterval: 10,
+                    maxValue: 2010,
+                    valuesOnTicks: true,
+                    labels: { autoRotate: true },
+                    bands: this.bands()
+                },
+                seriesGroups: [
+                    {
+                        polar: true,
+                        radius: 160,
+                        type: 'spline',
+                        enableSeriesToggle: false,
+                        valueAxis:
+                        {
+                            labels: {
+                                formatSettings: { decimalPlaces: 0 },
+                                autoRotate: true
+                            },
+                            bands:
+                            [
+                                { minValue: 50, maxValue: 130, color: '#00FF00', opacity: 0.2, dashStyle: '2,2', lineWidth: 1 },
+                                { minValue: 131, maxValue: 160, color: '#FCD537', opacity: 0.2, dashStyle: '2,2', lineWidth: 1 },
+                                { minValue: 161, maxValue: 200, color: '#FF0000', opacity: 0.2, dashStyle: '2,2', lineWidth: 1 }
+                            ]
+                        },
+                        series: [
+                            { dataField: 'HPI', displayText: 'Real Home Price Index', opacity: 0.9, lineWidth: 3 },
+                            { dataField: 'BuildCost', displayText: 'Building Cost Index', opacity: 0.9, lineWidth: 3 }
+                        ]
+                    }
+                ],
+                colorsSchemesList: ['scheme01', 'scheme02', 'scheme03', 'scheme04', 'scheme05', 'scheme06', 'scheme07', 'scheme08'],
+                seriesList: ['splinearea', 'spline', 'column', 'scatter', 'stackedcolumn', 'stackedsplinearea', 'stackedspline']
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    datatype: 'tab',
+                    datafields: [
+                        { name: 'Year' },
+                        { name: 'HPI' },
+                        { name: 'BuildCost' },
+                        { name: 'Population' },
+                        { name: 'Rate' }
+                    ],
+                    url: '../sampledata/homeprices.txt'
+                };
+        },
+        methods: {
+            bands: function () {
+                let recessions =
+                    [
+                        { from: 1969.91, to: 1970.83 },
+                        { from: 1973.83, to: 1975.25 },
+                        { from: 1980, to: 1980.58 },
+                        { from: 1981.58, to: 1982.83 },
+                        { from: 1990.58, to: 1991.25 },
+                        { from: 2001.25, to: 2001.83 },
+                        { from: 2007.91, to: 2009.5 }
+                    ];
+
+                let bands = [];
+
+                for (let i = 0; i < recessions.length; i++) {
+                    bands.push({ minValue: recessions[i].from, maxValue: recessions[i].to, fillColor: 'red', opacity: 0.2 });
+                }
+
+                return bands;
+            },
+            sliderStartAngle: function (event) {
+                let value = event.args.value;
+                this.$refs.myChart.seriesGroups[0].startAngle = value;
+                this.$refs.myChart.seriesGroups[0].endAngle = value + 360;
+                this.$refs.myChart.update();
+            },
+            sliderRadius: function (event) {
+                let value = event.args.value;
+                this.$refs.myChart.seriesGroups[0].radius = value;
+                this.$refs.myChart.update();
+            },
+            dropDownListColor: function (event) {
+                let value = event.args.item.value;
+                this.$refs.myChart.colorScheme = value;
+            },
+            dropDownListSeries: function (event) {
+                let value = event.args.item.value;
+                this.$refs.myChart.seriesGroups[0].type = value;
+                this.$refs.myChart.update();
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/polarseriesbands/main.js b/chart/polarseriesbands/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/polarseriesbands/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/polarseriesbands/package.json b/chart/polarseriesbands/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/polarseriesbands/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/pyramidchart/App.vue b/chart/pyramidchart/App.vue
new file mode 100644
index 00000000..5ca1cb19
--- /dev/null
+++ b/chart/pyramidchart/App.vue
@@ -0,0 +1,63 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Pyramid series'"
+              :description="'This example demonstrates pyramid chart series'"
+              :showLegend="true" :enableAnimations="false" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme06'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Index: '1', SerieA: -30, SerieB: -10, SerieC: -25 },
+                    { Index: '2', SerieA: -25, SerieB: -25, SerieC: 10 },
+                    { Index: '3', SerieA: 30, SerieB: 0, SerieC: 25 },
+                    { Index: '4', SerieA: 35, SerieB: 25, SerieC: 45 },
+                    { Index: '5', SerieA: 0, SerieB: 20, SerieC: 25 }
+                ],
+                padding: { left: 15, top: 15, right: 15, bottom: 15 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Index',
+                    tickMarks: {
+                        visible: true,
+                        interval: 1
+                    },
+                    gridLines: {
+                        visible: true,
+                        interval: 1
+                    }
+                },
+                valueAxis: {
+                    labels: { horizontalAlignment: 'right' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        columnsGapPercent: 20,
+                        seriesGapPercent: 20,
+                        columnsTopWidthPercent: 0,
+                        columnsBottomWidthPercent: 100,
+                        series: [
+                            { dataField: 'SerieA', displayText: 'Serie A' },
+                            { dataField: 'SerieB', displayText: 'Serie B' },
+                            { dataField: 'SerieC', displayText: 'Serie C' }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/pyramidchart/main.js b/chart/pyramidchart/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/pyramidchart/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/pyramidchart/package.json b/chart/pyramidchart/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/pyramidchart/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/rigthtoleftlayout/App.vue b/chart/rigthtoleftlayout/App.vue
new file mode 100644
index 00000000..3d4b7a50
--- /dev/null
+++ b/chart/rigthtoleftlayout/App.vue
@@ -0,0 +1,76 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px" :rtl="true"
+              :title="'Fitness & exercise weekly scorecard'"
+              :description="'Time spent in vigorous exercise by activity'"
+              :showLegend="true" :enableAnimations="false" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
+                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
+                    { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
+                    { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
+                    { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
+                    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
+                    { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 40, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Day',
+                    unitInterval: 1,
+                    tickMarks:
+                        {
+                            visible: true,
+                            interval: 1,
+                            color: '#CACACA'
+                        },
+                    gridLines: {
+                        visible: false,
+                        interval: 1,
+                        color: '#CACACA'
+                    },
+                    axisSize: 'auto'
+                },
+                seriesGroups: [
+                    {
+                        type: 'stackedcolumn',
+                        columnsGapPercent: 100,
+                        seriesGapPercent: 5,
+                        valueAxis:
+                            {
+                                minValue: 0,
+                                maxValue: 100,
+                                unitInterval: 10,
+                                visible: true,
+                                title: { text: 'Time in minutes' },
+                                tickMarks: { color: '#CACACA' },
+                                gridLines: { color: '#CACACA' },
+                                axisSize: 'auto',
+                            },
+                        series: [
+                            { dataField: 'Running', displayText: 'Running' },
+                            { dataField: 'Swimming', displayText: 'Swimming' },
+                            { dataField: 'Cycling', displayText: 'Cycling' }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/rigthtoleftlayout/main.js b/chart/rigthtoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/rigthtoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/rigthtoleftlayout/package.json b/chart/rigthtoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/rigthtoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/scatterchart/App.vue b/chart/scatterchart/App.vue
new file mode 100644
index 00000000..b8360d2f
--- /dev/null
+++ b/chart/scatterchart/App.vue
@@ -0,0 +1,102 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'Sales by City in Q1 & Q2'"
+                  :description="''"
+                  :showLegend="true" :enableAnimations="true" :padding="padding"
+                  :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+                  :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+        </JqxChart>
+
+        <table style="width: 550px">
+            <tbody>
+                <tr>
+                    <td>
+                        <p>Select Serie 1 Symbol:</p>
+
+                        <JqxDropDownList @change="dropDownSerie1SymbolOnChange($event)"
+                                         :width="200" :height="25" :selectedIndex="2"
+                                         :dropDownHeight="100" :source="symbolsList">
+                        </JqxDropDownList>
+
+                    </td>
+                    <td>
+                        <p>Select Serie 2 Symbol:</p>
+
+                        <JqxDropDownList @change="dropDownSerie2SymbolOnChange($event)"
+                                         :width="200" :height="25" :selectedIndex="1"
+                                         :dropDownHeight="100" :source="symbolsList">
+                        </JqxDropDownList>
+
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxChart,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { City: 'New York', SalesQ1: 330500, SalesQ2: 210500, YoYGrowth: 1.05 },
+                    { City: 'London', SalesQ1: 120000, SalesQ2: 169000, YoYGrowth: 1.15 },
+                    { City: 'Paris', SalesQ1: 205000, SalesQ2: 275500, YoYGrowth: 1.45 },
+                    { City: 'Tokyo', SalesQ1: 187000, SalesQ2: 130100, YoYGrowth: 0.45 },
+                    { City: 'Berlin', SalesQ1: 187000, SalesQ2: 113000, YoYGrowth: 1.65 },
+                    { City: 'San Francisco', SalesQ1: 142000, SalesQ2: 102000, YoYGrowth: 1.25 },
+                    { City: 'Chicago', SalesQ1: 171000, SalesQ2: 124000, YoYGrowth: 0.75 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'City',
+                    valuesOnTicks: false
+                },
+                valueAxis: {
+                    minValue: 50000,
+                    maxValue: 350000,
+                    unitInterval: 50000,
+                    title: { text: 'Sales ($)<br>' },
+                    labels: {
+                        formatSettings: { prefix: '$', thousandsSeparator: ',' },
+                        horizontalAlignment: 'right'
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'scatter',
+                        series: [
+                            { dataField: 'SalesQ1', symbolSize: 20, symbolType: 'circle', displayText: 'Sales in Q1' },
+                            { dataField: 'SalesQ2', symbolSize: 20, symbolType: 'diamond', displayText: 'Sales in Q2' }
+                        ]
+                    }
+                ],
+                symbolsList: ['circle', 'diamond', 'square', 'triangle_up', 'triangle_down', 'triangle_left', 'triangle_right']
+            }
+        },
+        methods: {
+            dropDownSerie1SymbolOnChange: function (event) {
+                let value = event.args.item.value;
+                this.$refs.myChart.seriesGroups[0].series[0].symbolType = value;
+                this.$refs.myChart.update();
+            },
+            dropDownSerie2SymbolOnChange: function (event) {
+                let value = event.args.item.value;
+                this.$refs.myChart.seriesGroups[0].series[1].symbolType = value;
+                this.$refs.myChart.update();
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/scatterchart/main.js b/chart/scatterchart/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/scatterchart/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/scatterchart/package.json b/chart/scatterchart/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/scatterchart/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/sparklines/App.vue b/chart/sparklines/App.vue
new file mode 100644
index 00000000..ba9e9496
--- /dev/null
+++ b/chart/sparklines/App.vue
@@ -0,0 +1,108 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns" :rendered="rendered"
+                  :enableHover="false" :sortable="true" :selectionMode="'none'" />
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxChart,
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'City', align: 'center', dataField: 'city', width: 250,
+                    },
+                    {
+                        text: 'Store locations', align: 'center', dataField: 'count', width: 200
+                    },
+                    {
+                        text: 'Monthly sales', align: 'center', dataField: 'monthlySales'
+                    },
+                    {
+                        text: 'Daily sales trend', align: 'center', dataField: 'dailyTrend',
+                        cellsRenderer: (row, column, value, rowData) => {
+                            const div = '<div id="sparklineContainer' + row + '" style="margin: 0; margin-bottom: 0; width: 100%; height: 40px;"></div>';
+                            return div;
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.data = [
+                { city: 'London', count: 24, monthlySales: 1128430, dailyTrend: [12, 8, 9, 3, 4, 5, 6, 2, 3, 4, 5, 6, 12, 4, 11, 4, 13, 9, 10, 12, 12, 8, 13, 7, 15, 9, 11, 12, 9, 8] },
+                { city: 'New York', count: 35, monthlySales: 1434650, dailyTrend: [11, 7, 3, 8, 6, 2, 2, 4, 3, 8, 5, 11, 7, 11, 11, 4, 5, 6, 5, 9, 9, 5, 11, 2, 8, 9, 14, 12, 9, 8] },
+                { city: 'Berlin', count: 11, monthlySales: 498430, dailyTrend: [11, 7, 3, 8, 6, 2, 2, 4, 3, 8, 5, 11, 7, 11, 11, 4, 5, 6, 5, 9, 9, 5, 11, 2, 8, 9, 14, 12, 9, 8] },
+                { city: 'Madrid', count: 4, monthlySales: 181760, dailyTrend: [11, 7, 3, 8, 6, 2, 2, 4, 3, 8, 5, 11, 7, 11, 11, 4, 5, 6, 5, 9, 9, 5, 11, 2, 8, 9, 14, 12, 9, 8] },
+                { city: 'Paris', count: 9, monthlySales: 381760, dailyTrend: [11, 7, 3, 8, 6, 2, 2, 4, 3, 8, 5, 11, 7, 11, 11, 4, 5, 6, 5, 9, 9, 5, 11, 2, 8, 9, 14, 12, 9, 8] },
+            ];
+
+            this.source = {
+                localData: this.data,
+                dataType: 'array'
+            };
+        },
+        methods: {
+            createSparkline: function (selector, data, type) {
+                const options =
+                    {
+                        title: '',
+                        description: '',
+                        showLegend: false,
+                        enableAnimations: false,
+                        showBorderLine: false,
+                        showToolTips: false,
+                        backgroundColor: 'transparent',
+                        padding: { left: 0, top: 0, right: 0, bottom: 0 },
+                        titlePadding: { left: 0, top: 0, right: 0, bottom: 0 },
+                        source: data,
+                        xAxis:
+                        {
+                            visible: false,
+                            valuesOnTicks: false
+                        },
+                        colorScheme: 'scheme01',
+                        seriesGroups:
+                        [
+                            {
+                                type: type,
+                                columnsGapPercent: 0,
+                                columnsMaxWidth: 2,
+                                valueAxis:
+                                {
+                                    minValue: 0,
+                                    visible: false
+                                },
+                                series: [
+                                    {
+                                        linesUnselectMode: 'click',
+                                        colorFunction: (value, itemIndex, serie, group) => {
+                                            return (value < 10) ? '#307DD7' : '#AA4643';
+                                        }
+                                    }
+                                ]
+                            }
+                        ]
+                    };
+
+                jqwidgets.createInstance(`#${selector}`, 'jqxChart', options);
+            },
+            rendered: function () {
+                for (let i = 0; i < this.data.length; i++) {
+                    this.createSparkline('sparklineContainer' + i, this.data[i].dailyTrend, i % 2 == 0 ? 'column' : 'line');
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/sparklines/main.js b/chart/sparklines/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/sparklines/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/sparklines/package.json b/chart/sparklines/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/sparklines/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/spiderchart/App.vue b/chart/spiderchart/App.vue
new file mode 100644
index 00000000..9fc8f1ff
--- /dev/null
+++ b/chart/spiderchart/App.vue
@@ -0,0 +1,189 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'Website audience acquision by source'"
+                  :description="'Month over month comparison'"
+                  :showLegend="true" :enableAnimations="false" :padding="padding"
+                  :titlePadding="titlePadding" :source="data" :xAxis="xAxis"
+                  :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme05'">
+        </JqxChart>
+
+        <table style="width: 850px">
+            <tbody>
+                <tr>
+                    <td style="padding-left: 50px">
+                        <p style="font-family: Verdana; font-size: 12px">Move the slider to rotate:</p>
+
+                        <JqxSlider @change="sliderStartAngle($event)"
+                                   :width="240" :min="0" :max="360" :step="1"
+                                   :ticksFrequency="20" :mode="'fixed'">
+                        </JqxSlider>
+
+                    </td>
+                    <td>
+                        <p style="font-family: Verdana; font-size: 12px">Select the series type:</p>
+
+                        <JqxDropDownList @change="dropDownListSeries($event)"
+                                         :width="200" :height="25" :source="seriesList"
+                                         :selectedIndex="1" :dropDownHeight="100">
+                        </JqxDropDownList>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td style="padding-left: 50px">
+                        <p style="font-family: Verdana; font-size: 12px">Move the slider to change the radius:</p>
+
+                        <JqxSlider @change="sliderRadius($event)"
+                                   :width="240" :min="80" :max="140" :step="1"
+                                   :ticksFrequency="20" :mode="'fixed'" :value="120">
+                        </JqxSlider>
+
+                    </td>
+                    <td>
+                        <p style="font-family: Verdana; font-size: 12px">Select color scheme:</p>
+
+                        <JqxDropDownList @change="dropDownListColor($event)"
+                                         :width="200" :height="25" :source="colorsSchemesList"
+                                         :selectedIndex="2" :dropDownHeight="100">
+                        </JqxDropDownList>
+
+                    </td>
+                </tr>
+                <tr style="height: 15px"></tr>
+                <tr>
+                    <td style="padding-left: 50px">
+                        <JqxCheckBox @change="checkBoxAutoRotate($event)"
+                                     :width="220" :height="25">
+                            Auto-rotate labels
+                        </JqxCheckBox>
+                    </td>
+                    <td>
+                        <JqxCheckBox @change="checkBoxTicksBetween($event)"
+                                     :width="220" :height="25">
+                            Ticks between values
+                        </JqxCheckBox>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+
+    export default {
+        components: {
+            JqxChart,
+            JqxSlider,
+            JqxDropDownList,
+            JqxCheckBox
+        },
+        data: function () {
+            return {
+                data: [
+                    {
+                        type: 'Organic Search',
+                        month1: 1725090,
+                        month2: 3136190
+                    },
+                    {
+                        type: 'Paid Search',
+                        month1: 925090,
+                        month2: 2136190
+                    },
+                    {
+                        type: 'Direct',
+                        month1: 425090,
+                        month2: 936190
+                    },
+                    {
+                        type: 'Referral',
+                        month1: 1250900,
+                        month2: 2536190
+                    },
+                    {
+                        type: 'Twitter',
+                        month1: 350900,
+                        month2: 681900
+                    },
+                    {
+                        type: 'Facebook',
+                        month1: 381900,
+                        month2: 831500
+                    }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 5 },
+                xAxis: {
+                    dataField: 'type',
+                    displayText: 'Traffic source',
+                    valuesOnTicks: true,
+                    labels: { autoRotate: false }
+                },
+                valueAxis: {
+                    unitInterval: 1000000,
+                    labels: {
+                        formatSettings: { decimalPlaces: 0 },
+                        formatFunction: (value, itemIndex, serieIndex, groupIndex) => {
+                            return Math.round(value / 1000) + ' K';
+                        }
+                    }
+                },
+                seriesGroups: [
+                    {
+                        spider: true,
+                        startAngle: 0,
+                        endAngle: 360,
+                        radius: 120,
+                        type: 'spline',
+                        series: [
+                            { dataField: 'month1', displayText: 'January 2014', opacity: 0.7, radius: 2, lineWidth: 2, symbolType: 'circle' },
+                            { dataField: 'month2', displayText: 'February 2014', opacity: 0.7, radius: 2, lineWidth: 2, symbolType: 'square' }
+                        ]
+                    }
+                ],
+                colorsSchemesList: ['scheme01', 'scheme02', 'scheme03', 'scheme04', 'scheme05', 'scheme06', 'scheme07', 'scheme08'],
+                seriesList: ['splinearea', 'spline', 'column', 'scatter', 'stackedcolumn', 'stackedsplinearea', 'stackedspline']
+            }
+        },
+        methods: {
+            sliderStartAngle: function (event) {
+                let value = event.args.value;
+                this.$refs.myChart.seriesGroups[0].startAngle = value;
+                this.$refs.myChart.seriesGroups[0].endAngle = value + 360;
+                this.$refs.myChart.update();
+            },
+            sliderRadius: function (event) {
+                let value = event.args.value;
+                this.$refs.myChart.seriesGroups[0].radius = value;
+                this.$refs.myChart.update();
+            },
+            dropDownListColor: function (event) {
+                let value = event.args.item.value;
+                this.$refs.myChart.colorScheme = value;
+            },
+            dropDownListSeries: function (event) {
+                let value = event.args.item.value;
+                this.$refs.myChart.seriesGroups[0].type = value;
+                this.$refs.myChart.update();
+            },
+            checkBoxTicksBetween: function (event) {
+                this.$refs.myChart.xAxis.valuesOnTicks = !event.args.checked;
+                this.$refs.myChart.update();
+            },
+            checkBoxAutoRotate: function (event) {
+                this.$refs.myChart.xAxis.labels.autoRotate = event.args.checked;
+                this.$refs.myChart.valueAxis.labels.autoRotate = event.args.checked;
+                this.$refs.myChart.update();
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/spiderchart/main.js b/chart/spiderchart/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/spiderchart/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/spiderchart/package.json b/chart/spiderchart/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/spiderchart/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/splinearea/App.vue b/chart/splinearea/App.vue
new file mode 100644
index 00000000..df3abead
--- /dev/null
+++ b/chart/splinearea/App.vue
@@ -0,0 +1,53 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Logarithmic Spline Area Range'"
+              :description="'logarithmic scale with base 2'"
+              :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [{ a: 0.35, b: 14.5 }, { a: 1, b: 2.5 }, { a: 10, b: 0.2 }, { a: 100, b: 205 }, { a: 1, b: 100 }, { a: 5.11, b: 10.13 }, { a: 20.13, b: 10.13 }, { a: 600, b: 300 }],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 5 },
+                xAxis: {
+                    valuesOnTicks: false,
+                    gridLines: { visible: false }
+                },
+                valueAxis: {
+                    logarithmicScale: true,
+                    logarithmicScaleBase: 2,
+                    unitInterval: 1,
+                    flip: false,
+                    title: { text: 'Value' },
+                    labels: {
+                        formatSettings: { decimalPlaces: 3 },
+                        horizontalAlignment: 'right'
+                    },
+                    gridLines: { visible: false }
+                },
+                seriesGroups: [
+                    {
+                        type: 'splinerangearea',
+                        series: [
+                            { dataFieldFrom: 'a', dataFieldTo: 'b', displayText: 'from A to B', opacity: 0.8, lineWidth: 1 }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/splinearea/main.js b/chart/splinearea/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/splinearea/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/splinearea/package.json b/chart/splinearea/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/splinearea/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/splineseries/App.vue b/chart/splineseries/App.vue
new file mode 100644
index 00000000..a0d55b82
--- /dev/null
+++ b/chart/splineseries/App.vue
@@ -0,0 +1,99 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'U.S. Historical Home Prices (1950-2011)'"
+              :description="'Source: http://www.econ.yale.edu/~shiller/data.htm'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+              :seriesGroups="seriesGroups" :colorScheme="'scheme04'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 25, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Year',
+                    minValue: 1947,
+                    maxValue: 2012,
+                    unitInterval: 5,
+                    tickMarks: {
+                        visible: true,
+                        interval: 1
+                    },
+                    gridLines: {
+                        visible: true,
+                        interval: 5
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'line',
+                        valueAxis:
+                            {
+                                unitInterval: 10,
+                                padding: { left: 10 },
+                                title: { text: 'U.S. Population (millions)<br>' },
+                                gridLines: { visible: false }
+                            },
+                        series: [
+                            { dataField: 'Population', displayText: 'Population' }
+                        ]
+                    },
+                    {
+                        type: 'spline',
+                        valueAxis:
+                            {
+                                unitInterval: 1,
+                                visible: false
+                            },
+                        series: [
+                            { dataField: 'Rate', displayText: 'Interest Rate' }
+                        ]
+                    },
+                    {
+                        type: 'spline',
+                        valueAxis:
+                            {
+                                unitInterval: 20,
+                                title: { text: 'Index Value<br>' },
+                                labels: {
+                                    horizontalAlignment: 'right',
+                                    formatSettings: { decimalPlaces: 0 }
+                                }
+                            },
+                        series: [
+                            { dataField: 'HPI', displayText: 'Real Home Price Index' },
+                            { dataField: 'BuildCost', displayText: 'Building Cost Index' }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    datatype: "tab",
+                    datafields: [
+                        { name: 'Year' },
+                        { name: 'HPI' },
+                        { name: 'BuildCost' },
+                        { name: 'Population' },
+                        { name: 'Rate' }
+                    ],
+                    url: '../sampledata/homeprices.txt'
+                };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/splineseries/main.js b/chart/splineseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/splineseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/splineseries/package.json b/chart/splineseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/splineseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/stackedandgroupedcolumnseries/App.vue b/chart/stackedandgroupedcolumnseries/App.vue
new file mode 100644
index 00000000..8aa0e009
--- /dev/null
+++ b/chart/stackedandgroupedcolumnseries/App.vue
@@ -0,0 +1,80 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Fitness & exercise weekly scorecard'"
+              :description="'Time spent in vigorous exercise by activity'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme06'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Day: 'Monday', Running: 30, Swimming: 5, Cycling: 25, Riding: 10 },
+                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Riding: 15 },
+                    { Day: 'Wednesday', Running: 30, Swimming: 5, Cycling: 25, Riding: 25 },
+                    { Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45, Riding: 15 },
+                    { Day: 'Friday', Running: 5, Swimming: 20, Cycling: 25, Riding: 5 },
+                    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Riding: 30 },
+                    { Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 5, Riding: 20 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Day',
+                    unitInterval: 1,
+                    tickMarks: {
+                        visible: true,
+                        unitInterval: 1,
+                        color: '#888888'
+                    },
+                    gridLines: {
+                        visible: false,
+                        unitInterval: 1,
+                        color: '#888888'
+                    }
+                },
+                valueAxis: {
+                    unitInterval: 10,
+                    minValue: 0,
+                    maxValue: 120,
+                    visible: true,
+                    title: { text: 'Time in minutes<br>' },
+                    tickMarks: { color: '#888888' },
+                    gridLines: { color: '#888888' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'stackedcolumn',
+                        columnsGapPercent: 50,
+                        seriesGapPercent: 5,
+                        series: [
+                            { dataField: 'Running', displayText: 'Running' },
+                            { dataField: 'Swimming', displayText: 'Swimming' }
+                        ]
+                    },
+                    {
+                        type: 'stackedcolumn',
+                        columnsGapPercent: 50,
+                        seriesGapPercent: 5,
+                        series: [
+                            { dataField: 'Riding', displayText: 'Riding' },
+                            { dataField: 'Cycling', displayText: 'Cycling' }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/stackedandgroupedcolumnseries/main.js b/chart/stackedandgroupedcolumnseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/stackedandgroupedcolumnseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/stackedandgroupedcolumnseries/package.json b/chart/stackedandgroupedcolumnseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/stackedandgroupedcolumnseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/stackedareaseries/App.vue b/chart/stackedareaseries/App.vue
new file mode 100644
index 00000000..f982d1d5
--- /dev/null
+++ b/chart/stackedareaseries/App.vue
@@ -0,0 +1,73 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Website traffic analysis'"
+              :description="'Unique daily visitors (stacked)'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme03'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                padding: { left: 10, top: 5, right: 10, bottom: 5 },
+                titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Date',
+                    type: 'date',
+                    baseUnit: 'day',
+                    valuesOnTicks: true,
+                    labels:
+                        {
+                            formatFunction: (value) => {
+                                return value.getDate();
+                            }
+                        },
+                    toolTipFormatFunction: (value) => {
+                        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+                        return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
+                    }
+                },
+                valueAxis: {
+                    unitInterval: 500,
+                    minValue: 0,
+                    maxValue: 4500,
+                    title: { text: 'Daily visitors by source<br>' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'stackedarea',
+                        series: [
+                            { dataField: 'SearchNonPaid', displayText: 'Desktop Search' },
+                            { dataField: 'SearchPaid', displayText: 'Mobile Search' },
+                            { dataField: 'Referral', displayText: 'Social media' }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'tab',
+                datafields: [
+                    { name: 'Date' },
+                    { name: 'Referral' },
+                    { name: 'SearchPaid' },
+                    { name: 'SearchNonPaid' }
+                ],
+                url: '../sampledata/website_analytics.txt'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/stackedareaseries/main.js b/chart/stackedareaseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/stackedareaseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/stackedareaseries/package.json b/chart/stackedareaseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/stackedareaseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/stackedcolumns/App.vue b/chart/stackedcolumns/App.vue
new file mode 100644
index 00000000..232805e2
--- /dev/null
+++ b/chart/stackedcolumns/App.vue
@@ -0,0 +1,56 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Logarithmic Scale Axis Example'"
+              :description="'Stacked Columns with logarithmic scale axis'"
+              :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [{ a: 0.35, b: 14.5 }, { a: 1, b: 2.5 }, { a: 10, b: 0.2 }, { a: 100, b: 205 }, { a: 1, b: 100 }, { a: 5.11, b: 10.13 }, { a: 20.13, b: 10.13 }, { a: 600, b: 300 }],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                valueAxis: {
+                    logarithmicScale: true,
+                    logarithmicScaleBase: 2,
+                    unitInterval: 1,
+                    title: { text: 'Value' },
+                    labels: {
+                        formatSettings: { decimalPlaces: 3 },
+                        horizontalAlignment: 'right'
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'stackedcolumn',
+                        columnsGapPercent: 50,
+                        series: [
+                            { dataField: 'a', displayText: 'A' },
+                            { dataField: 'b', displayText: 'B' }
+                        ]
+                    },
+                    {
+                        type: 'stackedline',
+                        series: [
+                            { dataField: 'a', displayText: 'A2' },
+                            { dataField: 'b', displayText: 'B2' }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/stackedcolumns/main.js b/chart/stackedcolumns/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/stackedcolumns/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/stackedcolumns/package.json b/chart/stackedcolumns/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/stackedcolumns/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/stackedcolumnseries/App.vue b/chart/stackedcolumnseries/App.vue
new file mode 100644
index 00000000..66706ad9
--- /dev/null
+++ b/chart/stackedcolumnseries/App.vue
@@ -0,0 +1,72 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Fitness & exercise weekly scorecard'"
+              :description="'Time spent in vigorous exercise by activity'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme06'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25 },
+                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0 },
+                    { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25 },
+                    { Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45 },
+                    { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25 },
+                    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30 },
+                    { Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 0 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Day',
+                    unitInterval: 1,
+                    axisSize: 'auto',
+                    tickMarks: {
+                        visible: true,
+                        interval: 1,
+                        color: '#BCBCBC'
+                    },
+                    gridLines: {
+                        visible: true,
+                        interval: 1,
+                        color: '#BCBCBC'
+                    }
+                },
+                valueAxis: {
+                    unitInterval: 10,
+                    minValue: 0,
+                    maxValue: 120,
+                    title: { text: 'Time in minutes' },
+                    labels: { horizontalAlignment: 'right' },
+                    tickMarks: { color: '#BCBCBC' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'stackedcolumn',
+                        columnsGapPercent: 50,
+                        seriesGapPercent: 0,
+                        series: [
+                            { dataField: 'Running', displayText: 'Running' },
+                            { dataField: 'Swimming', displayText: 'Swimming' },
+                            { dataField: 'Cycling', displayText: 'Cycling' }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/stackedcolumnseries/main.js b/chart/stackedcolumnseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/stackedcolumnseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/stackedcolumnseries/package.json b/chart/stackedcolumnseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/stackedcolumnseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/stackedfunnelchart/App.vue b/chart/stackedfunnelchart/App.vue
new file mode 100644
index 00000000..0ca6e0cd
--- /dev/null
+++ b/chart/stackedfunnelchart/App.vue
@@ -0,0 +1,65 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Stacked Funnel Chart'"
+              :description="'This example demonstrates stacked funnel chart with positive and negative values'"
+              :showLegend="true" :enableAnimations="false" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme02'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Index: '1', SerieA: -30, SerieB: -10, SerieC: -25 },
+                    { Index: '2', SerieA: -25, SerieB: -25, SerieC: 10 },
+                    { Index: '3', SerieA: 30, SerieB: 10, SerieC: 25 },
+                    { Index: '4', SerieA: 35, SerieB: 25, SerieC: 45 },
+                    { Index: '5', SerieA: 10, SerieB: 20, SerieC: 25 },
+                    { Index: '6', SerieA: 30, SerieB: 10, SerieC: 30 },
+                    { Index: '7', SerieA: 60, SerieB: 45, SerieC: 10 }
+                ],
+                padding: { left: 15, top: 15, right: 15, bottom: 15 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Index',
+                    tickMarks: {
+                        visible: true,
+                        interval: 1
+                    },
+                    gridLines: {
+                        visible: true,
+                        interval: 1
+                    }
+                },
+                valueAxis: {
+                    labels: { horizontalAlignment: 'right' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'stackedcolumn',
+                        columnsGapPercent: 50,
+                        seriesGapPercent: 0,
+                        columnsTopWidthPercent: 100,
+                        columnsBottomWidthPercent: 30,
+                        series: [
+                            { dataField: 'SerieA', displayText: 'Serie A', labels: { visible: true } },
+                            { dataField: 'SerieB', displayText: 'Serie B', labels: { visible: true } },
+                            { dataField: 'SerieC', displayText: 'Serie C', labels: { visible: true } }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/stackedfunnelchart/main.js b/chart/stackedfunnelchart/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/stackedfunnelchart/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/stackedfunnelchart/package.json b/chart/stackedfunnelchart/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/stackedfunnelchart/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/stackedlineseries/App.vue b/chart/stackedlineseries/App.vue
new file mode 100644
index 00000000..d4a80fbf
--- /dev/null
+++ b/chart/stackedlineseries/App.vue
@@ -0,0 +1,76 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Web Site Traffic Analysis'"
+              :description="'Daily unique visitors (stacked)'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                padding: { left: 10, top: 5, right: 10, bottom: 5 },
+                titlePadding: { left: 50, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Date',
+                    type: 'date',
+                    baseUnit: 'day',
+                    valuesOnTicks: false,
+                    labels:
+                        {
+                            formatFunction: (value) => {
+                                return value.getDate();
+                            }
+                        },
+                    toolTipFormatFunction: (value) => {
+                        return value.getDate() + '-' + this.months[value.getMonth()] + '-' + value.getFullYear();
+                    }
+                },
+                valueAxis: {
+                    unitInterval: 500,
+                    minValue: 0,
+                    maxValue: 4500,
+                    labels: { horizontalAlignment: 'right' },
+                    title: { text: 'Daily Visits<br>' }
+                },
+                seriesGroups: [
+                    {
+                        type: 'stackedline',
+                        series: [
+                            { dataField: 'Referral', displayText: 'Referral Traffic' },
+                            { dataField: 'SearchPaid', displayText: 'Paid Search Traffic' },
+                            { dataField: 'SearchNonPaid', displayText: 'Organic Search Traffic' }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+            this.source = {
+                datatype: 'tab',
+                datafields: [
+                    { name: 'Date' },
+                    { name: 'Referral' },
+                    { name: 'SearchPaid' },
+                    { name: 'SearchNonPaid' }
+                ],
+                url: '../sampledata/website_analytics.txt'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/stackedlineseries/main.js b/chart/stackedlineseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/stackedlineseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/stackedlineseries/package.json b/chart/stackedlineseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/stackedlineseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/stackedpyramidchart/App.vue b/chart/stackedpyramidchart/App.vue
new file mode 100644
index 00000000..4de0de24
--- /dev/null
+++ b/chart/stackedpyramidchart/App.vue
@@ -0,0 +1,66 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Stacked Pyramid Chart'"
+              :description="''"
+              :showLegend="true" :enableAnimations="false" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme06'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Index: '1', SerieA: -30, SerieB: -10, SerieC: -25 },
+                    { Index: '2', SerieA: -25, SerieB: -25, SerieC: 10 },
+                    { Index: '3', SerieA: 30, SerieB: 0, SerieC: 25 },
+                    { Index: '4', SerieA: 35, SerieB: 25, SerieC: 45 },
+                    { Index: '5', SerieA: 0, SerieB: 20, SerieC: 25 }
+                ],
+                padding: { left: 15, top: 15, right: 15, bottom: 15 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    flip: true,
+                    dataField: 'Index',
+                    tickMarks: {
+                        visible: true,
+                        interval: 1
+                    },
+                    gridLines: {
+                        visible: true,
+                        interval: 1
+                    }
+                },
+                valueAxis: {
+                    flip: true,
+                    labels: { horizontalAlignment: 'right' }
+                },
+                seriesGroups: [
+                    {
+                        orientation: 'horizontal',
+                        type: 'stackedcolumn',
+                        columnsGapPercent: 50,
+                        seriesGapPercent: 0,
+                        columnsTopWidthPercent: 0,
+                        columnsBottomWidthPercent: 100,
+                        series: [
+                            { dataField: 'SerieA', displayText: 'Serie A' },
+                            { dataField: 'SerieB', displayText: 'Serie B' },
+                            { dataField: 'SerieC', displayText: 'Serie C' }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/stackedpyramidchart/main.js b/chart/stackedpyramidchart/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/stackedpyramidchart/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/stackedpyramidchart/package.json b/chart/stackedpyramidchart/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/stackedpyramidchart/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/stackedwaterfallseries/App.vue b/chart/stackedwaterfallseries/App.vue
new file mode 100644
index 00000000..6a6e131a
--- /dev/null
+++ b/chart/stackedwaterfallseries/App.vue
@@ -0,0 +1,60 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Stacked waterfall series with logarithmic axis'"
+              :description="'Logarithmic base 2'" :padding="padding"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { a: 35, b: 40 },
+                    { a: 10, b: 25 },
+                    { a: 20, b: 20 },
+                    { a: 30, b: 25 },
+                    { a: 40, b: 17 },
+                    { a: 45, b: 20 },
+                    { a: 20, b: 30 }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    gridLines: { visible: true },
+                    tickMarks: { visible: true }
+                },
+                valueAxis: {
+                    logarithmicScale: true,
+                    logarithmicScaleBase: 2,
+                    title: { text: 'Value<br>' },
+                    labels:
+                        {
+                            formatSettings: { decimalPlaces: 0 },
+                            horizontalAlignment: 'right'
+                        }
+                },
+                seriesGroups: [
+                    {
+                        type: 'stackedwaterfall',
+                        columnsMaxWidth: 50,
+                        series: [
+                            { dataField: 'a', displayText: 'A' },
+                            { dataField: 'b', displayText: 'B', summary: 'c' }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/stackedwaterfallseries/main.js b/chart/stackedwaterfallseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/stackedwaterfallseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/stackedwaterfallseries/package.json b/chart/stackedwaterfallseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/stackedwaterfallseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/steplineseries/App.vue b/chart/steplineseries/App.vue
new file mode 100644
index 00000000..c2927b87
--- /dev/null
+++ b/chart/steplineseries/App.vue
@@ -0,0 +1,81 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Tesla Motors Stock Price'"
+              :description="'Closing price (June 2013 - March 2014)'"
+              :showLegend="true" :enableAnimations="true" :padding="padding" :enableCrosshairs="true"
+              :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis" :crosshairsColor="'#0000FF'"
+              :crosshairsDashStyle="'1,1'" :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                padding: { left: 15, top: 5, right: 30, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    type: 'date',
+                    baseUnit: 'month',
+                    minValue: new Date(2013, 5, 1),
+                    maxValue: new Date(2014, 2, 1),
+                    valuesOnTicks: true,
+                    dataField: 'Date',
+                    labels:
+                        {
+                            formatFunction: (value) => {
+                                return this.months[value.getUTCMonth()] + '-' + value.getFullYear();
+                            },
+                            angle: 0,
+                            horizontalAlignment: 'right'
+                        },
+                    toolTipFormatFunction: (value) => {
+                        return value.getDate() + '-' + this.months[value.getMonth()] + '-' + value.getFullYear();
+                    },
+                    tickMarks: { visilbe: true }
+                },
+                seriesGroups: [
+                    {
+                        type: 'stepline',
+                        valueAxis:
+                            {
+                                flip: false,
+                                title: { text: 'Price per share [USD]<br>' },
+                                labels: { horizontalAlignment: 'right' }
+                            },
+                        series: [
+                            { dataField: 'Close', displayText: 'Close Price', lineWidth: 1, symbolSize: 6 }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    datatype: "csv",
+                    datafields: [
+                        { name: 'Date' },
+                        { name: 'Open' },
+                        { name: 'High' },
+                        { name: 'Low' },
+                        { name: 'Close' },
+                        { name: 'Volume' },
+                        { name: 'AdjClose' }
+                    ],
+                    url: '../sampledata/TSLA_stockprice.csv'
+                };
+
+            this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/steplineseries/main.js b/chart/steplineseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/steplineseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/steplineseries/package.json b/chart/steplineseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/steplineseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/textrotation/App.vue b/chart/textrotation/App.vue
new file mode 100644
index 00000000..ce21c9cb
--- /dev/null
+++ b/chart/textrotation/App.vue
@@ -0,0 +1,68 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Axis text rotation example'"
+              :description="''"
+              :enableAnimations="true" :padding="padding" :showToolTips="true"
+              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+              :seriesGroups="seriesGroups" :colorScheme="'scheme04'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
+                    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
+                    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
+                    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
+                    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
+                    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
+                    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
+                ],
+                padding: { left: 5, top: 5, right: 20, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    position: 'top',
+                    dataField: 'Day',
+                    labels:
+                        {
+                            angle: 55,
+                            horizontalAlignment: 'right',
+                            verticalAlignment: 'center',
+                            rotationPoint: 'right',
+                            offset: { x: 0, y: -5 }
+                        }
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        seriesGapPercent: 15,
+                        orientation: 'horizontal',
+                        valueAxis:
+                            {
+                                minValue: 0,
+                                maxValue: 100,
+                                unitInterval: 10,
+                                position: 'right'
+                            },
+                        series: [
+                            { dataField: 'Keith', displayText: 'Keith' },
+                            { dataField: 'Erica', displayText: 'Erica' },
+                            { dataField: 'George', displayText: 'George' }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/textrotation/main.js b/chart/textrotation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/textrotation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/textrotation/package.json b/chart/textrotation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/textrotation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/textwrapping/App.vue b/chart/textwrapping/App.vue
new file mode 100644
index 00000000..ce8de8a6
--- /dev/null
+++ b/chart/textwrapping/App.vue
@@ -0,0 +1,93 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'Economic comparison'"
+              :description="'GDP and Debt in 2010'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+              :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 0 },
+                xAxis: {
+                    dataField: 'Country',
+                    title: { verticalAlignment: 'center' },
+                    formatFunction: (value, dataIndex) => {
+                        if (value == 'USA')
+                            return 'United<br>States';
+                        return value;
+                    }
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        columnsGapPercent: 50,
+                        valueAxis:
+                            {
+                                unitInterval: 5000,
+                                title: { text: 'GDP & Debt per Capita($)' }
+                            },
+                        series: [
+                            { dataField: 'GDP', displayText: 'GDP per Capita' },
+                            { dataField: 'Debt', displayText: 'Debt per Capita' }
+                        ],
+                        legendFormatFunction: this.legendFormatFunction,
+                        verticalTextAlignment: 'center'
+                    },
+                    {
+                        type: 'line',
+                        valueAxis:
+                            {
+                                unitInterval: 10,
+                                visible: false,
+                                title: { text: 'Debt (% of GDP)' }
+                            },
+                        legendFormatFunction: this.legendFormatFunction,
+                        verticalTextAlignment: 'center',
+                        series: [
+                            { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    datatype: 'csv',
+                    datafields: [
+                        { name: 'Country' },
+                        { name: 'GDP' },
+                        { name: 'DebtPercent' },
+                        { name: 'Debt' }
+                    ],
+                    url: '../sampledata/gdp_dept_2010.txt'
+                };
+        },
+        methods: {
+            legendFormatFunction: function (value) {
+                if (value == 'Debt per Capita')
+                    return 'Debt per<br>Capita';
+                if (value == 'GDP per Capita')
+                    return 'GDP per<br>Capita';
+                if (value == 'Debt (% of GDP)')
+                    return 'Debt<br>(% of GDP)';
+                return value;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/textwrapping/main.js b/chart/textwrapping/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/textwrapping/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/textwrapping/package.json b/chart/textwrapping/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/textwrapping/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/themes/App.vue b/chart/themes/App.vue
new file mode 100644
index 00000000..f8e149d6
--- /dev/null
+++ b/chart/themes/App.vue
@@ -0,0 +1,132 @@
+<template>
+    <div>
+        <JqxChart ref="myChart" style="width: 850px; height: 500px"
+                  :title="'Fitness & exercise weekly scorecard'"
+                  :description="'Time spent in vigorous exercise'"
+                  :showLegend="true" :enableAnimations="false" :padding="padding"
+                  :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
+                  :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
+        </JqxChart>
+
+        <br />
+        Themes:
+
+        <JqxDropDownList ref="myList" :width="180" :height="28"
+                         @change="myDropDownListOnChange()" :selectedIndex="0" :itemHeight="35"
+                         :selectionRenderer="selectionTemplate" :renderer="itemTemplate"
+                         :source="schemes" :displayMember="'name'">
+        </JqxDropDownList>
+    </div>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxChart,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                sampleData: [
+                    { Day: 'Monday', Keith: 30, Erica: 15, George: 25, Monica: 20, Maria: 15 },
+                    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30, Monica: 25, Maria: 20 },
+                    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25, Monica: 10, Maria: 20 },
+                    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45, Monica: 30, Maria: 30 },
+                    { Day: 'Friday', Keith: 20, Erica: 20, George: 25, Monica: 45, Maria: 30 },
+                    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30, Monica: 60, Maria: 40 },
+                    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90, Monica: 70, Maria: 50 }
+                ],
+                schemes: [
+                    { name: 'scheme01', colors: ['#307DD7', '#AA4643', '#89A54E', '#71588F', '#4198AF'] },
+                    { name: 'scheme02', colors: ['#7FD13B', '#EA157A', '#FEB80A', '#00ADDC', '#738AC8'] },
+                    { name: 'scheme03', colors: ['#E8601A', '#FF9639', '#F5BD6A', '#599994', '#115D6E'] },
+                    { name: 'scheme04', colors: ['#D02841', '#FF7C41', '#FFC051', '#5B5F4D', '#364651'] },
+                    { name: 'scheme05', colors: ['#25A0DA', '#309B46', '#8EBC00', '#FF7515', '#FFAE00'] },
+                    { name: 'scheme06', colors: ['#0A3A4A', '#196674', '#33A6B2', '#9AC836', '#D0E64B'] },
+                    { name: 'scheme07', colors: ['#CC6B32', '#FFAB48', '#FFE7AD', '#A7C9AE', '#888A63'] },
+                    { name: 'scheme08', colors: ['#3F3943', '#01A2A6', '#29D9C2', '#BDF271', '#FFFFA6'] },
+                    { name: 'scheme09', colors: ['#1B2B32', '#37646F', '#A3ABAF', '#E1E7E8', '#B22E2F'] },
+                    { name: 'scheme10', colors: ['#5A4B53', '#9C3C58', '#DE2B5B', '#D86A41', '#D2A825'] },
+                    { name: 'scheme11', colors: ['#993144', '#FFA257', '#CCA56A', '#ADA072', '#949681'] },
+                    { name: 'scheme12', colors: ['#105B63', '#EEEAC5', '#FFD34E', '#DB9E36', '#BD4932'] },
+                    { name: 'scheme13', colors: ['#BBEBBC', '#F0EE94', '#F5C465', '#FA7642', '#FF1E54'] },
+                    { name: 'scheme14', colors: ['#60573E', '#F2EEAC', '#BFA575', '#A63841', '#BFB8A3'] },
+                    { name: 'scheme15', colors: ['#444546', '#FFBB6E', '#F28D00', '#D94F00', '#7F203B'] },
+                    { name: 'scheme16', colors: ['#583C39', '#674E49', '#948658', '#F0E99A', '#564E49'] },
+                    { name: 'scheme17', colors: ['#142D58', '#447F6E', '#E1B65B', '#C8782A', '#9E3E17'] },
+                    { name: 'scheme18', colors: ['#4D2B1F', '#635D61', '#7992A2', '#97BFD5', '#BFDCF5'] },
+                    { name: 'scheme19', colors: ['#844341', '#D5CC92', '#BBA146', '#897B26', '#55591C'] },
+                    { name: 'scheme20', colors: ['#56626B', '#6C9380', '#C0CA55', '#F07C6C', '#AD5472'] },
+                    { name: 'scheme21', colors: ['#96003A', '#FF7347', '#FFBC7B', '#FF4154', '#642223'] },
+                    { name: 'scheme22', colors: ['#5D7359', '#E0D697', '#D6AA5C', '#8C5430', '#661C0E'] },
+                    { name: 'scheme23', colors: ['#16193B', '#35478C', '#4E7AC7', '#7FB2F0', '#ADD5F7'] },
+                    { name: 'scheme24', colors: ['#7B1A25', '#BF5322', '#9DA860', '#CEA457', '#B67818'] },
+                    { name: 'scheme25', colors: ['#0081DA', '#3AAFFF', '#99C900', '#FFEB3D', '#309B46'] },
+                    { name: 'scheme26', colors: ['#0069A5', '#0098EE', '#7BD2F6', '#FFB800', '#FF6800'] },
+                    { name: 'scheme27', colors: ['#FF6800', '#A0A700', '#FF8D00', '#678900', '#0069A5'] }
+                ],
+                padding: { left: 5, top: 5, right: 5, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    dataField: 'Day',
+                    showGridLines: true
+                },
+                seriesGroups: [
+                    {
+                        type: 'column',
+                        columnsGapPercent: 50,
+                        seriesGapPercent: 0,
+                        valueAxis:
+                            {
+                                unitInterval: 10,
+                                minValue: 0,
+                                maxValue: 100,
+                                displayValueAxis: true,
+                                description: 'Time in minutes',
+                                axisSize: 'auto',
+                                tickMarksColor: '#888888'
+                            },
+                        series: [
+                            { dataField: 'Keith', displayText: 'Keith' },
+                            { dataField: 'Erica', displayText: 'Erica' },
+                            { dataField: 'George', displayText: 'George' },
+                            { dataField: 'Monica', displayText: 'Monica' },
+                            { dataField: 'Maria', displayText: 'Maria' }
+                        ]
+                    }
+                ]
+            }
+        },
+        methods: {
+            itemTemplate: function (index) {
+                if (index == -1) return '';
+                let colors = this.schemes[index].colors;
+                let html = '';
+                for (let i = 0; i < colors.length; i++) {
+                    html += '<div style="float: left; border-radius: 100%; width: 25px; height: 25px; border: none; background:' + colors[i] + '; margin-left: 4px;"></div>';
+                }
+                return html;
+            },
+            selectionTemplate: function (element, index) {
+                if (index < 0)
+                    return;
+                let colors = this.schemes[index].colors;
+                let html = '';
+                for (let i = 0; i < colors.length; i++) {
+                    html += '<div style="margin-top: 2px; float: left; border-radius: 100%; width: 25px; height: 25px; border: none; background:' + colors[i] + '; margin-left: 4px;"></div>';
+                }
+                return html;
+            },
+            myDropDownListOnChange: function () {
+                let selectedIndex = this.$refs.myList.selectedIndex;
+                this.$refs.myChart.colorScheme = this.schemes[selectedIndex].name;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/themes/main.js b/chart/themes/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/themes/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/themes/package.json b/chart/themes/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/themes/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/tooltipformatting/App.vue b/chart/tooltipformatting/App.vue
new file mode 100644
index 00000000..872ccbf8
--- /dev/null
+++ b/chart/tooltipformatting/App.vue
@@ -0,0 +1,87 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'U.S. Stock Market Index Performance (2014)'"
+              :description="'NASDAQ Composite compared to S&P 500'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+              :seriesGroups="seriesGroups" :colorScheme="'scheme05'" :enableCrosshairs="true">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source + '" : ' + error); } }),
+                padding: { left: 10, top: 5, right: 30, bottom: 5 },
+                titlePadding: { left: 10, top: 0, right: 30, bottom: 10 },
+                xAxis: {
+                    type: 'date',
+                    baseUnit: 'month',
+                    minValue: '01-01-2014',
+                    maxValue: '01-01-2015',
+                    dataField: 'Date',
+                    valuesOnTicks: true,
+                    formatFunction: (value) => {
+                        return value.getDate() + '-' + this.months[value.getMonth()] + '-' + value.getFullYear();
+                    },
+                    gridLines: {
+                        visible: true,
+                        interval: 3,
+                    },
+                    labels:
+                        {
+                            angle: -45,
+                            offset: { x: -20, y: 0 }
+                        }
+                },
+                seriesGroups: [
+                    {
+                        type: 'spline',
+                        toolTipFormatFunction: this.toolTipCustomFormatFn,
+                        valueAxis:
+                            {
+                                title: { text: 'Daily Closing Price<br>' }
+                            },
+                        series: [
+                            { dataField: 'S&P 500', displayText: 'S&P 500' },
+                            { dataField: 'NASDAQ', displayText: 'NASDAQ' }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+            this.source =
+                {
+                    datatype: 'csv',
+                    datafields: [
+                        { name: 'Date' },
+                        { name: 'S&P 500' },
+                        { name: 'NASDAQ' }
+                    ],
+                    url: '../sampledata/nasdaq_vs_sp500.txt'
+                };
+        },
+        methods: {
+            toolTipCustomFormatFn: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
+                let dataItem = this.dataAdapter.records[itemIndex];
+                return '<DIV style="text-align:left"><b>Date: </b>' +
+                    categoryValue.getDate() + '-' + this.months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() + '<br /><br /><b>NASDAQ: </b>' +
+                    this.dataAdapter.formatNumber(dataItem['NASDAQ'], 'f') + '<br /><b>S&P 500: </b>' +
+                    this.dataAdapter.formatNumber(dataItem['S&P 500'], 'f') + '</DIV>';
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/tooltipformatting/main.js b/chart/tooltipformatting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/tooltipformatting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/tooltipformatting/package.json b/chart/tooltipformatting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/tooltipformatting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/waterfallseries/App.vue b/chart/waterfallseries/App.vue
new file mode 100644
index 00000000..65303950
--- /dev/null
+++ b/chart/waterfallseries/App.vue
@@ -0,0 +1,86 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'EU Population between 2003 and 2014'"
+              :description="'data source: Eurostat'"
+              :showLegend="false" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="data" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme06'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                data: this.data,
+                padding: { left: 10, top: 5, right: 10, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    type: 'basic',
+                    dataField: 'year',
+                    displayText: 'Year',
+                    labels: { angle: 0 }
+                },
+                valueAxis: {
+                    title: { text: 'Population<br>' },
+                    unitInterval: 1000000,
+                    labels:
+                        {
+                            formatFunction: (value) => {
+                                return value / 1000000 + ' M';
+                            }
+                        }
+                },
+                seriesGroups: [
+                    {
+                        type: 'waterfall',
+                        series:
+                            [
+                                {
+                                    dataField: 'population',
+                                    summary: 'summary',
+                                    displayText: 'Population change',
+                                    colorFunction: (value, itemIndex, serie, group) => {
+                                        if (itemIndex === (this.data.length - 1)) {
+                                            return '#3F3A3B'; // total
+                                        }
+                                        return (value < 0) ? '#D30E2F' /* red */ : '#24A037' /*green*/;
+                                    }
+                                }
+                            ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.data = [
+                { year: 2003, population: 490815046 },
+                { year: 2004, population: 492709300 },
+                { year: 2005, population: 494774599 },
+                { year: 2006, population: 496633373 },
+                { year: 2007, population: 498408547 },
+                { year: 2008, population: 500418320 },
+                { year: 2009, population: 502186144 },
+                { year: 2010, population: 503379305 },
+                { year: 2011, population: 504961522 },
+                { year: 2012, population: 504582506 },
+                { year: 2013, population: 505674965 },
+                { year: 2014, population: 507416607 },
+                { year: 'Total', summary: true }
+            ];
+
+            for (var i = this.data.length - 2; i > 0; i--) {
+                this.data[i].population -= this.data[i - 1].population;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/waterfallseries/main.js b/chart/waterfallseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/waterfallseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/waterfallseries/package.json b/chart/waterfallseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/waterfallseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/chart/waterfallwithmultipleseries/App.vue b/chart/waterfallwithmultipleseries/App.vue
new file mode 100644
index 00000000..84bf4c34
--- /dev/null
+++ b/chart/waterfallwithmultipleseries/App.vue
@@ -0,0 +1,103 @@
+<template>
+    <JqxChart style="width: 850px; height: 500px"
+              :title="'EU Employment rate trends by gender'"
+              :description="'data source: Eurostat'"
+              :showLegend="true" :enableAnimations="true" :padding="padding"
+              :titlePadding="titlePadding" :source="data" :xAxis="xAxis"
+              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme06'">
+    </JqxChart>
+</template>
+
+<script>
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxChart
+        },
+        data: function () {
+            return {
+                data: this.data,
+                padding: { left: 10, top: 5, right: 10, bottom: 5 },
+                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                xAxis: {
+                    type: 'basic',
+                    dataField: 'year',
+                    displayText: 'Year',
+                    labels: { angle: 0 }
+                },
+                valueAxis: {
+                    title: { text: 'Employment rate<br>' },
+                    labels:
+                        {
+                            formatSettings:
+                                {
+                                    decimalPlaces: 1,
+                                    sufix: '%'
+                                }
+                        }
+                },
+                seriesGroups: [
+                    {
+                        type: 'waterfall',
+                        toolTipFormatFunction: (value, itemIndex, serie, group, categoryValue, categoryAxis) => {
+                            var dataItem = this.data[itemIndex];
+                            var val = Math.round(value * 100) / 100;
+                            return '<DIV style="text-align:left"><b>' +
+                                ((itemIndex == this.data.length - 1) ? 'Summary:' : 'Year: ' + dataItem.year) + '</b>' +
+                                '<br />' + serie.displayText + ' ' + ((itemIndex != 0 && itemIndex != this.data.length - 1) ? 'change: ' : 'rate: ') + val + ' %' +
+                                '</DIV>';
+                        },
+                        series: [
+                            {
+                                dataField: 'male',
+                                summary: 'summary',
+                                displayText: 'Male employment',
+                                colorFunction: (value, itemIndex, serie, group) => {
+                                    if (itemIndex == this.data.length - 1)
+                                        return '#3F3A3B'; // total
+                                    return (value < 0) ? '#C30E1F' /* red */ : '#117406' /*green*/;
+                                }
+                            },
+                            {
+                                dataField: 'female',
+                                summary: 'summary',
+                                displayText: 'Female employment',
+                                colorFunction: (value, itemIndex, serie, group) => {
+                                    if (itemIndex == this.data.length - 1)
+                                        return '#4F4A4B'; // total
+                                    return (value < 0) ? '#D30E2F' /* red */ : '#24A037' /*green*/;
+                                }
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.data = [
+                { year: 2002, male: 75.4, female: 58.1 },
+                { year: 2003, male: 75.4, female: 58.7 },
+                { year: 2004, male: 75.5, female: 59.4 },
+                { year: 2005, male: 76.0, female: 60.0 },
+                { year: 2006, male: 76.8, female: 61.1 },
+                { year: 2007, male: 77.7, female: 62.1 },
+                { year: 2008, male: 77.8, female: 62.8 },
+                { year: 2009, male: 75.7, female: 62.3 },
+                { year: 2010, male: 75.0, female: 62.0 },
+                { year: 2011, male: 74.9, female: 62.2 },
+                { year: 2012, male: 74.5, female: 62.4 },
+                { year: 2013, male: 74.3, female: 62.6 },
+                { year: 'Summary', male: 74.3, female: 62.6, summary: true }
+            ];
+
+            for (let i = this.data.length - 2; i > 0; i--) {
+                this.data[i].male -= this.data[i - 1].male;
+                this.data[i].female -= this.data[i - 1].female;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/chart/waterfallwithmultipleseries/main.js b/chart/waterfallwithmultipleseries/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/chart/waterfallwithmultipleseries/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/chart/waterfallwithmultipleseries/package.json b/chart/waterfallwithmultipleseries/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/chart/waterfallwithmultipleseries/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/checkbox/defaultfunctionality/App.vue b/checkbox/defaultfunctionality/App.vue
new file mode 100644
index 00000000..4dcf4f0a
--- /dev/null
+++ b/checkbox/defaultfunctionality/App.vue
@@ -0,0 +1,115 @@
+<template>
+    <div style="font-family: Verdana Arial; font-size: 12px; width: 400px;">
+        <div style="float: left; width: 400px;">
+            <h3 style="margin-left: 15px;">Categories</h3>
+            <JqxCheckBox style="margin-left: 10px; float: left;"
+                         :width="120" :height="25">
+                Entertainment
+            </JqxCheckBox>
+            <JqxCheckBox style="margin-left: 10px; float: left;"
+                         :width="120" :height="25" :checked="true">
+                <span>Computers</span>
+            </JqxCheckBox>
+            <JqxCheckBox style="margin-left: 10px; float: left;"
+                         :width="120" :height="25">
+                <span>Sports</span>
+            </JqxCheckBox>
+        </div>
+        <div style="float: left; width: 400px; margin-top: 10px;">
+            <JqxCheckBox style="margin-left: 10px; float: left;"
+                         :width="120" :height="25">
+                Health
+            </JqxCheckBox>
+            <JqxCheckBox style="margin-left: 10px; float: left;"
+                         :width="120" :height="25">
+                <span>Finance</span>
+            </JqxCheckBox>
+            <JqxCheckBox style="margin-left: 10px; float: left;"
+                         :width="120" :height="25">
+                <span>Travel</span>
+            </JqxCheckBox>
+        </div>
+        <div style="float: left; width: 400px; margin-top: 10px;">
+            <JqxCheckBox style="margin-left: 10px; float: left;"
+                         :width="120" :height="25">
+                Music
+            </JqxCheckBox>
+            <JqxCheckBox style="margin-left: 10px; float: left;"
+                         :width="120" :height="25">
+                <span>Technology</span>
+            </JqxCheckBox>
+            <JqxCheckBox style="margin-left: 10px; float: left;"
+                         :width="120" :height="25">
+                <span>Publishing</span>
+            </JqxCheckBox>
+        </div>
+        <br />
+        <div style="float: left; width: 400px; margin-top: 10px;">
+            <h3 style="margin-left: 15px;">States</h3>
+            <JqxCheckBox @change="checkBox10OnChange($event)" style="margin-left: 10px; float: left;"
+                         :width="120" :height="25" :checked="true">
+                <span ref="span10">Checked</span>
+            </JqxCheckBox>
+            <JqxCheckBox @change="checkBox11OnChange($event)" style="margin-left: 10px; float: left;"
+                         :width="120" :height="25" :checked="false">
+                <span ref="span11">Unchecked</span>
+            </JqxCheckBox>
+        </div>
+        <div style="float: left; width: 400px; margin-top: 10px;">
+            <JqxCheckBox @change="checkBox12OnChange($event)" style="margin-left: 10px; float: left;"
+                         :width="120" :height="25" :hasThreeStates="true" :checked="null">
+                <span ref="span12">Indeterminate</span>
+            </JqxCheckBox>
+            <JqxCheckBox style="margin-left: 10px; float: left;"
+                         :width="120" :height="25" :disabled="true">
+                <span>Disabled</span>
+            </JqxCheckBox>
+        </div>
+    </div>
+
+</template>
+
+<script>
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+
+    export default {
+        components: {
+            JqxCheckBox
+        },
+        methods: {
+            checkBox10OnChange: function (event) {
+                let checked = event.args.checked;
+                if (checked) {
+                    this.$refs.span10.innerHTML = 'Checked';
+                }
+                else {
+                    this.$refs.span10.innerHTML = 'Unchecked';
+                }
+            },
+            checkBox11OnChange: function (event) {
+                let checked = event.args.checked;
+                if (checked) {
+                    this.$refs.span11.innerHTML = 'Checked';
+                }
+                else {
+                    this.$refs.span11.innerHTML = 'Unchecked';
+                }
+            },
+            checkBox12OnChange: function (event) {
+                let checked = event.args.checked;
+                if (checked) {
+                    this.$refs.span12.innerHTML = 'Checked';
+                }
+                else if (checked === false) {
+                    this.$refs.span12.innerHTML = 'Unchecked';
+                }
+                else {
+                    this.$refs.span12.innerHTML = 'Indeterminate';
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/checkbox/defaultfunctionality/main.js b/checkbox/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/checkbox/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/checkbox/defaultfunctionality/package.json b/checkbox/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/checkbox/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/checkbox/twowaydatabinding/App.vue b/checkbox/twowaydatabinding/App.vue
new file mode 100644
index 00000000..8836ab04
--- /dev/null
+++ b/checkbox/twowaydatabinding/App.vue
@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <span>Checkbox state is: </span>
+        <b v-if="state !== null">{{ state }}</b>
+        <b v-else>null</b>
+
+        <br /><br />
+
+        <JqxCheckBox v-model="state" :width="120" :height="25" :checked="true" :hasThreeStates="true" />
+    </div>
+</template>
+
+<script>
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+
+    export default {
+        components: {
+            JqxCheckBox
+        },
+        data: function () {
+            return {
+                state: true
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/checkbox/twowaydatabinding/main.js b/checkbox/twowaydatabinding/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/checkbox/twowaydatabinding/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/checkbox/twowaydatabinding/package.json b/checkbox/twowaydatabinding/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/checkbox/twowaydatabinding/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/colorpicker/defaultfunctionality/App.vue b/colorpicker/defaultfunctionality/App.vue
new file mode 100644
index 00000000..3a5b4b1c
--- /dev/null
+++ b/colorpicker/defaultfunctionality/App.vue
@@ -0,0 +1,88 @@
+<template>
+    <div>
+        <JqxScrollView :width="500" :height="350" :slideShow='true' :showButtons='false'>
+            <div>
+                <div class="photo" style="background-image: url(../../../images/imageNature1.jpg)"></div>
+            </div>
+            <div>
+                <div class="photo" style="background-image: url(../../../images/imageNature2.jpg)"></div>
+            </div>
+            <div>
+                <div class="photo" style="background-image: url(../../../images/imageNature3.jpg)"></div>
+            </div>
+            <div>
+                <div class="photo" style="background-image: url(../../../images/imageNature4.jpg)"></div>
+            </div>
+            <div>
+                <div class="photo" style="background-image: url(../../../images/imageNature5.jpg)"></div>
+            </div>
+        </JqxScrollView>
+
+        <br />
+        <label style="margin-left: 5px; font-size: 12px; font-family: Verdana;">
+            Select Frame color
+        </label>
+        <br />
+
+        <JqxDropDownButton ref="myDropDown" style="margin: 3px; float: left"
+                           :width="150" :height="22">
+            <div style="padding: 3px;">
+
+                <JqxColorPicker @colorchange="colorPickerEvent($event)"
+                                :width="220" :height="220" :colorMode='"hue"'>
+                </JqxColorPicker>
+
+            </div>
+        </JqxDropDownButton>
+    </div>
+</template>
+
+<script>
+    import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
+    import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
+    import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcolorpicker.vue';
+
+    export default {
+        components: {
+            JqxScrollView,
+            JqxDropDownButton,
+            JqxColorPicker
+        },
+        mounted: function () {
+            this.$refs.myDropDown.setContent(this.getTextElementByColor({ hex: "FFAABB" }));
+        },
+        methods: {
+            getTextElementByColor: function (color) {
+                if (color == 'transparent' || color.hex == "") {
+                    return '<div style="text-shadow: none; position: relative; padding-bottom: 2px; margin-top: 2px;">transparent</div>';
+                }
+                let nThreshold = 105;
+                let bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
+                let foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White';
+                let element = '<div style="text-shadow: none; position: relative; padding-bottom: 2px; margin-top: 2px;color:' + foreColor + '; background: #' + color.hex + '">#' + color.hex + '</div>';
+                return element;
+            },
+            colorPickerEvent: function (event) {
+                this.$refs.myDropDown.setContent(this.getTextElementByColor(event.args.color));
+                this.$el.querySelector('.jqx-scrollview').style.borderColor = '#' + event.args.color.hex;
+            }
+        }
+    }
+</script>
+
+<style>
+    .photo {
+        width: 500px;
+        height: 350px;
+        background-color: #000;
+        background-position: center;
+        background-repeat: no-repeat;
+    }
+
+    .jqx-scrollview {
+        border: 15px solid #ffaabb;
+        -moz-border-radius: 10px;
+        -webkit-border-radius: 10px;
+        border-radius: 10px;
+    }
+</style>
\ No newline at end of file
diff --git a/colorpicker/defaultfunctionality/main.js b/colorpicker/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/colorpicker/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/colorpicker/defaultfunctionality/package.json b/colorpicker/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/colorpicker/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/colorpicker/settings/App.vue b/colorpicker/settings/App.vue
new file mode 100644
index 00000000..f5db1348
--- /dev/null
+++ b/colorpicker/settings/App.vue
@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <JqxColorPicker ref="myColorPicker" @colorchange="colorChanged($event)"
+                        :width="250" :height="250">
+        </JqxColorPicker>
+
+        <div style="font-size: 13px; font-family: Verdana; margin-top: 10px">
+            <div style="margin-bottom: 5px">Color Modes</div>
+
+            <JqxRadioButton :width="180" :height="25" :checked="true">
+                Saturation Color Mode
+            </JqxRadioButton>
+
+            <JqxRadioButton @change="hueModeChanged($event)"
+                            :width="180" :height="25">
+                Hue Color Mode
+            </JqxRadioButton>
+        </div>
+
+        <div ref="colorLog" style="font-size: 13px; font-family: Verdana"></div>
+    </div>
+</template>
+
+<script>
+    import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcolorpicker.vue';
+    import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
+
+    export default {
+        components: {
+            JqxColorPicker,
+            JqxRadioButton
+        },
+        methods: {
+            colorChanged: function (event) {
+                this.$refs.colorLog.innerHTML = `<div>Color: #${event.args.color.hex}</div>`;
+            },
+            hueModeChanged: function (event) {
+                if (event.args.checked) {
+                    this.$refs.myColorPicker.colorMode = 'hue';
+                }
+                else {
+                    this.$refs.myColorPicker.colorMode = 'saturation';
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/colorpicker/settings/main.js b/colorpicker/settings/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/colorpicker/settings/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/colorpicker/settings/package.json b/colorpicker/settings/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/colorpicker/settings/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/animation/App.vue b/combobox/animation/App.vue
new file mode 100644
index 00000000..b6b0aa65
--- /dev/null
+++ b/combobox/animation/App.vue
@@ -0,0 +1,82 @@
+<template>
+    <div>
+        <div id='selectionlog'>
+            <h3>Animation Type</h3>
+
+            <JqxRadioButton @checked="noneAnimationOnChecked()">
+                None
+            </JqxRadioButton>
+
+            <JqxRadioButton @checked="slideAnimationOnChecked()">
+                Slide
+            </JqxRadioButton>
+
+            <JqxRadioButton @checked="fadeAnimationOnChecked()" :checked="true">
+                Fade
+            </JqxRadioButton>
+        </div>
+
+        <JqxComboBox ref="myComboBox"
+                     :width="150" :height="25" :source="dataAdapter" :selectedIndex="0"
+                     :animationType="'fade'" :dropDownHorizontalAlignment="'right'"
+                     :displayMember="'ContactName'" :valueMember="'CompanyName'">
+        </JqxComboBox>
+    </div>
+</template>
+
+<script>
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+
+    export default {
+        components: {
+            JqxRadioButton,
+            JqxComboBox
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'CompanyName' },
+                    { name: 'ContactName' }
+                ],
+                id: 'id',
+                url: '../sampledata/customers.txt'
+            };
+        },
+        methods: {
+            noneAnimationOnChecked: function () {
+                this.$refs.myComboBox.animationType = 'none';
+            },
+            slideAnimationOnChecked: function () {
+                this.$refs.myComboBox.animationType = 'slide';
+            },
+            fadeAnimationOnChecked: function () {
+                this.$refs.myComboBox.animationType = 'fade';
+            }
+        }
+    };
+</script>
+
+<style>
+    #selectionlog {
+        float: left;
+        font-size: 13px;
+        font-family: Verdana;
+    }
+
+    .jqx-radiobutton {
+        margin-top: 10px;
+    }
+
+    .jqx-combobox {
+        float: left;
+        margin-top: 20px;
+        margin-left: 100px;
+    }
+</style>
\ No newline at end of file
diff --git a/combobox/animation/main.js b/combobox/animation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/animation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/animation/package.json b/combobox/animation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/animation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/bindingtojson/App.vue b/combobox/bindingtojson/App.vue
new file mode 100644
index 00000000..1038194a
--- /dev/null
+++ b/combobox/bindingtojson/App.vue
@@ -0,0 +1,56 @@
+<template>
+    <div>
+        <JqxComboBox @select="myComboBoxOnSelect($event)"
+                     :width="150" :height="25" :source="dataAdapter" :selectedIndex="0"
+                     :displayMember="'ContactName'" :valueMember="'CompanyName'">
+        </JqxComboBox>
+
+        <div ref="selectionlog" style="font-size: 12px; font-family: Verdana"></div>
+    </div>
+</template>
+
+<script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+
+    export default {
+        components: {
+            JqxComboBox
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'CompanyName' },
+                    { name: 'ContactName' }
+                ],
+                id: 'id',
+                url: '../sampledata/customers.txt'
+            };
+        },
+        methods: {
+            myComboBoxOnSelect: function (event) {
+                if (event.args) {
+                    let item = event.args.item;
+                    if (item) {
+                        let valueElement = document.createElement('div');
+                        valueElement.innerHTML = 'Value: ' + item.value;
+                        let labelElement = document.createElement('div');
+                        labelElement.innerHTML = 'Label: ' + item.label;
+                        let selectionLog = this.$refs.selectionlog;
+                        selectionLog.innerHTML = '';
+                        selectionLog.appendChild(labelElement);
+                        selectionLog.appendChild(valueElement);
+                    }
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/combobox/bindingtojson/main.js b/combobox/bindingtojson/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/bindingtojson/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/bindingtojson/package.json b/combobox/bindingtojson/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/bindingtojson/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/bindingtoremotedata/App.vue b/combobox/bindingtoremotedata/App.vue
new file mode 100644
index 00000000..78576535
--- /dev/null
+++ b/combobox/bindingtoremotedata/App.vue
@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <JqxComboBox @select="myComboBoxOnSelect($event)"
+                     :width="150" :height="25" :source="dataAdapter" :selectedIndex="0"
+                     :displayMember="'countryName'" :valueMember="'name'">
+        </JqxComboBox>
+
+        <div ref="selectionlog" style="font-size: 12px; font-family: Verdana"></div>
+    </div>
+</template>
+
+<script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+
+    export default {
+        components: {
+            JqxComboBox
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: "jsonp",
+                datafields: [
+                    { name: 'countryName' },
+                    { name: 'name' },
+                    { name: 'population', type: 'float' },
+                    { name: 'continentCode' }
+                ],
+                url: "http://api.geonames.org/searchJSON",
+                data: {
+                    featureClass: "P",
+                    style: "full",
+                    maxRows: 50,
+                    username: "jqwidgets"
+                }
+            };
+        },
+        methods: {
+            myComboBoxOnSelect: function (event) {
+                if (event.args) {
+                    let item = event.args.item;
+                    if (item) {
+                        let valueElement = document.createElement('div');
+                        valueElement.innerHTML = 'Value: ' + item.value;
+                        let labelElement = document.createElement('div');
+                        labelElement.innerHTML = 'Label: ' + item.label;
+                        let selectionLog = this.$refs.selectionlog;
+                        selectionLog.innerHTML = '';
+                        selectionLog.appendChild(labelElement);
+                        selectionLog.appendChild(valueElement);
+                    }
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/combobox/bindingtoremotedata/main.js b/combobox/bindingtoremotedata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/bindingtoremotedata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/bindingtoremotedata/package.json b/combobox/bindingtoremotedata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/bindingtoremotedata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/bindingtoxml/App.vue b/combobox/bindingtoxml/App.vue
new file mode 100644
index 00000000..047ea1f2
--- /dev/null
+++ b/combobox/bindingtoxml/App.vue
@@ -0,0 +1,58 @@
+<template>
+    <div>
+        <JqxComboBox @select="myComboBoxOnSelect($event)"
+                     :width="150" :height="25" :source="dataAdapter" :selectedIndex="0"
+                     :displayMember="'ContactName'" :valueMember="'CompanyName'">
+        </JqxComboBox>
+
+        <div ref="selectionlog" style="font-size: 12px; font-family: Verdana"></div>
+    </div>
+</template>
+
+<script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+
+    export default {
+        components: {
+            JqxComboBox
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
+                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' },
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:CustomerID',
+                url: '../sampledata/customers.xml'
+            };
+        },
+        methods: {
+            myComboBoxOnSelect: function (event) {
+                if (event.args) {
+                    let item = event.args.item;
+                    if (item) {
+                        let valueElement = document.createElement('div');
+                        valueElement.innerHTML = 'Value: ' + item.value;
+                        let labelElement = document.createElement('div');
+                        labelElement.innerHTML = 'Label: ' + item.label;
+                        let selectionLog = this.$refs.selectionlog;
+                        selectionLog.innerHTML = '';
+                        selectionLog.appendChild(labelElement);
+                        selectionLog.appendChild(valueElement);
+                    }
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/combobox/bindingtoxml/main.js b/combobox/bindingtoxml/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/bindingtoxml/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/bindingtoxml/package.json b/combobox/bindingtoxml/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/bindingtoxml/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/cascadingcomboboxes/App.vue b/combobox/cascadingcomboboxes/App.vue
new file mode 100644
index 00000000..eb3aba61
--- /dev/null
+++ b/combobox/cascadingcomboboxes/App.vue
@@ -0,0 +1,128 @@
+<template>
+    <div>
+        <span style="margin-top: 6px; font-size: 12px; font-family: verdana; float: left">Customers:</span>
+
+        <JqxComboBox ref="customersComboBox" style="margin-left: 5px; float: left"
+                     @select="customersOnSelect($event)"
+                     :width="300" :height="25" :source="customersAdapter" :valueMember="'CustomerID'"
+                     :placeHolder="'Select customer...'" :displayMember="'CompanyName'">
+        </JqxComboBox>
+
+        <div style="clear: both"></div>
+        <div style="margin-top: 20px"></div>
+
+        <span style="margin-top: 6px; font-size: 12px; font-family: verdana; float: left">Orders:</span>
+
+        <JqxComboBox ref="ordersComboBox" style="margin-left: 5px; float: left"
+                     @select="ordersOnSelect($event)"
+                     :width="300" :height="25" :source="ordersAdapter" :valueMember="'CustomerID'"
+                     :placeHolder="'Select order...'" :displayMember="'OrderID'" :disabled="true">
+        </JqxComboBox>
+
+        <div style="clear: both"></div>
+        <div id="orderInfo" style="margin-top: 25px; font-size: 12px"></div>
+    </div>
+</template>
+
+<script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxComboBox,
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                customersAdapter: new jqx.dataAdapter(this.customersSource),
+                ordersAdapter: new jqx.dataAdapter(this.ordersSource)
+            }
+        },
+        beforeCreate: function () {
+
+            this.customersSource = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'CompanyName' },
+                    { name: 'CustomerID' }
+                ],
+                url: '../sampledata/customers.txt'
+            };
+
+            this.ordersSource = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'CustomerID' },
+                    { name: 'OrderID' },
+                    { name: 'ShipCity' },
+                    { name: 'OrderDate' },
+                    { name: 'ShipName' },
+                    { name: 'ShipCountry' },
+                    { name: 'ShipAddress' }
+                ],
+                url: '../sampledata/orders.txt'
+            };
+        },
+        methods: {
+            customersOnSelect: function (event) {
+                if (event.args) {
+                    this.$refs.ordersComboBox.setOptions({ disabled: false, selectedIndex: -1 });
+                    let value = event.args.item.value;
+                    let ordersSource = this.$refs.ordersComboBox.source._source;
+                    ordersSource.data = { CustomerID: value };
+                    let ordersAdapter = new jqx.dataAdapter(ordersSource, {
+                        beforeLoadComplete: (records) => {
+                            let filteredRecords = new Array();
+                            for (let i = 0; i < records.length; i++) {
+                                if (records[i].CustomerID == value)
+                                    filteredRecords.push(records[i]);
+                            }
+                            return filteredRecords;
+                        }
+                    });
+                    this.$refs.ordersComboBox.setOptions({ source: ordersAdapter, autoDropDownHeight: ordersAdapter.records.length > 10 ? false : true });
+                }
+            },
+            ordersOnSelect: function (event) {
+                if (event.args) {
+                    let index = this.$refs.ordersComboBox.selectedIndex;
+                    if (index !== -1) {
+                        let record = this.ordersAdapter.records[index];
+                        let detailsSource =
+                            {
+                                dataType: 'json',
+                                dataFields: [
+                                    { name: 'CustomerID' },
+                                    { name: 'OrderID' },
+                                    { name: 'ShipCity' },
+                                    { name: 'OrderDate' },
+                                    { name: 'ShipName' },
+                                    { name: 'ShipCountry' },
+                                    { name: 'ShipAddress' }
+                                ],
+                                localData: record
+                            };
+                        let detailsAdapter = new jqx.dataAdapter(detailsSource);
+
+                        let options = {
+                            source: detailsAdapter,
+                            width: 500,
+                            columns: [
+                                { text: 'Order Date', dataField: 'OrderDate', cellsFormat: 'd' },
+                                { text: 'Ship Country', dataField: 'ShipCountry' },
+                                { text: 'Ship Address', dataField: 'ShipAddress' },
+                                { text: 'Ship Name', dataField: 'ShipName' }
+                            ]
+                        };
+
+                        jqwidgets.createInstance('#orderInfo', 'jqxDataTable', options);
+                    }
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/combobox/cascadingcomboboxes/main.js b/combobox/cascadingcomboboxes/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/cascadingcomboboxes/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/cascadingcomboboxes/package.json b/combobox/cascadingcomboboxes/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/cascadingcomboboxes/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/categories/App.vue b/combobox/categories/App.vue
new file mode 100644
index 00000000..90688db0
--- /dev/null
+++ b/combobox/categories/App.vue
@@ -0,0 +1,38 @@
+<template>
+    <JqxComboBox :width="300" :height="25" :source="source" :selectedIndex="0">
+    </JqxComboBox>
+</template>
+
+<script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+
+    export default {
+        components: {
+            JqxComboBox
+        },
+        data: function () {
+            return {
+                source: [
+                    // Business & Investing
+                    { html: '<div tabIndex=0 style="padding: 1px;"><div>Title: Do the Work</div><div>Author: Steven Pressfield</div></div>', label: 'Do the Work', group: 'Business & Investing' },
+                    { html: '<div tabIndex=0 style="padding: 1px;"><div>Title: Think and Grow Rich</div><div>Author: Napoleon Hill</div></div>', label: 'Think and Grow Rich', group: 'Business & Investing' },
+                    { html: '<div tabIndex=0 style="padding: 1px;"><div>Title: The Toyota Way to Continuous...</div><div>Author: Jeffrey K. Liker</div></div>', label: 'The Toyota Way to Continuous...', group: 'Business & Investing' },
+                    { html: '<div tabIndex=0 style="padding: 1px;"><div>Title: Redesigning Leadership </div><div>Author: John Maeda</div></div>', label: 'Redesigning Leadership ', group: 'Business & Investing' },
+                    // Computer & Internet Books
+                    { html: '<div tabIndex=0 style="padding: 1px;"><div>Title: MacBook Pro Portable Genius</div><div>Author: Brad Miser</div></div>', label: 'MacBook Pro Portable Genius', group: 'Computer & Internet Books' },
+                    { html: '<div tabIndex=0 style="padding: 1px;"><div>Title: Social Media Metrics Secrets</div><div>Author: John Lovett</div></div>', label: 'Social Media Metrics Secrets', group: 'Computer & Internet Books' },
+                    { html: '<div tabIndex=0 style="padding: 1px;"><div>Title: iPad 2: The Missing Manual</div><div>Author: J D Biersdorfer J.D</div></div>', label: 'iPad 2: The Missing Manual', group: 'Computer & Internet Books' },
+                    // History
+                    { html: '<div tabIndex=0 style="padding: 1px;"><div>Lincoln and His Admirals</div><div>Author:Craig L. Symonds</div></div>', label: 'Lincoln and His Admirals', group: 'History' },
+                    { html: '<div tabIndex=0 style="padding: 1px;"><div>The Dogs of War: 1861</div><div>Author:Emory M. Thomas</div></div>', label: 'The Dogs of War: 1861', group: 'History' },
+                    { html: '<div tabIndex=0 style="padding: 1px;"><div>Cleopatra: A Life</div><div>Author:Stacy Schiff</div></div>', label: 'Cleopatra: A Life', group: 'History' },
+                    { html: '<div tabIndex=0 style="padding: 1px;"><div>Mother Teresa: A Biography</div><div>Author:Meg Greene</div></div>', label: 'Mother Teresa: A Biography', group: 'History' },
+                    { html: '<div tabIndex=0 style="padding: 1px;"><div>The Federalist Papers</div><div>Author:John Jay</div></div>', label: 'The Federalist Papers', group: 'History' },
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/combobox/categories/main.js b/combobox/categories/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/categories/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/categories/package.json b/combobox/categories/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/categories/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/checkboxes/App.vue b/combobox/checkboxes/App.vue
new file mode 100644
index 00000000..4c8705ed
--- /dev/null
+++ b/combobox/checkboxes/App.vue
@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <JqxComboBox ref="myComboBox" style="float:left"
+                     @checkChange="myComboBoxOnCheckChange($event)"
+                     :width="200" :height="25" :source="dataAdapter" :checkboxes="true"
+                     :displayMember="'ContactName'" :valueMember="'CompanyName'">
+        </JqxComboBox>
+
+        <div style="float: left; margin-left: 20px; font-size: 13px; font-family: Verdana;">
+            <div ref="selectionlog"></div>
+            <div ref="checkedItemsLog" style='max-width: 300px; margin-top: 20px;'></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+
+    export default {
+        components: {
+            JqxComboBox
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'CompanyName' },
+                    { name: 'ContactName' }
+                ],
+                id: 'id',
+                url: '../sampledata/customers.txt',
+                async: false
+            };
+        },
+        mounted: function () {
+            this.$refs.myComboBox.checkIndex(0);
+        },
+        methods: {
+            myComboBoxOnCheckChange: function (event) {
+                if (event.args) {
+                    let item = event.args.item;
+                    if (item) {
+                        let valueElement = document.createElement('div');
+                        valueElement.innerHTML = 'Value: ' + item.value;
+                        let labelElement = document.createElement('div');
+                        labelElement.innerHTML = 'Label: ' + item.label;
+                        let checkedElement = document.createElement('div');
+                        checkedElement.innerHTML = 'Checked: ' + item.checked;
+                        let selectionLog = this.$refs.selectionlog;
+                        selectionLog.innerHTML = '';
+                        selectionLog.appendChild(labelElement);
+                        selectionLog.appendChild(valueElement);
+                        selectionLog.appendChild(checkedElement);
+
+
+                        let items = this.$refs.myComboBox.getCheckedItems();
+                        let checkedItems = '';
+                        for (let obj of items) {
+                            checkedItems += obj.label + ', ';
+                        }
+                        this.$refs.checkedItemsLog.innerHTML = checkedItems;
+                    }
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/combobox/checkboxes/main.js b/combobox/checkboxes/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/checkboxes/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/checkboxes/package.json b/combobox/checkboxes/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/checkboxes/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/createComponent/App.vue b/combobox/createComponent/App.vue
new file mode 100644
index 00000000..8245e487
--- /dev/null
+++ b/combobox/createComponent/App.vue
@@ -0,0 +1,91 @@
+<template>
+    <JqxComboBox ref="myComboBox" :autoCreate="false">
+    </JqxComboBox>
+</template>
+
+<script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+
+    export default {
+        components: {
+            JqxComboBox
+        },
+        mounted: function () {
+            const settings = {
+                source: this.generateHTML(),
+                selectedIndex: 0,
+                width: 250,
+                height: 25
+            };
+
+            this.$refs.myComboBox.createComponent(settings);
+        },
+        methods: {
+            generateHTML: function () {
+                let source = new Array();
+
+                for (let i = 0; i < 10; i++) {
+                    let movie = 'avatar.png';
+                    let title = 'Avatar';
+                    let year = 2009;
+                    switch (i) {
+                        case 1:
+                            movie = 'endgame.png';
+                            title = 'End Game';
+                            year = 2006;
+                            break;
+                        case 2:
+                            movie = 'priest.png';
+                            title = 'Priest';
+                            year = 2011;
+                            break;
+                        case 3:
+                            movie = 'unknown.png';
+                            title = 'Unknown';
+                            year = 2011;
+                            break;
+                        case 4:
+                            movie = 'unstoppable.png';
+                            title = 'Unstoppable';
+                            year = 2010;
+                            break;
+                        case 5:
+                            movie = 'twilight.png';
+                            title = 'Twilight';
+                            year = 2008;
+                            break;
+                        case 6:
+                            movie = 'kungfupanda.png';
+                            title = 'Kung Fu Panda';
+                            year = 2008;
+                            break;
+                        case 7:
+                            movie = 'knockout.png';
+                            title = 'Knockout';
+                            year = 2011
+                            break;
+                        case 8:
+                            movie = 'theplane.png';
+                            title = 'The Plane';
+                            year = 2010;
+                            break;
+                        case 9:
+                            movie = 'bigdaddy.png';
+                            title = 'Big Daddy';
+                            year = 1999;
+                            break;
+                    }
+                    let html = "<div style='padding: 0px; margin: 0px; height: 95px; float: left;'><img width='60'" +
+                        "style='float: left; margin-top: 4px; margin-right: 15px;' src='../../../images/" + movie
+                        + "'/><div style='margin-top: 10px; font-size: 13px;'>" + "<b>Title</b><div>" + title +
+                        "</div><div style='margin-top: 10px;'><b>Year</b><div>" + year.toString() + "</div></div></div>";
+                    source[i] = { html: html, title: title };
+                }
+                return source;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/combobox/createComponent/main.js b/combobox/createComponent/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/createComponent/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/createComponent/package.json b/combobox/createComponent/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/createComponent/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/customrendering/App.vue b/combobox/customrendering/App.vue
new file mode 100644
index 00000000..dff59eaf
--- /dev/null
+++ b/combobox/customrendering/App.vue
@@ -0,0 +1,88 @@
+<template>
+    <JqxComboBox :width="270" :height="25" :source="dataAdapter"
+                 :selectedIndex="0" :renderer="renderer" :itemHeight="70"
+                 :displayMember="'firstname'" :valueMember="'valueMember'">
+    </JqxComboBox>
+</template>
+
+<script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+
+    export default {
+        components: {
+            JqxComboBox
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+
+            const generateData = () => {
+                let data = new Array();
+                let firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne'];
+                let lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth'];
+                let titles = ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager', 'Sales Representative', 'Sales Representative', 'Inside Sales Coordinator', 'Sales Representative'];
+                let titleofcourtesy = ['Ms.', 'Dr.', 'Ms.', 'Mrs.', 'Mr.', 'Mr.', 'Mr.', 'Ms.', 'Ms.'];
+                let birthdate = ['08-Dec-48', '19-Feb-52', '30-Aug-63', '19-Sep-37', '04-Mar-55', '02-Jul-63', '29-May-60', '09-Jan-58', '27-Jan-66'];
+                let hiredate = ['01-May-92', '14-Aug-92', '01-Apr-92', '03-May-93', '17-Oct-93', '17-Oct-93', '02-Jan-94', '05-Mar-94', '15-Nov-94'];
+                let address = ['507 - 20th Ave. E. Apt. 2A', '908 W. Capital Way', '722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House', 'MinerRd.', 'EdgehamHollow', 'WinchesterWay', '4726-11thAve.N.E.', '7HoundstoothRd.'];
+                let city = ['Seattle', 'Tacoma', 'Kirkland', 'Redmond', 'London', 'London', 'London', 'Seattle', 'London'];
+                let postalcode = ['98122', '98401', '98033', '98052', 'SW1 8JR', 'EC2 7JR', 'RG1 9SP', '98105', 'WG2 7LT'];
+                let country = ['USA', 'USA', 'USA', 'USA', 'UK', 'UK', 'UK', 'USA', 'UK'];
+                let homephone = ['(206) 555-9857', '(206) 555-9482', '(206) 555-3412', '(206) 555-8122', '(71) 555-4848', '(71) 555-7773', '(71) 555-5598', '(206) 555-1189', '(71) 555-4444'];
+                let notes = ['Education includes a BA in psychology from Colorado State University in 1970.  She also completed "The Art of the Cold Call."  Nancy is a member of Toastmasters International.',
+                    'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
+                    'Janet has a BS degree in chemistry from Boston College (1984).  She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
+                    'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.',
+                    'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London.  He was promoted to sales manager in March 1993.  Mr. Buchanan has completed the courses "Successful Telemarketing" and "International Sales Management".  He is fluent in French.',
+                    'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986).  He has also taken the courses "Multi-Cultural Selling" and "Time Management for the Sales Professional".  He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
+                    'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company.  After completing a course entitled "Selling in Europe", he was transferred to the London office in March 1993.',
+                    'Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.',
+                    'Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.'];
+
+                let k = 0;
+
+                for (let i = 0; i < firstNames.length; i++) {
+                    let row = {};
+                    row['firstname'] = firstNames[k];
+                    row['lastname'] = lastNames[k];
+                    row['title'] = titles[k];
+                    row['titleofcourtesy'] = titleofcourtesy[k];
+                    row['birthdate'] = birthdate[k];
+                    row['hiredate'] = hiredate[k];
+                    row['address'] = address[k];
+                    row['city'] = city[k];
+                    row['postalcode'] = postalcode[k];
+                    row['country'] = country[k];
+                    row['homephone'] = homephone[k];
+                    row['notes'] = notes[k];
+                    data[i] = row;
+                    k++;
+                }
+
+                return data;
+            }
+
+            this.data = generateData();
+
+            this.source = {
+                localdata: this.data,
+                datatype: 'array'
+            };
+        },
+        methods: {
+            renderer: function (index, label, value) {
+                let datarecord = this.data[index];
+                let imgurl = '../../../images/' + label.toLowerCase() + '.png';
+                let img = '<img height="50" width="45" src="' + imgurl + '"/>';
+                let table = '<table style="min-width: 150px;"><tr><td style="width: 55px;" rowspan="2">' + img + '</td><td>' + datarecord.firstname + ' ' + datarecord.lastname + '</td></tr><tr><td>' + datarecord.title + '</td></tr></table>';
+                return table;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/combobox/customrendering/main.js b/combobox/customrendering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/customrendering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/customrendering/package.json b/combobox/customrendering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/customrendering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/defaultfunctionality/App.vue b/combobox/defaultfunctionality/App.vue
new file mode 100644
index 00000000..0fe3d0a7
--- /dev/null
+++ b/combobox/defaultfunctionality/App.vue
@@ -0,0 +1,88 @@
+<template>
+    <JqxComboBox :width="250" :height="25"
+                 :source="source" :selectedIndex="0">
+    </JqxComboBox>
+</template>
+
+<script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+
+    export default {
+        components: {
+            JqxComboBox
+        },
+        data: function () {
+            return {
+                source: this.generateHTML()
+            }
+        },
+        beforeCreate: function () {
+
+            this.generateHTML = () => {
+                let source = new Array();
+
+                for (let i = 0; i < 10; i++) {
+                    let movie = 'avatar.png';
+                    let title = 'Avatar';
+                    let year = 2009;
+                    switch (i) {
+                        case 1:
+                            movie = 'endgame.png';
+                            title = 'End Game';
+                            year = 2006;
+                            break;
+                        case 2:
+                            movie = 'priest.png';
+                            title = 'Priest';
+                            year = 2011;
+                            break;
+                        case 3:
+                            movie = 'unknown.png';
+                            title = 'Unknown';
+                            year = 2011;
+                            break;
+                        case 4:
+                            movie = 'unstoppable.png';
+                            title = 'Unstoppable';
+                            year = 2010;
+                            break;
+                        case 5:
+                            movie = 'twilight.png';
+                            title = 'Twilight';
+                            year = 2008;
+                            break;
+                        case 6:
+                            movie = 'kungfupanda.png';
+                            title = 'Kung Fu Panda';
+                            year = 2008;
+                            break;
+                        case 7:
+                            movie = 'knockout.png';
+                            title = 'Knockout';
+                            year = 2011
+                            break;
+                        case 8:
+                            movie = 'theplane.png';
+                            title = 'The Plane';
+                            year = 2010;
+                            break;
+                        case 9:
+                            movie = 'bigdaddy.png';
+                            title = 'Big Daddy';
+                            year = 1999;
+                            break;
+                    }
+                    let html = "<div style='padding: 0px; margin: 0px; height: 95px; float: left;'><img width='60'" +
+                        "style='float: left; margin-top: 4px; margin-right: 15px;' src='../../../images/" + movie
+                        + "'/><div style='margin-top: 10px; font-size: 13px;'>" + "<b>Title</b><div>" + title +
+                        "</div><div style='margin-top: 10px;'><b>Year</b><div>" + year.toString() + "</div></div></div>";
+                    source[i] = { html: html, title: title };
+                }
+                return source;
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/combobox/defaultfunctionality/main.js b/combobox/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/defaultfunctionality/package.json b/combobox/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/dropdownhorizontalalignment/App.vue b/combobox/dropdownhorizontalalignment/App.vue
new file mode 100644
index 00000000..788d156d
--- /dev/null
+++ b/combobox/dropdownhorizontalalignment/App.vue
@@ -0,0 +1,62 @@
+<template>
+    <div>
+        <div style="float: left; font-size: 13px; font-family: Verdana;">
+            <h3>Alignment</h3>
+
+            <JqxRadioButton @checked="leftBtnOnChecked()">
+                Left
+            </JqxRadioButton>
+
+            <JqxRadioButton style="margin-top: 10px" @checked="rightBtnOnChecked()" :checked="true">
+                Right
+            </JqxRadioButton>
+
+        </div>
+
+        <JqxComboBox ref="myComboBox" style="float: left; margin-top: 20px; margin-left: 100px;"
+                     :width="150" :height="25" :source="dataAdapter" :selectedIndex="0"
+                     :dropDownHorizontalAlignment="'right'" :dropDownWidth="200"
+                     :displayMember="'ContactName'" :valueMember="'CompanyName'">
+        </JqxComboBox>
+    </div>
+</template>
+
+<script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+
+    export default {
+        components: {
+            JqxComboBox,
+            JqxRadioButton
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'CompanyName' },
+                    { name: 'ContactName' }
+                ],
+                id: 'id',
+                url: '../sampledata/customers.txt',
+                async: false
+            };
+        },
+        methods: {
+            leftBtnOnChecked: function () {
+                this.$refs.myComboBox.dropDownHorizontalAlignment = 'left';
+            },
+            rightBtnOnChecked: function () {
+                this.$refs.myComboBox.dropDownHorizontalAlignment = 'right';
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/combobox/dropdownhorizontalalignment/main.js b/combobox/dropdownhorizontalalignment/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/dropdownhorizontalalignment/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/dropdownhorizontalalignment/package.json b/combobox/dropdownhorizontalalignment/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/dropdownhorizontalalignment/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/dropdownverticalalignment/App.vue b/combobox/dropdownverticalalignment/App.vue
new file mode 100644
index 00000000..3f90be3f
--- /dev/null
+++ b/combobox/dropdownverticalalignment/App.vue
@@ -0,0 +1,63 @@
+<template>
+    <div>
+
+        <JqxComboBox ref="myComboBox" style="float: left; margin-top: 270px;"
+                     :width="150" :height="25" :source="dataAdapter" :selectedIndex="0"
+                     :dropDownVerticalAlignment="'top'" :dropDownWidth="200"
+                     :displayMember="'ContactName'" :valueMember="'CompanyName'">
+        </JqxComboBox>
+
+        <div style="float: left; font-size: 13px; font-family: Verdana; margin-left: 100px; margin-top:270px;">
+            <h3>Alignment</h3>
+
+            <JqxRadioButton @checked="topBtnOnChecked()" :checked="true">
+                Top
+            </JqxRadioButton>
+
+            <JqxRadioButton style="margin-top: 10px" @checked="bottomBtnOnChecked()">
+                Bottom
+            </JqxRadioButton>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+
+    export default {
+        components: {
+            JqxComboBox,
+            JqxRadioButton
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'CompanyName' },
+                    { name: 'ContactName' }
+                ],
+                id: 'id',
+                url: '../sampledata/customers.txt',
+                async: false
+            };
+        },
+        methods: {
+            bottomBtnOnChecked: function () {
+                this.$refs.myComboBox.dropDownVerticalAlignment = 'bottom';
+            },
+            topBtnOnChecked: function () {
+                this.$refs.myComboBox.dropDownVerticalAlignment = 'top';
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/combobox/dropdownverticalalignment/main.js b/combobox/dropdownverticalalignment/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/dropdownverticalalignment/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/dropdownverticalalignment/package.json b/combobox/dropdownverticalalignment/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/dropdownverticalalignment/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/events/App.vue b/combobox/events/App.vue
new file mode 100644
index 00000000..80134e41
--- /dev/null
+++ b/combobox/events/App.vue
@@ -0,0 +1,88 @@
+<template>
+    <div>
+        <JqxComboBox ref="myComboBox" style="float: left; margin-top: 100px;"
+                     @select="onSelect($event)" @unselect="onUnselect($event)"
+                     :width="200" :height="25" :source="source">
+        </JqxComboBox>
+
+        <div style="float: left; font-size: 12px; font-family: Verdana; margin-left: 20px; margin-top: 100px;">
+            <span>Events:</span>
+
+            <JqxPanel ref="myPanel"
+                      :width="200" :height="250">
+            </JqxPanel>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxComboBox,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                source: [
+                    'Affogato',
+                    'Americano',
+                    'Bicerin',
+                    'Breve',
+                    'Café Bombón',
+                    'Café au lait',
+                    'Caffé Corretto',
+                    'Café Crema',
+                    'Caffé Latte',
+                    'Caffé macchiato',
+                    'Café mélange',
+                    'Coffee milk',
+                    'Cafe mocha',
+                    'Cappuccino',
+                    'Carajillo',
+                    'Cortado',
+                    'Cuban espresso',
+                    'Espresso',
+                    'Eiskaffee',
+                    'The Flat White',
+                    'Frappuccino',
+                    'Galao',
+                    'Greek frappé coffee',
+                    'Iced Coffee',
+                    'Indian filter coffee',
+                    'Instant coffee',
+                    'Irish coffee',
+                    'Liqueur coffee'
+                ]
+            }
+        },
+        methods: {
+            onSelect: function (event) {
+                let args = event.args;
+                if (args != undefined) {
+                    let item = event.args.item;
+                    if (item != null) {
+                        this.$refs.myPanel.prepend(`<div style="margin-top: 5px;">Selected: ${item.label}</div>`);
+                    }
+                }
+            },
+            onUnselect: function (event) {
+                let args = event.args;
+                if (args != undefined) {
+                    let item = event.args.item;
+                    if (item != null) {
+                        this.$refs.myPanel.prepend(`<div style="margin-top: 5px;">Unselected: ${item.label}</div>`);
+                    }
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+    .jqx-panel {
+        border: none !important;
+    }
+</style>
\ No newline at end of file
diff --git a/combobox/events/main.js b/combobox/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/events/package.json b/combobox/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/fluidsize/App.vue b/combobox/fluidsize/App.vue
new file mode 100644
index 00000000..805d6aa8
--- /dev/null
+++ b/combobox/fluidsize/App.vue
@@ -0,0 +1,62 @@
+<template> 
+    <JqxComboBox 
+        :width="'100%'" :height="35" :source="source" :selectedIndex="0">
+    </JqxComboBox>
+</template>
+
+    <script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxComboBox,
+            JqxPanel
+        },
+        data: function() {
+            return {
+                source: [
+                    'Affogato',
+                    'Americano',
+                    'Bicerin',
+                    'Breve',
+                    'Café Bombón',
+                    'Café au lait',
+                    'Caffé Corretto',
+                    'Café Crema',
+                    'Caffé Latte',
+                    'Caffé macchiato',
+                    'Café mélange',
+                    'Coffee milk',
+                    'Cafe mocha',
+                    'Cappuccino',
+                    'Carajillo',
+                    'Cortado',
+                    'Cuban espresso',
+                    'Espresso',
+                    'Eiskaffee',
+                    'The Flat White',
+                    'Frappuccino',
+                    'Galao',
+                    'Greek frappé coffee',
+                    'Iced Coffee',
+                    'Indian filter coffee',
+                    'Instant coffee',
+                    'Irish coffee',
+                    'Liqueur coffee'
+                ]
+            }
+        }
+    };
+    </script>
+
+<style>
+    body, html {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      padding: 3px;
+      box-sizing: border-box;
+      margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/combobox/fluidsize/main.js b/combobox/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/fluidsize/package.json b/combobox/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/keyboardnavigation/App.vue b/combobox/keyboardnavigation/App.vue
new file mode 100644
index 00000000..85275c8e
--- /dev/null
+++ b/combobox/keyboardnavigation/App.vue
@@ -0,0 +1,267 @@
+<template>
+    <div>
+        <JqxComboBox style="float: left"
+                     :width="200" :height="25" :source="countries" :selectedIndex="4">
+        </JqxComboBox>
+
+        <div style="font-family: Verdana; font-size: 12px; width: 400px; margin-left: 20px; float: left;">
+            <ul>
+                <li><b>Tab</b> - Like other widgets, the jqxComboBox widget receives focus by tabbing into it. Once focus is received, users will be able to use the keyboard to change the selection. A second tab will take the user out of the widget.</li>
+                <li><b>Shift+Tab</b> - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous focusable element in the tab order.</li>
+                <li><b>Up/Down</b> arrow keys - select previous or next item.</li>
+                <li><b>Page Up/Page Down</b> keys - navigate up or down with one page.</li>
+                <li><b>Home/End</b> keys - navigate to the first or last item.</li>
+                <li><b>Alt Up/Down</b> arrow keys - opens or closes the popup.</li>
+                <li><b>Esc</b> - closes the popup.</li>
+                <li><b>Enter</b> - selects an item.</li>
+                <li><b>Incremental Search</b> - start typing to select the matching item.</li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+
+    export default {
+        components: {
+            JqxComboBox
+        },
+        data: function () {
+            return {
+                countries: [
+                    { value: 'AF', label: 'Afghanistan' },
+                    { value: 'AL', label: 'Albania' },
+                    { value: 'DZ', label: 'Algeria' },
+                    { value: 'AS', label: 'American Samoa' },
+                    { value: 'AD', label: 'Andorra' },
+                    { value: 'AO', label: 'Angola' },
+                    { value: 'AI', label: 'Anguilla' },
+                    { value: 'AQ', label: 'Antarctica' },
+                    { value: 'AG', label: 'Antigua and Barbuda' },
+                    { value: 'AR', label: 'Argentina' },
+                    { value: 'AM', label: 'Armenia' },
+                    { value: 'AW', label: 'Aruba' },
+                    { value: 'AU', label: 'Australia' },
+                    { value: 'AT', label: 'Austria' },
+                    { value: 'AZ', label: 'Azerbaijan' },
+                    { value: 'BS', label: 'Bahamas' },
+                    { value: 'BH', label: 'Bahrain' },
+                    { value: 'BD', label: 'Bangladesh' },
+                    { value: 'BB', label: 'Barbados' },
+                    { value: 'BY', label: 'Belarus' },
+                    { value: 'BE', label: 'Belgium' },
+                    { value: 'BZ', label: 'Belize' },
+                    { value: 'BJ', label: 'Benin' },
+                    { value: 'BM', label: 'Bermuda' },
+                    { value: 'BT', label: 'Bhutan' },
+                    { value: 'BO', label: 'Bolivia' },
+                    { value: 'BA', label: 'Bosnia and Herzegovina' },
+                    { value: 'BW', label: 'Botswana' },
+                    { value: 'BV', label: 'Bouvet Island' },
+                    { value: 'BR', label: 'Brazil' },
+                    { value: 'BN', label: 'Brunei' },
+                    { value: 'BG', label: 'Bulgaria' },
+                    { value: 'BF', label: 'Burkina Faso' },
+                    { value: 'BI', label: 'Burundi' },
+                    { value: 'KH', label: 'Cambodia' },
+                    { value: 'CM', label: 'Cameroon' },
+                    { value: 'CA', label: 'Canada' },
+                    { value: 'CV', label: 'Cape Verde' },
+                    { value: 'KY', label: 'Cayman Islands' },
+                    { value: 'CF', label: 'Central African Republic' },
+                    { value: 'TD', label: 'Chad' },
+                    { value: 'CL', label: 'Chile' },
+                    { value: 'CN', label: 'China' },
+                    { value: 'CX', label: 'Christmas Island' },
+                    { value: 'CC', label: 'Cocos (Keeling) Islands' },
+                    { value: 'CO', label: 'Columbia' },
+                    { value: 'KM', label: 'Comoros' },
+                    { value: 'CG', label: 'Congo' },
+                    { value: 'CK', label: 'Cook Islands' },
+                    { value: 'CR', label: 'Costa Rica' },
+                    { value: 'CI', label: 'Cote D`Ivorie' },
+                    { value: 'HR', label: 'Croatia (Hrvatska)' },
+                    { value: 'CU', label: 'Cuba' },
+                    { value: 'CY', label: 'Cyprus' },
+                    { value: 'CZ', label: 'Czech Republic' },
+                    { value: 'DK', label: 'Denmark' },
+                    { value: 'DJ', label: 'Djibouti' },
+                    { value: 'DM', label: 'Dominica' },
+                    { value: 'DO', label: 'Dominican Republic' },
+                    { value: 'TP', label: 'East Timor' },
+                    { value: 'EC', label: 'Ecuador' },
+                    { value: 'EG', label: 'Egypt' },
+                    { value: 'SV', label: 'El Salvador' },
+                    { value: 'GQ', label: 'Equatorial Guinea' },
+                    { value: 'ER', label: 'Eritrea' },
+                    { value: 'EE', label: 'Estonia' },
+                    { value: 'ET', label: 'Ethiopia' },
+                    { value: 'FO', label: 'Faroe Islands' },
+                    { value: 'FJ', label: 'Fiji' },
+                    { value: 'FI', label: 'Finland' },
+                    { value: 'FR', label: 'France' },
+                    { value: 'GF', label: 'French Guinea' },
+                    { value: 'PF', label: 'French Polynesia' },
+                    { value: 'GA', label: 'Gabon' },
+                    { value: 'GM', label: 'Gambia' },
+                    { value: 'GE', label: 'Georgia' },
+                    { value: 'DE', label: 'Germany' },
+                    { value: 'GH', label: 'Ghana' },
+                    { value: 'GI', label: 'Gibraltar' },
+                    { value: 'GR', label: 'Greece' },
+                    { value: 'GL', label: 'Greenland' },
+                    { value: 'GD', label: 'Grenada' },
+                    { value: 'GP', label: 'Guadeloupe' },
+                    { value: 'GU', label: 'Guam' },
+                    { value: 'GT', label: 'Guatemala' },
+                    { value: 'GN', label: 'Guinea' },
+                    { value: 'GW', label: 'Guinea-Bissau' },
+                    { value: 'GY', label: 'Guyana' },
+                    { value: 'HT', label: 'Haiti' },
+                    { value: 'HN', label: 'Honduras' },
+                    { value: 'HK', label: 'Hong Kong' },
+                    { value: 'HU', label: 'Hungary' },
+                    { value: 'IS', label: 'Iceland' },
+                    { value: 'IN', label: 'India' },
+                    { value: 'ID', label: 'Indonesia' },
+                    { value: 'IR', label: 'Iran' },
+                    { value: 'IQ', label: 'Iraq' },
+                    { value: 'IE', label: 'Ireland' },
+                    { value: 'IL', label: 'Israel' },
+                    { value: 'IT', label: 'Italy' },
+                    { value: 'JM', label: 'Jamaica' },
+                    { value: 'JP', label: 'Japan' },
+                    { value: 'JO', label: 'Jordan' },
+                    { value: 'KZ', label: 'Kazakhstan' },
+                    { value: 'KE', label: 'Kenya' },
+                    { value: 'KI', label: 'Kiribati' },
+                    { value: 'KW', label: 'Kuwait' },
+                    { value: 'KG', label: 'Kyrgyzstan' },
+                    { value: 'LA', label: 'Laos' },
+                    { value: 'LV', label: 'Latvia' },
+                    { value: 'LB', label: 'Lebanon' },
+                    { value: 'LS', label: 'Lesotho' },
+                    { value: 'LR', label: 'Liberia' },
+                    { value: 'LY', label: 'Libya' },
+                    { value: 'LI', label: 'Liechtenstein' },
+                    { value: 'LT', label: 'Lithuania' },
+                    { value: 'LU', label: 'Luxembourg' },
+                    { value: 'MO', label: 'Macau' },
+                    { value: 'MK', label: 'Macedonia' },
+                    { value: 'MG', label: 'Madagascar' },
+                    { value: 'MW', label: 'Malawi' },
+                    { value: 'MY', label: 'Malaysia' },
+                    { value: 'MV', label: 'Maldives' },
+                    { value: 'ML', label: 'Mali' },
+                    { value: 'MT', label: 'Malta' },
+                    { value: 'MH', label: 'Marshall Islands' },
+                    { value: 'MQ', label: 'Martinique' },
+                    { value: 'MR', label: 'Mauritania' },
+                    { value: 'MU', label: 'Mauritius' },
+                    { value: 'YT', label: 'Mayotte' },
+                    { value: 'MX', label: 'Mexico' },
+                    { value: 'FM', label: 'Micronesia' },
+                    { value: 'MD', label: 'Moldova' },
+                    { value: 'MC', label: 'Monaco' },
+                    { value: 'MN', label: 'Mongolia' },
+                    { value: 'MS', label: 'Montserrat' },
+                    { value: 'MA', label: 'Morocco' },
+                    { value: 'MZ', label: 'Mozambique' },
+                    { value: 'MM', label: 'Myanmar (Burma)' },
+                    { value: 'NA', label: 'Namibia' },
+                    { value: 'NR', label: 'Nauru' },
+                    { value: 'NP', label: 'Nepal' },
+                    { value: 'NL', label: 'Netherlands' },
+                    { value: 'AN', label: 'Netherlands Antilles' },
+                    { value: 'NC', label: 'New Caledonia' },
+                    { value: 'NZ', label: 'New Zealand' },
+                    { value: 'NI', label: 'Nicaragua' },
+                    { value: 'NE', label: 'Niger' },
+                    { value: 'NG', label: 'Nigeria' },
+                    { value: 'NU', label: 'Niue' },
+                    { value: 'NF', label: 'Norfolk Island' },
+                    { value: 'KP', label: 'North Korea' },
+                    { value: 'NO', label: 'Norway' },
+                    { value: 'OM', label: 'Oman' },
+                    { value: 'PK', label: 'Pakistan' },
+                    { value: 'PW', label: 'Palau' },
+                    { value: 'PA', label: 'Panama' },
+                    { value: 'PG', label: 'Papua New Guinea' },
+                    { value: 'PY', label: 'Paraguay' },
+                    { value: 'PE', label: 'Peru' },
+                    { value: 'PH', label: 'Philippines' },
+                    { value: 'PN', label: 'Pitcairn' },
+                    { value: 'PL', label: 'Poland' },
+                    { value: 'PT', label: 'Portugal' },
+                    { value: 'PR', label: 'Puerto Rico' },
+                    { value: 'QA', label: 'Qatar' },
+                    { value: 'RE', label: 'Reunion' },
+                    { value: 'RO', label: 'Romania' },
+                    { value: 'RU', label: 'Russia' },
+                    { value: 'RW', label: 'Rwanda' },
+                    { value: 'SH', label: 'Saint Helena' },
+                    { value: 'KN', label: 'Saint Kitts and Nevis' },
+                    { value: 'LC', label: 'Saint Lucia' },
+                    { value: 'SM', label: 'San Marino' },
+                    { value: 'SA', label: 'Saudi Arabia' },
+                    { value: 'SN', label: 'Senegal' },
+                    { value: 'SC', label: 'Seychelles' },
+                    { value: 'SL', label: 'Sierra Leone' },
+                    { value: 'SG', label: 'Singapore' },
+                    { value: 'SK', label: 'Slovak Republic' },
+                    { value: 'SI', label: 'Slovenia' },
+                    { value: 'SB', label: 'Solomon Islands' },
+                    { value: 'SO', label: 'Somalia' },
+                    { value: 'ZA', label: 'South Africa' },
+                    { value: 'GS', label: 'South Georgia' },
+                    { value: 'KR', label: 'South Korea' },
+                    { value: 'ES', label: 'Spain' },
+                    { value: 'LK', label: 'Sri Lanka' },
+                    { value: 'SD', label: 'Sudan' },
+                    { value: 'SR', label: 'Suriname' },
+                    { value: 'SZ', label: 'Swaziland' },
+                    { value: 'SE', label: 'Sweden' },
+                    { value: 'CH', label: 'Switzerland' },
+                    { value: 'SY', label: 'Syria' },
+                    { value: 'TW', label: 'Taiwan' },
+                    { value: 'TJ', label: 'Tajikistan' },
+                    { value: 'TZ', label: 'Tanzania' },
+                    { value: 'TH', label: 'Thailand' },
+                    { value: 'TG', label: 'Togo' },
+                    { value: 'TK', label: 'Tokelau' },
+                    { value: 'TO', label: 'Tonga' },
+                    { value: 'TT', label: 'Trinidad and Tobago' },
+                    { value: 'TN', label: 'Tunisia' },
+                    { value: 'TR', label: 'Turkey' },
+                    { value: 'TM', label: 'Turkmenistan' },
+                    { value: 'TC', label: 'Turks and Caicos Islands' },
+                    { value: 'TV', label: 'Tuvalu' },
+                    { value: 'UG', label: 'Uganda' },
+                    { value: 'UA', label: 'Ukraine' },
+                    { value: 'AE', label: 'United Arab Emirates' },
+                    { value: 'UK', label: 'United Kingdom' },
+                    { value: 'US', label: 'United States' },
+                    { value: 'UY', label: 'Uruguay' },
+                    { value: 'UZ', label: 'Uzbekistan' },
+                    { value: 'VU', label: 'Vanuatu' },
+                    { value: 'VA', label: 'Vatican City (Holy See)' },
+                    { value: 'VE', label: 'Venezuela' },
+                    { value: 'VN', label: 'Vietnam' },
+                    { value: 'VG', label: 'Virgin Islands (British)' },
+                    { value: 'VI', label: 'Virgin Islands (US)' },
+                    { value: 'WF', label: 'Wallis and Futuna Islands' },
+                    { value: 'EH', label: 'Western Sahara' },
+                    { value: 'WS', label: 'Western Samoa' },
+                    { value: 'YE', label: 'Yemen' },
+                    { value: 'YU', label: 'Yugoslavia' },
+                    { value: 'ZM', label: 'Zambia' },
+                    { value: 'ZW', label: 'Zimbabwe' }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>                
\ No newline at end of file
diff --git a/combobox/keyboardnavigation/main.js b/combobox/keyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/keyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/keyboardnavigation/package.json b/combobox/keyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/keyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/multiselect/App.vue b/combobox/multiselect/App.vue
new file mode 100644
index 00000000..b4b4915f
--- /dev/null
+++ b/combobox/multiselect/App.vue
@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <div style="font-size: 13px; font-family: Verdana; margin-bottom: 5px">Select countries</div>
+
+        <JqxComboBox ref="myComboBox" @change="comboBoxOnChange()"
+                     :width="350" :source="countries" :multiSelect="true">
+        </JqxComboBox>
+
+        <div style="margin-top: 20px"></div>
+
+        <JqxButton @click="btnOnClick()" :width="200">
+            Hide DropDown Button
+        </JqxButton>
+
+        <div ref="log" style="margin-top: 10px; font-size: 13px; font-family: Verdana;"></div>
+    </div>
+</template>
+
+<script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxComboBox,
+            JqxButton
+        },
+        data: function () {
+            return {
+                countries: new Array('Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Antarctica', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', 'Botswana', 'Brazil', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burma', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Central African Republic', 'Chad', 'Chile', 'China', 'Colombia', 'Comoros', 'Congo, Democratic Republic', 'Congo, Republic of the', 'Costa Rica', 'Cote d`Ivoire', 'Croatia', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic', 'East Timor', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Fiji', 'Finland', 'France', 'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Greece', 'Greenland', 'Grenada', 'Guatemala', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jordan', 'Kazakhstan', 'Kenya', 'Kiribati', 'Korea, North', 'Korea, South', 'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macedonia', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Mauritania', 'Mauritius', 'Mexico', 'Micronesia', 'Moldova', 'Mongolia', 'Morocco', 'Monaco', 'Mozambique', 'Namibia', 'Nauru', 'Nepal', 'Netherlands', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Norway', 'Oman', 'Pakistan', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Poland', 'Portugal', 'Qatar', 'Romania', 'Russia', 'Rwanda', 'Samoa', 'San Marino', ' Sao Tome', 'Saudi Arabia', 'Senegal', 'Serbia and Montenegro', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'Spain', 'Sri Lanka', 'Sudan', 'Suriname', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', 'Togo', 'Tonga', 'Trinidad and Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'Uruguay', 'Uzbekistan', 'Vanuatu', 'Venezuela', 'Vietnam', 'Yemen', 'Zambia', 'Zimbabwe')
+            }
+        },
+        mounted: function () {
+            this.$refs.myComboBox.selectItem('United States');
+            this.$refs.myComboBox.selectItem('Germany');
+        },
+        methods: {
+            comboBoxOnChange: function () {
+                let items = this.$refs.myComboBox.getSelectedItems();
+                let selectedItems = 'Selected Items: ';
+                items.map(item => selectedItems += `${item.label}, `);
+
+                this.$refs.log.innerHTML = selectedItems;
+            },
+            btnOnClick: function () {
+                this.$refs.myComboBox.showArrow = false;
+            }
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/combobox/multiselect/main.js b/combobox/multiselect/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/multiselect/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/multiselect/package.json b/combobox/multiselect/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/multiselect/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/righttoleftlayout/App.vue b/combobox/righttoleftlayout/App.vue
new file mode 100644
index 00000000..55f159ec
--- /dev/null
+++ b/combobox/righttoleftlayout/App.vue
@@ -0,0 +1,255 @@
+<template> 
+    <JqxComboBox ref="myComboBox"
+        :width="200" :height="25" :source="countries" :rtl="true">
+    </JqxComboBox>
+</template>
+
+    <script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+
+    export default {
+        components: {
+            JqxComboBox
+        },
+        data: function() {
+            return {
+                countries: [
+                    { value: 'AF', label: 'Afghanistan' },
+                    { value: 'AL', label: 'Albania' },
+                    { value: 'DZ', label: 'Algeria' },
+                    { value: 'AS', label: 'American Samoa' },
+                    { value: 'AD', label: 'Andorra' },
+                    { value: 'AO', label: 'Angola' },
+                    { value: 'AI', label: 'Anguilla' },
+                    { value: 'AQ', label: 'Antarctica' },
+                    { value: 'AG', label: 'Antigua and Barbuda' },
+                    { value: 'AR', label: 'Argentina' },
+                    { value: 'AM', label: 'Armenia' },
+                    { value: 'AW', label: 'Aruba' },
+                    { value: 'AU', label: 'Australia' },
+                    { value: 'AT', label: 'Austria' },
+                    { value: 'AZ', label: 'Azerbaijan' },
+                    { value: 'BS', label: 'Bahamas' },
+                    { value: 'BH', label: 'Bahrain' },
+                    { value: 'BD', label: 'Bangladesh' },
+                    { value: 'BB', label: 'Barbados' },
+                    { value: 'BY', label: 'Belarus' },
+                    { value: 'BE', label: 'Belgium' },
+                    { value: 'BZ', label: 'Belize' },
+                    { value: 'BJ', label: 'Benin' },
+                    { value: 'BM', label: 'Bermuda' },
+                    { value: 'BT', label: 'Bhutan' },
+                    { value: 'BO', label: 'Bolivia' },
+                    { value: 'BA', label: 'Bosnia and Herzegovina' },
+                    { value: 'BW', label: 'Botswana' },
+                    { value: 'BV', label: 'Bouvet Island' },
+                    { value: 'BR', label: 'Brazil' },
+                    { value: 'BN', label: 'Brunei' },
+                    { value: 'BG', label: 'Bulgaria' },
+                    { value: 'BF', label: 'Burkina Faso' },
+                    { value: 'BI', label: 'Burundi' },
+                    { value: 'KH', label: 'Cambodia' },
+                    { value: 'CM', label: 'Cameroon' },
+                    { value: 'CA', label: 'Canada' },
+                    { value: 'CV', label: 'Cape Verde' },
+                    { value: 'KY', label: 'Cayman Islands' },
+                    { value: 'CF', label: 'Central African Republic' },
+                    { value: 'TD', label: 'Chad' },
+                    { value: 'CL', label: 'Chile' },
+                    { value: 'CN', label: 'China' },
+                    { value: 'CX', label: 'Christmas Island' },
+                    { value: 'CC', label: 'Cocos (Keeling) Islands' },
+                    { value: 'CO', label: 'Columbia' },
+                    { value: 'KM', label: 'Comoros' },
+                    { value: 'CG', label: 'Congo' },
+                    { value: 'CK', label: 'Cook Islands' },
+                    { value: 'CR', label: 'Costa Rica' },
+                    { value: 'CI', label: 'Cote D`Ivorie' },
+                    { value: 'HR', label: 'Croatia (Hrvatska)' },
+                    { value: 'CU', label: 'Cuba' },
+                    { value: 'CY', label: 'Cyprus' },
+                    { value: 'CZ', label: 'Czech Republic' },
+                    { value: 'DK', label: 'Denmark' },
+                    { value: 'DJ', label: 'Djibouti' },
+                    { value: 'DM', label: 'Dominica' },
+                    { value: 'DO', label: 'Dominican Republic' },
+                    { value: 'TP', label: 'East Timor' },
+                    { value: 'EC', label: 'Ecuador' },
+                    { value: 'EG', label: 'Egypt' },
+                    { value: 'SV', label: 'El Salvador' },
+                    { value: 'GQ', label: 'Equatorial Guinea' },
+                    { value: 'ER', label: 'Eritrea' },
+                    { value: 'EE', label: 'Estonia' },
+                    { value: 'ET', label: 'Ethiopia' },
+                    { value: 'FO', label: 'Faroe Islands' },
+                    { value: 'FJ', label: 'Fiji' },
+                    { value: 'FI', label: 'Finland' },
+                    { value: 'FR', label: 'France' },
+                    { value: 'GF', label: 'French Guinea' },
+                    { value: 'PF', label: 'French Polynesia' },
+                    { value: 'GA', label: 'Gabon' },
+                    { value: 'GM', label: 'Gambia' },
+                    { value: 'GE', label: 'Georgia' },
+                    { value: 'DE', label: 'Germany' },
+                    { value: 'GH', label: 'Ghana' },
+                    { value: 'GI', label: 'Gibraltar' },
+                    { value: 'GR', label: 'Greece' },
+                    { value: 'GL', label: 'Greenland' },
+                    { value: 'GD', label: 'Grenada' },
+                    { value: 'GP', label: 'Guadeloupe' },
+                    { value: 'GU', label: 'Guam' },
+                    { value: 'GT', label: 'Guatemala' },
+                    { value: 'GN', label: 'Guinea' },
+                    { value: 'GW', label: 'Guinea-Bissau' },
+                    { value: 'GY', label: 'Guyana' },
+                    { value: 'HT', label: 'Haiti' },
+                    { value: 'HN', label: 'Honduras' },
+                    { value: 'HK', label: 'Hong Kong' },
+                    { value: 'HU', label: 'Hungary' },
+                    { value: 'IS', label: 'Iceland' },
+                    { value: 'IN', label: 'India' },
+                    { value: 'ID', label: 'Indonesia' },
+                    { value: 'IR', label: 'Iran' },
+                    { value: 'IQ', label: 'Iraq' },
+                    { value: 'IE', label: 'Ireland' },
+                    { value: 'IL', label: 'Israel' },
+                    { value: 'IT', label: 'Italy' },
+                    { value: 'JM', label: 'Jamaica' },
+                    { value: 'JP', label: 'Japan' },
+                    { value: 'JO', label: 'Jordan' },
+                    { value: 'KZ', label: 'Kazakhstan' },
+                    { value: 'KE', label: 'Kenya' },
+                    { value: 'KI', label: 'Kiribati' },
+                    { value: 'KW', label: 'Kuwait' },
+                    { value: 'KG', label: 'Kyrgyzstan' },
+                    { value: 'LA', label: 'Laos' },
+                    { value: 'LV', label: 'Latvia' },
+                    { value: 'LB', label: 'Lebanon' },
+                    { value: 'LS', label: 'Lesotho' },
+                    { value: 'LR', label: 'Liberia' },
+                    { value: 'LY', label: 'Libya' },
+                    { value: 'LI', label: 'Liechtenstein' },
+                    { value: 'LT', label: 'Lithuania' },
+                    { value: 'LU', label: 'Luxembourg' },
+                    { value: 'MO', label: 'Macau' },
+                    { value: 'MK', label: 'Macedonia' },
+                    { value: 'MG', label: 'Madagascar' },
+                    { value: 'MW', label: 'Malawi' },
+                    { value: 'MY', label: 'Malaysia' },
+                    { value: 'MV', label: 'Maldives' },
+                    { value: 'ML', label: 'Mali' },
+                    { value: 'MT', label: 'Malta' },
+                    { value: 'MH', label: 'Marshall Islands' },
+                    { value: 'MQ', label: 'Martinique' },
+                    { value: 'MR', label: 'Mauritania' },
+                    { value: 'MU', label: 'Mauritius' },
+                    { value: 'YT', label: 'Mayotte' },
+                    { value: 'MX', label: 'Mexico' },
+                    { value: 'FM', label: 'Micronesia' },
+                    { value: 'MD', label: 'Moldova' },
+                    { value: 'MC', label: 'Monaco' },
+                    { value: 'MN', label: 'Mongolia' },
+                    { value: 'MS', label: 'Montserrat' },
+                    { value: 'MA', label: 'Morocco' },
+                    { value: 'MZ', label: 'Mozambique' },
+                    { value: 'MM', label: 'Myanmar (Burma)' },
+                    { value: 'NA', label: 'Namibia' },
+                    { value: 'NR', label: 'Nauru' },
+                    { value: 'NP', label: 'Nepal' },
+                    { value: 'NL', label: 'Netherlands' },
+                    { value: 'AN', label: 'Netherlands Antilles' },
+                    { value: 'NC', label: 'New Caledonia' },
+                    { value: 'NZ', label: 'New Zealand' },
+                    { value: 'NI', label: 'Nicaragua' },
+                    { value: 'NE', label: 'Niger' },
+                    { value: 'NG', label: 'Nigeria' },
+                    { value: 'NU', label: 'Niue' },
+                    { value: 'NF', label: 'Norfolk Island' },
+                    { value: 'KP', label: 'North Korea' },
+                    { value: 'NO', label: 'Norway' },
+                    { value: 'OM', label: 'Oman' },
+                    { value: 'PK', label: 'Pakistan' },
+                    { value: 'PW', label: 'Palau' },
+                    { value: 'PA', label: 'Panama' },
+                    { value: 'PG', label: 'Papua New Guinea' },
+                    { value: 'PY', label: 'Paraguay' },
+                    { value: 'PE', label: 'Peru' },
+                    { value: 'PH', label: 'Philippines' },
+                    { value: 'PN', label: 'Pitcairn' },
+                    { value: 'PL', label: 'Poland' },
+                    { value: 'PT', label: 'Portugal' },
+                    { value: 'PR', label: 'Puerto Rico' },
+                    { value: 'QA', label: 'Qatar' },
+                    { value: 'RE', label: 'Reunion' },
+                    { value: 'RO', label: 'Romania' },
+                    { value: 'RU', label: 'Russia' },
+                    { value: 'RW', label: 'Rwanda' },
+                    { value: 'SH', label: 'Saint Helena' },
+                    { value: 'KN', label: 'Saint Kitts and Nevis' },
+                    { value: 'LC', label: 'Saint Lucia' },
+                    { value: 'SM', label: 'San Marino' },
+                    { value: 'SA', label: 'Saudi Arabia' },
+                    { value: 'SN', label: 'Senegal' },
+                    { value: 'SC', label: 'Seychelles' },
+                    { value: 'SL', label: 'Sierra Leone' },
+                    { value: 'SG', label: 'Singapore' },
+                    { value: 'SK', label: 'Slovak Republic' },
+                    { value: 'SI', label: 'Slovenia' },
+                    { value: 'SB', label: 'Solomon Islands' },
+                    { value: 'SO', label: 'Somalia' },
+                    { value: 'ZA', label: 'South Africa' },
+                    { value: 'GS', label: 'South Georgia' },
+                    { value: 'KR', label: 'South Korea' },
+                    { value: 'ES', label: 'Spain' },
+                    { value: 'LK', label: 'Sri Lanka' },
+                    { value: 'SD', label: 'Sudan' },
+                    { value: 'SR', label: 'Suriname' },
+                    { value: 'SZ', label: 'Swaziland' },
+                    { value: 'SE', label: 'Sweden' },
+                    { value: 'CH', label: 'Switzerland' },
+                    { value: 'SY', label: 'Syria' },
+                    { value: 'TW', label: 'Taiwan' },
+                    { value: 'TJ', label: 'Tajikistan' },
+                    { value: 'TZ', label: 'Tanzania' },
+                    { value: 'TH', label: 'Thailand' },
+                    { value: 'TG', label: 'Togo' },
+                    { value: 'TK', label: 'Tokelau' },
+                    { value: 'TO', label: 'Tonga' },
+                    { value: 'TT', label: 'Trinidad and Tobago' },
+                    { value: 'TN', label: 'Tunisia' },
+                    { value: 'TR', label: 'Turkey' },
+                    { value: 'TM', label: 'Turkmenistan' },
+                    { value: 'TC', label: 'Turks and Caicos Islands' },
+                    { value: 'TV', label: 'Tuvalu' },
+                    { value: 'UG', label: 'Uganda' },
+                    { value: 'UA', label: 'Ukraine' },
+                    { value: 'AE', label: 'United Arab Emirates' },
+                    { value: 'UK', label: 'United Kingdom' },
+                    { value: 'US', label: 'United States' },
+                    { value: 'UY', label: 'Uruguay' },
+                    { value: 'UZ', label: 'Uzbekistan' },
+                    { value: 'VU', label: 'Vanuatu' },
+                    { value: 'VA', label: 'Vatican City (Holy See)' },
+                    { value: 'VE', label: 'Venezuela' },
+                    { value: 'VN', label: 'Vietnam' },
+                    { value: 'VG', label: 'Virgin Islands (British)' },
+                    { value: 'VI', label: 'Virgin Islands (US)' },
+                    { value: 'WF', label: 'Wallis and Futuna Islands' },
+                    { value: 'EH', label: 'Western Sahara' },
+                    { value: 'WS', label: 'Western Samoa' },
+                    { value: 'YE', label: 'Yemen' },
+                    { value: 'YU', label: 'Yugoslavia' },
+                    { value: 'ZM', label: 'Zambia' },
+                    { value: 'ZW', label: 'Zimbabwe' }
+                ]
+            }
+        },
+        mounted: function() {
+            const item = this.$refs.myComboBox.getItemByValue('US');
+            this.$refs.myComboBox.selectItem(item);
+        }
+    };
+    </script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/combobox/righttoleftlayout/main.js b/combobox/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/righttoleftlayout/package.json b/combobox/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/settings/App.vue b/combobox/settings/App.vue
new file mode 100644
index 00000000..c29ca7ca
--- /dev/null
+++ b/combobox/settings/App.vue
@@ -0,0 +1,164 @@
+<template>
+    <div>
+        <JqxComboBox ref="myComboBox" style="float: left; margin-top: 10px"
+                     :width="200" :height="25" :source="comboBoxSource" :selectedIndex="0">
+        </JqxComboBox>
+
+        <JqxExpander style="float: left; margin-left: 100px; margin-top: 10px"
+                     :width="220" :showArrow="false" :toggleMode="'none'">
+            <div>Settings</div>
+            <div style="padding: 10px;">
+                <span>Search Type:</span>
+
+                <div style="margin-top: 10px"></div>
+                <JqxDropDownList @select="dropDownListOnSelect($event)"
+                                 :width="200" :height="25" :source="dropDownListSource" :selectedIndex="0">
+                </JqxDropDownList>
+
+                <div style="margin-top: 10px;">
+
+                    <JqxButton style="float: left; margin-right: 0.5em" :width="80"
+                               @click="btnOpenOnClick()">
+                        Open
+                    </JqxButton>
+
+                    <JqxButton style="float: left" :width="80"
+                               @click="btnCloseOnClick()">
+                        Close
+                    </JqxButton>
+
+                </div>
+
+                <div style="clear: both"></div>
+                <div style="clear: both; margin-top: 10px"></div>
+                <JqxCheckBox :width="120"
+                             @change="checkBoxAutoCompleteOnChange($event)">
+                    Auto Complete
+                </JqxCheckBox>
+
+                <div style="margin-top: 10px"></div>
+                <JqxCheckBox :width="120" :checked="true"
+                             @change="checkBoxEnabledOnChange($event)">
+                    Enabled
+                </JqxCheckBox>
+
+            </div>
+        </JqxExpander>
+    </div>
+</template>
+
+<script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+    import JqxExpander from "jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+
+    export default {
+        components: {
+            JqxComboBox,
+            JqxExpander,
+            JqxDropDownList,
+            JqxButton,
+            JqxCheckBox
+        },
+        data: function () {
+            return {
+                comboBoxSource: [
+                    'Affogato',
+                    'Americano',
+                    'Bicerin',
+                    'Breve',
+                    'Café Bombón',
+                    'Café au lait',
+                    'Caffé Corretto',
+                    'Café Crema',
+                    'Caffé Latte',
+                    'Caffé macchiato',
+                    'Café mélange',
+                    'Coffee milk',
+                    'Cafe mocha',
+                    'Cappuccino',
+                    'Carajillo',
+                    'Cortado',
+                    'Cuban espresso',
+                    'Espresso',
+                    'Eiskaffee',
+                    'The Flat White',
+                    'Frappuccino',
+                    'Galao',
+                    'Greek frappé coffee',
+                    'Iced Coffee',
+                    'Indian filter coffee',
+                    'Instant coffee',
+                    'Irish coffee',
+                    'Liqueur coffee'
+                ],
+                dropDownListSource: [
+                    'Starts with',
+                    'Starts with(Case Sensitive)',
+                    'Ends with',
+                    'Ends with(Case Sensitive)',
+                    'Contains',
+                    'Contains(Case Sensitive)',
+                    'Equal',
+                    'Equal(Case Sensitive)',
+                ]
+            }
+        },
+        methods: {
+            btnOpenOnClick: function () {
+                // show popup.
+                this.$refs.myComboBox.open();
+            },
+            btnCloseOnClick: function () {
+                // hide popup.
+                this.$refs.myComboBox.close();
+            },
+            checkBoxAutoCompleteOnChange: function (event) {
+                // set autocomplete property.
+                let checked = event.args.checked;
+                this.$refs.myComboBox.autoComplete = checked;
+            },
+            checkBoxEnabledOnChange: function (event) {
+                // enable or disable.
+                let checked = !event.args.checked;
+                this.$refs.myComboBox.disabled = checked;
+            },
+            dropDownListOnSelect: function (event) {
+                // set search mode.
+                let searchType = '';
+                switch (event.args.index) {
+                    case 0:
+                        searchType = 'startswithignorecase';
+                        break;
+                    case 1:
+                        searchType = 'startswith';
+                        break;
+                    case 2:
+                        searchType = 'endswithignorecase';
+                        break;
+                    case 3:
+                        searchType = 'endswith';
+                        break;
+                    case 4:
+                        searchType = 'containsignorecase';
+                        break;
+                    case 5:
+                        searchType = 'contains';
+                        break;
+                    case 6:
+                        searchType = 'equalsignorecase';
+                        break;
+                    case 7:
+                        searchType = 'equals';
+                        break;
+                }
+                this.$refs.myComboBox.searchMode = searchType;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/combobox/settings/main.js b/combobox/settings/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/settings/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/settings/package.json b/combobox/settings/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/settings/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/templates/App.vue b/combobox/templates/App.vue
new file mode 100644
index 00000000..474f602c
--- /dev/null
+++ b/combobox/templates/App.vue
@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <div>Default</div>
+        <JqxComboBox :width="200" :height="25" :source="source" :selectedIndex="1">
+        </JqxComboBox>
+        <br />
+
+        <div>Primary</div>
+        <JqxComboBox :width="200" :height="25" :source="source"
+                     :selectedIndex="1" :template="'primary'">
+        </JqxComboBox>
+        <br />
+
+        <div>Success</div>
+        <JqxComboBox :width="200" :height="25" :source="source"
+                     :selectedIndex="1" :template="'success'">
+        </JqxComboBox>
+        <br />
+
+        <div>Info</div>
+        <JqxComboBox :width="200" :height="25" :source="source"
+                     :selectedIndex="1" :template="'info'">
+        </JqxComboBox>
+        <br />
+
+        <div>Warning</div>
+        <JqxComboBox :width="200" :height="25" :source="source"
+                     :selectedIndex="1" :template="'warning'">
+        </JqxComboBox>
+        <br />
+
+        <div>Danger</div>
+        <JqxComboBox :width="200" :height="25" :source="source"
+                     :selectedIndex="1" :template="'danger'">
+        </JqxComboBox>
+    </div>
+</template>
+
+<script>
+    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
+
+    export default {
+        components: {
+            JqxComboBox
+        },
+        data: function () {
+            return {
+                source: [
+                    'Affogato',
+                    'Americano',
+                    'Bicerin',
+                    'Breve',
+                    'Cafe Bombon',
+                    'Cafe au lait',
+                    'Caffe Corretto',
+                    'Cafe Crema',
+                    'Caffe Latte',
+                    'Caffe macchiato',
+                    'Cafe melange',
+                    'Coffee milk',
+                    'Cafe mocha',
+                    'Cappuccino',
+                    'Carajillo',
+                    'Cortado',
+                    'Cuban espresso',
+                    'Espresso',
+                    'Eiskaffee',
+                    'The Flat White',
+                    'Frappuccino',
+                    'Galao',
+                    'Greek frappe coffee',
+                    'Iced Coffee',
+                    'Indian filter coffee',
+                    'Instant coffee',
+                    'Irish coffee',
+                    'Liqueur coffee'
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/combobox/templates/main.js b/combobox/templates/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/templates/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/templates/package.json b/combobox/templates/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/templates/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/combobox/twowaydatabinding/App.vue b/combobox/twowaydatabinding/App.vue
new file mode 100644
index 00000000..82883267
--- /dev/null
+++ b/combobox/twowaydatabinding/App.vue
@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <div>The value is: {{ item }}</div><br />
+
+        <JqxComboBox v-model="item" :width="200" :height="25" :source="source" :selectedIndex="0" />
+    </div>
+</template>
+
+<script>
+    import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
+
+    export default {
+        components: {
+            JqxComboBox
+        },
+        data: function () {
+            return {
+                item: 'Affogato',
+                source: [
+                    'Affogato',
+                    'Americano',
+                    'Bicerin',
+                    'Breve',
+                    'Cafe Bombon',
+                    'Cafe au lait',
+                    'Cafe mocha',
+                    'Cappuccino',
+                    'Carajillo',
+                    'Iced Coffee',
+                    'Instant coffee',
+                    'Irish coffee',
+                    'Liqueur coffee'
+                ]
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/combobox/twowaydatabinding/main.js b/combobox/twowaydatabinding/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/combobox/twowaydatabinding/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/combobox/twowaydatabinding/package.json b/combobox/twowaydatabinding/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/combobox/twowaydatabinding/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/complexinput/changeevent/App.vue b/complexinput/changeevent/App.vue
new file mode 100644
index 00000000..740c323d
--- /dev/null
+++ b/complexinput/changeevent/App.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <JqxComplexInput @change="complexInputOnChange($event)"
+                         :width="300" :height="25" :value="'15 + 7i'" :spinButtons="true">
+        </JqxComplexInput>
+
+        <div style="margin-top: 20px">Events log:</div>
+
+        <JqxPanel ref="myPanel"
+                  :width="300" :height="150">
+        </JqxPanel>
+    </div>
+</template>
+
+<script>
+    import JqxComplexInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxComplexInput,
+            JqxPanel
+        },
+        methods: {
+            complexInputOnChange: function (event) {
+                let args = event.args;
+                if (args) {
+                    let value = args.value;
+                    let oldValue = args.oldValue;
+                    let realPart = args.realPart;
+                    let imaginaryPart = args.imaginaryPart;
+                    this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />' +
+                        'value: ' + value + ', old value: ' + oldValue +
+                        ',<br /> real part: ' + realPart + ', imaginary part: ' + imaginaryPart + '<br />');
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/complexinput/changeevent/main.js b/complexinput/changeevent/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/complexinput/changeevent/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/complexinput/changeevent/package.json b/complexinput/changeevent/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/complexinput/changeevent/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/complexinput/defaultfunctionality/App.vue b/complexinput/defaultfunctionality/App.vue
new file mode 100644
index 00000000..5262253c
--- /dev/null
+++ b/complexinput/defaultfunctionality/App.vue
@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <JqxComplexInput ref="myComplexInput"
+                         :width="250" :height="25" :value="'15 + 7.2i'">
+        </JqxComplexInput>
+
+        <div style="margin-top: 20px;">
+
+            <JqxButton @click="getRealPart()" :width="150">
+                Get real part
+            </JqxButton>
+
+            <JqxButton @click="getImaginaryPart()" :width="150">
+                Get imaginary part
+            </JqxButton>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxComplexInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxComplexInput,
+            JqxButton
+        },
+        methods: {
+            getRealPart: function () {
+                let realPart = this.$refs.myComplexInput.getReal();
+                alert(`Real part is ${realPart}`);
+            },
+            getImaginaryPart: function () {
+                let imaginaryPart = this.$refs.myComplexInput.getImaginary();
+                alert(`Imaginary part is ${imaginaryPart}`);
+            }
+        }
+    };
+</script>
+
+<style>
+    .jqx-button {
+        display: inline-block;
+        margin-right: 5px;
+    }
+</style>
\ No newline at end of file
diff --git a/complexinput/defaultfunctionality/main.js b/complexinput/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/complexinput/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/complexinput/defaultfunctionality/package.json b/complexinput/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/complexinput/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/complexinput/exponentialnotation/App.vue b/complexinput/exponentialnotation/App.vue
new file mode 100644
index 00000000..2c52d6fd
--- /dev/null
+++ b/complexinput/exponentialnotation/App.vue
@@ -0,0 +1,142 @@
+<template>
+    <div>
+        <JqxComplexInput ref="myComplexInput" style="float: left"
+                         :width="250" :height="25" :value="'330000 - 200i'"
+                         :spinButtons="true" :decimalNotation="'exponential'">
+        </JqxComplexInput>
+
+        <JqxExpander style="float: left; margin-left: 50px"
+                     :width="415" :height="380" :toggleMode="'none'" :showArrow="false">
+            <div>Vue ComplexInput Notation Settings</div>
+            <div style="padding-left: 15px">
+                <h4>Choose notation:</h4>
+
+                <JqxDropDownList style="margin-top: 20px" @change="notationsListOnChange($event)"
+                                 :width="200" :height="25" :source="source"
+                                 :autoDropDownHeight="true" :selectedIndex="1">
+                </JqxDropDownList>
+
+                <div style="margin-top: 20px">
+                    <h4>Real part</h4>
+
+                    <JqxButton style="display: inline-block" :width="180"
+                               @click="getRealDecimalOnClick()">
+                        Get Decimal Value
+                    </JqxButton>
+
+                    <JqxButton style="margin-left: 5px; display: inline-block" :width="180"
+                               @click="getRealExponentialOnClick()">
+                        Get Exponential Notation
+                    </JqxButton>
+
+                    <br /><br />
+
+                    <JqxButton style="display: inline-block" :width="180"
+                               @click="getRealScientificOnClick()">
+                        Get Scientific Notation
+                    </JqxButton>
+
+                    <JqxButton style="margin-left: 5px; display: inline-block" :width="180"
+                               @click="getRealEngineeringOnClick()">
+                        Get Engineering Notation
+                    </JqxButton>
+
+                </div>
+                <div style="margin-top: 20px">
+                    <h4>Imaginary part</h4>
+
+                    <JqxButton style="display: inline-block" :width="180"
+                               @click="getImaginaryDecimalOnClick()">
+                        Get Decimal Value
+                    </JqxButton>
+
+                    <JqxButton style="margin-left: 5px; display: inline-block" :width="180"
+                               @click="getImaginaryExponentialOnClick()">
+                        Get Exponential Notation
+                    </JqxButton>
+
+                    <br /><br />
+
+                    <JqxButton style="display: inline-block" :width="180"
+                               @click="getImaginaryScientificOnClick()">
+                        Get Scientific Notation
+                    </JqxButton>
+
+                    <JqxButton style="margin-left: 5px; display: inline-block" :width="180"
+                               @click="getImaginaryEngineeringOnClick()">
+                        Get Engineering Notation
+                    </JqxButton>
+
+                </div>
+            </div>
+        </JqxExpander>
+    </div>
+</template>
+
+<script>
+    import JqxComplexInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+    import JqxExpander from "jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxComplexInput,
+            JqxDropDownList,
+            JqxExpander,
+            JqxButton
+        },
+        data: function () {
+            return {
+                source: ['decimal', 'exponential', 'scientific', 'engineering']
+            }
+        },
+        methods: {
+            notationsListOnChange: function (event) {
+                let args = event.args;
+                if (args) {
+                    let label = args.item.label;
+                    if (label === 'decimal') {
+                        label = 'default';
+                    }
+                    this.$refs.myComplexInput.decimalNotation = label;
+                }
+            },
+            getRealDecimalOnClick: function () {
+                let decimalValue = this.$refs.myComplexInput.getReal();
+                alert('Decimal value: ' + decimalValue);
+            },
+            getRealExponentialOnClick: function () {
+                let exponentialValue = this.$refs.myComplexInput.getDecimalNotation('real', 'exponential');
+                alert('Exponential notation: ' + exponentialValue);
+            },
+            getRealScientificOnClick: function () {
+                let scientificValue = this.$refs.myComplexInput.getDecimalNotation('real', 'scientific');
+                alert('Scientific notation: ' + scientificValue);
+            },
+            getRealEngineeringOnClick: function () {
+                let engineeringValue = this.$refs.myComplexInput.getDecimalNotation('real', 'engineering');
+                alert('Engineering notation: ' + engineeringValue);
+            },
+            getImaginaryDecimalOnClick: function () {
+                let decimalValue = this.$refs.myComplexInput.getImaginary();
+                alert('Decimal value: ' + decimalValue);
+            },
+            getImaginaryExponentialOnClick: function () {
+                let exponentialValue = this.$refs.myComplexInput.getDecimalNotation('imaginary', 'exponential');
+                alert('Exponential notation: ' + exponentialValue);
+            },
+            getImaginaryScientificOnClick: function () {
+                let scientificValue = this.$refs.myComplexInput.getDecimalNotation('imaginary', 'scientific');
+                alert('Scientific notation: ' + scientificValue);
+            },
+            getImaginaryEngineeringOnClick: function () {
+                let engineeringValue = this.$refs.myComplexInput.getDecimalNotation('imaginary', 'engineering');
+                alert('Engineering notation: ' + engineeringValue);
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/complexinput/exponentialnotation/main.js b/complexinput/exponentialnotation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/complexinput/exponentialnotation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/complexinput/exponentialnotation/package.json b/complexinput/exponentialnotation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/complexinput/exponentialnotation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/complexinput/fluidsize/App.vue b/complexinput/fluidsize/App.vue
new file mode 100644
index 00000000..8bd4a788
--- /dev/null
+++ b/complexinput/fluidsize/App.vue
@@ -0,0 +1,18 @@
+<template>
+    <JqxComplexInput 
+        :width="'30%'" :height="25" :value="'1000 + 2i'" :spinButtons="true">
+    </JqxComplexInput>
+</template>
+
+<script>
+    import JqxComplexInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue";
+
+    export default {
+        components: {
+            JqxComplexInput
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/complexinput/fluidsize/main.js b/complexinput/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/complexinput/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/complexinput/fluidsize/package.json b/complexinput/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/complexinput/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/complexinput/spinbuttons/App.vue b/complexinput/spinbuttons/App.vue
new file mode 100644
index 00000000..c60e68a1
--- /dev/null
+++ b/complexinput/spinbuttons/App.vue
@@ -0,0 +1,19 @@
+<template>
+    <JqxComplexInput 
+        :width="250" :height="25" :value="'15 + 7.2i'" 
+        :spinButtons="true" :spinButtonsStep="1">
+    </JqxComplexInput>
+</template>
+
+<script>
+    import JqxComplexInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue";
+
+    export default {
+        components: {
+            JqxComplexInput
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/complexinput/spinbuttons/main.js b/complexinput/spinbuttons/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/complexinput/spinbuttons/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/complexinput/spinbuttons/package.json b/complexinput/spinbuttons/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/complexinput/spinbuttons/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/complexinput/twowaydatabinding/App.vue b/complexinput/twowaydatabinding/App.vue
new file mode 100644
index 00000000..8850aa31
--- /dev/null
+++ b/complexinput/twowaydatabinding/App.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <div>The value is: {{ value }}</div><br />
+
+        <JqxComplexInput v-model="value" :width="200" :height="25" :spinButtons="true"/>
+    </div>
+</template>
+
+<script>
+    import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
+
+    export default {
+        components: {
+            JqxComplexInput
+        },
+        data: function () {
+            return {
+                value: '15 + 7.2i'
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/complexinput/twowaydatabinding/main.js b/complexinput/twowaydatabinding/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/complexinput/twowaydatabinding/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/complexinput/twowaydatabinding/package.json b/complexinput/twowaydatabinding/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/complexinput/twowaydatabinding/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/complexinput/validation/App.vue b/complexinput/validation/App.vue
new file mode 100644
index 00000000..5adbe3a1
--- /dev/null
+++ b/complexinput/validation/App.vue
@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <JqxComplexInput ref="myComplexInput"
+                         :width="250" :height="25" :value="'15 + 7.2i'" :spinButtons="true">
+        </JqxComplexInput>
+
+        <br />
+        <div style="margin-top: 20px"></div>
+
+        <JqxButton @click="btnOnClick()" :width="200">
+            Set wrong value: "11- 2ii"
+        </JqxButton>
+    </div>
+</template>
+
+<script>
+    import JqxComplexInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxComplexInput,
+            JqxButton
+        },
+        methods: {
+            btnOnClick: function () {
+                this.$refs.myComplexInput.value = '11- 2ii';
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/complexinput/validation/main.js b/complexinput/validation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/complexinput/validation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/complexinput/validation/package.json b/complexinput/validation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/complexinput/validation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/advancedfiltering/App.vue b/datatable/advancedfiltering/App.vue
new file mode 100644
index 00000000..69fa2d51
--- /dev/null
+++ b/datatable/advancedfiltering/App.vue
@@ -0,0 +1,51 @@
+<template>
+    <JqxDataTable :width="getWidth" :height="400" :source="dataAdapter" :columns="columns"
+                  :filterable="true" :pageable="true" :altRows="true" :filterMode="'advanced'">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Supplier Name', cellsAlign: 'center', align: 'center', dataField: 'SupplierName', width: 200 },
+                    { text: 'Name', cellsAlign: 'center', align: 'center', dataField: 'ProductName', width: 200 },
+                    { text: 'Quantity', dataField: 'Quantity', cellsformat: 'd', cellsAlign: 'center', align: 'center', width: 100 },
+                    { text: 'Price', dataField: 'Price', cellsformat: 'c2', align: 'center', cellsAlign: 'center', width: 70 },
+                    { text: 'Address', cellsAlign: 'center', align: 'center', dataField: 'Address', width: 120 },
+                    { text: 'City', cellsAlign: 'center', align: 'center', dataField: 'City' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataType: 'xml',
+                dataFields: [
+                    { name: 'SupplierName', type: 'string' },
+                    { name: 'Quantity', type: 'number' },
+                    { name: 'OrderDate', type: 'date' },
+                    { name: 'OrderAddress', type: 'string' },
+                    { name: 'Freight', type: 'number' },
+                    { name: 'Price', type: 'number' },
+                    { name: 'City', type: 'string' },
+                    { name: 'ProductName', type: 'string' },
+                    { name: 'Address', type: 'string' }
+                ],
+                url: '../sampledata/orderdetailsextended.xml',
+                root: 'DATA',
+                record: 'ROW'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/advancedfiltering/main.js b/datatable/advancedfiltering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/advancedfiltering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/advancedfiltering/package.json b/datatable/advancedfiltering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/advancedfiltering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/aggregates/App.vue b/datatable/aggregates/App.vue
new file mode 100644
index 00000000..b3d0d9df
--- /dev/null
+++ b/datatable/aggregates/App.vue
@@ -0,0 +1,50 @@
+<template>
+    <JqxDataTable :width="getWidth" :height="400" :source="dataAdapter" :columns="columns"
+                  :altRows="true" :pageable="true" :editable="true" :columnsResize="true"
+                  :showAggregates="true" :autoRowHeight="true" :aggregatesHeight="70">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Supplier Name', cellsAlign: 'center', align: 'center', dataField: 'SupplierName', width: 300 },
+                    { text: 'Product', cellsAlign: 'center', align: 'center', dataField: 'ProductName', width: 300 },
+                    { text: 'Quantity', dataField: 'Quantity', cellsFormat: 'd2', aggregates: ['avg', 'min', 'max'], cellsAlign: 'center', align: 'center', width: 120 },
+                    { text: 'Price', dataField: 'Price', cellsFormat: 'c2', align: 'center', cellsAlign: 'center', aggregates: ['sum', 'min', 'max'] }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataType: 'xml',
+                dataFields: [
+                    { name: 'SupplierName', type: 'string' },
+                    { name: 'Quantity', type: 'number' },
+                    { name: 'OrderDate', type: 'date' },
+                    { name: 'OrderAddress', type: 'string' },
+                    { name: 'Freight', type: 'number' },
+                    { name: 'Price', type: 'number' },
+                    { name: 'City', type: 'string' },
+                    { name: 'ProductName', type: 'string' },
+                    { name: 'Address', type: 'string' }
+                ],
+                url: '../sampledata/orderdetailsextended.xml',
+                root: 'DATA',
+                record: 'ROW'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/aggregates/main.js b/datatable/aggregates/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/aggregates/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/aggregates/package.json b/datatable/aggregates/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/aggregates/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/aggregatestemplate/App.vue b/datatable/aggregatestemplate/App.vue
new file mode 100644
index 00000000..feb86d3e
--- /dev/null
+++ b/datatable/aggregatestemplate/App.vue
@@ -0,0 +1,64 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :altRows="true" :pageable="true" :showAggregates="true"
+                  :pagerButtonsCount="10" :aggregatesHeight="25">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
+                    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
+                    { text: 'Product', datafield: 'productname', width: 170 },
+                    { text: 'Quantity', datafield: 'quantity', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'n2' },
+                    {
+                        text: 'Price', datafield: 'price', cellsAlign: 'right', align: 'right', cellsFormat: 'c2',
+                        aggregates:
+                            [{
+                                'Total': (aggregatedValue, currentValue, column, record) => {
+                                    let total = currentValue * parseInt(record['quantity']);
+                                    return aggregatedValue + total;
+                                }
+                            }],
+                        aggregatesRenderer: (aggregates, column, element) => {
+                            let renderString = '<div style="margin: 4px; float: right;  height: 100%;">';
+                            renderString += '<strong>Total: </strong>' + aggregates.Total + '</div>';
+                            return renderString;
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localData: generatedata(200, false),
+                dataType: 'array',
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' }
+                    ],
+                updateRow: function (rowid, rowdata, commit) {
+                    // synchronize with the server - send update command
+                    commit(true);
+                }
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/aggregatestemplate/main.js b/datatable/aggregatestemplate/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/aggregatestemplate/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/aggregatestemplate/package.json b/datatable/aggregatestemplate/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/aggregatestemplate/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/celledit/App.vue b/datatable/celledit/App.vue
new file mode 100644
index 00000000..8990cdf1
--- /dev/null
+++ b/datatable/celledit/App.vue
@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <JqxDataTable @cellBeginEdit="onCellBeginEdit($event)" @cellEndEdit="onCellEndEdit($event)"
+                      :width="getWidth" :source="dataAdapter" :columns="columns"
+                      :altRows="true" :pageable="true" :editable="true"
+                      :pagerButtonsCount="8" :editSettings="editSettings">
+        </JqxDataTable>
+
+        <div style="font-size: 13px; font-family: Verdana; width: 800px; margin-top: 20px">
+            <h4>Event Log</h4>
+            <div ref="myLog" style="max-height: 300px; overflow: auto"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Freight', dataField: 'Freight', cellsFormat: 'f', cellsAlign: 'right', align: 'right', width: 250 },
+                    { text: 'Ship Country', dataField: 'ShipCountry', width: 250 },
+                    { text: 'Shipped Date', dataField: 'ShippedDate', cellsAlign: 'right', align: 'right', cellsFormat: 'dd/MM/yyyy' }
+                ],
+                editSettings: {
+                    saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true,
+                    saveOnEnter: true, editSingleCell: true, editOnDoubleClick: true, editOnF2: true
+                }
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataFields: [
+                    { name: 'OrderID', type: 'int' },
+                    { name: 'Freight', type: 'float' },
+                    { name: 'ShipName', type: 'string' },
+                    { name: 'ShipAddress', type: 'string' },
+                    { name: 'ShipCity', type: 'string' },
+                    { name: 'ShipCountry', type: 'string' },
+                    { name: 'ShippedDate', type: 'date' }
+                ],
+                root: 'Orders',
+                record: 'Order',
+                dataType: 'xml',
+                id: 'OrderID',
+                url: '../sampledata/orderdetails.xml'
+            };
+        },
+        methods: {
+            onCellBeginEdit: function (event) {
+                let args = event.args;
+                // row key
+                let rowKey = args.key;
+                // row's index.
+                let rowIndex = args.index;
+                // row's data.
+                let rowData = args.row;
+                // row's index in the data source.
+                let rowBoundIndex = args.boundIndex;
+                // column's data field.
+                let columnDataField = args.dataField;
+                // column's display field.
+                let columnDisplayField = args.displayField;
+                // cell's value.
+                let value = args.value;
+                if (columnDataField === 'ShippedDate' && value) {
+                    value = value.getDate() + '/' + (parseInt(value.getMonth()) + 1) + '/' + value.getFullYear();
+                }
+                let log = this.$refs.myLog;
+                log.innerHTML = 'cellBeginEdit - Row: ' + rowIndex + ', Column: ' + columnDataField + ', Value: ' + value + ' <br />' + log.innerHTML;
+            },
+            onCellEndEdit: function (event) {
+                let args = event.args;
+                // row key
+                let rowKey = args.key;
+                // row's index.
+                let rowIndex = args.index;
+                // row's data.
+                let rowData = args.row;
+                // row's index in the data source.
+                let rowBoundIndex = args.boundIndex;
+                // column's data field.
+                let columnDataField = args.dataField;
+                // column's display field.
+                let columnDisplayField = args.displayField;
+                // cell's value.
+                let value = args.value;
+                if (columnDataField === 'ShippedDate' && value) {
+                    value = value.getDate() + '/' + (parseInt(value.getMonth()) + 1) + '/' + value.getFullYear();
+                }
+                let log = this.$refs.myLog;
+                log.innerHTML = '<br/>cellEndEdit - Row: ' + rowIndex + ', Column: ' + columnDataField + ', Value: ' + value + '<br/>' + log.innerHTML;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/celledit/main.js b/datatable/celledit/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/celledit/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/celledit/package.json b/datatable/celledit/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/celledit/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/columnalignment/App.vue b/datatable/columnalignment/App.vue
new file mode 100644
index 00000000..4aef864d
--- /dev/null
+++ b/datatable/columnalignment/App.vue
@@ -0,0 +1,109 @@
+<template>
+    <div>
+        <JqxDataTable ref="myDataTable"
+                      :width="getWidth" :source="dataAdapter" :columns="columns"
+                      :sortable="true" :pageable="true" :columnsResize="true">
+        </JqxDataTable>
+
+        <div style="font-size: 13px; font-family: Verdana; width: 600px; margin-top: 10px">
+            <div style="float: left; width: 300px">
+                <h4>Column Alignment</h4>
+
+                <JqxDropDownList @change="columnAlignment($event)"
+                                 :height="25" :autoDropDownHeight="true"
+                                 :selectedIndex="0" :source="dropDownsSource">
+                </JqxDropDownList>
+
+            </div>
+            <div style="float: left; width: 300px">
+                <h4>Cells Alignment</h4>
+
+                <JqxDropDownList @change="cellsAlignment($event)"
+                                 :height="25" :autoDropDownHeight="true"
+                                 :selectedIndex="0" :source="dropDownsSource">
+                </JqxDropDownList>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDataTable,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Shipped Date', datafield: 'ShippedDate', width: '50%', cellsFormat: 'D' },
+                    { text: 'Freight', datafield: 'Freight', width: '50%', cellsFormat: 'F2' }
+                ],
+                dropDownsSource: ['Left', 'Center', 'Right']
+            }
+        },
+        beforeCreate: function () {
+
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
+                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:OrderID',
+                url: '../sampledata/orders.xml'
+            };
+        },
+        methods: {
+            columnAlignment: function (event) {
+                let index = event.args.index;
+                switch (index) {
+                    case 0:
+                        this.$refs.myDataTable.setColumnProperty('ShippedDate', 'align', 'left');
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'align', 'left');
+                        break;
+                    case 1:
+                        this.$refs.myDataTable.setColumnProperty('ShippedDate', 'align', 'center');
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'align', 'center');
+                        break;
+                    case 2:
+                        this.$refs.myDataTable.setColumnProperty('ShippedDate', 'align', 'right');
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'align', 'right');
+                        break;
+                }
+            },
+            cellsAlignment: function (event) {
+                let index = event.args.index;
+                switch (index) {
+                    case 0:
+                        this.$refs.myDataTable.setColumnProperty('ShippedDate', 'cellsAlign', 'left');
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'cellsAlign', 'left');
+                        break;
+                    case 1:
+                        this.$refs.myDataTable.setColumnProperty('ShippedDate', 'cellsAlign', 'center');
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'cellsAlign', 'center');
+                        break;
+                    case 2:
+                        this.$refs.myDataTable.setColumnProperty('ShippedDate', 'cellsAlign', 'right');
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'cellsAlign', 'right');
+                        break;
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/columnalignment/main.js b/datatable/columnalignment/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/columnalignment/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/columnalignment/package.json b/datatable/columnalignment/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/columnalignment/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/columnformatting/App.vue b/datatable/columnformatting/App.vue
new file mode 100644
index 00000000..a5c37a8d
--- /dev/null
+++ b/datatable/columnformatting/App.vue
@@ -0,0 +1,153 @@
+<template>
+    <div>
+        <JqxDataTable ref="myDataTable"
+                      :width="getWidth" :source="dataAdapter" :columns="columns"
+                      :sortable="true" :pageable="true" :columnsResize="true">
+        </JqxDataTable>
+
+        <div style="font-size: 13px; font-family: Verdana; width: 600px; margin-top: 10px">
+            <div style="float: left; width: 300px">
+                <h4>Shipped Date</h4>
+
+                <JqxDropDownList @change="dateFormats($event)"
+                                 :height="25" :autoDropDownHeight="true"
+                                 :selectedIndex="1" :source="dateSource">
+                </JqxDropDownList>
+
+            </div>
+            <div style="float: left; width: 300px">
+                <h4>Cells Alignment</h4>
+
+                <JqxDropDownList @change="numberFormats($event)"
+                                 :height="25" :autoDropDownHeight="true"
+                                 :selectedIndex="2" :source="numberSource">
+                </JqxDropDownList>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDataTable,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Shipped Date', datafield: 'ShippedDate', width: '50%', cellsFormat: 'D' },
+                    { text: 'Freight', datafield: 'Freight', width: '50%', cellsFormat: 'F2', cellsalign: 'right' }
+                ],
+                dateSource: ['Short Date', 'Long Date', 'Long date, Short Time', 'Long date, Long Time', 'Month/Year', 'Month/Day', 'Custom'],
+                numberSource: ['n', 'f', 'f2', 'f3', 'c', 'c2', 'c3', 'p', 'p2', 'p3']
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
+                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:OrderID',
+                url: '../sampledata/orders.xml'
+            };
+        },
+        methods: {
+            columnAlignment: function (event) {
+                let index = event.args.index;
+                switch (index) {
+                    case 0:
+                        this.$refs.myDataTable.setColumnProperty('ShippedDate', 'align', 'left');
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'align', 'left');
+                        break;
+                    case 1:
+                        this.$refs.myDataTable.setColumnProperty('ShippedDate', 'align', 'center');
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'align', 'center');
+                        break;
+                    case 2:
+                        this.$refs.myDataTable.setColumnProperty('ShippedDate', 'align', 'right');
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'align', 'right');
+                        break;
+                }
+            },
+            dateFormats: function (event) {
+                let index = event.args.index;
+                switch (index) {
+                    case 0:
+                        this.$refs.myDataTable.setColumnProperty('ShippedDate', 'cellsFormat', 'd');
+                        break;
+                    case 1:
+                        this.$refs.myDataTable.setColumnProperty('ShippedDate', 'cellsFormat', 'D');
+                        break;
+                    case 2:
+                        this.$refs.myDataTable.setColumnProperty('ShippedDate', 'cellsFormat', 'f');
+                        break;
+                    case 3:
+                        this.$refs.myDataTable.setColumnProperty('ShippedDate', 'cellsFormat', 'F');
+                        break;
+                    case 4:
+                        this.$refs.myDataTable.setColumnProperty('ShippedDate', 'cellsFormat', 'Y');
+                        break;
+                    case 5:
+                        this.$refs.myDataTable.setColumnProperty('ShippedDate', 'cellsFormat', 'M');
+                        break;
+                    case 6:
+                        this.$refs.myDataTable.setColumnProperty('ShippedDate', 'cellsFormat', 'yyyy-MM-dd HH:mm:ss');
+                        break;
+                }
+            },
+            numberFormats: function (event) {
+                let index = event.args.index;
+                switch (index) {
+                    case 0:
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'cellsFormat', 'n');
+                        break;
+                    case 1:
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'cellsFormat', 'f');
+                        break;
+                    case 2:
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'cellsFormat', 'f2');
+                        break;
+                    case 3:
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'cellsFormat', 'f3');
+                        break;
+                    case 4:
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'cellsFormat', 'c');
+                        break;
+                    case 5:
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'cellsFormat', 'c2');
+                        break;
+                    case 6:
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'cellsFormat', 'c3');
+                        break;
+                    case 7:
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'cellsFormat', 'p');
+                        break;
+                    case 8:
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'cellsFormat', 'p2');
+                        break;
+                    case 9:
+                        this.$refs.myDataTable.setColumnProperty('Freight', 'cellsFormat', 'p3');
+                        break;
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/columnformatting/main.js b/datatable/columnformatting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/columnformatting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/columnformatting/package.json b/datatable/columnformatting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/columnformatting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/columnreorder/App.vue b/datatable/columnreorder/App.vue
new file mode 100644
index 00000000..a5fa2a97
--- /dev/null
+++ b/datatable/columnreorder/App.vue
@@ -0,0 +1,51 @@
+<template>
+    <JqxDataTable :width="getWidth" :height="400" :source="dataAdapter" :columns="columns"
+                  :altRows="true" :pageable="true" :columnsReorder="true">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Supplier Name', cellsAlign: 'center', align: 'center', dataField: 'SupplierName', width: 200 },
+                    { text: 'Name', cellsAlign: 'center', align: 'center', dataField: 'ProductName', width: 200 },
+                    { text: 'Quantity', dataField: 'Quantity', cellsformat: 'd', cellsAlign: 'center', align: 'center', width: 80 },
+                    { text: 'Price', dataField: 'Price', cellsformat: 'c2', align: 'center', cellsAlign: 'center', width: 70 },
+                    { text: 'Address', cellsAlign: 'center', align: 'center', dataField: 'Address', width: 120 },
+                    { text: 'City', cellsAlign: 'center', align: 'center', dataField: 'City' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                dataFields: [
+                    { name: 'SupplierName', type: 'string' },
+                    { name: 'Quantity', type: 'number' },
+                    { name: 'OrderDate', type: 'date' },
+                    { name: 'OrderAddress', type: 'string' },
+                    { name: 'Freight', type: 'number' },
+                    { name: 'Price', type: 'number' },
+                    { name: 'City', type: 'string' },
+                    { name: 'ProductName', type: 'string' },
+                    { name: 'Address', type: 'string' }
+                ],
+                url: '../sampledata/orderdetailsextended.xml',
+                root: 'DATA',
+                record: 'ROW'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/columnreorder/main.js b/datatable/columnreorder/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/columnreorder/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/columnreorder/package.json b/datatable/columnreorder/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/columnreorder/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/columnresize/App.vue b/datatable/columnresize/App.vue
new file mode 100644
index 00000000..03c6cab5
--- /dev/null
+++ b/datatable/columnresize/App.vue
@@ -0,0 +1,51 @@
+<template>
+    <JqxDataTable :width="getWidth" :height="400" :source="dataAdapter" :columns="columns"
+                  :altRows="true" :pageable="true" :columnsResize="true">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Supplier Name', cellsAlign: 'center', align: 'center', dataField: 'SupplierName', width: 200 },
+                    { text: 'Name', cellsAlign: 'center', align: 'center', dataField: 'ProductName', width: 200 },
+                    { text: 'Quantity', dataField: 'Quantity', cellsformat: 'd', cellsAlign: 'center', align: 'center', width: 80 },
+                    { text: 'Price', dataField: 'Price', cellsformat: 'c2', align: 'center', cellsAlign: 'center', width: 70 },
+                    { text: 'Address', cellsAlign: 'center', align: 'center', dataField: 'Address', width: 120 },
+                    { text: 'City', cellsAlign: 'center', align: 'center', dataField: 'City' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                dataFields: [
+                    { name: 'SupplierName', type: 'string' },
+                    { name: 'Quantity', type: 'number' },
+                    { name: 'OrderDate', type: 'date' },
+                    { name: 'OrderAddress', type: 'string' },
+                    { name: 'Freight', type: 'number' },
+                    { name: 'Price', type: 'number' },
+                    { name: 'City', type: 'string' },
+                    { name: 'ProductName', type: 'string' },
+                    { name: 'Address', type: 'string' }
+                ],
+                url: '../sampledata/orderdetailsextended.xml',
+                root: 'DATA',
+                record: 'ROW'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/columnresize/main.js b/datatable/columnresize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/columnresize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/columnresize/package.json b/datatable/columnresize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/columnresize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/columnshierarchy/App.vue b/datatable/columnshierarchy/App.vue
new file mode 100644
index 00000000..66ee07e0
--- /dev/null
+++ b/datatable/columnshierarchy/App.vue
@@ -0,0 +1,59 @@
+<template>
+    <JqxDataTable :width="getWidth" :height="400" :source="dataAdapter" :columns="columns"
+                  :altRows="true" :pageable="true" :columnsResize="true" :columnGroups="columnGroups">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Supplier Name', cellsAlign: 'center', align: 'center', dataField: 'SupplierName', width: 200 },
+                    { text: 'Name', columngroup: 'ProductDetails', cellsAlign: 'center', align: 'center', dataField: 'ProductName', width: 200 },
+                    { text: 'Quantity', columngroup: 'ProductDetails', dataField: 'Quantity', cellsFormat: 'd', cellsAlign: 'center', align: 'center', width: 80 },
+                    { text: 'Freight', columngroup: 'OrderDetails', dataField: 'Freight', cellsFormat: 'd', cellsAlign: 'center', align: 'center', width: 100 },
+                    { text: 'Order Date', columngroup: 'OrderDetails', cellsAlign: 'center', align: 'center', cellsFormat: 'd', dataField: 'OrderDate', width: 100 },
+                    { text: 'Order Address', columngroup: 'OrderDetails', cellsAlign: 'center', align: 'center', dataField: 'OrderAddress', width: 100 },
+                    { text: 'Price', columngroup: 'ProductDetails', dataField: 'Price', cellsFormat: 'c2', align: 'center', cellsAlign: 'center', width: 70 },
+                    { text: 'Address', columngroup: 'Location', cellsAlign: 'center', align: 'center', dataField: 'Address', width: 120 },
+                    { text: 'City', columngroup: 'Location', cellsAlign: 'center', align: 'center', dataField: 'City', width: 80 }
+                ],
+                columnGroups: [
+                    { text: 'Product Details', align: 'center', name: 'ProductDetails' },
+                    { text: 'Order Details', parentGroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
+                    { text: 'Location', align: 'center', name: 'Location' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                dataFields: [
+                    { name: 'SupplierName', type: 'string' },
+                    { name: 'Quantity', type: 'number' },
+                    { name: 'OrderDate', type: 'date' },
+                    { name: 'OrderAddress', type: 'string' },
+                    { name: 'Freight', type: 'number' },
+                    { name: 'Price', type: 'number' },
+                    { name: 'City', type: 'string' },
+                    { name: 'ProductName', type: 'string' },
+                    { name: 'Address', type: 'string' }
+                ],
+                url: '../sampledata/orderdetailsextended.xml',
+                root: 'DATA',
+                record: 'ROW'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/columnshierarchy/main.js b/datatable/columnshierarchy/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/columnshierarchy/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/columnshierarchy/package.json b/datatable/columnshierarchy/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/columnshierarchy/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/columntemplate/App.vue b/datatable/columntemplate/App.vue
new file mode 100644
index 00000000..7172f513
--- /dev/null
+++ b/datatable/columntemplate/App.vue
@@ -0,0 +1,128 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :sortable="true" :pageable="true" :pageSize="4" :pagerButtonsCount="5">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'Photo', align: 'center', dataField: 'firstname', width: 80,
+                        // row - row's index.
+                        // column - column's data field.
+                        // value - cell's value.
+                        // rowData - rendered row's object.
+                        cellsRenderer: (row, column, value, rowData) => {
+                            let image = '<div style="margin: 5px; margin-bottom: 3px;">';
+                            let imgurl = '../../../images/' + rowData.firstname.toLowerCase() + '.png';
+                            let img = '<img width="60" height="60" style="display: block;" src="' + imgurl + '"/>';
+                            image += img;
+                            image += '</div>';
+                            return image;
+                        }
+                    },
+                    {
+                        text: 'Details', align: 'center', dataField: 'lastname',
+                        // row - row's index.
+                        // column - column's data field.
+                        // value - cell's value.
+                        // rowData - rendered row's object.
+                        cellsRenderer: (row, column, value, rowData) => {
+                            let container = '<div style="width: 100%; height: 100%;">'
+                            let leftcolumn = '<div style="float: left; width: 50%;">';
+                            let rightcolumn = '<div style="float: left; width: 50%;">';
+
+                            let firstname = '<div style="margin: 10px;"><b>First Name:</b> ' + rowData.firstname + '</div>';
+                            let lastname = '<div style="margin: 10px;"><b>Last Name:</b> ' + rowData.lastname + '</div>';
+                            let title = '<div style="margin: 10px;"><b>Title:</b> ' + rowData.title + '</div>';
+                            let address = '<div style="margin: 10px;"><b>Address:</b> ' + rowData.address + '</div>';
+
+                            leftcolumn += firstname;
+                            leftcolumn += lastname;
+                            leftcolumn += title;
+                            leftcolumn += address;
+                            leftcolumn += '</div>';
+                            let postalcode = '<div style="margin: 10px;"><b>Postal Code:</b> ' + rowData.postalcode + '</div>';
+                            let city = '<div style="margin: 10px;"><b>City:</b> ' + rowData.city + '</div>';
+                            let phone = '<div style="margin: 10px;"><b>Phone:</b> ' + rowData.homephone + '</div>';
+                            let hiredate = '<div style="margin: 10px;"><b>Hire Date:</b> ' + rowData.hiredate + '</div>';
+                            rightcolumn += postalcode;
+                            rightcolumn += city;
+                            rightcolumn += phone;
+                            rightcolumn += hiredate;
+                            rightcolumn += '</div>';
+                            container += leftcolumn;
+                            container += rightcolumn;
+                            container += '</div>';
+                            return container;
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const generateData = () => {
+                let data = new Array();
+                let firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne'];
+                let lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth'];
+                let titles = ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager', 'Sales Representative', 'Sales Representative', 'Inside Sales Coordinator', 'Sales Representative'];
+                let titleofcourtesy = ['Ms.', 'Dr.', 'Ms.', 'Mrs.', 'Mr.', 'Mr.', 'Mr.', 'Ms.', 'Ms.'];
+                let birthdate = ['08-Dec-48', '19-Feb-52', '30-Aug-63', '19-Sep-37', '04-Mar-55', '02-Jul-63', '29-May-60', '09-Jan-58', '27-Jan-66'];
+                let hiredate = ['01-May-92', '14-Aug-92', '01-Apr-92', '03-May-93', '17-Oct-93', '17-Oct-93', '02-Jan-94', '05-Mar-94', '15-Nov-94'];
+                let address = ['507 - 20th Ave. E. Apt. 2A', '908 W. Capital Way', '722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House', 'Miner Rd.', 'Edgeham Hollow', 'Winchester Way', '4726 - 11th Ave. N.E.', '7 Houndstooth Rd.'];
+                let city = ['Seattle', 'Tacoma', 'Kirkland', 'Redmond', 'London', 'London', 'London', 'Seattle', 'London'];
+                let postalcode = ['98122', '98401', '98033', '98052', 'SW1 8JR', 'EC2 7JR', 'RG1 9SP', '98105', 'WG2 7LT'];
+                let country = ['USA', 'USA', 'USA', 'USA', 'UK', 'UK', 'UK', 'USA', 'UK'];
+                let homephone = ['(206) 555-9857', '(206) 555-9482', '(206) 555-3412', '(206) 555-8122', '(71) 555-4848', '(71) 555-7773', '(71) 555-5598', '(206) 555-1189', '(71) 555-4444'];
+                let notes = ['Education includes a BA in psychology from Colorado State University in 1970.  She also completed "The Art of the Cold Call."  Nancy is a member of Toastmasters International.',
+                    'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
+                    'Janet has a BS degree in chemistry from Boston College (1984).  She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
+                    'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.',
+                    'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London.  He was promoted to sales manager in March 1993.  Mr. Buchanan has completed the courses "Successful Telemarketing" and "International Sales Management."  He is fluent in French.',
+                    'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986).  He has also taken the courses "Multi-Cultural Selling" and "Time Management for the Sales Professional."  He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
+                    'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company.  After completing a course entitled "Selling in Europe," he was transferred to the London office in March 1993.',
+                    'Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.',
+                    'Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.'];
+                let k = 0;
+                for (let i = 0; i < firstNames.length; i++) {
+                    let row = {};
+                    row['firstname'] = firstNames[k];
+                    row['lastname'] = lastNames[k];
+                    row['title'] = titles[k];
+                    row['titleofcourtesy'] = titleofcourtesy[k];
+                    row['birthdate'] = birthdate[k];
+                    row['hiredate'] = hiredate[k];
+                    row['address'] = address[k];
+                    row['city'] = city[k];
+                    row['postalcode'] = postalcode[k];
+                    row['country'] = country[k];
+                    row['homephone'] = homephone[k];
+                    row['notes'] = notes[k];
+                    data[i] = row;
+                    k++;
+                }
+
+                return data;
+            }
+
+            this.source = {
+                localData: generateData(),
+                dataType: 'array'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/columntemplate/main.js b/datatable/columntemplate/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/columntemplate/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/columntemplate/package.json b/datatable/columntemplate/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/columntemplate/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/conditionalformatting/App.vue b/datatable/conditionalformatting/App.vue
new file mode 100644
index 00000000..6cde1d3a
--- /dev/null
+++ b/datatable/conditionalformatting/App.vue
@@ -0,0 +1,107 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :altRows="true" :pageable="true" :sortable="true"
+                  :enableHover="false" :selectionMode="'none'">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Product Name', dataField: 'ProductName', width: 200 },
+                    { text: 'Quantity per Unit', dataField: 'QuantityPerUnit', cellClassName: this.cellClass, cellsAlign: 'right', align: 'right', width: 200 },
+                    { text: 'Unit Price', dataField: 'UnitPrice', align: 'right', cellClassName: this.cellClass, cellsAlign: 'right', cellsformat: 'c2', width: 200 },
+                    { text: 'Units In Stock', dataField: 'UnitsInStock', cellsAlign: 'right', width: 250, align: 'right', cellClassName: this.cellClass }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataType: 'xml',
+                dataFields: [
+                    { name: 'ProductName', type: 'string' },
+                    { name: 'QuantityPerUnit', type: 'int' },
+                    { name: 'UnitPrice', type: 'float' },
+                    { name: 'UnitsInStock', type: 'float' },
+                    { name: 'Discontinued', type: 'bool' }
+                ],
+                root: 'Products',
+                record: 'Product',
+                id: 'ProductID',
+                url: '../sampledata/products.xml'
+            };
+        },
+        methods: {
+            cellClass: function (row, dataField, cellText, rowData) {
+                let cellValue = rowData[dataField];
+                switch (dataField) {
+                    case 'QuantityPerUnit':
+                        if (cellValue < 11) {
+                            return 'min';
+                        }
+                        if (cellValue < 14) {
+                            return 'minavg';
+                        }
+                        if (cellValue < 50) {
+                            return 'avg';
+                        }
+                        return 'max';
+                    case 'UnitPrice':
+                        if (cellValue < 20) {
+                            return 'min';
+                        }
+                        if (cellValue < 30) {
+                            return 'minavg';
+                        }
+                        if (cellValue < 50) {
+                            return 'avg';
+                        }
+                        return 'max';
+                    case 'UnitsInStock':
+                        if (cellValue < 20) {
+                            return 'min';
+                        }
+                        if (cellValue < 30) {
+                            return 'minavg';
+                        }
+                        if (cellValue < 50) {
+                            return 'avg';
+                        }
+                        return 'max';
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+
+    .max:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .max:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
+        color: black;
+        background-color: #63be7b;
+    }
+
+    .avg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .avg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
+        color: black;
+        background-color: #f8e984;
+    }
+
+    .minavg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .minavg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
+        color: black;
+        background-color: #f9806f;
+    }
+
+    .min:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .min:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
+        color: black;
+        background-color: #f8696b;
+    }
+</style>
\ No newline at end of file
diff --git a/datatable/conditionalformatting/main.js b/datatable/conditionalformatting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/conditionalformatting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/conditionalformatting/package.json b/datatable/conditionalformatting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/conditionalformatting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/createComponent/App.vue b/datatable/createComponent/App.vue
new file mode 100644
index 00000000..b1bc5580
--- /dev/null
+++ b/datatable/createComponent/App.vue
@@ -0,0 +1,56 @@
+<template>
+    <JqxDataTable ref="myDataTable" :autoCreate="false"></JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        mounted: function () {
+
+            const source = {
+                localdata: generatedata(20, false),
+                datatype: 'array',
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'total', type: 'number' }
+                    ],
+                sortcolumn: 'firstname',
+                sortdirection: 'asc'
+            };
+
+            const dataAdapter = new jqx.dataAdapter(source);
+
+            this.settings =
+                {
+                    width: getWidth('dataTable'),
+                    source: dataAdapter,
+                    altRows: true,
+                    sortable: true,
+                    editable: true,
+                    selectionMode: 'singleRow',
+                    columns: [
+                        { text: 'Name', dataField: 'firstname', width: 200 },
+                        { text: 'Last Name', dataField: 'lastname', width: 200 },
+                        { text: 'Product', editable: false, dataField: 'productname', width: 180 },
+                        { text: 'Quantity', dataField: 'quantity', width: 80, align: 'right', cellsAlign: 'right' },
+                        { text: 'Unit Price', dataField: 'price', width: 90, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
+                        { text: 'Total', dataField: 'total', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' }
+                    ]
+                }
+
+            this.$refs.myDataTable.createComponent(this.settings);
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/createComponent/main.js b/datatable/createComponent/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/createComponent/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/createComponent/package.json b/datatable/createComponent/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/createComponent/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/csvdata/App.vue b/datatable/csvdata/App.vue
new file mode 100644
index 00000000..5d44229f
--- /dev/null
+++ b/datatable/csvdata/App.vue
@@ -0,0 +1,40 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :columnsResize="true" :pageable="true" :pagerButtonsCount="10">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Date', dataField: 'Date', cellsFormat: 'D', width: 250 },
+                    { text: 'S&P 500', dataField: 'S&P 500', width: 300, cellsFormat: 'f' },
+                    { text: 'NASDAQ', dataField: 'NASDAQ', cellsFormat: 'f' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataType: 'csv',
+                dataFields: [
+                    { name: 'Date', type: 'date' },
+                    { name: 'S&P 500', type: 'float' },
+                    { name: 'NASDAQ', type: 'float' }
+                ],
+                url: '../sampledata/nasdaq_vs_sp500.txt'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/csvdata/main.js b/datatable/csvdata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/csvdata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/csvdata/package.json b/datatable/csvdata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/csvdata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/customeditors/App.vue b/datatable/customeditors/App.vue
new file mode 100644
index 00000000..aa841bac
--- /dev/null
+++ b/datatable/customeditors/App.vue
@@ -0,0 +1,153 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :editable="true" :pageable="true" :sortable="true"
+                  :pagerButtonsCount="10" :autoRowHeight="false">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'First Name', columntype: 'template', datafield: 'firstname', width: 180,
+                        createEditor: (row, cellvalue, editor, cellText, width, height) => {
+                            // construct the editor.
+                            let container = document.createElement('input');
+                            container.className = 'firstNameInput';
+                            container.style.cssText = 'padding-left: 4px; border: none';
+                            editor[0].appendChild(container);
+
+                            let inputOptions = {
+                                width: width, height: height, source: this.getEditorDataAdapter('firstname'), displayMember: 'firstname'
+                            };
+
+                            jqwidgets.createInstance('.firstNameInput', 'jqxInput', inputOptions);
+                        },
+                        initEditor: (row, cellvalue, editor, celltext, width, height) => {
+                            // set the editor's current value. The callback is called each time the editor is displayed.
+                            let inputField = editor.find('input');
+                            inputField.val(cellvalue);
+                        },
+                        getEditorValue: (row, cellvalue, editor) => {
+                            // return the editor's value.
+                            return editor.find('input').val();
+                        }
+                    },
+                    {
+                        text: 'Last Name', datafield: 'lastname', columntype: 'template', width: 180,
+                        createEditor: (row, cellvalue, editor, cellText, width, height) => {
+                            // construct the editor.
+                            let container = document.createElement('input');
+                            container.className = 'lastNameInput';
+                            container.style.cssText = 'padding-left: 4px; border: none';
+                            editor[0].appendChild(container);
+
+                            let inputOptions = {
+                                width: width, height: height, source: this.getEditorDataAdapter('lastname'), displayMember: 'lastname'
+                            };
+
+                            jqwidgets.createInstance('.lastNameInput', 'jqxInput', inputOptions);
+                        },
+                        initEditor: (row, cellvalue, editor, celltext, width, height) => {
+                            let inputField = editor.find('input');
+                            inputField.val(cellvalue);
+                        },
+                        getEditorValue: (row, cellvalue, editor) => {
+                            // return the editor's value.
+                            return editor.find('input').val();
+                        }
+                    },
+                    {
+                        text: 'Products', columntype: 'template', datafield: 'productname',
+                        createEditor: (row, cellvalue, editor, cellText, width, height) => {
+                            // construct the editor.
+                            editor.jqxDropDownList({
+                                source: this.getEditorDataAdapter('productname'), displayMember: 'productname', valueMember: 'productname', width: width, height: height
+                            });
+                        },
+                        initEditor: (row, cellvalue, editor, celltext, width, height) => {
+                            // set the editor's current value. The callback is called each time the editor is displayed.
+                            editor.jqxDropDownList({ width: width, height: height });
+                            editor.val(cellvalue);
+                        },
+                        getEditorValue: (row, cellvalue, editor) => {
+                            // return the editor's value.
+                            return editor.val();
+                        }
+                    },
+                    {
+                        text: 'Quantity', width: 200, columntype: 'custom', datafield: 'quantity',
+                        createEditor: (row, cellvalue, editor, cellText, width, height) => {
+                            // construct the editor.
+                            editor.jqxSlider({ step: 1, mode: 'fixed', tooltip: true, showTicks: false, min: 0, max: 30, width: width, height: height });
+                        },
+                        initEditor: (row, cellvalue, editor, celltext, width, height) => {
+                            // set the editor's current value. The callback is called each time the editor is displayed.
+                            let value = parseInt(cellvalue);
+                            if (isNaN(value)) value = 0;
+                            editor.jqxSlider('setValue', value);
+                        },
+                        getEditorValue: (row, cellvalue, editor) => {
+                            // return the editor's value.
+                            return editor.val();
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.data = generatedata(200, false);
+
+            this.source = {
+                localData: this.data,
+                datatype: 'array',
+                dataFields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'date', type: 'date' }
+                    ]
+            };
+        },
+        methods: {
+            getEditorDataAdapter: function (datafield) {
+                const source =
+                    {
+                        localData: this.data,
+                        dataType: 'array',
+                        dataFields:
+                            [
+                                { name: 'firstname', type: 'string' },
+                                { name: 'lastname', type: 'string' },
+                                { name: 'productname', type: 'string' },
+                                { name: 'available', type: 'bool' },
+                                { name: 'quantity', type: 'number' },
+                                { name: 'price', type: 'number' },
+                                { name: 'date', type: 'date' }
+                            ]
+                    };
+                let dataAdapter = new jqx.dataAdapter(source, { uniqueDataFields: [datafield] });
+
+                return dataAdapter;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/customeditors/main.js b/datatable/customeditors/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/customeditors/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/customeditors/package.json b/datatable/customeditors/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/customeditors/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/dataexport/App.vue b/datatable/dataexport/App.vue
new file mode 100644
index 00000000..7893510e
--- /dev/null
+++ b/datatable/dataexport/App.vue
@@ -0,0 +1,105 @@
+<template>
+    <div>
+        <JqxDataTable ref="myDataTable"
+                      :width="470" :source="dataAdapter" :columns="columns"
+                      :altRows="true" :pageable="true" :sortable="true">
+        </JqxDataTable>
+
+        <div style="margin-top: 20px">
+
+            <div style="float: left">
+                <JqxButton @click="excelExport()" :width="110">Export to Excel</JqxButton>
+                <br />
+                <br />
+                <JqxButton @click="xmlExport()" :width="110">Export to XML</JqxButton>
+            </div>
+
+            <div style="float: left">
+                <JqxButton @click="csvExport()" :width="110">Export to CSV</JqxButton>
+                <br />
+                <br />
+                <JqxButton @click="tsvExport()" :width="110">Export to TSV</JqxButton>
+            </div>
+
+            <div style="float: left">
+                <JqxButton @click="htmlExport()" :width="110">Export to HTML</JqxButton>
+                <br />
+                <br />
+                <JqxButton @click="jsonExport()" :width="110">Export to JSON</JqxButton>
+            </div>
+
+            <div style="float: left">
+                <JqxButton @click="pdfExport()" :width="110">Export to PDF</JqxButton>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxDataTable,
+            JqxButton
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', dataField: 'firstname', width: 190 },
+                    { text: 'Last Name', dataField: 'lastname', width: 190 },
+                    { text: 'Product', dataField: 'productname', width: 177 },
+                    { text: 'Available', dataField: 'available', width: 67, cellsAlign: 'center', align: 'center' },
+                    { text: 'Ship Date', dataField: 'date', width: 90, align: 'right', cellsAlign: 'right', cellsFormat: 'd' },
+                    { text: 'Quantity', dataField: 'quantity', width: 70, align: 'right', cellsAlign: 'right' },
+                    { text: 'Price', dataField: 'price', cellsAlign: 'right', width: 100, align: 'right', cellsFormat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localData: generatedata(100, false),
+                dataType: 'array',
+                dataFields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' }
+                    ]
+            };
+        },
+        methods: {
+            excelExport: function () {
+                this.$refs.myDataTable.exportData('xls');
+            },
+            xmlExport: function () {
+                this.$refs.myDataTable.exportData('xml');
+            },
+            csvExport: function () {
+                this.$refs.myDataTable.exportData('csv');
+            },
+            tsvExport: function () {
+                this.$refs.myDataTable.exportData('tsv');
+            },
+            htmlExport: function () {
+                this.$refs.myDataTable.exportData('html');
+            },
+            jsonExport: function () {
+                this.$refs.myDataTable.exportData('json');
+            },
+            pdfExport: function () {
+                this.$refs.myDataTable.exportData('pdf');
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/dataexport/main.js b/datatable/dataexport/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/dataexport/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/dataexport/package.json b/datatable/dataexport/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/dataexport/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/dataprinting/App.vue b/datatable/dataprinting/App.vue
new file mode 100644
index 00000000..d6852309
--- /dev/null
+++ b/datatable/dataprinting/App.vue
@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <JqxDataTable ref="myDataTable"
+                      :width="getWidth" :source="dataAdapter" :columns="columns"
+                      :altRows="true" :sortable="true" :exportSettings="{ fileName: null }">
+        </JqxDataTable>
+
+        <div style="margin-top: 20px">
+            <div style="margin-left: 10px; float: left">
+                <JqxButton @click="printBtnOnClick()" :width="80">Print</JqxButton>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxDataTable,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', dataField: 'firstname', width: 150 },
+                    { text: 'Last Name', dataField: 'lastname', width: 150 },
+                    { text: 'Product', dataField: 'productname', width: 200 },
+                    { text: 'Ship Date', dataField: 'date', width: 150, align: 'right', cellsAlign: 'right', cellsFormat: 'd' },
+                    { text: 'Quantity', dataField: 'quantity', width: 100, align: 'right', cellsAlign: 'right' },
+                    { text: 'Price', dataField: 'price', width: 100, cellsalign: 'right', align: 'right', cellsFormat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.source = {
+                localdata: generatedata(10, false),
+                datatype: 'array',
+                dataFields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' }
+                    ]
+            };
+        },
+        methods: {
+            printBtnOnClick: function () {
+                let gridContent = this.$refs.myDataTable.exportData('html');
+                let newWindow = window.open('', '', 'width=800, height=500'),
+                    document = newWindow.document.open(),
+                    pageContent =
+                        '<!DOCTYPE html>' +
+                        '<html>' +
+                        '<head>' +
+                        '<meta charset="utf-8" />' +
+                        '<title>jQWidgets DataTable</title>' +
+                        '        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>' +
+                        '<body>' + gridContent + '</body></html>';
+                document.write(pageContent);
+                document.close();
+                newWindow.print();
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/dataprinting/main.js b/datatable/dataprinting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/dataprinting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/dataprinting/package.json b/datatable/dataprinting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/dataprinting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/defaultfunctionality/App.vue b/datatable/defaultfunctionality/App.vue
new file mode 100644
index 00000000..6d0233ec
--- /dev/null
+++ b/datatable/defaultfunctionality/App.vue
@@ -0,0 +1,148 @@
+<template>
+    <JqxDataTable :width="getWidth" :columns="columns" :selectionMode="'singleRow'"
+                  :altRows="true" :sortable="true" :editable="true">
+        <table id='table' border='1'>
+            <thead>
+                <tr>
+                    <th align='left'>First Name</th>
+                    <th align='left'>Last Name</th>
+                    <th align='left'>Product</th>
+                    <th align='right'>Price</th>
+                    <th align='right'>Quantity</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Ian</td>
+                    <td>Devling</td>
+                    <td>Espresso Truffle</td>
+                    <td>$1.75</td>
+                    <td>8</td>
+                </tr>
+                <tr>
+                    <td>Nancy</td>
+                    <td>Wilson</td>
+                    <td>Cappuccino</td>
+                    <td>$5.00</td>
+                    <td>3</td>
+                </tr>
+                <tr>
+                    <td>Cheryl</td>
+                    <td>Nodier</td>
+                    <td>Caffe Americano</td>
+                    <td>$2.50</td>
+                    <td>4</td>
+                </tr>
+                <tr>
+                    <td>Martin</td>
+                    <td>Saavedra</td>
+                    <td>Caramel Latte</td>
+                    <td>$3.80</td>
+                    <td>11</td>
+                </tr>
+                <tr>
+                    <td>Guylene</td>
+                    <td>Bjorn</td>
+                    <td>Green Tea</td>
+                    <td>$1.50</td>
+                    <td>8</td>
+                </tr>
+                <tr>
+                    <td>Andrew</td>
+                    <td>Burke</td>
+                    <td>Caffe Espresso</td>
+                    <td>$3.00</td>
+                    <td>2</td>
+                </tr>
+                <tr>
+                    <td>Regina</td>
+                    <td>Murphy</td>
+                    <td>White Chocolate Mocha</td>
+                    <td>$3.60</td>
+                    <td>6</td>
+                </tr>
+                <tr>
+                    <td>Michael</td>
+                    <td>Murphy</td>
+                    <td>Caramel Latte</td>
+                    <td>$3.80</td>
+                    <td>2</td>
+                </tr>
+                <tr>
+                    <td>Petra</td>
+                    <td>Bein</td>
+                    <td>Caffe Americano</td>
+                    <td>$2.50</td>
+                    <td>7</td>
+                </tr>
+                <tr>
+                    <td>Nancy</td>
+                    <td>Nodier</td>
+                    <td>Caffe Latte</td>
+                    <td>$4.50</td>
+                    <td>10</td>
+                </tr>
+                <tr>
+                    <td>Peter</td>
+                    <td>Devling</td>
+                    <td>Green Tea</td>
+                    <td>$1.50</td>
+                    <td>1</td>
+                </tr>
+                <tr>
+                    <td>Beate</td>
+                    <td>Saylor</td>
+                    <td>Espresso con Panna</td>
+                    <td>$3.25</td>
+                    <td>3</td>
+                </tr>
+                <tr>
+                    <td>Shelley</td>
+                    <td>Nodier</td>
+                    <td>Peppermint Mocha Twist</td>
+                    <td>$4.00</td>
+                    <td>7</td>
+                </tr>
+                <tr>
+                    <td>Nancy</td>
+                    <td>Murphy</td>
+                    <td>Peppermint Mocha Twist</td>
+                    <td>$4.00</td>
+                    <td>1</td>
+                </tr>
+                <tr>
+                    <td>Lars</td>
+                    <td>Wilson</td>
+                    <td>Caffe Espresso</td>
+                    <td>$3.00</td>
+                    <td>11</td>
+                </tr>
+            </tbody>
+        </table>
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                columns: [
+                    { text: 'First Name', dataField: 'First Name', width: 200 },
+                    { text: 'Last Name', dataField: 'Last Name', width: 200 },
+                    { text: 'Product', dataField: 'Product', width: 250 },
+                    { text: 'Unit Price', dataField: 'Price', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
+                    { text: 'Quantity', dataField: 'Quantity', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'n' }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/defaultfunctionality/main.js b/datatable/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/defaultfunctionality/package.json b/datatable/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/dialog/App.vue b/datatable/dialog/App.vue
new file mode 100644
index 00000000..27f23548
--- /dev/null
+++ b/datatable/dialog/App.vue
@@ -0,0 +1,164 @@
+<template>
+    <div>
+        <JqxDataTable ref="myDataTable" @rowDoubleClick="onRowDoubleClick($event)"
+                      :width="getWidth" :source="dataAdapter" :columns="columns"
+                      :altRows="true" :sortable="true" :pageable="true"
+                      :pagerButtonsCount="8">
+        </JqxDataTable>
+
+        <JqxWindow ref=myWindow @close="myWindowOnClose()"
+                   :width="270" :height="235" :resizable="false" :autoOpen="false" :position="{ left: 85, top: 43 }">
+            <div>Edit Dialog</div>
+            <div style="overflow: hidden">
+                <table style="table-layout: fixed; border-style: none">
+                    <tbody>
+                        <tr>
+                            <td align='right'>
+                                Order ID:
+                            </td>
+                            <td align='left'>
+                                <JqxInput ref="orderID" :width="150" :height="30" :disabled="true"></JqxInput>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td align='right'>
+                                Freight:
+                            </td>
+                            <td align='left'>
+                                <JqxNumberInput ref="freight"
+                                                :width="156" :height="30" :spinButtons="true" :inputMode="'simple'">
+                                </JqxNumberInput>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td align='right'>
+                                Ship Country:
+                            </td>
+                            <td align='left'>
+                                <JqxInput ref="shipCountry" :width="150" :height="30" :source="countries"></JqxInput>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td align='right'>
+                                Shipped Date:
+                            </td>
+                            <td align='left'>
+                                <JqxDateTimeInput ref="shipDate"
+                                                  :width="156" :height="30">
+                                </JqxDateTimeInput>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colSpan='2' align='right'>
+                                <br />
+                                <JqxButton @click="cancelBtnOnClick()" style="margin-left: 5px; float: right"
+                                           :width="80" :height="30">
+                                    Cancel
+                                </JqxButton>
+                                <JqxButton @click="saveBtnOnClick()" style="float: right"
+                                           :width="80" :height="30">
+                                    Save
+                                </JqxButton>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </JqxWindow>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+    import JqxWindow from "jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+    import JqxNumberInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue";
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxDataTable,
+            JqxWindow,
+            JqxInput,
+            JqxNumberInput,
+            JqxDateTimeInput,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Order ID', editable: false, dataField: 'OrderID', width: 200 },
+                    { text: 'Freight', dataField: 'Freight', cellsFormat: 'f2', cellsAlign: 'right', align: 'right', width: 200 },
+                    { text: 'Ship Country', dataField: 'ShipCountry', width: 150 },
+                    { text: 'Shipped Date', dataField: 'ShippedDate', cellsAlign: 'right', align: 'right', cellsFormat: 'd' }
+                ],
+                countries: new Array('Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Antarctica', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', 'Botswana', 'Brazil', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burma', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Central African Republic', 'Chad', 'Chile', 'China', 'Colombia', 'Comoros', 'Congo, Democratic Republic', 'Congo, Republic of the', 'Costa Rica', 'Cote d`Ivoire', 'Croatia', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic', 'East Timor', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Fiji', 'Finland', 'France', 'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Greece', 'Greenland', 'Grenada', 'Guatemala', 'Guinea', 'Guinea- Bissau', 'Guyana', 'Haiti', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jordan', 'Kazakhstan', 'Kenya', 'Kiribati', 'Korea, North', 'Korea, South', 'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macedonia', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Mauritania', 'Mauritius', 'Mexico', 'Micronesia', 'Moldova', 'Mongolia', 'Morocco', 'Monaco', 'Mozambique', 'Namibia', 'Nauru', 'Nepal', 'Netherlands', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Norway', 'Oman', 'Pakistan', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Poland', 'Portugal', 'Qatar', 'Romania', 'Russia', 'Rwanda', 'Samoa', 'San Marino', ' Sao Tome', 'Saudi Arabia', 'Senegal', 'Serbia and Montenegro', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'Spain', 'Sri Lanka', 'Sudan', 'Suriname', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', 'Togo', 'Tonga', 'Trinidad and Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'Uruguay', 'Uzbekistan', 'Vanuatu', 'Venezuela', 'Vietnam', 'Yemen', 'Zambia', 'Zimbabwe')
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataFields: [
+                    { name: 'OrderID', type: 'int' },
+                    { name: 'Freight', type: 'float' },
+                    { name: 'ShipName', type: 'string' },
+                    { name: 'ShipAddress', type: 'string' },
+                    { name: 'ShipCity', type: 'string' },
+                    { name: 'ShipCountry', type: 'string' },
+                    { name: 'ShippedDate', type: 'date' }
+                ],
+                root: 'Orders',
+                record: 'Order',
+                dataType: 'xml',
+                id: 'OrderID',
+                url: '../sampledata/orderdetails.xml'
+            };
+        },
+        methods: {
+            onRowDoubleClick: function (event) {
+                let args = event.args;
+                let index = args.index;
+                let row = args.row;
+                this.tempIndexHolder = index;
+                // Update the widgets inside Window.
+                this.$refs.myWindow.setTitle('Edit Row: ' + row.OrderID);
+                this.$refs.myWindow.open();
+                this.$refs.myDataTable.disabled = true;
+                this.$refs.orderID.value = row.OrderID;
+                this.$refs.freight.value = row.Freight;
+                this.$refs.shipCountry.value = row.ShipCountry;
+                this.$refs.shipDate.value = row.ShippedDate;
+            },
+            cancelBtnOnClick: function () {
+                this.$refs.myWindow.close();
+            },
+            saveBtnOnClick: function () {
+                this.$refs.myWindow.close();
+                // Update edited row.
+                let editRow = parseInt(this.tempIndexHolder);
+                let rowData = {
+                    OrderID: this.$refs.orderID.value,
+                    Freight: this.$refs.freight.val(),
+                    ShipCountry: this.$refs.shipCountry.value,
+                    ShippedDate: this.$refs.shipDate.value
+                };
+                this.$refs.myDataTable.updateRow(editRow, rowData);
+            },
+            myWindowOnClose: function () {
+                this.$refs.myDataTable.disabled = false;
+            }
+        }
+    };
+</script>
+
+<style>
+    .jqx-button {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>
\ No newline at end of file
diff --git a/datatable/dialog/main.js b/datatable/dialog/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/dialog/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/dialog/package.json b/datatable/dialog/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/dialog/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/filtering/App.vue b/datatable/filtering/App.vue
new file mode 100644
index 00000000..09845a7e
--- /dev/null
+++ b/datatable/filtering/App.vue
@@ -0,0 +1,50 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :altRows="true" :pageable="true" :filterable="true">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Supplier Name', cellsAlign: 'center', align: 'center', dataField: 'SupplierName', width: 250 },
+                    { text: 'Name', cellsAlign: 'center', align: 'center', dataField: 'ProductName', width: 250 },
+                    { text: 'Quantity', dataField: 'Quantity', cellsFormat: 'd', cellsAlign: 'center', align: 'center', width: 120 },
+                    { text: 'Price', dataField: 'Price', cellsFormat: 'c2', align: 'center', cellsAlign: 'center', width: 120 },
+                    { text: 'City', cellsAlign: 'center', align: 'center', dataField: 'City' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataType: 'xml',
+                dataFields: [
+                    { name: 'SupplierName', type: 'string' },
+                    { name: 'Quantity', type: 'number' },
+                    { name: 'OrderDate', type: 'date' },
+                    { name: 'OrderAddress', type: 'string' },
+                    { name: 'Freight', type: 'number' },
+                    { name: 'Price', type: 'number' },
+                    { name: 'City', type: 'string' },
+                    { name: 'ProductName', type: 'string' },
+                    { name: 'Address', type: 'string' }
+                ],
+                url: '../sampledata/orderdetailsextended.xml',
+                root: 'DATA',
+                record: 'ROW'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/filtering/main.js b/datatable/filtering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/filtering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/filtering/package.json b/datatable/filtering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/filtering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/filteringapi/App.vue b/datatable/filteringapi/App.vue
new file mode 100644
index 00000000..6562c17b
--- /dev/null
+++ b/datatable/filteringapi/App.vue
@@ -0,0 +1,184 @@
+<template>
+    <div>
+        <div style="float: left">
+            <div>Filter By:</div>
+
+            <JqxDropDownList ref="myDropDownList" @select="dropDownListOnSelect($event)"
+                             :width="160" :height="25" :source="dropDownListSource"
+                             :selectedIndex="0" :autoDropDownHeight="true">
+            </JqxDropDownList>
+
+            <JqxListBox ref="myListBox" style="margin-top: 10px"
+                        @checkChange="listBoxOnCheckChange($event)"
+                        :width="160" :height="250" :checkboxes="true">
+            </JqxListBox>
+
+            <div style="margin-top: 10px; margin-right: 5px; float: left">
+
+                <JqxButton @click="applyFilterBtnOnClick()">
+                    Apply Filter
+                </JqxButton>
+
+                <JqxButton @click="clearfilterBtnOnClick()">
+                    Clear Filter
+                </JqxButton>
+
+            </div>
+        </div>
+        <JqxDataTable ref="myDataTable" style="float: left; margin-left: 20px"
+                      :width="650" :source="dataAdapter" :columns="columns"
+                      :altRows="true" :pageable="true" :pagerButtonsCount="4">
+        </JqxDataTable>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxDataTable,
+            JqxDropDownList,
+            JqxListBox,
+            JqxButton
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', dataField: 'firstname', width: 190 },
+                    { text: 'Last Name', dataField: 'lastname', width: 190 },
+                    { text: 'Product', dataField: 'productname', width: 170 },
+                    { text: 'Quantity', dataField: 'quantity', cellsAlign: 'right' }
+                ],
+                dropDownListSource: [
+                    { label: 'First Name', value: 'firstname' },
+                    { label: 'Last Name', value: 'lastname' },
+                    { label: 'Product', value: 'productname' },
+                    { label: 'Quantity', value: 'quantity' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.handleCheckChange = true;
+
+            this.source = {
+                localData: generatedata(200, false),
+                dataFields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'quantity', type: 'number' }
+                    ],
+                dataType: 'array'
+            };
+        },
+        mounted: function () {
+            this.updateMyListBox('firstname');
+        },
+        methods: {
+            updateMyListBox: function (dataField) {
+                this.$refs.myDataTable.clearFilters();
+                let myListBoxAdapter = new jqx.dataAdapter(this.source,
+                    {
+                        uniqueDataFields: [dataField],
+                        autoBind: true
+                    });
+                let uniqueRecords = myListBoxAdapter.records;
+                uniqueRecords.splice(0, 0, '(Select All)');
+                this.$refs.myListBox.setOptions({ source: uniqueRecords, displayMember: dataField });
+                this.$refs.myListBox.checkAll();
+            },
+            applyFilter: function (dataField) {
+                this.$refs.myDataTable.clearFilters();
+                let filtertype = 'stringfilter';
+                if (dataField == 'date') filtertype = 'datefilter';
+                if (dataField == 'price' || dataField == 'quantity') filtertype = 'numericfilter';
+                // create a new group of filters.
+                let filtergroup = new jqx.filter();
+                // get listbox's checked items.
+                let checkedItems = this.$refs.myListBox.getCheckedItems();
+                if (checkedItems.length === 0) {
+                    let filter_or_operator = 1;
+                    let filtervalue = 'Empty';
+                    let filtercondition = 'equal';
+                    let filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
+                    filtergroup.addfilter(filter_or_operator, filter);
+                }
+                else {
+                    for (let i = 0; i < checkedItems.length; i++) {
+                        let filter_or_operator = 1;
+                        // set filter's value.
+                        let filtervalue = checkedItems[i].label;
+                        // set filter's condition.
+                        let filtercondition = 'equal';
+                        // create new filter.
+                        let filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
+                        // add the filter to the filter group.
+                        filtergroup.addfilter(filter_or_operator, filter);
+                    }
+                }
+                // add the filters.
+                this.$refs.myDataTable.addFilter(dataField, filtergroup);
+                // apply the filters.
+                this.$refs.myDataTable.applyFilters();
+            },
+            listBoxOnCheckChange: function (event) {
+
+                if (!this.handleCheckChange)
+                    return;
+
+                if (event.args.label !== '(Select All)') {
+                    // update the state of the 'Select All' listbox item.
+                    this.handleCheckChange = false;
+                    this.$refs.myListBox.checkIndex(0);
+                    let checkedItems = this.$refs.myListBox.getCheckedItems();
+                    let items = this.$refs.myListBox.getItems();
+                    if (checkedItems.length == 1) {
+                        this.$refs.myListBox.uncheckIndex(0);
+                    }
+                    else if (items.length != checkedItems.length) {
+                        this.$refs.myListBox.indeterminateIndex(0);
+                    }
+                    this.handleCheckChange = true;
+                }
+                else {
+                    // check/uncheck all items if 'Select All' is clicked.
+                    this.handleCheckChange = false;
+                    if (event.args.checked) {
+                        this.$refs.myListBox.checkAll();
+                    }
+                    else {
+                        this.$refs.myListBox.uncheckAll();
+                    }
+                    this.handleCheckChange = true;
+                }
+            },
+            // handle columns selection.
+            dropDownListOnSelect: function (event) {
+                this.updateMyListBox(event.args.item.value);
+            },
+            // applies the filter.
+            applyFilterBtnOnClick: function () {
+                let dataField = this.$refs.myDropDownList.getSelectedItem().value;
+                this.applyFilter(dataField);
+            },
+            // clears the filter.
+            clearfilterBtnOnClick: function () {
+                this.$refs.myDataTable.clearFilters();
+            }
+        }
+    };
+</script>
+
+<style>
+    .jqx-button {
+        display: inline-block;
+        margin-right: 3px;
+    }
+</style>
\ No newline at end of file
diff --git a/datatable/filteringapi/main.js b/datatable/filteringapi/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/filteringapi/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/filteringapi/package.json b/datatable/filteringapi/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/filteringapi/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/fluidsize/App.vue b/datatable/fluidsize/App.vue
new file mode 100644
index 00000000..d0cab4e0
--- /dev/null
+++ b/datatable/fluidsize/App.vue
@@ -0,0 +1,51 @@
+<template>
+    <JqxDataTable :width="'100%'" :height="'100%'" :source="dataAdapter" :columns="columns"
+                  :pageable="true" :columnsResize="true" :pagerButtonsCount="3" :pageSize="50">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', dataField: 'firstname', width: '20%' },
+                    { text: 'Last Name', dataField: 'lastname', width: '20%' },
+                    { text: 'Product', editable: false, dataField: 'productname', width: '30%' },
+                    { text: 'Quantity', dataField: 'quantity', width: '30%', cellsAlign: 'right', align: 'right' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localData: generateData(200),
+                dataType: 'array',
+                dataFields: [
+                    { name: 'firstname', type: 'string' },
+                    { name: 'lastname', type: 'string' },
+                    { name: 'productname', type: 'string' },
+                    { name: 'quantity', type: 'number' },
+                    { name: 'price', type: 'number' },
+                    { name: 'total', type: 'number' }
+                ]
+            };
+        }
+    };
+</script>
+
+<style>
+    html, body {
+        padding: 3px;
+        box-sizing: border-box;
+        margin: 0;
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+    }
+</style>
\ No newline at end of file
diff --git a/datatable/fluidsize/main.js b/datatable/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/fluidsize/package.json b/datatable/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/grouping/App.vue b/datatable/grouping/App.vue
new file mode 100644
index 00000000..7de59f4f
--- /dev/null
+++ b/datatable/grouping/App.vue
@@ -0,0 +1,57 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :altRows="true" :pageable="true" :sortable="true"
+                  :groups="['SupplierName']" :groupsRenderer="groupsRenderer">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Supplier Name', hidden: true, cellsAlign: 'left', align: 'left', dataField: 'SupplierName', width: 280 },
+                    { text: 'Product Name', cellsAlign: 'left', align: 'left', dataField: 'ProductName', width: 250 },
+                    { text: 'Quantity', dataField: 'Quantity', cellsformat: 'd', cellsAlign: 'right', align: 'right', width: 80 },
+                    { text: 'Price', dataField: 'Price', cellsformat: 'c2', align: 'right', cellsAlign: 'right', width: 70 },
+                    { text: 'Address', cellsAlign: 'center', align: 'center', dataField: 'Address', width: 250 },
+                    { text: 'City', cellsAlign: 'center', align: 'center', dataField: 'City' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataType: 'xml',
+                dataFields: [
+                    { name: 'SupplierName', type: 'string' },
+                    { name: 'Quantity', type: 'number' },
+                    { name: 'OrderDate', type: 'date' },
+                    { name: 'OrderAddress', type: 'string' },
+                    { name: 'Freight', type: 'number' },
+                    { name: 'Price', type: 'number' },
+                    { name: 'City', type: 'string' },
+                    { name: 'ProductName', type: 'string' },
+                    { name: 'Address', type: 'string' }
+                ],
+                url: '../sampledata/orderdetailsextended.xml',
+                root: 'DATA',
+                record: 'ROW'
+            };
+        },
+        methods: {
+            groupsRenderer: function (value, rowData, level) {
+                return 'Supplier Name: ' + value;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/grouping/main.js b/datatable/grouping/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/grouping/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/grouping/package.json b/datatable/grouping/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/grouping/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/groupingserverpaging/App.vue b/datatable/groupingserverpaging/App.vue
new file mode 100644
index 00000000..ddc4b7b3
--- /dev/null
+++ b/datatable/groupingserverpaging/App.vue
@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <h3 style="font-size: 16px; font-family: Verdana">Data Source: 'http://services.odata.org'</h3>
+
+        <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                      :altRows="true" :pageable="true" :serverProcessing="true"
+                      :groups="['ShipCountry']" :groupsRenderer="groupsRenderer"
+                      :pagerButtonsCount="10">
+        </JqxDataTable>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source,
+                    {
+                        formatData: (data) => {
+                            if (this.source.totalRecords) {
+                                // update the $skip and $top params of the OData service.
+                                // data.pagenum - page number starting from 0.
+                                // data.pagesize - page size
+                                data.$skip = data.pagenum * data.pagesize;
+                                data.$top = data.pagesize;
+                                data.$orderby = 'ShipCountry asc';
+                            }
+                            return data;
+                        },
+                        downloadComplete: (data, status, xhr) => {
+                            if (!this.source.totalRecords) {
+                                this.source.totalRecords = data.value.length;
+                            }
+                        },
+                        loadError: (xhr, status, error) => {
+                            throw new Error('http://services.odata.org: ' + error.toString());
+                        }
+                    }
+                ),
+                columns: [
+                    { text: 'Ship Name', dataField: 'ShipName', width: 250 },
+                    { text: 'Ship Country', hidden: true, dataField: 'ShipCountry', width: 250 },
+                    { text: 'Ship City', dataField: 'ShipCity', width: 150 },
+                    { text: 'Ship Address', dataField: 'ShipAddress' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'ShipCountry', type: 'string' },
+                    { name: 'ShipCity', type: 'string' },
+                    { name: 'ShipAddress', type: 'string' },
+                    { name: 'ShipName', type: 'string' },
+                    { name: 'Freight', type: 'number' },
+                    { name: 'ShippedDate', type: 'date' }
+                ],
+                root: 'value',
+                url: 'http://services.odata.org/V3/Northwind/Northwind.svc/Orders?$format=json&$callback=?'
+            };
+        },
+        methods: {
+            groupsRenderer: function (value, rowData, level) {
+                return 'Ship Country: ' + value;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/groupingserverpaging/main.js b/datatable/groupingserverpaging/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/groupingserverpaging/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/groupingserverpaging/package.json b/datatable/groupingserverpaging/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/groupingserverpaging/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/headertemplate/App.vue b/datatable/headertemplate/App.vue
new file mode 100644
index 00000000..e807995a
--- /dev/null
+++ b/datatable/headertemplate/App.vue
@@ -0,0 +1,177 @@
+<template>
+    <JqxDataTable ref="myDataTable"
+                  @rowSelect="tableOnRowSelect()" @rowUnselect="tableOnRowUnselect()"
+                  :width="getWidth" :source="dataAdapter" :columns="columns">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'Photo', align: 'center', dataField: 'firstname', width: 80,
+                        renderer: (text, align, height) => {
+                            return '<div id="myCheckBox" style="z-index: 999; margin: 5px; margin-left: 30px; margin-top: 8px; margin-bottom: 3px;"></div>';
+                        },
+                        cellsRenderer: (row, column, value, rowData) => {
+                            let image = '<div style="margin: 5px; margin-bottom: 3px;">';
+                            let imgurl = '../../../images/' + rowData.firstname.toLowerCase() + '.png';
+                            let img = '<img width="60" height="60" style="display: block" src="' + imgurl + '"/>';
+                            image += img;
+                            image += '</div>';
+                            return image;
+                        }
+                    },
+                    {
+                        text: 'Details', align: 'center', dataField: 'lastname',
+                        cellsRenderer: (row, column, value, rowData) => {
+                            let container = '<div style="width: 100%; height: 100%;">'
+                            let leftcolumn = '<div style="float: left; width: 50%;">';
+                            let rightcolumn = '<div style="float: left; width: 50%;">';
+
+                            let firstname = '<div style="margin: 10px;"><b>First Name:</b> ' + rowData.firstname + '</div>';
+                            let lastname = '<div style="margin: 10px;"><b>Last Name:</b> ' + rowData.lastname + '</div>';
+                            let title = '<div style="margin: 10px;"><b>Title:</b> ' + rowData.title + '</div>';
+                            let address = '<div style="margin: 10px;"><b>Address:</b> ' + rowData.address + '</div>';
+
+                            leftcolumn += firstname;
+                            leftcolumn += lastname;
+                            leftcolumn += title;
+                            leftcolumn += address;
+                            leftcolumn += '</div>';
+                            let postalcode = '<div style="margin: 10px;"><b>Postal Code:</b> ' + rowData.postalcode + '</div>';
+                            let city = '<div style="margin: 10px;"><b>City:</b> ' + rowData.city + '</div>';
+                            let phone = '<div style="margin: 10px;"><b>Phone:</b> ' + rowData.homephone + '</div>';
+                            let hiredate = '<div style="margin: 10px;"><b>Hire Date:</b> ' + rowData.hiredate + '</div>';
+                            rightcolumn += postalcode;
+                            rightcolumn += city;
+                            rightcolumn += phone;
+                            rightcolumn += hiredate;
+                            rightcolumn += '</div>';
+                            container += leftcolumn;
+                            container += rightcolumn;
+                            container += '</div>';
+                            return container;
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.myCheckBox;
+            this.updatingSelection = false;
+            this.updatingSelectionFromDataTable = false;
+
+            const generateData = () => {
+                let data = new Array();
+                let firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne'];
+                let lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth'];
+                let titles = ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager', 'Sales Representative', 'Sales Representative', 'Inside Sales Coordinator', 'Sales Representative'];
+                let titleofcourtesy = ['Ms.', 'Dr.', 'Ms.', 'Mrs.', 'Mr.', 'Mr.', 'Mr.', 'Ms.', 'Ms.'];
+                let birthdate = ['08-Dec-48', '19-Feb-52', '30-Aug-63', '19-Sep-37', '04-Mar-55', '02-Jul-63', '29-May-60', '09-Jan-58', '27-Jan-66'];
+                let hiredate = ['01-May-92', '14-Aug-92', '01-Apr-92', '03-May-93', '17-Oct-93', '17-Oct-93', '02-Jan-94', '05-Mar-94', '15-Nov-94'];
+                let address = ['507 - 20th Ave. E. Apt. 2A', '908 W. Capital Way', '722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House', 'Miner Rd.', 'Edgeham Hollow', 'Winchester Way', '4726 - 11th Ave. N.E.', '7 Houndstooth Rd.'];
+                let city = ['Seattle', 'Tacoma', 'Kirkland', 'Redmond', 'London', 'London', 'London', 'Seattle', 'London'];
+                let postalcode = ['98122', '98401', '98033', '98052', 'SW1 8JR', 'EC2 7JR', 'RG1 9SP', '98105', 'WG2 7LT'];
+                let country = ['USA', 'USA', 'USA', 'USA', 'UK', 'UK', 'UK', 'USA', 'UK'];
+                let homephone = ['(206) 555-9857', '(206) 555-9482', '(206) 555-3412', '(206) 555-8122', '(71) 555-4848', '(71) 555-7773', '(71) 555-5598', '(206) 555-1189', '(71) 555-4444'];
+                let notes = ['Education includes a BA in psychology from Colorado State University in 1970.  She also completed "The Art of the Cold Call."  Nancy is a member of Toastmasters International.',
+                    'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
+                    'Janet has a BS degree in chemistry from Boston College (1984).  She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
+                    'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.',
+                    'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London.  He was promoted to sales manager in March 1993.  Mr. Buchanan has completed the courses "Successful Telemarketing" and "International Sales Management."  He is fluent in French.',
+                    'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986).  He has also taken the courses "Multi-Cultural Selling" and "Time Management for the Sales Professional."  He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
+                    'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company.  After completing a course entitled "Selling in Europe," he was transferred to the London office in March 1993.',
+                    'Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.',
+                    'Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.'];
+                let k = 0;
+                for (let i = 0; i < 5; i++) {
+                    let row = {};
+                    row['firstname'] = firstNames[k];
+                    row['lastname'] = lastNames[k];
+                    row['title'] = titles[k];
+                    row['titleofcourtesy'] = titleofcourtesy[k];
+                    row['birthdate'] = birthdate[k];
+                    row['hiredate'] = hiredate[k];
+                    row['address'] = address[k];
+                    row['city'] = city[k];
+                    row['postalcode'] = postalcode[k];
+                    row['country'] = country[k];
+                    row['homephone'] = homephone[k];
+                    row['notes'] = notes[k];
+                    data[i] = row;
+                    k++;
+                }
+
+                return data;
+            }
+
+            this.source = {
+                localData: generateData(),
+                dataType: 'array'
+            };
+        },
+        mounted: function () {
+            this.myCheckBox = jqwidgets.createInstance('#myCheckBox', 'jqxCheckBox', {});
+            this.myCheckBox.addEventHandler('change', this.checkBoxOnChange);
+        },
+        methods: {
+            checkBoxOnChange: function (event) {
+                if (!this.updatingSelectionFromDataTable) {
+                    let args = event.args;
+                    let rows = this.$refs.myDataTable.getRows();
+                    this.updatingSelection = true;
+                    if (args.checked) {
+                        for (let i = 0; i < rows.length; i++) {
+                            this.$refs.myDataTable.selectRow(i);
+                        }
+                    }
+                    else {
+                        this.$refs.myDataTable.clearSelection();
+                    }
+                    this.updatingSelection = false;
+                }
+            },
+            allRowsSelected: function () {
+                let selection = this.$refs.myDataTable.getSelection();
+                let rows = this.$refs.myDataTable.getRows();
+                if (selection.length === 0) {
+                    return false;
+                }
+                if (rows.length != selection.length) {
+                    return null;
+                }
+
+                return true;
+            },
+            tableOnRowSelect: function () {
+                this.updatingSelectionFromDataTable = true;
+                if (!this.updatingSelection) {
+                    this.myCheckBox.setOptions({ checked: this.allRowsSelected() });
+                }
+                this.updatingSelectionFromDataTable = false;
+            },
+            tableOnRowUnselect: function () {
+                this.updatingSelectionFromDataTable = true;
+                if (!this.updatingSelection) {
+                    this.myCheckBox.setOptions({ checked: this.allRowsSelected() });
+                }
+                this.updatingSelectionFromDataTable = false;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/headertemplate/main.js b/datatable/headertemplate/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/headertemplate/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/headertemplate/package.json b/datatable/headertemplate/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/headertemplate/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/inlinerow/App.vue b/datatable/inlinerow/App.vue
new file mode 100644
index 00000000..1ba5a196
--- /dev/null
+++ b/datatable/inlinerow/App.vue
@@ -0,0 +1,246 @@
+<template>
+    <JqxDataTable ref="myDataTable"
+                  @rowSelect="onRowSelect($event)" @rowUnelect="onRowUnselect($event)"
+                  @rowEndEdit="onRowEndEdit($event)" @rowBeginEdit="onRowBeginEdit($event)"
+                  :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :altRows="true" :editable="true" :pageable="true"
+                  :pagerButtonsCount="8" :showToolbar="true" :toolbarHeight="35"
+                  :renderToolbar="renderToolbar">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxToolTip from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Order ID', editable: false, dataField: 'OrderID', width: 200 },
+                    { text: 'Freight', dataField: 'Freight', cellsFormat: 'f', cellsAlign: 'right', align: 'right', width: 200 },
+                    {
+                        text: 'Ship Country', dataField: 'ShipCountry', width: 250, columnType: 'custom',
+                        createEditor: (row, cellValue, editor, width, height) => {
+                            // create jqxInput editor.
+                            const inputContainer = document.createElement('input');
+                            inputContainer.className = 'shipCountry';
+                            inputContainer.style.cssText = 'border: none; box-sizing: border-box; padding-left: 4px;'
+                            editor[0].appendChild(inputContainer);
+
+                            const countries = ['Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Antarctica', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', 'Botswana', 'Brazil', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burma', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Central African Republic', 'Chad', 'Chile', 'China', 'Colombia', 'Comoros', 'Congo, Democratic Republic', 'Congo, Republic of the', 'Costa Rica', 'Cote d`Ivoire', 'Croatia', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic', 'East Timor', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Fiji', 'Finland', 'France', 'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Greece', 'Greenland', 'Grenada', 'Guatemala', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jordan', 'Kazakhstan', 'Kenya', 'Kiribati', 'Korea, North', 'Korea, South', 'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macedonia', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Mauritania', 'Mauritius', 'Mexico', 'Micronesia', 'Moldova', 'Mongolia', 'Morocco', 'Monaco', 'Mozambique', 'Namibia', 'Nauru', 'Nepal', 'Netherlands', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Norway', 'Oman', 'Pakistan', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Poland', 'Portugal', 'Qatar', 'Romania', 'Russia', 'Rwanda', 'Samoa', 'San Marino', ' Sao Tome', 'Saudi Arabia', 'Senegal', 'Serbia and Montenegro', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'Spain', 'Sri Lanka', 'Sudan', 'Suriname', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', 'Togo', 'Tonga', 'Trinidad and Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'Uruguay', 'Uzbekistan', 'Vanuatu', 'Venezuela', 'Vietnam', 'Yemen', 'Zambia', 'Zimbabwe'];
+
+                            const inputOptions = {
+                                source: countries,
+                                width: '100%',
+                                height: '100%'
+                            };
+
+                            const myInput = jqwidgets.createInstance('.shipCountry', 'jqxInput', inputOptions)
+                            myInput.val(cellValue);
+                        },
+                        initEditor: (row, cellvalue, editor, celltext, width, height) => {
+                            // set the editor's current value. The callback is called each time the editor is displayed.
+                            if (!cellvalue) cellvalue = '';
+                            const inputField = editor.find('input');
+                            inputField.val(cellvalue);
+                        },
+                        getEditorValue: (row, cellvalue, editor) => {
+                            // return the editor's value.
+                            return editor.find('input').val();
+                        }
+                    },
+                    { text: 'Shipped Date', dataField: 'ShippedDate', cellsAlign: 'right', align: 'right', cellsFormat: 'dd/MM/yyyy' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.rowIndex;
+
+            this.myAddButton;
+            this.myEditButton;
+            this.myDeleteButton;
+            this.myCancelButton;
+            this.myUpdateButton;
+
+            this.source = {
+                dataFields: [
+                    { name: 'OrderID', type: 'int' },
+                    { name: 'Freight', type: 'float' },
+                    { name: 'ShipName', type: 'string' },
+                    { name: 'ShipAddress', type: 'string' },
+                    { name: 'ShipCity', type: 'string' },
+                    { name: 'ShipCountry', type: 'string' },
+                    { name: 'ShippedDate', type: 'date' }
+                ],
+                root: 'Orders',
+                record: 'Order',
+                dataType: 'xml',
+                id: 'OrderID',
+                url: '../sampledata/orderdetails.xml'
+            };
+        },
+        methods: {
+            updateButtons: function (action) {
+                switch (action) {
+                    case 'Select':
+                        this.myAddButton.setOptions({ disabled: false });
+                        this.myDeleteButton.setOptions({ disabled: false });
+                        this.myEditButton.setOptions({ disabled: false });
+                        this.myCancelButton.setOptions({ disabled: true });
+                        this.myUpdateButton.setOptions({ disabled: true });
+                        break;
+                    case 'Unselect':
+                        this.myAddButton.setOptions({ disabled: false });
+                        this.myDeleteButton.setOptions({ disabled: true });
+                        this.myEditButton.setOptions({ disabled: true });
+                        this.myCancelButton.setOptions({ disabled: true });
+                        this.myUpdateButton.setOptions({ disabled: true });
+                        break;
+                    case 'Edit':
+                        this.myAddButton.setOptions({ disabled: true });
+                        this.myDeleteButton.setOptions({ disabled: true });
+                        this.myEditButton.setOptions({ disabled: true });
+                        this.myCancelButton.setOptions({ disabled: false });
+                        this.myUpdateButton.setOptions({ disabled: false });
+                        break;
+                    case 'End Edit':
+                        this.myAddButton.setOptions({ disabled: false });
+                        this.myDeleteButton.setOptions({ disabled: false });
+                        this.myEditButton.setOptions({ disabled: false });
+                        this.myCancelButton.setOptions({ disabled: true });
+                        this.myUpdateButton.setOptions({ disabled: true });
+                        break;
+                }
+            },
+            renderToolbar: function (toolBar) {
+                const theme = jqx.theme;
+
+                const toTheme = (className) => {
+                    if (theme == '') {
+                        return className;
+                    }
+                    return className + ' ' + className + '-' + theme;
+                }
+
+                // appends buttons to the status bar.
+                let container = document.createElement('div');
+                let fragment = document.createDocumentFragment();
+
+                container.style.cssText = 'overflow: hidden; position: hidden; height: "100%"; width: "100%"';
+
+                const createButtons = (name, cssClass) => {
+
+                    const button = document.createElement('div');
+                    button.style.cssText = 'padding: 3px; margin: 2px; float: left; border: none';
+
+                    const iconDiv = document.createElement('div');
+                    iconDiv.style.cssText = 'margin: 4px; width: 16px; height: 16px;';
+                    iconDiv.className = cssClass;
+
+                    button.appendChild(iconDiv);
+                    return button;
+                }
+
+                let buttons = [
+                    createButtons('addButton', toTheme('jqx-icon-plus')),
+                    createButtons('editButton', toTheme('jqx-icon-edit')),
+                    createButtons('deleteButton', toTheme('jqx-icon-delete')),
+                    createButtons('cancelButton', toTheme('jqx-icon-cancel')),
+                    createButtons('updateButton', toTheme('jqx-icon-save'))
+                ];
+
+                for (let i = 0; i < buttons.length; i++) {
+                    fragment.appendChild(buttons[i]);
+                }
+
+                container.appendChild(fragment);
+                toolBar[0].appendChild(container);
+
+                const addButtonOptions = { height: 25, width: 25 };
+                const otherButtonsOptions = { disabled: true, height: 25, width: 25 };
+
+                // we use TypeScript way of creating widgets here
+                this.myAddButton = jqwidgets.createInstance(buttons[0], 'jqxButton', addButtonOptions);
+                this.myEditButton = jqwidgets.createInstance(buttons[1], 'jqxButton', otherButtonsOptions);
+                this.myDeleteButton = jqwidgets.createInstance(buttons[2], 'jqxButton', otherButtonsOptions);
+                this.myCancelButton = jqwidgets.createInstance(buttons[3], 'jqxButton', otherButtonsOptions);
+                this.myUpdateButton = jqwidgets.createInstance(buttons[4], 'jqxButton', otherButtonsOptions);
+
+                const addTooltipOptions = { position: 'bottom', content: 'Add' };
+                const editTooltipOptions = { position: 'bottom', content: 'Edit' };
+                const deleteTooltipOptions = { position: 'bottom', content: 'Delete' };
+                const updateTooltipOptions = { position: 'bottom', content: 'Save Changes' };
+                const cancelTooltipOptions = { position: 'bottom', content: 'Cancel' };
+
+                const myAddToolTip = jqwidgets.createInstance(buttons[0], 'jqxTooltip', addTooltipOptions);
+                const myEditToolTip = jqwidgets.createInstance(buttons[1], 'jqxTooltip', editTooltipOptions);
+                const myDeleteToolTip = jqwidgets.createInstance(buttons[2], 'jqxTooltip', deleteTooltipOptions);
+                const myCancelToolTip = jqwidgets.createInstance(buttons[3], 'jqxTooltip', cancelTooltipOptions);
+                const myUpdateToolTip = jqwidgets.createInstance(buttons[4], 'jqxTooltip', updateTooltipOptions);
+
+
+                this.myAddButton.addEventHandler('click', (event) => {
+                    if (!this.myAddButton.disabled) {
+                        //add new empty row.
+                        this.$refs.myDataTable.addRow(null, {}, 'first')
+                        //select the first row and clear the selection.
+                        this.$refs.myDataTable.clearSelection();
+                        this.$refs.myDataTable.selectRow(0);
+                        //edit the new row.
+                        this.$refs.myDataTable.beginRowEdit(0);
+                    }
+                });
+
+                this.myEditButton.addEventHandler('click', (event) => {
+                    if (!this.myEditButton.disabled) {
+                        this.$refs.myDataTable.beginRowEdit(this.rowIndex);
+                    }
+                });
+
+                this.myDeleteButton.addEventHandler('click', (event) => {
+                    if (!this.myDeleteButton.disabled) {
+                        this.$refs.myDataTable.deleteRow(this.rowIndex);
+                    }
+                });
+
+                this.myCancelButton.addEventHandler('click', (event) => {
+                    if (!this.myCancelButton.disabled) {
+                        //cancel changes.
+                        this.$refs.myDataTable.endRowEdit(this.rowIndex, true);
+                    }
+                });
+
+                this.myUpdateButton.addEventHandler('click', (event) => {
+                    if (!this.myUpdateButton.disabled) {
+                        //save changes.
+                        this.$refs.myDataTable.endRowEdit(this.rowIndex, false);
+                    }
+                });
+            },
+            onRowSelect: function (event) {
+                this.rowIndex = event.args.index;
+                this.updateButtons('Select');
+            },
+            onRowUnselect: function (event) {
+                this.updateButtons('Unselect');
+            },
+            onRowEndEdit: function (event) {
+                this.updateButtons('End Edit');
+            },
+            onRowBeginEdit: function (event) {
+                this.updateButtons('Edit');
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/inlinerow/main.js b/datatable/inlinerow/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/inlinerow/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/inlinerow/package.json b/datatable/inlinerow/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/inlinerow/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/jsondata/App.vue b/datatable/jsondata/App.vue
new file mode 100644
index 00000000..2c47e0df
--- /dev/null
+++ b/datatable/jsondata/App.vue
@@ -0,0 +1,46 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :columnsResize="true" :pageable="true" :pagerButtonsCount="10">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', dataField: 'name', width: 300 },
+                    { text: 'Beverage Type', dataField: 'type', width: 300 },
+                    { text: 'Calories', dataField: 'calories', width: 180 },
+                    { text: 'Total Fat', dataField: 'totalfat', width: 120 },
+                    { text: 'Protein', dataField: 'protein' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'name', type: 'string' },
+                    { name: 'type', type: 'string' },
+                    { name: 'calories', type: 'int' },
+                    { name: 'totalfat', type: 'string' },
+                    { name: 'protein', type: 'string' }
+                ],
+                id: 'id',
+                url: '../sampledata/beverages.txt'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/jsondata/main.js b/datatable/jsondata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/jsondata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/jsondata/package.json b/datatable/jsondata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/jsondata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/keyboardnavigation/App.vue b/datatable/keyboardnavigation/App.vue
new file mode 100644
index 00000000..a148a2ec
--- /dev/null
+++ b/datatable/keyboardnavigation/App.vue
@@ -0,0 +1,74 @@
+<template>
+    <div>
+        <JqxDataTable ref="myDataTable" @bindingComplete="tableOnBindingComplete()"
+                      :width="getWidth" :source="dataAdapter" :columns="columns"
+                      :pageable="true" :editable="true">
+        </JqxDataTable>
+
+        <div style="font-family: Verdana; font-size: 12px; width: 670px">
+            <ul>
+                <li><b>Left Arrow</b> key is pressed - Navigates to the Previous Page. If Row Details is enabled, Collapses the Row.</li>
+                <li><b>Right Arrow</b> key is pressed - Navigates to the Next Page. If Row Details is enabled, Expands the Row.</li>
+                <li><b>Up Arrow</b> key is pressed - Selects the row above.</li>
+                <li><b>Down Arrow</b> key is pressed - Selects the row below.</li>
+                <li><b>Page Up/Down</b> is pressed - Navigate Up or Down with one page.</li>
+                <li><b>Home/End</b> is pressed - Navigate to the first or last row on the current page.</li>
+                <li><b>Enter</b> key is pressed - Saves the Edited Row.</li>
+                <li><b>Esc</b> key is pressed - Closes all Editors and Cancels the changes.</li>
+                <li><b>F2</b> key is pressed -  Enters edit mode for the currently selected row.</li>
+                <li><b>Shift+Arrow</b> key extends the selection.</li>
+                <li><b>Shift</b> extends the selection when an end user clicks on a row.</li>
+                <li><b>Ctrl</b> key is pressed - extends the selection when an end user clicks on a row. </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Ship Name', dataField: 'ShipName', width: 350, align: 'left', cellsAlign: 'left' },
+                    { text: 'Freight', dataField: 'Freight', width: 180, align: 'right', cellsFormat: 'F2', cellsAlign: 'right' },
+                    { text: 'Ship Address', dataField: 'ShipAddress', align: 'left', width: 350, cellsAlign: 'left' },
+                    { text: 'Ship City', dataField: 'ShipCity', width: 100, align: 'left', cellsAlign: 'left' },
+                    { text: 'Ship Country', dataField: 'ShipCountry', align: 'left', cellsAlign: 'left' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataType: 'xml',
+                dataFields: [
+                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
+                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:OrderID',
+                url: '../sampledata/orders.xml'
+            };
+        },
+        methods: {
+            tableOnBindingComplete: function () {
+                this.$refs.myDataTable.focus();
+                this.$refs.myDataTable.selectRow(0);
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/keyboardnavigation/main.js b/datatable/keyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/keyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/keyboardnavigation/package.json b/datatable/keyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/keyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/localdata/App.vue b/datatable/localdata/App.vue
new file mode 100644
index 00000000..69c218c5
--- /dev/null
+++ b/datatable/localdata/App.vue
@@ -0,0 +1,47 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :columnsResize="true" :pageable="true" :pagerButtonsCount="10">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', dataField: 'firstname', width: 200 },
+                    { text: 'Last Name', dataField: 'lastname', width: 200 },
+                    { text: 'Product', editable: false, dataField: 'productname', width: 180 },
+                    { text: 'Quantity', dataField: 'quantity', width: 80, cellsAlign: 'right', align: 'right' },
+                    { text: 'Unit Price', dataField: 'price', width: 90, cellsAlign: 'right', align: 'right', cellsFormat: 'c2' },
+                    { text: 'Total', dataField: 'total', cellsAlign: 'right', align: 'right', cellsFormat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localData: generateData(200),
+                dataType: 'array',
+                dataFields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'total', type: 'number' }
+                    ]
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/localdata/main.js b/datatable/localdata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/localdata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/localdata/package.json b/datatable/localdata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/localdata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/localization/App.vue b/datatable/localization/App.vue
new file mode 100644
index 00000000..5b944470
--- /dev/null
+++ b/datatable/localization/App.vue
@@ -0,0 +1,48 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :pageable="true" :editable="true" :filterable="true"
+                  :localization="localizationObject">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', dataField: 'name', width: 215 },
+                    { text: 'Produkt', dataField: 'productname', width: 220 },
+                    { text: 'Datum', dataField: 'date', width: 210, cellsAlign: 'right', cellsFormat: 'd' },
+                    { text: 'Qt.', dataField: 'quantity', cellsAlign: 'right', width: 60 },
+                    { text: 'Preis', dataField: 'price', cellsFormat: "c2", cellsAlign: 'right' }
+                ],
+                localizationObject: getLocalization('de')
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(250, false),
+                dataFields:
+                    [
+                        { name: 'name', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/localization/main.js b/datatable/localization/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/localization/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/localization/package.json b/datatable/localization/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/localization/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/lockrow/App.vue b/datatable/lockrow/App.vue
new file mode 100644
index 00000000..95fd314e
--- /dev/null
+++ b/datatable/lockrow/App.vue
@@ -0,0 +1,60 @@
+<template>
+    <JqxDataTable ref="myDataTable" @bindingComplete="tableOnBindingComplete()"
+                  :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :pageable="true" :editable="true" :filterable="true"
+                  :altRows="true" :pagerButtonsCount="8">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Order ID', editable: false, dataField: 'OrderID', width: 250 },
+                    { text: 'Freight', dataField: 'Freight', cellsFormat: 'f2', cellsAlign: 'right', align: 'right', width: 250 },
+                    { text: 'Ship Country', dataField: 'ShipCountry', width: 150 },
+                    { text: 'Shipped Date', dataField: 'ShippedDate', cellsAlign: 'right', align: 'right', cellsFormat: 'dd/MM/yyyy' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataFields:
+                    [
+                        { name: 'OrderID', type: 'int' },
+                        { name: 'Freight', type: 'float' },
+                        { name: 'ShipName', type: 'string' },
+                        { name: 'ShipAddress', type: 'string' },
+                        { name: 'ShipCity', type: 'string' },
+                        { name: 'ShipCountry', type: 'string' },
+                        { name: 'ShippedDate', type: 'date' }
+                    ],
+                root: 'Orders',
+                record: 'Order',
+                dataType: 'xml',
+                id: 'OrderID',
+                url: '../sampledata/orderdetails.xml',
+            }
+        },
+        methods: {
+            tableOnBindingComplete: function () {
+                this.$refs.myDataTable.beginUpdate();
+                this.$refs.myDataTable.lockRow(1);
+                this.$refs.myDataTable.lockRow(3);
+                this.$refs.myDataTable.lockRow(5);
+                this.$refs.myDataTable.endUpdate();
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/lockrow/main.js b/datatable/lockrow/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/lockrow/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/lockrow/package.json b/datatable/lockrow/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/lockrow/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/nestedtables/App.vue b/datatable/nestedtables/App.vue
new file mode 100644
index 00000000..468d74da
--- /dev/null
+++ b/datatable/nestedtables/App.vue
@@ -0,0 +1,128 @@
+<template>
+    <JqxDataTable ref="myDataTable"
+                  :width="getWidth" :source="source" :columns="columns"
+                  :pageable="true" :rowDetails="true" :pageSize="3"
+                  :initRowDetails="initRowDetails" :ready="ready">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                source: {
+                    dataFields: [
+                        { name: 'FirstName', type: 'string' },
+                        { name: 'LastName', type: 'string' },
+                        { name: 'Title', type: 'string' },
+                        { name: 'Address', type: 'string' },
+                        { name: 'City', type: 'string' }
+                    ],
+                    root: 'Employees',
+                    record: 'Employee',
+                    id: 'EmployeeID',
+                    dataType: 'xml',
+                    url: '../sampledata/employees.xml'
+                },
+                columns: [
+                    { text: 'First Name', dataField: 'FirstName', width: 250 },
+                    { text: 'Last Name', dataField: 'LastName', width: 250 },
+                    { text: 'Title', dataField: 'Title' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.count = 0;
+            this.nestedTables = [];
+
+            const ordersSource = {
+                dataFields: [
+                    { name: 'EmployeeID', type: 'string' },
+                    { name: 'ShipName', type: 'string' },
+                    { name: 'ShipAddress', type: 'string' },
+                    { name: 'ShipCity', type: 'string' },
+                    { name: 'ShipCountry', type: 'string' },
+                    { name: 'ShippedDate', type: 'date' }
+                ],
+                root: 'Orders',
+                record: 'Order',
+                dataType: 'xml',
+                url: '../sampledata/orderdetails.xml'
+            };
+
+            this.ordersDataAdapter = new jqx.dataAdapter(ordersSource, { autoBind: true });
+        },
+        methods: {
+            initRowDetails: function (id, row, element, rowinfo) {
+                let container = document.createElement('div');
+                container.style.margin = '10px';
+                element[0].appendChild(container);
+
+                let nestedDataTable = element[0].children[0];
+                let containerID = `nestedDataTable${this.count}`;
+                nestedDataTable.id = containerID;
+
+                let filterGroup = new jqx.filter();
+                let filter_or_operator = 1;
+                let filterValue = id;
+                let filterCondition = 'equal';
+                let filter = filterGroup.createfilter('stringfilter', filterValue, filterCondition);
+                // fill the orders depending on the id.
+                let orders = this.ordersDataAdapter.records;
+                let ordersbyid = [];
+                for (let m = 0; m < orders.length; m++) {
+                    let result = filter.evaluate(orders[m]['EmployeeID']);
+                    if (result)
+                        ordersbyid.push(orders[m]);
+                }
+                let ordersSource = {
+                    dataFields: [
+                        { name: 'EmployeeID', type: 'string' },
+                        { name: 'ShipName', type: 'string' },
+                        { name: 'ShipAddress', type: 'string' },
+                        { name: 'ShipCity', type: 'string' },
+                        { name: 'ShipCountry', type: 'string' },
+                        { name: 'ShippedDate', type: 'date' }
+                    ],
+                    id: 'OrderID',
+                    localdata: ordersbyid
+                }
+                if (nestedDataTable != null) {
+                    let nestedDataTableAdapter = new jqx.dataAdapter(ordersSource);
+                    let columns = [
+                        { text: 'Ship Name', dataField: 'ShipName', width: 200 },
+                        { text: 'Ship Address', dataField: 'ShipAddress', width: 200 },
+                        { text: 'Ship City', dataField: 'ShipCity', width: 150 },
+                        { text: 'Ship Country', dataField: 'ShipCountry', width: 150 },
+                        { text: 'Shipped Date', dataField: 'ShippedDate', cellsFormat: 'd', width: 200 }
+                    ];
+
+                    let options =
+                        {
+                            width: 820, height: 180, columns: columns,
+                            pageable: true, source: nestedDataTableAdapter
+                        };
+
+                    jqwidgets.createInstance(`#${containerID}`, 'jqxDataTable', options);
+
+                    // store the nested Data Tables and use the Employee ID as a key.
+                    this.nestedTables[id] = nestedDataTable;
+                    this.count++;
+                }
+            },
+            ready: function () {
+                this.$refs.myDataTable.showDetails(1);
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/nestedtables/main.js b/datatable/nestedtables/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/nestedtables/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/nestedtables/package.json b/datatable/nestedtables/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/nestedtables/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/paging/App.vue b/datatable/paging/App.vue
new file mode 100644
index 00000000..9e6cc239
--- /dev/null
+++ b/datatable/paging/App.vue
@@ -0,0 +1,44 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="source" :columns="columns"
+                  :pageable="true" :altRows="true" :pagerMode="'advanced'">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                source: {
+                    localData: generatedata(200, false),
+                    dataType: 'array',
+                    datafields:
+                        [
+                            { name: 'firstname', type: 'string' },
+                            { name: 'lastname', type: 'string' },
+                            { name: 'productname', type: 'string' },
+                            { name: 'quantity', type: 'number' },
+                            { name: 'price', type: 'number' },
+                            { name: 'total', type: 'number' }
+                        ]
+                },
+                columns: [
+                    { text: 'Name', dataField: 'firstname', width: 150 },
+                    { text: 'Last Name', dataField: 'lastname', width: 150 },
+                    { text: 'Product', editable: false, dataField: 'productname', width: 250 },
+                    { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', dataField: 'price', width: 80, cellsalign: 'right', cellsFormat: 'c2' },
+                    { text: 'Total', dataField: 'total', cellsalign: 'right', cellsFormat: 'c2' }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/paging/main.js b/datatable/paging/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/paging/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/paging/package.json b/datatable/paging/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/paging/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/pagingapi/App.vue b/datatable/pagingapi/App.vue
new file mode 100644
index 00000000..e0430b34
--- /dev/null
+++ b/datatable/pagingapi/App.vue
@@ -0,0 +1,142 @@
+<template>
+    <div>
+        <JqxDataTable ref="myDataTable" style="float: left"
+                      @pageChanged="tableOnPageChanged($event)" @pageSizeChanged="tableOnPageSizeChanged($event)"
+                      :width="650" :source="source" :columns="columns"
+                      :pageable="true" :altRows="true" :pagerPosition="'both'">
+        </JqxDataTable>
+
+        <div style="font-size: 13px; font-family: Verdana; float: left; margin-left: 30px">
+            <div><strong>Settings</strong></div>
+            <div style="margin-top: 10px">
+                <div>Pager Mode:</div>
+
+                <JqxDropDownList style="margin-top: 5px" @select="pagerModeListOnSelect($event)"
+                                 :width="120" :height="25" :selectedIndex="0"
+                                 :source="['default','advanced']" :autoDropDownHeight="true">
+                </JqxDropDownList>
+
+                <div style="margin-top: 10px">Pager Position:</div>
+
+                <JqxDropDownList style="margin-top: 5px" @select="pagerPositionListOnSelect($event)"
+                                 :width="120" :height="25" :selectedIndex="2"
+                                 :source="['top','bottom','both']" :autoDropDownHeight="true">
+                </JqxDropDownList>
+
+                <div style="margin-top: 10px">Go to Page:</div>
+
+                <JqxInput ref="myInput" style="margin-top: 5px; margin-right: 5px; float: left"
+                          :width="120" :height="25" :value="1">
+                </JqxInput>
+
+                <div style="margin-top: 6px; float: left">
+                    <JqxButton @click="btnOnClick()" :height="18" :width="40">
+                        Apply
+                    </JqxButton>
+                </div>
+
+
+            </div>
+            <div style="clear: both;"></div>
+            <div style="margin-top: 10px;">
+                <div>Event Log:</div>
+
+                <JqxPanel ref="myPanel" style="margin-top: 5px"
+                          :width="150" :height="150">
+                </JqxPanel>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxDataTable,
+            JqxDropDownList,
+            JqxInput,
+            JqxButton,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                source: {
+                    localData: generatedata(200, false),
+                    dataType: 'array',
+                    datafields:
+                        [
+                            { name: 'firstname', type: 'string' },
+                            { name: 'lastname', type: 'string' },
+                            { name: 'productname', type: 'string' },
+                            { name: 'quantity', type: 'number' },
+                            { name: 'price', type: 'number' },
+                            { name: 'total', type: 'number' }
+                        ]
+                },
+                columns: [
+                    { text: 'Name', dataField: 'firstname', width: 200 },
+                    { text: 'Last Name', dataField: 'lastname', width: 200 },
+                    { text: 'Product', editable: false, dataField: 'productname', width: 180 },
+                    { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', dataField: 'price', width: 80, cellsalign: 'right', cellsFormat: 'c2' },
+                    { text: 'Total', dataField: 'total', width: 80, cellsalign: 'right', cellsFormat: 'c2' }
+                ]
+            }
+        },
+        methods: {
+            pagerModeListOnSelect: function (event) {
+                if (event.args.index == 0) {
+                    this.$refs.myDataTable.pagerMode = 'default';
+                }
+                else {
+                    this.$refs.myDataTable.pagerMode = 'advanced';
+                }
+            },
+            pagerPositionListOnSelect: function (event) {
+                if (event.args.index == 0) {
+                    this.$refs.myDataTable.pagerPosition = 'top';
+                }
+                else if (event.args.index == 1) {
+                    this.$refs.myDataTable.pagerPosition = 'bottom';
+                }
+                else {
+                    this.$refs.myDataTable.pagerPosition = 'both';
+                }
+            },
+            btnOnClick: function () {
+                let page = parseInt(this.$refs.myInput.val());
+                if (!isNaN(page)) {
+                    page--;
+                    if (page < 0) page = 0;
+                    this.$refs.myDataTable.goToPage(page);
+                }
+            },
+            tableOnPageChanged: function (event) {
+                let panel = this.$refs.myPanel.$el;
+                let count = panel.getElementsByClassName('logged');
+                if (count.length >= 5) {
+                    this.$refs.myPanel.clearcontent();
+                }
+                let args = event.args;
+                let eventData = '<div>Page:' + (1 + args.pagenum) + ', Page Size: ' + args.pageSize + '</div>';
+                this.$refs.myPanel.prepend('<div class="logged" style="margin-top: 5px;">' + eventData + '</div>');
+            },
+            tableOnPageSizeChanged: function (event) {
+                this.$refs.myPanel.clearcontent();
+                let args = event.args;
+                let eventData = '<div>Page:' + (1 + args.pagenum) + ', Page Size: ' + args.pageSize + ', Old Page Size: ' + args.oldpageSize + '</div>';
+                this.$refs.myPanel.prepend('<div style="margin-top: 5px;">' + eventData + '</div>');
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/pagingapi/main.js b/datatable/pagingapi/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/pagingapi/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/pagingapi/package.json b/datatable/pagingapi/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/pagingapi/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/pinnedfrozencolumn/App.vue b/datatable/pinnedfrozencolumn/App.vue
new file mode 100644
index 00000000..0e73fa23
--- /dev/null
+++ b/datatable/pinnedfrozencolumn/App.vue
@@ -0,0 +1,47 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="source" :columns="columns"
+                  :pageable="true" :sortable="true" :columnsResize="true"
+                  :pagerButtonsCount="10">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                source: {
+                    dataType: 'xml',
+                    dataFields: [
+                        { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                        { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                        { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
+                        { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
+                        { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
+                        { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
+                    ],
+                    root: 'entry',
+                    record: 'content',
+                    id: 'm\\:properties>d\\:OrderID',
+                    url: '../sampledata/orders.xml'
+                },
+                columns: [
+                    { text: 'Ship Name', dataField: 'ShipName', pinned: true, width: 300 },
+                    { text: 'Ship City', dataField: 'ShipCity', width: 250 },
+                    { text: 'Ship Address', dataField: 'ShipAddress', width: 350 },
+                    { text: 'Ship Country', dataField: 'ShipCountry', width: 150 },
+                    { text: 'Shipped Date', dataField: 'ShippedDate', width: 250, cellsFormat: 'D' },
+                    { text: 'Freight', dataField: 'Freight', width: 100, cellsFormat: 'f2', cellsalign: 'right' }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/pinnedfrozencolumn/main.js b/datatable/pinnedfrozencolumn/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/pinnedfrozencolumn/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/pinnedfrozencolumn/package.json b/datatable/pinnedfrozencolumn/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/pinnedfrozencolumn/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/remotedata/App.vue b/datatable/remotedata/App.vue
new file mode 100644
index 00000000..b04bbb07
--- /dev/null
+++ b/datatable/remotedata/App.vue
@@ -0,0 +1,52 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :pageable="true" :columnsResize="true" :pagerButtonsCount="10">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source, {
+                    formatData: (data) => {
+                        data.featureClass = 'P';
+                        data.style = 'full';
+                        data.username = 'jqwidgets';
+                        data.maxRows = 50;
+
+                        return data;
+                    }
+                }
+                ),
+                columns: [
+                    { text: 'Country Name', dataField: 'countryName', width: 200 },
+                    { text: 'City', dataField: 'name', width: 250 },
+                    { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
+                    { text: 'Continent Code', dataField: 'continentCode' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataType: 'jsonp',
+                dataFields: [
+                    { name: 'countryName', type: 'string' },
+                    { name: 'name', type: 'string' },
+                    { name: 'population', type: 'float' },
+                    { name: 'continentCode', type: 'string' }
+                ],
+                url: 'http://api.geonames.org/searchJSON'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/remotedata/main.js b/datatable/remotedata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/remotedata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/remotedata/package.json b/datatable/remotedata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/remotedata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/righttoleftlayout/App.vue b/datatable/righttoleftlayout/App.vue
new file mode 100644
index 00000000..56710e10
--- /dev/null
+++ b/datatable/righttoleftlayout/App.vue
@@ -0,0 +1,47 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :altRows="true" :pageable="true" :sortable="true" :rtl="true">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', dataField: 'firstname', align: 'right', cellsAlign: 'right', width: 150 },
+                    { text: 'Last Name', dataField: 'lastname', align: 'right', cellsAlign: 'right', width: 150 },
+                    { text: 'Product', editable: false, dataField: 'productname', align: 'right', cellsAlign: 'right', width: 180 },
+                    { text: 'Quantity', dataField: 'quantity', width: 180, cellsAlign: 'left', align: 'left' },
+                    { text: 'Unit Price', dataField: 'price', width: 180, cellsAlign: 'left', align: 'left' },
+                    { text: 'Total', dataField: 'total', width: 180, cellsAlign: 'left', align: 'left', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localData: generatedata(200, false),
+                dataType: 'array',
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'total', type: 'number' }
+                    ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/righttoleftlayout/main.js b/datatable/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/righttoleftlayout/package.json b/datatable/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/rowdetails/App.vue b/datatable/rowdetails/App.vue
new file mode 100644
index 00000000..646893c5
--- /dev/null
+++ b/datatable/rowdetails/App.vue
@@ -0,0 +1,172 @@
+<template>
+    <JqxDataTable ref="myDataTable"
+                  :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :rowDetails="true" :pageable="true" :sortable="true"
+                  :pageSize="3" :initRowDetails="initRowDetails">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+    import JqxTabs from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', dataField: 'firstname', width: 200 },
+                    { text: 'Last Name', dataField: 'lastname', width: 200 },
+                    { text: 'Title', dataField: 'title', width: 200 },
+                    { text: 'City', dataField: 'city', width: 100 },
+                    { text: 'Country', dataField: 'country' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const generateData = () => {
+                let data = new Array();
+                let firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne'];
+                let lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth'];
+                let titles = ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager', 'Sales Representative', 'Sales Representative', 'Inside Sales Coordinator', 'Sales Representative'];
+                let titleofcourtesy = ['Ms.', 'Dr.', 'Ms.', 'Mrs.', 'Mr.', 'Mr.', 'Mr.', 'Ms.', 'Ms.'];
+                let birthdate = ['08-Dec-48', '19-Feb-52', '30-Aug-63', '19-Sep-37', '04-Mar-55', '02-Jul-63', '29-May-60', '09-Jan-58', '27-Jan-66'];
+                let hiredate = ['01-May-92', '14-Aug-92', '01-Apr-92', '03-May-93', '17-Oct-93', '17-Oct-93', '02-Jan-94', '05-Mar-94', '15-Nov-94'];
+                let address = ['507 - 20th Ave. E. Apt. 2A', '908 W. Capital Way', '722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House', 'Miner Rd.', 'Edgeham Hollow', 'Winchester Way', '4726 - 11th Ave. N.E.', '7 Houndstooth Rd.'];
+                let city = ['Seattle', 'Tacoma', 'Kirkland', 'Redmond', 'London', 'London', 'London', 'Seattle', 'London'];
+                let postalcode = ['98122', '98401', '98033', '98052', 'SW1 8JR', 'EC2 7JR', 'RG1 9SP', '98105', 'WG2 7LT'];
+                let country = ['USA', 'USA', 'USA', 'USA', 'UK', 'UK', 'UK', 'USA', 'UK'];
+                let homephone = ['(206) 555-9857', '(206) 555-9482', '(206) 555-3412', '(206) 555-8122', '(71) 555-4848', '(71) 555-7773', '(71) 555-5598', '(206) 555-1189', '(71) 555-4444'];
+                let notes = ['Education includes a BA in psychology from Colorado State University in 1970.  She also completed "The Art of the Cold Call".  Nancy is a member of Toastmasters International.',
+                    'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
+                    'Janet has a BS degree in chemistry from Boston College (1984).  She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
+                    'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.',
+                    'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London.  He was promoted to sales manager in March 1993.  Mr. Buchanan has completed the courses "Successful Telemarketing" and "International Sales Management",  He is fluent in French.',
+                    'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986).  He has also taken the courses "Multi-Cultural Selling" and "Time Management for the Sales Professional".  He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
+                    'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company.  After completing a course entitled "Selling in Europe", he was transferred to the London office in March 1993.',
+                    'Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.',
+                    'Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.'];
+                let k = 0;
+                for (let i = 0; i < firstNames.length; i++) {
+                    let row = {};
+                    row['firstname'] = firstNames[k];
+                    row['lastname'] = lastNames[k];
+                    row['title'] = titles[k];
+                    row['titleofcourtesy'] = titleofcourtesy[k];
+                    row['birthdate'] = birthdate[k];
+                    row['hiredate'] = hiredate[k];
+                    row['address'] = address[k];
+                    row['city'] = city[k];
+                    row['postalcode'] = postalcode[k];
+                    row['country'] = country[k];
+                    row['homephone'] = homephone[k];
+                    row['notes'] = notes[k];
+                    data[i] = row;
+                    k++;
+                }
+
+                return data;
+            };
+
+            this.source = {
+                localData: generateData(),
+                dataType: 'array'
+            };
+        },
+        mounted: function () {
+            this.$refs.myDataTable.showDetails(0);
+        },
+        methods: {
+            initRowDetails: function (id, row, element, rowInfo) {
+                // update the details height.
+                rowInfo.detailsHeight = 200;
+
+                let container = document.createElement('div');
+                container.style.margin = '10px';
+                container.innerHTML = '<ul style="margin-left: 30px;"><li class="title">Title</li><li>Notes</li></ul><div class="information"></div><div class="notes"></div>';
+                element[0].appendChild(container);
+
+                let tabsdiv = element[0].children[0];
+
+                if (tabsdiv !== null) {
+                    let information = tabsdiv.getElementsByClassName('information');
+                    let notes = tabsdiv.getElementsByClassName('notes');
+                    let title = tabsdiv.getElementsByClassName('title');
+
+                    title[0].innerHTML = row.firstname;
+
+                    let container = document.createElement('div');
+                    container.style.margin = '5px';
+                    information[0].appendChild(container);
+
+                    let photocolumn = document.createElement('div');
+                    let leftcolumn = document.createElement('div');
+                    let rightcolumn = document.createElement('div');
+
+                    photocolumn.style.cssText = 'float: left; width: 15%';
+                    leftcolumn.style.cssText = 'float: left; width: 45%';
+                    rightcolumn.style.cssText = 'float: left; width: 40%';
+
+                    container.appendChild(photocolumn);
+                    container.appendChild(leftcolumn);
+                    container.appendChild(rightcolumn);
+
+                    let image = document.createElement('div');
+                    image.style.marginTop = '10px';
+
+                    let photo = document.createElement('div');
+                    photo.style.margin = '10px';
+                    photo.className = 'jqx-rc-all';
+                    photo.innerHTML = '<b>Photo:</b>';
+
+                    let img = document.createElement('img');
+                    img.height = 60;
+                    img.style.marginLeft = '10px';
+                    img.src = '../../../images/' + row.firstname.toLowerCase() + '.png';
+
+                    image.appendChild(photo);
+                    image.appendChild(img);
+                    photocolumn.appendChild(image);
+
+                    let firstname = '<div style="margin: 10px;"><b>First Name:</b> ' + row.firstname + '</div>';
+                    let lastname = '<div style="margin: 10px;"><b>Last Name:</b> ' + row.lastname + '</div>';
+                    title = '<div style="margin: 10px;"><b>Title:</b> ' + row.title + '</div>';
+                    let address = '<div style="margin: 10px;"><b>Address:</b> ' + row.address + '</div>';
+
+                    leftcolumn.insertAdjacentHTML('beforeend', firstname);
+                    leftcolumn.insertAdjacentHTML('beforeend', lastname);
+                    leftcolumn.insertAdjacentHTML('beforeend', title);
+                    leftcolumn.insertAdjacentHTML('beforeend', address);
+
+                    let postalcode = '<div style="margin: 10px;"><b>Postal Code:</b> ' + row.postalcode + '</div>';
+                    let city = '<div style="margin: 10px;"><b>City:</b> ' + row.city + '</div>';
+                    let phone = '<div style="margin: 10px;"><b>Phone:</b> ' + row.homephone + '</div>';
+                    let hiredate = '<div style="margin: 10px;"><b>Hire Date:</b> ' + row.hiredate + '</div>';
+
+                    rightcolumn.insertAdjacentHTML('beforeend', postalcode);
+                    rightcolumn.insertAdjacentHTML('beforeend', city);
+                    rightcolumn.insertAdjacentHTML('beforeend', phone);
+                    rightcolumn.insertAdjacentHTML('beforeend', hiredate);
+
+                    let notesContainer = document.createElement('div');
+                    notesContainer.style.cssText = 'white-space: normal; margin: 5px;';
+                    notesContainer.innerHTML = '<span>' + row.notes + '</span>';
+
+                    notes[0].appendChild(notesContainer);
+
+                    tabsdiv.className = 'vueTabs';
+
+                    jqwidgets.createInstance('.vueTabs', 'jqxTabs', { width: 820, height: 170 })
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/rowdetails/main.js b/datatable/rowdetails/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/rowdetails/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/rowdetails/package.json b/datatable/rowdetails/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/rowdetails/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/rowselectionhover/App.vue b/datatable/rowselectionhover/App.vue
new file mode 100644
index 00000000..73c1ab70
--- /dev/null
+++ b/datatable/rowselectionhover/App.vue
@@ -0,0 +1,149 @@
+<template>
+    <div>
+        <JqxDataTable ref="myDataTable" style="float: left"
+                      @rowSelect="tableOnRowSelect($event)" @rowUnselect="tableOnRowUnselect($event)"
+                      :width="650" :source="dataAdapter" :columns="columns" :altRows="true">
+        </JqxDataTable>
+
+        <div style="float: left; margin-top: 10px; margin-left: 10px">
+            <div><strong>Settings</strong></div>
+            Select Row:
+
+            <JqxInput ref="myInput"
+                      :width="60" :height="30" :value="0">
+            </JqxInput>
+
+            <br />
+            <br />
+
+            <JqxButton style="float: left; padding-bottom: 2px" @click="rowSelectBtnOnClick()"
+                       :width="100" :height="20">
+                Select
+            </JqxButton>
+
+            <JqxButton style="float: left; margin-left: 5px; padding-bottom: 2px" @click="clearSelectionBtnOnClick()"
+                       :width="130" :height="20">
+                Clear Selection
+            </JqxButton>
+
+            <div style="clear: both"></div>
+            <div style="margin-top:10px" ref="selectedRows"></div>
+            <br />
+
+            <div>Selection Mode:</div>
+
+            <JqxDropDownList @change="dropDownOnChange($event)"
+                             :height="30" :source="['Single Row','Multiple Rows']"
+                             :selectedIndex="1" :autoDropDownHeight="true">
+            </JqxDropDownList>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDataTable,
+            JqxInput,
+            JqxButton,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', dataField: 'firstname', width: 200 },
+                    { text: 'Last Name', dataField: 'lastname', width: 200 },
+                    { text: 'Product', dataField: 'productname', width: 180 },
+                    { text: 'Unit Price', dataField: 'price', width: 90, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
+                    { text: 'Quantity', dataField: 'quantity', width: 80, align: 'right', cellsAlign: 'right' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localData: generatedata(15, false),
+                datatype: "array",
+                dataFields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' }
+                    ]
+            };
+        },
+        methods: {
+            selectionInfo: function () {
+                // gets selected row indexes. The method returns an Array of indexes.
+                let selection = this.$refs.myDataTable.getSelection();
+                let selectedRows = '<br/>Selected Row Indexes:<br/>';
+                if (selection && selection.length > 0) {
+                    let rows = this.$refs.myDataTable.getRows();
+                    for (let i = 0; i < selection.length; i++) {
+                        let rowData = selection[i];
+                        selectedRows += rows.indexOf(rowData);
+                        if (i < selection.length - 1) {
+                            selectedRows += ', ';
+                        }
+                        if (i > 1 && i % 8 === 0) {
+                            selectedRows += '<br/>';
+                        }
+                    }
+                }
+                this.$refs.selectedRows.innerHTML = selectedRows;
+            },
+            dropDownOnChange: function (event) {
+                switch (event.args.index) {
+                    case 0:
+                        // disable multiple rows selection with Shift or Ctrl.
+                        this.$refs.myDataTable.selectionMode = 'singleRow';
+                        break;
+                    case 1:
+                        // enable multiple rows selection with Shift or Ctrl.
+                        this.$refs.myDataTable.selectionMode = 'multipleRows';
+                        break;
+                }
+            },
+            rowSelectBtnOnClick: function () {
+                let index = parseInt(this.$refs.myInput.val());
+                this.$refs.myDataTable.selectRow(index);
+            },
+            clearSelectionBtnOnClick: function () {
+                this.$refs.myDataTable.clearSelection();
+            },
+            tableOnRowSelect: function (event) {
+                // event arguments
+                let args = event.args;
+                // row index
+                let index = args.index;
+                // row data
+                let rowData = args.row;
+                // row key
+                let rowKey = args.key;
+                this.selectionInfo();
+            },
+            tableOnRowUnselect: function (event) {
+                // event arguments
+                let args = event.args;
+                // row index
+                let index = args.index;
+                // row data
+                let rowData = args.row;
+                // row key
+                let rowKey = args.key;
+                this.selectionInfo();
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/rowselectionhover/main.js b/datatable/rowselectionhover/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/rowselectionhover/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/rowselectionhover/package.json b/datatable/rowselectionhover/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/rowselectionhover/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/rowtemplate/App.vue b/datatable/rowtemplate/App.vue
new file mode 100644
index 00000000..1055ab28
--- /dev/null
+++ b/datatable/rowtemplate/App.vue
@@ -0,0 +1,149 @@
+<template>
+    <div>
+        <div class="cart-top">
+            <p ref="productNumber">0 products</p>
+        </div>
+        <div>
+            <div>
+                <div class="tag-title">
+                    <h4>Welcome to our online shop!</h4>
+                    <span class="tag-title-info"></span>
+                </div>
+            </div>
+        </div>
+        <br />
+
+        <JqxDataTable :width="640" :source="dataAdapter" :columns="columns" :rendered="rendered"
+                      :altRows="true" :pageable="true" :sortable="true" :enableHover="true"
+                      :pagerButtonsCount="3" :selectionMode="'none'" :pageSize="2">
+        </JqxDataTable>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'Products', align: 'left', dataField: 'model',
+                        cellsRenderer: (row, column, value, rowData) => {
+                            let laptops = rowData.laptops;
+                            let container = '<div>';
+                            for (let i = 0; i < laptops.length; i++) {
+                                let laptop = laptops[i];
+                                let item = '<div style="float: left; width: 210px; overflow: hidden; white-space: nowrap; height: 265px;">';
+                                let image = '<div style="margin: 5px; margin-bottom: 3px;">';
+                                let imgurl = laptop.img;
+                                let img = '<img width=160 height=120 style="display: block;" src="' + imgurl + '"/>';
+                                image += img;
+                                image += '</div>';
+                                let info = '<div style="margin: 5px; margin-left: 10px; margin-bottom: 3px;">';
+                                info += '<div><i>' + laptop.model + '</i></div>';
+                                info += '<div>Price: $' + laptop.price + '</div>';
+                                info += '<div>RAM: ' + laptop.ram + '</div>';
+                                info += '<div>HDD: ' + laptop.hdd + '</div>';
+                                info += '<div>CPU: ' + laptop.cpu + '</div>';
+                                info += '<div>Display: ' + laptop.display + '</div>';
+                                info += '</div>';
+                                let buy = '<div class="buy" style="margin: 5px; left: -40px; position: relative; margin-left: 50%; margin-bottom: 3px;"></div>';
+                                item += image;
+                                item += info;
+                                item += buy;
+                                item += '</div>';
+                                container += item;
+                            }
+                            container += '</div>';
+                            return container;
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const data = [
+                {
+                    laptops:
+                        [
+                            { img: '../../../images/l-13.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3720QM', price: 2999, display: 15.4, hdd: '512GB SSD', model: 'Apple MacBook Pro' },
+                            { img: '../../../images/l-14.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3667U', price: 1299, display: 13.3, hdd: '256GB SSD', model: 'Apple MacBook Air' },
+                            { img: '../../../images/l-15.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3632QM', price: 2199, display: 15.4, hdd: '256GB SSD', model: 'Asus ZenBook UX51VZ' }
+                        ]
+                },
+                {
+                    laptops:
+                        [
+                            { img: '../../../images/l-16.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3317U', price: 1899, display: 13.3, hdd: '128GB SSD', model: 'ASUS TAICHI31-CX009H' },
+                            { img: '../../../images/l-17.jpg', ram: '4GB DD3', cpu: 'Intel Core i7-3517U', price: 1799, display: 13.3, hdd: '628GB', model: 'Asus TX300CA-C4024H' },
+                            { img: '../../../images/l-18.gif', ram: '16GB DD3', cpu: 'Intel Core i7-3820QM', price: 2499, display: 15.6, hdd: '1TB', model: 'Lenovo ThinkPad T530' }
+                        ]
+                },
+                {
+                    laptops:
+                        [
+                            { img: '../../../images/l-19.jpg', ram: '8GB DD3', cpu: 'Intel Core i5-3210M', price: 1499, display: 15.6, hdd: '750GB', model: 'Samsung Series 7 Chronos' },
+                            { img: '../../../images/l-20.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3720QM', price: 1499, display: 17.3, hdd: '256GB SSD', model: 'HP EliteBook 8770w' },
+                            { img: '../../../images/l-21.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3517U', price: 1499, display: 14.0, hdd: '512GB', model: 'Dell XPS 14' }
+                        ]
+                },
+                {
+                    laptops:
+                        [
+                            { img: '../../../images/l-22.jpg', ram: '32GB DD3', cpu: 'Intel Core i7-4800MQ', price: 3499, display: 17.3, hdd: '750GB', model: 'Dell Alienware 17' },
+                            { img: '../../../images/l-23.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3537U', price: 1699, display: 15.6, hdd: '1TB', model: 'Acer Aspire R7-571G' },
+                            { img: '../../../images/l-24.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-4500U', price: 1599, display: 15.6, hdd: '256GB SSD', model: 'Acer Aspire V5-573G' }
+                        ]
+                },
+                {
+                    laptops:
+                        [
+                            { img: '../../../images/l-25.jpg', ram: '32GB DD3', cpu: 'Intel Core i7-4700MQ', price: 2199, display: 17.3, hdd: '1TB', model: 'Toshiba Qosmio X70-A-114' },
+                            { img: '../../../images/l-26.gif', ram: '4GB DD3', cpu: 'Intel Core i7-3667U', price: 2699, display: 14.0, hdd: '256GB SSD', model: 'Lenovo Thinkpad X1 Carbon' },
+                            { img: '../../../images/l-27.jpg', ram: '8GB DD3', cpu: 'Intel Core i5-3317U ', price: 1699, display: 12.5, hdd: '128GB SSD', model: 'Dell XPS Duo 12' }
+                        ]
+                },
+                {
+                    laptops:
+                        [
+                            { img: '../../../images/l-28.png', ram: '8GB DD3', cpu: 'Intel Core i7-3537U', price: 1799, display: 12.5, hdd: '256GB SSD', model: 'Lenovo ThinkPad Twist S230u' },
+                            { img: '../../../images/l-29.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3317U ', price: 1299, display: 11.6, hdd: '128GB SSD', model: 'Sony Vaio Duo' },
+                            { img: '../../../images/l-30.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3230M', price: 999, display: 15.5, hdd: '256GB SSD', model: 'Sony VAIO' }
+                        ]
+                }
+            ];
+
+            this.source = {
+                localData: data,
+                dataType: 'array'
+            };
+
+            this.itemsInCart = 0;
+        },
+        methods: {
+            rendered: function () {
+
+                let buttons = document.getElementsByClassName('buy');
+
+                jqwidgets.createInstance('.buy', 'jqxButton', { value: 'Buy', width: 80 });
+
+                for (let i = 0; i < buttons.length; i++) {
+                    buttons[i].addEventListener('click', () => {
+                        this.itemsInCart++;
+                        this.$refs.productNumber.innerHTML = `${this.itemsInCart} products`;
+                    });
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/rowtemplate/main.js b/datatable/rowtemplate/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/rowtemplate/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/rowtemplate/package.json b/datatable/rowtemplate/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/rowtemplate/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/searchfield/App.vue b/datatable/searchfield/App.vue
new file mode 100644
index 00000000..0108af00
--- /dev/null
+++ b/datatable/searchfield/App.vue
@@ -0,0 +1,52 @@
+<template>
+    <JqxDataTable :width="getWidth" :height="400" :source="dataAdapter" :columns="columns"
+                  :altRows="true" :pageable="true" :filterable="true"
+                  :pagerButtonsCount="10" :filterMode="'simple'">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Supplier Name', cellsAlign: 'center', align: 'center', dataField: 'SupplierName', width: 250 },
+                    { text: 'Name', columngroup: 'ProductDetails', cellsAlign: 'center', align: 'center', dataField: 'ProductName', width: 250 },
+                    { text: 'Quantity', columngroup: 'ProductDetails', dataField: 'Quantity', cellsformat: 'd', cellsAlign: 'center', align: 'center', width: 80 },
+                    { text: 'Price', columngroup: 'ProductDetails', dataField: 'Price', cellsformat: 'c2', align: 'center', cellsAlign: 'center', width: 70 },
+                    { text: 'Address', columngroup: 'Location', cellsAlign: 'center', align: 'center', dataField: 'Address', width: 120 },
+                    { text: 'City', columngroup: 'Location', cellsAlign: 'center', align: 'center', dataField: 'City' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                dataFields: [
+                    { name: 'SupplierName', type: 'string' },
+                    { name: 'Quantity', type: 'number' },
+                    { name: 'OrderDate', type: 'date' },
+                    { name: 'OrderAddress', type: 'string' },
+                    { name: 'Freight', type: 'number' },
+                    { name: 'Price', type: 'number' },
+                    { name: 'City', type: 'string' },
+                    { name: 'ProductName', type: 'string' },
+                    { name: 'Address', type: 'string' }
+                ],
+                url: '../sampledata/orderdetailsextended.xml',
+                root: 'DATA',
+                record: 'ROW'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/searchfield/main.js b/datatable/searchfield/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/searchfield/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/searchfield/package.json b/datatable/searchfield/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/searchfield/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/separatetables/App.vue b/datatable/separatetables/App.vue
new file mode 100644
index 00000000..6fb79227
--- /dev/null
+++ b/datatable/separatetables/App.vue
@@ -0,0 +1,151 @@
+<template>
+    <div>
+        <h3>Employees</h3>
+
+        <JqxDataTable ref="masterDataTable" @rowSelect="masterTableOnRowSelect($event)"
+                      :width="getWidth" :source="employeesData" :columns="masterColumns"
+                      :pageable="true" :sortable="true" :pageSize="5">
+        </JqxDataTable>
+
+        <h3>Orders by Employee</h3>
+
+        <JqxDataTable ref="detailsDataTable"
+                      :width="getWidth" :columns="detailsColumns"
+                      :pageable="true" :pageSize="5">
+        </JqxDataTable>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                employeesData: this.employeesData,
+                ordersData: this.ordersData,
+                detailsColumns: [
+                    { text: 'Employee Name', dataField: 'EmployeeName', width: 300 },
+                    { text: 'Ship Name', dataField: 'ShipName', width: 300 },
+                    { text: 'Ship Address', dataField: 'ShipAddress', width: 300 },
+                    { text: 'Ship City', dataField: 'ShipCity', width: 150 },
+                    { text: 'Ship Country', dataField: 'ShipCountry', width: 150 },
+                    { text: 'Shipped Date', dataField: 'ShippedDate', cellsFormat: 'd', width: 200 }
+                ],
+                masterColumns: [
+                    { text: 'First Name', dataField: 'FirstName', width: 250 },
+                    { text: 'Last Name', dataField: 'LastName', width: 250 },
+                    { text: 'Title', dataField: 'Title' }
+                ]
+            }
+
+        },
+        beforeCreate: function () {
+            const employeesDataGenerator = () => {
+                const source = {
+                    dataFields: [
+                        { name: 'EmployeeID', type: 'number' },
+                        { name: 'FirstName', type: 'string' },
+                        { name: 'LastName', type: 'string' },
+                        { name: 'Title', type: 'string' },
+                        { name: 'Address', type: 'string' },
+                        { name: 'City', type: 'string' }
+                    ],
+                    root: 'Employees',
+                    record: 'Employee',
+                    id: 'EmployeeID',
+                    dataType: 'xml',
+                    url: '../sampledata/employees.xml',
+                    async: false
+                };
+
+                const employeesAdapter = new jqx.dataAdapter(source, {
+                    autoBind: true,
+                    beforeLoadComplete: (records) => {
+                        // add 'EmployeeName' data field.
+                        for (let i = 0; i < records.length; i++) {
+                            records[i]['EmployeeName'] = records[i].FirstName + ' ' + records[i].LastName;
+                        }
+                        return records;
+                    }
+                });
+
+                return employeesAdapter;
+            };
+
+            const ordersDataGenerator = () => {
+                const ordersSource =
+                    {
+                        dataFields: [
+                            { name: 'EmployeeID', type: 'number' },
+                            { name: 'EmployeeName', value: 'EmployeeID', type: 'string', values: { source: this.employeesData.records, value: 'EmployeeID', name: 'EmployeeName' } },
+                            { name: 'ShipName', type: 'string' },
+                            { name: 'ShipAddress', type: 'string' },
+                            { name: 'ShipCity', type: 'string' },
+                            { name: 'ShipCountry', type: 'string' },
+                            { name: 'ShippedDate', type: 'date' }
+                        ],
+                        root: 'Orders',
+                        record: 'Order',
+                        dataType: 'xml',
+                        url: '../sampledata/orderdetails.xml',
+                        async: false
+                    };
+                // create orders DataAdapter.
+                const ordersDataAdapter = new jqx.dataAdapter(ordersSource, { autoBind: true });
+
+                return ordersDataAdapter.records;
+            }
+
+            this.employeesData = employeesDataGenerator();
+            this.ordersData = ordersDataGenerator();
+        },
+        mounted: function () {
+            this.$refs.masterDataTable.selectRow(0);
+        },
+        methods: {
+
+            masterTableOnRowSelect: function (event) {
+                const key = event.args.key;
+                const filterGroup = new jqx.filter();
+                const filter_or_operator = 1;
+                const filterValue = key;
+                const filterCondition = 'equal';
+                // create string filter
+                const filter = filterGroup.createfilter('stringfilter', filterValue, filterCondition);
+                // fill the orders depending on the id.
+                const ordersbyid = [];
+                // filter all orders by EmployeeID.
+                for (let m = 0; m < this.ordersData.length; m++) {
+                    const result = filter.evaluate(this.ordersData[m]['EmployeeID']);
+                    if (result) {
+                        ordersbyid.push(this.ordersData[m]);
+                    }
+                }
+                const detailsSource = {
+                    dataFields: [
+                        { name: 'EmployeeID', type: 'number' },
+                        { name: 'EmployeeName', type: 'string' },
+                        { name: 'ShipName', type: 'string' },
+                        { name: 'ShipAddress', type: 'string' },
+                        { name: 'ShipCity', type: 'string' },
+                        { name: 'ShipCountry', type: 'string' },
+                        { name: 'ShippedDate', type: 'date' }
+                    ],
+                    id: 'OrderID',
+                    localdata: ordersbyid
+                }
+                // update the details DataTable.
+                const detailsAdapter = new jqx.dataAdapter(detailsSource);
+                this.$refs.detailsDataTable.source = detailsAdapter;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/separatetables/main.js b/datatable/separatetables/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/separatetables/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/separatetables/package.json b/datatable/separatetables/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/separatetables/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/serverfiltering/App.vue b/datatable/serverfiltering/App.vue
new file mode 100644
index 00000000..cc15492b
--- /dev/null
+++ b/datatable/serverfiltering/App.vue
@@ -0,0 +1,131 @@
+<template>
+    <div>
+        <h3 style="font-size: 16px; font-family: Verdana">Data Source: 'http://services.odata.org'</h3>
+
+        <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                      :altRows="true" :pageable="true" :sortable="true" :filterable="true"
+                      :serverProcessing="true" :columnsResize="true" :filterMode="'simple'"
+                      :pagerButtonCount="10">
+        </JqxDataTable>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source, {
+                    formatData: (data) => {
+                        if (data.sortdatafield && data.sortorder) {
+                            // update the $orderby param of the OData service.
+                            // data.sortdatafield - the column's datafield value(ShipCountry, ShipCity, etc.).
+                            // data.sortorder - the sort order(asc or desc).
+                            data.$orderby = data.sortdatafield + ' ' + data.sortorder;
+                        }
+                        let filterOperator;
+                        if (data.filterslength) {
+                            this.filterChanged = true;
+                            let filterParam = '';
+                            for (let i = 0; i < data.filterslength; i++) {
+                                // filter's value.
+                                let filterValue = data['filtervalue' + i];
+                                // filter's condition. For the filterMode='simple' it is 'CONTAINS'.
+                                let filterCondition = data['filtercondition' + i];
+                                // filter's data field - the filter column's datafield value.
+                                let filterDataField = data['filterdatafield' + i];
+                                // 'and' or 'or' depending on the filter expressions. When the filterMode='simple', the value is 'or'.
+                                filterOperator = data[filterDataField + 'operator'];
+                                let startIndex = 0;
+                                if (filterValue.indexOf('-') == -1) {
+                                    if (filterCondition == 'CONTAINS') {
+                                        filterParam += 'substringof("' + filterValue + '", ' + filterDataField + ') eq true';
+                                        filterParam += ' ' + filterOperator + ' ';
+                                    }
+                                }
+                                else {
+                                    if (filterDataField == 'ShippedDate') {
+                                        let dateGroups = new Array();
+                                        let startIndex = 0;
+                                        let item = filterValue.substring(startIndex).indexOf('-');
+                                        while (item > -1) {
+                                            dateGroups.push(filterValue.substring(startIndex, item + startIndex));
+                                            startIndex += item + 1;
+                                            item = filterValue.substring(startIndex).indexOf('-');
+                                            if (item == -1) {
+                                                dateGroups.push(filterValue.substring(startIndex));
+                                            }
+                                        }
+                                        if (dateGroups.length == 3) {
+                                            filterParam += 'year(ShippedDate) eq ' + parseInt(dateGroups[0]) + ' and month(ShippedDate) eq ' + parseInt(dateGroups[1]) + ' and day(ShippedDate) eq ' + parseInt(dateGroups[2]);
+                                        }
+                                        filterParam += ' ' + filterOperator + ' ';
+                                    }
+                                }
+                            }
+                            // remove last filter operator.
+                            filterParam = filterParam.substring(0, filterParam.length - filterOperator.length - 2);
+                            data.$filter = filterParam;
+                            this.source.totalRecords = 0;
+                        }
+                        else {
+                            if (this.filterChanged) {
+                                this.source.totalRecords = 0;
+                                this.filterChanged = false;
+                            }
+                        }
+                        if (this.source.totalRecords) {
+                            // update the $skip and $top params of the OData service.
+                            // data.pagenum - page number starting from 0.
+                            // data.pagesize - page size
+                            data.$skip = data.pagenum * data.pagesize;
+                            data.$top = data.pagesize;
+                        }
+                        return data;
+                    },
+                    downloadComplete: (data, status, xhr) => {
+                        if (!this.source.totalRecords) {
+                            this.source.totalRecords = data.value.length;
+                        }
+                    },
+                    loadError: (xhr, status, error) => {
+                        throw new Error('http://services.odata.org: ' + error.toString());
+                    }
+                }),
+                columns: [
+                    { text: 'Ship Name', dataField: 'ShipName', width: 250 },
+                    { text: 'Ship Country', dataField: 'ShipCountry', width: 150 },
+                    { text: 'Ship City', dataField: 'ShipCity', width: 150 },
+                    { text: 'Ship Address', dataField: 'ShipAddress', width: 150 },
+                    { text: 'Ship Date', dataField: 'ShippedDate', width: 150, cellsFormat: 'yyyy-MM-dd' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'ShipCountry', type: 'string' },
+                    { name: 'ShipCity', type: 'string' },
+                    { name: 'ShipAddress', type: 'string' },
+                    { name: 'ShipName', type: 'string' },
+                    { name: 'Freight', type: 'number' },
+                    { name: 'ShippedDate', type: 'date' }
+                ],
+                root: 'value',
+                url: 'http://services.odata.org/V3/Northwind/Northwind.svc/Orders?$format=json&$callback=?'
+            };
+
+            this.filterChanged = false;
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/serverfiltering/main.js b/datatable/serverfiltering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/serverfiltering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/serverfiltering/package.json b/datatable/serverfiltering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/serverfiltering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/serverpaging/App.vue b/datatable/serverpaging/App.vue
new file mode 100644
index 00000000..4c5bb8f6
--- /dev/null
+++ b/datatable/serverpaging/App.vue
@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <h3 style="font-size: 16px; font-family: Verdana">Data Source: 'http://services.odata.org'</h3>
+
+        <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                      :altRows="true" :pageable="true" :sortable="true" :filterable="true"
+                      :serverProcessing="true" :columnsResize="true" :filterMode="'simple'"
+                      :pagerButtonCount="10">
+        </JqxDataTable>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source, {
+                    formatData: (data) => {
+                        // update the $skip and $top params of the OData service.
+                        // data.pagenum - page number starting from 0.
+                        // data.pagesize - page size
+                        data.$skip = data.pagenum * data.pagesize;
+                        data.$top = data.pagesize;
+                        data.$inlinecount = 'allpages';
+                        return data;
+                    },
+                    downloadComplete: (data, status, xhr) => {
+                        if (!this.source.totalRecords) {
+                            this.source.totalRecords = parseInt(data['odata.count']);
+                        }
+                    },
+                    loadError: (xhr, status, error) => {
+                        throw new Error('http://services.odata.org: ' + error.toString());
+                    }
+                }),
+                columns: [
+                    { text: 'Ship Name', dataField: 'ShipName', width: 300 },
+                    { text: 'Ship Country', hidden: true, dataField: 'ShipCountry', width: 250 },
+                    { text: 'Ship City', dataField: 'ShipCity', width: 150 },
+                    { text: 'Ship Address', dataField: 'ShipAddress' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'ShipCountry', type: 'string' },
+                    { name: 'ShipCity', type: 'string' },
+                    { name: 'ShipAddress', type: 'string' },
+                    { name: 'ShipName', type: 'string' },
+                    { name: 'Freight', type: 'number' },
+                    { name: 'ShippedDate', type: 'date' }
+                ],
+                root: 'value',
+                url: 'http://services.odata.org/V3/Northwind/Northwind.svc/Orders?$format=json&$callback=?'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/serverpaging/main.js b/datatable/serverpaging/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/serverpaging/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/serverpaging/package.json b/datatable/serverpaging/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/serverpaging/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/serversorting/App.vue b/datatable/serversorting/App.vue
new file mode 100644
index 00000000..55f90d77
--- /dev/null
+++ b/datatable/serversorting/App.vue
@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <h3 style="font-size: 16px; font-family: Verdana">Data Source: 'http://services.odata.org'</h3>
+
+        <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                      :altRows="true" :pageable="true" :sortable="true" :filterable="true"
+                      :serverProcessing="true" :columnsResize="true" :filterMode="'simple'"
+                      :pagerButtonCount="10">
+        </JqxDataTable>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source, {
+                    formatData: (data) => {
+                        if (this.source.totalRecords) {
+                            // update the $skip and $top params of the OData service.
+                            // data.pagenum - page number starting from 0.
+                            // data.pagesize - page size
+                            // data.sortdatafield - the column's datafield value(ShipCountry, ShipCity, etc.).
+                            // data.sortorder - the sort order(asc or desc).
+                            data.$skip = data.pagenum * data.pagesize;
+                            data.$top = data.pagesize;
+                            if (data.sortdatafield && data.sortorder) {
+                                data.$orderby = data.sortdatafield + ' ' + data.sortorder;
+                            }
+                        }
+                        return data;
+                    },
+                    downloadComplete: (data, status, xhr) => {
+                        if (!this.source.totalRecords) {
+                            this.source.totalRecords = data.value.length;
+                        }
+                    },
+                    loadError: (xhr, status, error) => {
+                        throw new Error('http://services.odata.org: ' + error.toString());
+                    }
+                }),
+                columns: [
+                    { text: 'Ship Name', dataField: 'ShipName', width: 300 },
+                    { text: 'Ship Country', hidden: true, dataField: 'ShipCountry', width: 250 },
+                    { text: 'Ship City', dataField: 'ShipCity', width: 150 },
+                    { text: 'Ship Address', dataField: 'ShipAddress' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'ShipCountry', type: 'string' },
+                    { name: 'ShipCity', type: 'string' },
+                    { name: 'ShipAddress', type: 'string' },
+                    { name: 'ShipName', type: 'string' },
+                    { name: 'Freight', type: 'number' },
+                    { name: 'ShippedDate', type: 'date' }
+                ],
+                root: 'value',
+                url: 'http://services.odata.org/V3/Northwind/Northwind.svc/Orders?$format=json&$callback=?'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/serversorting/main.js b/datatable/serversorting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/serversorting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/serversorting/package.json b/datatable/serversorting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/serversorting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/showorhidecolumn/App.vue b/datatable/showorhidecolumn/App.vue
new file mode 100644
index 00000000..a2205312
--- /dev/null
+++ b/datatable/showorhidecolumn/App.vue
@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <JqxListBox style="float: left" @checkChange="listBoxOnCheckChange($event)"
+                    :width="150" :height="200" :source="listSource" :checkboxes="true">
+        </JqxListBox>
+
+        <JqxDataTable ref="myDataTable" style="float: left; margin-left: 20px;"
+                      :source="dataAdapter" :columns="columns" :pageable="true"
+                      :columnsResize="true" :pagerButtonsCount="10">
+        </JqxDataTable>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxDataTable,
+            JqxListBox
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', datafield: 'name', width: 200 },
+                    { text: 'Beverage Type', dataField: 'type', width: 200 },
+                    { text: 'Calories', dataField: 'calories', width: 200 }
+                ],
+                listSource: [
+                    { label: 'Beverage Type', value: 'type', checked: true },
+                    { label: 'Calories', value: 'calories', checked: true }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'name' },
+                    { name: 'type' },
+                    { name: 'calories', type: 'int' },
+                    { name: 'totalfat' },
+                    { name: 'protein' }
+                ],
+                id: 'id',
+                url: '../sampledata/beverages.txt'
+            };
+        },
+        methods: {
+            listBoxOnCheckChange: function (event) {
+                this.$refs.myDataTable.beginUpdate();
+                if (event.args.checked) {
+                    this.$refs.myDataTable.showColumn(event.args.value);
+                }
+                else {
+                    this.$refs.myDataTable.hideColumn(event.args.value);
+                }
+                this.$refs.myDataTable.endUpdate();
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/showorhidecolumn/main.js b/datatable/showorhidecolumn/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/showorhidecolumn/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/showorhidecolumn/package.json b/datatable/showorhidecolumn/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/showorhidecolumn/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/sorting/App.vue b/datatable/sorting/App.vue
new file mode 100644
index 00000000..067003a7
--- /dev/null
+++ b/datatable/sorting/App.vue
@@ -0,0 +1,51 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :altRows="true" :pageable="true" :sortable="true">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxDataTable,
+            JqxListBox
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', dataField: 'firstname', width: 200 },
+                    { text: 'Last Name', dataField: 'lastname', width: 200 },
+                    { text: 'Product', editable: false, dataField: 'productname', width: 180 },
+                    { text: 'Quantity', dataField: 'quantity', width: 80, align: 'right', cellsalign: 'right' },
+                    { text: 'Unit Price', dataField: 'price', width: 90, align: 'right', cellsalign: 'right', cellsFormat: 'c2' },
+                    { text: 'Total', dataField: 'total', width: 100, align: 'right', cellsalign: 'right', cellsFormat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(85, false),
+                datatype: 'array',
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'total', type: 'number' }
+                    ],
+                sortcolumn: 'firstname',
+                sortdirection: 'asc'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/sorting/main.js b/datatable/sorting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/sorting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/sorting/package.json b/datatable/sorting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/sorting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/sortingapi/App.vue b/datatable/sortingapi/App.vue
new file mode 100644
index 00000000..f606ccee
--- /dev/null
+++ b/datatable/sortingapi/App.vue
@@ -0,0 +1,107 @@
+<template>
+    <div>
+        <JqxDataTable ref="myDataTable" style="float: left"
+                      :width="650" :source="dataAdapter" :columns="columns"
+                      :altRows="true" :pageable="true" :sortable="true">
+        </JqxDataTable>
+
+        <div style="float: left; margin-left: 10px">
+            <table>
+                <tbody>
+                    <tr>
+                        <td align="right">
+                            <div><strong>Settings</strong></div>
+                        </td>
+                        <td align="left"></td>
+                    </tr>
+                    <tr>
+                        <td align="right">Column:</td>
+                        <td align="left">
+
+                            <JqxDropDownList ref="columnName"
+                                             :width="100" :selectedIndex="0" :autoDropDownHeight="true"
+                                             :source="['Name','Last Name','Product','Quantity','Unit Price','Total']">
+                            </JqxDropDownList>
+
+                        </td>
+                    </tr>
+                    <tr>
+                        <td align="right">Sort Order:</td>
+                        <td align="left">
+
+                            <JqxDropDownList ref="sortOrder"
+                                             :width="100" :selectedIndex="0" :autoDropDownHeight="true"
+                                             :source="['Ascending','Descending']">
+                            </JqxDropDownList>
+
+                        </td>
+                    </tr>
+                    <tr>
+                        <td align="right"></td>
+                        <td align="left">
+                            <JqxButton style="float: left" @click="sortBtnOnClick()" :width="50">Sort</JqxButton>
+                            <JqxButton style="float: left; margin-left: 5px" @click="clearBtnOnClick()" :width="50">Clear</JqxButton>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxDataTable,
+            JqxDropDownList,
+            JqxButton
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', dataField: 'firstname', width: 200 },
+                    { text: 'Last Name', dataField: 'lastname', width: 200 },
+                    { text: 'Product', editable: false, dataField: 'productname', width: 180 },
+                    { text: 'Quantity', dataField: 'quantity', width: 80, align: 'right', cellsalign: 'right' },
+                    { text: 'Unit Price', dataField: 'price', width: 90, align: 'right', cellsalign: 'right', cellsFormat: 'c2' },
+                    { text: 'Total', dataField: 'total', width: 100, align: 'right', cellsalign: 'right', cellsFormat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(85, false),
+                datatype: 'array',
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'total', type: 'number' }
+                    ],
+                sortcolumn: 'firstname',
+                sortdirection: 'asc'
+            };
+        },
+        methods: {
+            sortBtnOnClick: function () {
+                let columnIndex = this.$refs.columnName.selectedIndex;
+                let sortOrder = this.$refs.sortOrder.selectedIndex == 0 ? 'asc' : 'desc';
+                this.$refs.myDataTable.sortBy(this.columns[columnIndex].dataField, sortOrder);
+            },
+            clearBtnOnClick: function () {
+                this.$refs.myDataTable.sortBy('firstname', null);
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/sortingapi/main.js b/datatable/sortingapi/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/sortingapi/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/sortingapi/package.json b/datatable/sortingapi/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/sortingapi/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/tsvdata/App.vue b/datatable/tsvdata/App.vue
new file mode 100644
index 00000000..8a457673
--- /dev/null
+++ b/datatable/tsvdata/App.vue
@@ -0,0 +1,44 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :columnsResize="true" :pageable="true" :pagerButtonsCount="10">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Year', dataField: 'Year', width: 200 },
+                    { text: 'HPI', dataField: 'HPI', cellsFormat: 'f2', width: 200 },
+                    { text: 'Build Cost', dataField: 'BuildCost', cellsFormat: 'f2', width: 180 },
+                    { text: 'Population', dataField: 'Population', cellsFormat: 'f2', width: 100 },
+                    { text: 'Rate', dataField: 'Rate', cellsFormat: 'f5' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'tab',
+                datafields: [
+                    { name: 'Year', type: 'int' },
+                    { name: 'HPI', type: 'float' },
+                    { name: 'BuildCost', type: 'float' },
+                    { name: 'Population', type: 'float' },
+                    { name: 'Rate', type: 'float' }
+                ],
+                url: '../sampledata/homeprices.txt'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/tsvdata/main.js b/datatable/tsvdata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/tsvdata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/tsvdata/package.json b/datatable/tsvdata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/tsvdata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/validation/App.vue b/datatable/validation/App.vue
new file mode 100644
index 00000000..079151b5
--- /dev/null
+++ b/datatable/validation/App.vue
@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <JqxDataTable :width="650" :source="dataAdapter" :columns="columns"
+                      :altRows="true" :pageable="true" :sortable="true"
+                      :editable="true" :pagerButtonsCount="8">
+        </JqxDataTable>
+    </div>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Order ID', editable: false, dataField: 'OrderID', width: 100 },
+                    {
+                        text: 'Freight', dataField: 'Freight', cellsFormat: 'f2', cellsAlign: 'right', align: 'right', width: 100,
+                        validation: (cell, value) => {
+                            if (value > 1000 || value < 0) return { message: 'Freight should be in the 0-1000 interval', result: false };
+                            return true;
+                        }
+                    },
+                    {
+                        text: 'Ship Country', dataField: 'ShipCountry', width: 150,
+                        validation: (cell, value) => {
+                            if (value.length < 5) return { message: 'Ship Country should be minimum 5 characters', result: false };
+                            return true;
+                        }
+                    },
+                    {
+                        text: 'Shipped Date', dataField: 'ShippedDate', cellsAlign: 'right', align: 'right', cellsFormat: 'dd/MM/yyyy',
+                        validation: (cell, value) => {
+                            let date = new Date(value);
+                            if (date.getFullYear() > 2014 || date.getFullYear() < 1990) {
+                                return { message: 'Shipped Date should be in the 1990 - 2014 interval', result: false };
+                            }
+                            return true;
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataFields: [
+                    { name: 'OrderID', type: 'int' },
+                    { name: 'Freight', type: 'float' },
+                    { name: 'ShipName', type: 'string' },
+                    { name: 'ShipAddress', type: 'string' },
+                    { name: 'ShipCity', type: 'string' },
+                    { name: 'ShipCountry', type: 'string' },
+                    { name: 'ShippedDate', type: 'date' }
+                ],
+                root: 'Orders',
+                record: 'Order',
+                dataType: 'xml',
+                id: 'OrderID',
+                url: '../sampledata/orderdetails.xml'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/validation/main.js b/datatable/validation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/validation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/validation/package.json b/datatable/validation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/validation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datatable/xmldata/App.vue b/datatable/xmldata/App.vue
new file mode 100644
index 00000000..9d06716f
--- /dev/null
+++ b/datatable/xmldata/App.vue
@@ -0,0 +1,49 @@
+<template>
+    <JqxDataTable :width="getWidth" :source="dataAdapter" :columns="columns"
+                  :columnsResize="true" :pageable="true" :pagerButtonsCount="10">
+    </JqxDataTable>
+</template>
+
+<script>
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+
+    export default {
+        components: {
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
+                    { text: 'Contact Name', datafield: 'ContactName', width: 250 },
+                    { text: 'Contact Title', datafield: 'ContactTitle', width: 250 },
+                    { text: 'City', datafield: 'City', width: 120 },
+                    { text: 'Postal Code', datafield: 'PostalCode', width: 90 },
+                    { text: 'Country', datafield: 'Country', width: 100 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName', type: 'string' },
+                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName', type: 'string' },
+                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle', type: 'string' },
+                    { name: 'City', map: 'm\\:properties>d\\:City', type: 'string' },
+                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode', type: 'string' },
+                    { name: 'Country', map: 'm\\:properties>d\\:Country', type: 'string' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:CustomerID',
+                url: '../sampledata/customers.xml'
+            };
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datatable/xmldata/main.js b/datatable/xmldata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datatable/xmldata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datatable/xmldata/package.json b/datatable/xmldata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datatable/xmldata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/animation/App.vue b/datetimeinput/animation/App.vue
new file mode 100644
index 00000000..6d8083b7
--- /dev/null
+++ b/datetimeinput/animation/App.vue
@@ -0,0 +1,53 @@
+<template>
+    <div>
+        <div style="float: left">
+            <h3>Animation Type</h3>
+
+            <JqxRadioButton @checked="noneAnimationBtn()" :checked="false">
+                None
+            </JqxRadioButton>
+
+            <div style="margin-top: 10px"></div>
+            <JqxRadioButton @checked="slideAnimationBtn()" :checked="false">
+                Slide
+            </JqxRadioButton>
+
+            <div style="margin-top: 10px"></div>
+            <JqxRadioButton @checked="fadeAnimationBtn()" :checked="true">
+                Fade
+            </JqxRadioButton>
+
+        </div>
+
+        <JqxDateTimeInput ref="myDateTimeInput" style="float: left; margin-top: 40px; margin-left: 100px"
+                          :width="150" :height="25" :animationType="'fade'"
+                          :dropDownHorizontalAlignment="'right'">
+        </JqxDateTimeInput>
+    </div>
+</template>
+
+<script>
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+
+    export default {
+        components: {
+            JqxRadioButton,
+            JqxDateTimeInput
+        },
+        methods: {
+            noneAnimationBtn: function () {
+                this.$refs.myDateTimeInput.animationType = 'none';
+            },
+            slideAnimationBtn: function () {
+                this.$refs.myDateTimeInput.animationType = 'slide';
+            },
+            fadeAnimationBtn: function () {
+                this.$refs.myDateTimeInput.animationType = 'fade';
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datetimeinput/animation/main.js b/datetimeinput/animation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/animation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/animation/package.json b/datetimeinput/animation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/animation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/createcomponent/App.vue b/datetimeinput/createcomponent/App.vue
new file mode 100644
index 00000000..3ef5f31b
--- /dev/null
+++ b/datetimeinput/createcomponent/App.vue
@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <label>Date Input</label>
+
+        <JqxDateTimeInput ref="myDateInput" :autoCreate="false"></JqxDateTimeInput><br />
+
+        <label>Time Input</label>
+
+        <JqxDateTimeInput ref="myTimeInput" :autoCreate="false"></JqxDateTimeInput><br />
+
+        <label>Date Time Input</label>
+
+        <JqxDateTimeInput ref="myDateTimeInput" :autoCreate="false"></JqxDateTimeInput>
+    </div>
+</template>
+
+<script>
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+
+    export default {
+        components: {
+            JqxDateTimeInput
+        },
+        mounted: function () {
+            const dateInputSettings = { width: '300px', height: '25px' };
+            const timeInputSettings = { formatString: "T", showTimeButton: true, showCalendarButton: false, width: '300px', height: '25px' };
+            const dateTimeInputSettings = { formatString: "F", showTimeButton: true, width: '300px', height: '25px' };
+
+            this.$refs.myDateInput.createComponent(dateInputSettings);
+            this.$refs.myTimeInput.createComponent(timeInputSettings);
+            this.$refs.myDateTimeInput.createComponent(dateTimeInputSettings);
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datetimeinput/createcomponent/main.js b/datetimeinput/createcomponent/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/createcomponent/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/createcomponent/package.json b/datetimeinput/createcomponent/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/createcomponent/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/datetime/App.vue b/datetimeinput/datetime/App.vue
new file mode 100644
index 00000000..f97c2dc9
--- /dev/null
+++ b/datetimeinput/datetime/App.vue
@@ -0,0 +1,18 @@
+<template>
+    <JqxDateTimeInput 
+        :width="300" :height="25" :formatString="'F'">
+    </JqxDateTimeInput>
+</template>
+
+<script>
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+
+    export default {
+        components: {
+            JqxDateTimeInput
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datetimeinput/datetime/main.js b/datetimeinput/datetime/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/datetime/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/datetime/package.json b/datetimeinput/datetime/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/datetime/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/defaultfunctionality/App.vue b/datetimeinput/defaultfunctionality/App.vue
new file mode 100644
index 00000000..1dd10d70
--- /dev/null
+++ b/datetimeinput/defaultfunctionality/App.vue
@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <label>Date Input</label>
+        <JqxDateTimeInput 
+            :width="300" :height="25">
+        </JqxDateTimeInput>
+        <br />
+
+        <label>Time Input</label>
+        <JqxDateTimeInput 
+            :width="300" :height="25" :formatString="'T'" :showTimeButton="true" :showCalendarButton="false">
+        </JqxDateTimeInput>
+        <br />
+
+        <label>Date Time Input</label>
+        <JqxDateTimeInput 
+            :width="300" :height="25" :formatString="'F'" :showTimeButton="true">
+        </JqxDateTimeInput>
+    </div>
+</template>
+
+<script>
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+
+    export default {
+        components: {
+            JqxDateTimeInput
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datetimeinput/defaultfunctionality/main.js b/datetimeinput/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/defaultfunctionality/package.json b/datetimeinput/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/disabled/App.vue b/datetimeinput/disabled/App.vue
new file mode 100644
index 00000000..25dc01f8
--- /dev/null
+++ b/datetimeinput/disabled/App.vue
@@ -0,0 +1,18 @@
+<template>
+    <JqxDateTimeInput 
+        :width="250" :height="25" :disabled="true">
+    </JqxDateTimeInput>
+</template>
+
+<script>
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+
+    export default {
+        components: {
+            JqxDateTimeInput
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datetimeinput/disabled/main.js b/datetimeinput/disabled/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/disabled/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/disabled/package.json b/datetimeinput/disabled/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/disabled/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/dropdownhorizontalalignment/App.vue b/datetimeinput/dropdownhorizontalalignment/App.vue
new file mode 100644
index 00000000..ac3613d4
--- /dev/null
+++ b/datetimeinput/dropdownhorizontalalignment/App.vue
@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <div ref="selectionlog" style="float: left; font-size: 12px; font-family: Verdana">
+            <h3>Alignment</h3>
+
+            <JqxRadioButton @checked="leftBtn()">
+                Left
+            </JqxRadioButton>
+
+            <JqxRadioButton style="margin-top: 10px" @checked="rightBtn()" :checked="true">
+                Right
+            </JqxRadioButton>
+
+        </div>
+
+        <JqxDateTimeInput ref="myDateTimeInput"
+                          style="float: left; margin-top: 20px; margin-left: 100px;"
+                          :width="150" :height="25" :animationType="'fade'"
+                          :dropDownHorizontalAlignment="'right'">
+        </JqxDateTimeInput>
+    </div>
+</template>
+
+<script>
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+
+    export default {
+        components: {
+            JqxDateTimeInput,
+            JqxRadioButton
+        },
+        methods: {
+            leftBtn: function () {
+                this.$refs.myDateTimeInput.dropDownHorizontalAlignment = 'left';
+            },
+            rightBtn: function () {
+                this.$refs.myDateTimeInput.dropDownHorizontalAlignment = 'right';
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datetimeinput/dropdownhorizontalalignment/main.js b/datetimeinput/dropdownhorizontalalignment/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/dropdownhorizontalalignment/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/dropdownhorizontalalignment/package.json b/datetimeinput/dropdownhorizontalalignment/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/dropdownhorizontalalignment/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/dropdownverticalalignment/App.vue b/datetimeinput/dropdownverticalalignment/App.vue
new file mode 100644
index 00000000..73b219a2
--- /dev/null
+++ b/datetimeinput/dropdownverticalalignment/App.vue
@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <br /><br /><br /><br />
+        <br /><br /><br /><br />
+        <br /><br /><br /><br />
+
+        <label>Date Input</label>
+        <JqxDateTimeInput :width="300" :height="25" :dropDownVerticalAlignment="'top'">
+        </JqxDateTimeInput>
+
+        <label>Time Input</label>
+        <JqxDateTimeInput :width="300" :height="25" :dropDownVerticalAlignment="'top'"
+                          :showCalendarButton="false" :showTimeButton="true">
+        </JqxDateTimeInput>
+
+        <label>Date/Time Input</label>
+        <JqxDateTimeInput :width="300" :height="25" :dropDownVerticalAlignment="'top'"
+                          :showCalendarButton="true" :showTimeButton="true">
+        </JqxDateTimeInput>
+
+    </div>
+</template>
+
+<script>
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+
+    export default {
+        components: {
+            JqxDateTimeInput
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datetimeinput/dropdownverticalalignment/main.js b/datetimeinput/dropdownverticalalignment/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/dropdownverticalalignment/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/dropdownverticalalignment/package.json b/datetimeinput/dropdownverticalalignment/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/dropdownverticalalignment/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/events/App.vue b/datetimeinput/events/App.vue
new file mode 100644
index 00000000..08207737
--- /dev/null
+++ b/datetimeinput/events/App.vue
@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <JqxDateTimeInput style="float: left; margin-top: 3px"
+            @valueChanged="onValueChanged($event)" @open="onOpen()" @close="onClose()"
+            :width="270" :height="25">
+        </JqxDateTimeInput>
+
+        <div style="margin-left: 20px; float: left">
+            <div>
+                <span>Events:</span>
+                <JqxPanel ref="myPanel" :width="300" :height="250"></JqxPanel>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxDateTimeInput,
+            JqxPanel
+        },       
+        mounted: function () {
+            this.$refs.myPanel.$el.style.border = 'none';
+        },
+        methods: {
+            onValueChanged: function (event) {
+                this.$refs.myPanel.clearcontent();
+                let date = event.args.date;
+                this.$refs.myPanel.prepend('<div style="margin-top: 5px;">New Value: ' + date + '</div>');
+            },
+            onOpen: function () {
+                this.$refs.myPanel.prepend('<div style="margin-top: 5px;">Popup Opened</div>');
+            },
+            onClose: function () {
+                this.$refs.myPanel.prepend('<div style="margin-top: 5px;">Popup Closed</div>');
+            }
+        },
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datetimeinput/events/main.js b/datetimeinput/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/events/package.json b/datetimeinput/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/fluidsize/App.vue b/datetimeinput/fluidsize/App.vue
new file mode 100644
index 00000000..c0d16891
--- /dev/null
+++ b/datetimeinput/fluidsize/App.vue
@@ -0,0 +1,18 @@
+<template>
+    <JqxDateTimeInput
+        :width="'50%'" :height="35">
+    </JqxDateTimeInput>
+</template>
+
+<script>
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+
+    export default {
+        components: {
+            JqxDateTimeInput
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datetimeinput/fluidsize/main.js b/datetimeinput/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/fluidsize/package.json b/datetimeinput/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/formatdate/App.vue b/datetimeinput/formatdate/App.vue
new file mode 100644
index 00000000..8990463e
--- /dev/null
+++ b/datetimeinput/formatdate/App.vue
@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <JqxDateTimeInput ref="myDateTimeInput"
+                          :width="300" :height="25" :formatString="'d'">
+        </JqxDateTimeInput>
+
+        <br />
+        <div>
+            <div style="font-family: Verdana; font-size: 13px">
+                Choose Format:
+            </div>
+            <br />
+
+            <JqxDropDownList @select="listOnSelect($event)"
+                             :width="230" :height="25"
+                             :source="availableFormats" :selectedIndex="0">
+            </JqxDropDownList>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDateTimeInput,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                availableFormats: [
+                    'short date pattern', 'long date pattern', 'short time pattern', 'long time pattern', 'long date, short time pattern',
+                    'long date, long time pattern', 'month/day pattern', 'month/year pattern', 'custom'
+                ]
+            }
+        },
+        methods: {
+            listOnSelect: function (event) {
+                let index = event.args.index;
+                switch (index) {
+                    case 0:
+                        this.$refs.myDateTimeInput.formatString = 'd';
+                        break;
+                    case 1:
+                        this.$refs.myDateTimeInput.formatString = 'D';
+                        break;
+                    case 2:
+                        this.$refs.myDateTimeInput.formatString = 't';
+                        break;
+                    case 3:
+                        this.$refs.myDateTimeInput.formatString = 'T';
+                        break;
+                    case 4:
+                        this.$refs.myDateTimeInput.formatString = 'f';
+                        break;
+                    case 5:
+                        this.$refs.myDateTimeInput.formatString = 'F';
+                        break;
+                    case 6:
+                        this.$refs.myDateTimeInput.formatString = 'M';
+                        break;
+                    case 7:
+                        this.$refs.myDateTimeInput.formatString = 'Y';
+                        break;
+                    case 8:
+                        this.$refs.myDateTimeInput.formatString = 'dddd-MMMM-yyyy';
+                        break;
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datetimeinput/formatdate/main.js b/datetimeinput/formatdate/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/formatdate/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/formatdate/package.json b/datetimeinput/formatdate/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/formatdate/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/keyboardnavigation/App.vue b/datetimeinput/keyboardnavigation/App.vue
new file mode 100644
index 00000000..4d8b3b50
--- /dev/null
+++ b/datetimeinput/keyboardnavigation/App.vue
@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <JqxDateTimeInput
+            :width="250" :height="25">
+        </JqxDateTimeInput>
+
+        <div style="font-family: Verdana; font-size: 12px; width: 700px; margin-left: 20px; float: left;">
+            <ul>
+                <li><b>Tab</b> - Like other widgets, the jqxDateTimeInput widget receives focus by tabbing into it. Once focus is received, users will be able to use the keyboard to change the active tab page. A second tab will take the user out of the widget.</li>
+                <li><b>Shift+Tab</b> - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous focusable element in the tab order.</li>
+                <li><b>Up Arrow</b> key - increases the selected value.</li>
+                <li><b>Up Arrow</b> when the popup Calendar is opened - goes to the same day of the week in the previous week. If the user advances past the end of the month they continue into the previous month.</li>
+                <li><b>Alt + Up Arrow</b> - closes the popup Calendar.</li>
+                <li><b>Down Arrow</b> key - decreases the selected value.</li>
+                <li><b>Down Arrow</b> key when the popup Calendar is opened - goes to the same day of the week in the next week. If the user advances past the end of the month they continue into the next month.</li>
+                <li><b>Alt + Down Arrow</b> - opens the popup Calendar.</li>
+                <li><b>Left Arrow</b> key - moves the selection to the previous value.</li>
+                <li><b>Left Arrow</b> key when the popup Calendar is opened - advances one day to the next.</li>
+                <li><b>Right Arrow</b> key - moves the selection to the next value.</li>
+                <li><b>Right Arrow</b> key when the popup Calendar is opened - advances one day to the next..</li>
+                <li><b>Control+Page Up</b> when the popup Calendar is opened - Moves to the same date in the previous year.</li>
+                <li><b>Control+Page Down</b> when the popup Calendar is opened - Moves to the same date in the next year.</li>
+                <li><b>Home</b> when the popup Calendar is opened - Moves to the first day of the current month.</li>
+                <li><b>End</b> when the popup Calendar is opened - Moves to the last day of the current month.</li>
+                <li><b>Page Up</b> when the popup Calendar is opened - Moves to the same date in the previous month.</li>
+                <li><b>Page Down</b> when the popup Calendar is opened - Moves to the same date in the next month.</li>
+                <li><b>Esc</b> key - closes the popup Calendar and cancels the selection.</li>
+                <li><b>Enter</b> key - closes the popup Calendar and confirms the selection.</li>
+                <li><b>Number</b> keys - manually type date and time when the calendar is closed.</li>
+                <li><b>Del</b> key - deletes the date.</li>
+                <li><b>Ctrl + Del</b> - sets the selected value to the minimum value.</li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+
+    export default {
+        components: {
+            JqxDateTimeInput           
+        }      
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datetimeinput/keyboardnavigation/main.js b/datetimeinput/keyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/keyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/keyboardnavigation/package.json b/datetimeinput/keyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/keyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/localization/App.vue b/datetimeinput/localization/App.vue
new file mode 100644
index 00000000..98a6d263
--- /dev/null
+++ b/datetimeinput/localization/App.vue
@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <JqxDateTimeInput ref="myDateTimeInput"
+                          :width="250" :height="25">
+        </JqxDateTimeInput>
+
+        <br />
+        <div>
+            <div style="font-family: Verdana; font-size: 13px">
+                Choose Culture:
+            </div>
+            <br />
+
+            <JqxDropDownList @select="listOnSelect($event)"
+                             :width="200" :height="25"
+                             :source="availableCultures" :selectedIndex="3">
+            </JqxDropDownList>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDateTimeInput,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                availableCultures: [
+                    'Czech (Czech Republic)', 'German (Germany)', 'English (Canada)', 'English (United States)', 'French (France)',
+                    'Italian (Italy)', 'Japanese (Japan)', 'Hebrew (Israel)', 'Russian (Russia)', 'Croatian (Croatia)', 'Sanskrit (India)'
+                ]
+            }
+        },
+        methods: {
+            listOnSelect: function (event) {
+                let index = event.args.index;
+                switch (index) {
+                    case 0:
+                        this.$refs.myDateTimeInput.culture = 'cs-CZ';
+                        break;
+                    case 1:
+                        this.$refs.myDateTimeInput.culture = 'de-DE';
+                        break;
+                    case 2:
+                        this.$refs.myDateTimeInput.culture = 'en-CA';
+                        break;
+                    case 3:
+                        this.$refs.myDateTimeInput.culture = 'en-US';
+                        break;
+                    case 4:
+                        this.$refs.myDateTimeInput.culture = 'fr-FR';
+                        break;
+                    case 5:
+                        this.$refs.myDateTimeInput.culture = 'it-IT';
+                        break;
+                    case 6:
+                        this.$refs.myDateTimeInput.culture = 'ja-JP';
+                        break;
+                    case 7:
+                        this.$refs.myDateTimeInput.culture = 'he-IL';
+                        break;
+                    case 8:
+                        this.$refs.myDateTimeInput.culture = 'ru-RU';
+                        break;
+                    case 9:
+                        this.$refs.myDateTimeInput.culture = 'hr';
+                        break;
+                    case 10:
+                        this.$refs.myDateTimeInput.culture = 'sa-IN';
+                        break;
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datetimeinput/localization/main.js b/datetimeinput/localization/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/localization/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/localization/package.json b/datetimeinput/localization/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/localization/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/rangeselection/App.vue b/datetimeinput/rangeselection/App.vue
new file mode 100644
index 00000000..216b84da
--- /dev/null
+++ b/datetimeinput/rangeselection/App.vue
@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <JqxDateTimeInput ref="myDateTimeInput" @change="dateOnChange()"
+                          :width="250" :height="25" :selectionMode="'range'">
+        </JqxDateTimeInput>
+
+        <div ref="log" style="margin-top: 10px; font-size: 13px; font-family: Verdana"></div>
+    </div>
+</template>
+
+<script>
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+
+    export default {
+        components: {
+            JqxDateTimeInput
+        },
+        mounted: function () {
+            const date1 = new Date();
+            date1.setFullYear(2013, 7, 7);
+            const date2 = new Date();
+            date2.setFullYear(2013, 7, 15);
+
+            this.$refs.myDateTimeInput.setRange(date1, date2);
+
+            this.dateOnChange();
+        },
+        methods: {
+            dateOnChange: function () {
+                const selection = this.$refs.myDateTimeInput.getRange();
+
+                if (selection.from != null) {
+                    this.$refs.log.innerHTML = '<div>From: ' + selection.from.toLocaleDateString() + ' <br/>To: ' + selection.to.toLocaleDateString() + '</div>';
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datetimeinput/rangeselection/main.js b/datetimeinput/rangeselection/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/rangeselection/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/rangeselection/package.json b/datetimeinput/rangeselection/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/rangeselection/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/restrictdaterange/App.vue b/datetimeinput/restrictdaterange/App.vue
new file mode 100644
index 00000000..f3b64ef6
--- /dev/null
+++ b/datetimeinput/restrictdaterange/App.vue
@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <div style="text-align: center; width: 250px; font-family: Verdana; font-size: 13px">
+            The navigation is restricted from 01/01/2010 to 01/01/2020
+        </div>
+        <br />
+
+        <JqxDateTimeInput :width="250" :height="25"
+            :min="min" :max="max">
+        </JqxDateTimeInput>
+    </div>
+</template>
+
+<script>
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+
+    export default {
+        components: {
+            JqxDateTimeInput
+        },
+        data: function () {
+            return {
+                min: new Date(2010, 0, 1),
+                max: new Date(2019, 11, 31)
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datetimeinput/restrictdaterange/main.js b/datetimeinput/restrictdaterange/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/restrictdaterange/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/restrictdaterange/package.json b/datetimeinput/restrictdaterange/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/restrictdaterange/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/righttoleftlayout/App.vue b/datetimeinput/righttoleftlayout/App.vue
new file mode 100644
index 00000000..856ebdc2
--- /dev/null
+++ b/datetimeinput/righttoleftlayout/App.vue
@@ -0,0 +1,19 @@
+<template>
+    <JqxDateTimeInput 
+        :width="250" :height="25"
+        :culture="'he-IL'" :rtl="true">
+    </JqxDateTimeInput>
+</template>
+
+<script>
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+
+    export default {
+        components: {
+            JqxDateTimeInput
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datetimeinput/righttoleftlayout/main.js b/datetimeinput/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/righttoleftlayout/package.json b/datetimeinput/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/templates/App.vue b/datetimeinput/templates/App.vue
new file mode 100644
index 00000000..6233ab7e
--- /dev/null
+++ b/datetimeinput/templates/App.vue
@@ -0,0 +1,51 @@
+<template>
+    <div>
+        <div>Default</div>
+        <JqxDateTimeInput :width="300" :height="30"
+            :showTimeButton="true" :template="'default'">
+        </JqxDateTimeInput>
+        <br />
+
+        <div>Primary</div>
+        <JqxDateTimeInput :width="300" :height="30"
+            :showTimeButton="true" :template="'primary'">
+        </JqxDateTimeInput>
+        <br />
+
+        <div>Success</div>
+        <JqxDateTimeInput :width="300" :height="30"
+            :showTimeButton="true" :template="'success'">
+        </JqxDateTimeInput>
+        <br />
+
+        <div>Info</div>
+        <JqxDateTimeInput :width="300" :height="30"
+            :showTimeButton="true" :template="'info'">
+        </JqxDateTimeInput>
+        <br />
+
+        <div>Warning</div>
+        <JqxDateTimeInput :width="300" :height="30"
+            :showTimeButton="true" :template="'warning'">
+        </JqxDateTimeInput>
+        <br />
+
+        <div>Danger</div>
+        <JqxDateTimeInput :width="300" :height="30"
+            :showTimeButton="true" :template="'danger'">
+        </JqxDateTimeInput>
+    </div>
+</template>
+
+<script>
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+
+    export default {
+        components: {
+            JqxDateTimeInput
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datetimeinput/templates/main.js b/datetimeinput/templates/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/templates/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/templates/package.json b/datetimeinput/templates/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/templates/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/timeinput/App.vue b/datetimeinput/timeinput/App.vue
new file mode 100644
index 00000000..d5573848
--- /dev/null
+++ b/datetimeinput/timeinput/App.vue
@@ -0,0 +1,19 @@
+<template>
+    <JqxDateTimeInput 
+        :width="250" :height="25" :formatString="'T'"
+        :showTimeButton="true" :showCalendarButton="false">
+    </JqxDateTimeInput>
+</template>
+
+<script>
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+
+    export default {
+        components: {
+            JqxDateTimeInput
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/datetimeinput/timeinput/main.js b/datetimeinput/timeinput/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/timeinput/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/timeinput/package.json b/datetimeinput/timeinput/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/timeinput/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/datetimeinput/twowaydatabinding/App.vue b/datetimeinput/twowaydatabinding/App.vue
new file mode 100644
index 00000000..4dee8665
--- /dev/null
+++ b/datetimeinput/twowaydatabinding/App.vue
@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <div>{{ date.toString() }}</div><br />
+        <JqxDateTimeInput v-model="date" :width="200" :height="25" />
+
+        <br /><br />
+
+        <div>{{ time.toString() }}</div><br />
+        <JqxDateTimeInput v-model="time" :width="200" :height="25" :formatString="'T'" :showTimeButton="true" :showCalendarButton="false" />
+    </div>
+</template>
+
+<script>
+    import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
+
+    export default {
+        components: {
+            JqxDateTimeInput
+        },
+        data: function () {
+            return {
+                date: new Date(),
+                time: new Date()
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/datetimeinput/twowaydatabinding/main.js b/datetimeinput/twowaydatabinding/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/datetimeinput/twowaydatabinding/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/datetimeinput/twowaydatabinding/package.json b/datetimeinput/twowaydatabinding/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/datetimeinput/twowaydatabinding/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/docking/defaultfunctionality/App.vue b/docking/defaultfunctionality/App.vue
new file mode 100644
index 00000000..88d2b340
--- /dev/null
+++ b/docking/defaultfunctionality/App.vue
@@ -0,0 +1,133 @@
+ <template>
+    <JqxDocking :orientation='"horizontal"' :width="getWidth" :mode='"docked"'>
+        <div>
+            <div id="window1" style="height: 220px;">
+                <div>
+                    Date and Time
+                </div>
+                <div style="overflow: hidden;">
+                    <JqxCalendar :width="180" :height="180" style="float: left; margin-right: 10px;">
+                    </JqxCalendar>
+                    <h3 style="text-align: center; color: #787878;">Sunny</h3>
+                    <div style="float: left; margin-left: 30px; text-align: center;">
+                        <img src="../../../images/sun-icon.png" alt="Sunny" />
+                    </div>
+                    <div style="text-align: left; margin-left: 5px; margin-top: 10px; font-size: 10px; float: right; margin-right: 20px;">
+                        Mo: 23 &deg;C<br />
+                        To 25 &deg;C<br />
+                        We: 27 &deg;C
+                    </div>
+                </div>
+            </div>
+            <div id="window2" style="height: 220px">
+                <div>
+                    News
+                </div>
+                <div style="overflow: hidden;">
+                    <JqxTabs :width="400" :height="181" :selectedItem='1'>
+                        <ul style="margin-left: 30px">
+                            <li>World</li>
+                            <li>Local</li>
+                            <li>Sports</li>
+                        </ul>
+                        <div>
+                            <div style="padding: 3px; margin: 10px; width: 150px; height: 84px; float: left;">
+                                <img src="../../../images/news_ie6.jpg" alt="IE6" title="IE6" />
+                            </div>
+                            <span style="font-size: 11px;">
+                                Microsoft is set to get a little more pushy ensuring
+                                you have an up-to-date browser and will automatically update Internet Explorer...
+                                <span style="font-size: 8px;">(BBC)</span>
+                            </span>
+                        </div>
+                        <div>
+                            <div style="padding: 3px; margin: 10px; width: 144px; height: 81px; float: left;">
+                                <img src="../../../images/local.jpg" alt="Tennis" title="Tennis" />
+                            </div>
+                            <span style="font-size: 11px;">
+                                The High Court has dismissed a challenge to laws that
+                                require immigrant spouses to be able to speak English in order to live in the UK...
+                                <span style="font-size: 8px;">(BBC)</span>
+                            </span>
+                        </div>
+                        <div>
+                            <div style="padding: 3px; margin: 10px; width: 130px; height: 73px; float: left;">
+                                <img src="../../../images/tennis.jpg" alt="Tennis" title="Tennis" />
+                            </div>
+                            <span style="font-size: 11px;">
+                                British number one Elena Baltacha says Judy Murray is
+                                a "fantastic" appointment as Great Britain's new Fed Cup captain... <span style="font-size: 8px;">(BBC)</span>
+                            </span>
+                        </div>
+                    </JqxTabs>
+                </div>
+            </div>
+        </div>
+        <div>
+            <div id="window3" style="height: 220px">
+                <div>
+                    Zodiac
+                </div>
+                <div style="overflow: hidden;">
+                    <JqxPanel :width="400" :height="180">
+                        <div style="padding-right: 20px;">
+                            <div style="padding: 3px; width: 150px; height: 110px; float: left; margin: 10px;">
+                                <img src="../../../images/leo.jpg" alt="Leo" title="Leo" />
+                            </div>
+                            <h3 style="text-align: center; color: #787878;">Leo</h3>
+                            <span style="font-size: 11px">
+                                Individuals born under the zodiac sign of Leo are very
+                                good looking and have a healthy physique, with a broad forehead. Leo are very intelligent,
+                                extremely courageous, love their freedom and live by their own rules. Indulgence
+                                and extravagance is like second nature to them and they love to...
+                            </span>
+                        </div>
+                    </JqxPanel>
+                </div>
+            </div>
+            <div id="window4" style="height: 220px;">
+                <div>
+                    E-mail
+                </div>
+                <div style="overflow: hidden;">
+                    <JqxListBox :width="400" :height="181" :source="source">
+                    </JqxListBox>
+                </div>
+            </div>
+        </div>
+    </JqxDocking>
+</template>
+
+<script>
+    import JqxDocking from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue";
+    import JqxCalendar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue";
+    import JqxTabs from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxDocking,
+            JqxCalendar,
+            JqxTabs,
+            JqxPanel,
+            JqxListBox
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable'),
+                source: [
+                    'JavaScript Certification - Welcome to our network',
+                    'Business Challenges via Web take a part',
+                    'jQWidgets better web, less time. Take a tour',
+                    'Facebook - you have 7 new notifications',
+                    'Twitter - John Doe is following you. Look at his profile',
+                    'New videos, take a look at YouTube.com'
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/docking/defaultfunctionality/main.js b/docking/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/docking/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/docking/defaultfunctionality/package.json b/docking/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/docking/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/docking/events/App.vue b/docking/events/App.vue
new file mode 100644
index 00000000..c2e4b647
--- /dev/null
+++ b/docking/events/App.vue
@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <JqxPanel ref="myPanel" style="border-width: 0; margin-left: 30px"
+                  :width="getWidth" :height="50">
+        </JqxPanel>
+
+        <JqxDocking ref="myDocking" style="float: left;"
+                    @dragStart="myDockingOnDragStart($event)" @dragEnd="myDockingOnDragEnd($event)"
+                    :width="getWidth" :orientation="'horizontal'" :mode="'default'">
+            <div>
+                <div id='window0' style="height: 150px">
+                    <div>CISC</div>
+                    <div>
+                        Before the RISC philosophy became prominent; many computer architects tried to bridge
+                        the so called semantic gap; i.e. to design instruction sets that directly supported
+                        high-level programming constructs such as procedure calls; loop control; and complex...
+                    </div>
+                </div>
+                <div id='window1' style="height: 150px">
+                    <div>Database management system</div>
+                    <div>
+                        A database management system (DBMS) is a software package with computer programs
+                        that control the creation; maintenance; and the use of a database. It allows organizations
+                        to conveniently develop databases...
+                    </div>
+                </div>
+            </div>
+            <div>
+                <div id='window2' style="height: 150px">
+                    <div>RISC</div>
+                    <div>
+                        Some aspects attributed to the first RISC-labeled designs around 1975 include the
+                        observations that the memory-restricted compilers of the time were often unable
+                        to take advantage...
+                    </div>
+                </div>
+            </div>
+        </JqxDocking>
+    </div>
+</template>
+
+<script>
+    import JqxDocking from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxDocking,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable')
+            }
+        },
+        mounted: function () {
+            this.$refs.myDocking.hideAllCloseButtons();
+        },
+        methods: {
+            capitalizeFirstLetter: function (string) {
+                return string.charAt(0).toUpperCase() + string.slice(1);
+            },
+            displayEvent: function (event) {
+                let windowID = event.args.window;
+                let windowHeader = document.getElementById(windowID).children[0].firstChild.textContent;
+
+                let eventData = 'Event: <span style="font-style: italic;">' + this.capitalizeFirstLetter(event.type) + '</span>';
+                eventData += ' <strong>' + windowHeader + '</strong>';
+
+                this.$refs.myPanel.prepend('<div style="margin-top: 5px;">' + eventData + '</div>');
+            },
+            myDockingOnDragStart: function (event) {
+                this.$refs.myPanel.clearcontent();
+                this.displayEvent(event);
+            },
+            myDockingOnDragEnd: function (event) {
+                this.displayEvent(event);
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/docking/events/main.js b/docking/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/docking/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/docking/events/package.json b/docking/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/docking/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/docking/importlayout/App.vue b/docking/importlayout/App.vue
new file mode 100644
index 00000000..f0f606fc
--- /dev/null
+++ b/docking/importlayout/App.vue
@@ -0,0 +1,54 @@
+<template>
+        <JqxDocking ref="myDocking" style="float: left;"
+            :width="getWidth" :orientation="'horizontal'" :mode="'default'">
+            <div>
+                <div id='window0' style="height: 200px">
+                    <div>CISC</div>
+                    <div>
+                        Before the RISC philosophy became prominent; many computer architects tried to bridge
+                        the so called semantic gap; i.e. to design instruction sets that directly supported
+                        high-level programming constructs such as procedure calls; loop control; and complex...
+                    </div>
+                </div>
+                <div id='window1' style="height: 180px">
+                    <div>Database management system</div>
+                    <div>
+                        A database management system (DBMS) is a software package with computer programs
+                        that control the creation; maintenance; and the use of a database. It allows organizations
+                        to conveniently develop databases...
+                    </div>
+                </div>
+            </div>
+            <div>
+                <div id='window2' style="height: 180px">
+                    <div>RISC</div>
+                    <div>
+                        Some aspects attributed to the first RISC-labeled designs around 1975 include the
+                        observations that the memory-restricted compilers of the time were often unable
+                        to take advantage...
+                    </div>
+                </div>
+            </div>
+        </JqxDocking>
+</template>
+
+<script>
+    import JqxDocking from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue";
+
+    export default {
+        components: {
+            JqxDocking
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('docking')
+            }
+        },
+        mounted: function () {
+            this.$refs.myDocking.importLayout('{"panel0": {"window0":{"collapsed":false}},"panel1": {"window1":{"collapsed":false}},"floating":{"window2":{"x":"200px","y":"400","width":"350px","height":"auto","collapsed":false}},"orientation": "horizontal"}');
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/docking/importlayout/main.js b/docking/importlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/docking/importlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/docking/importlayout/package.json b/docking/importlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/docking/importlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/docking/keyboardnavigation/App.vue b/docking/keyboardnavigation/App.vue
new file mode 100644
index 00000000..be8b4f2e
--- /dev/null
+++ b/docking/keyboardnavigation/App.vue
@@ -0,0 +1,64 @@
+<template>
+    <div>
+        <JqxDocking ref="myDocking"
+            :width="getWidth" :orientation="'horizontal'" :mode="'default'" :keyboardNavigation="true">
+            <div>
+                <div id='window0' style="height: 150px">
+                    <div>CISC</div>
+                    <div>
+                        Before the RISC philosophy became prominent; many computer architects tried to bridge
+                        the so called semantic gap; i.e. to design instruction sets that directly supported
+                        high-level programming constructs such as procedure calls; loop control; and complex...
+                    </div>
+                </div>
+                <div id='window1' style="height: 150px">
+                    <div>Database management system</div>
+                    <div>
+                        A database management system (DBMS) is a software package with computer programs
+                        that control the creation; maintenance; and the use of a database. It allows organizations
+                        to conveniently develop databases...
+                    </div>
+                </div>
+            </div>
+            <div>
+                <div id='window2' style="height: 150px">
+                    <div>RISC</div>
+                    <div>
+                        Some aspects attributed to the first RISC-labeled designs around 1975 include the
+                        observations that the memory-restricted compilers of the time were often unable
+                        to take advantage...
+                    </div>
+                </div>
+            </div>
+        </JqxDocking>
+
+        <ul>
+            <li><b>Tab</b> - Once the focus is received, users will be able to use the keyboard to change the focused Docking Panel.</li>
+            <li><b>Shift+Tab</b> - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous Docking Panel.</li>
+            <li><b>Esc</b> - closes the focused Docking Panel.</li>
+            <li><b>Enter</b> - collapses/expands the focused Docking Panel.</li>
+        </ul>
+    </div>
+</template>
+
+<script>
+    import JqxDocking from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue";
+
+    export default {
+        components: {
+            JqxDocking
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dataTable')
+            }
+        },
+        mounted: function () {
+            this.$refs.myDocking.showAllCollapseButtons();
+            this.$refs.myDocking.focus();
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/docking/keyboardnavigation/main.js b/docking/keyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/docking/keyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/docking/keyboardnavigation/package.json b/docking/keyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/docking/keyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/docking/righttoleftlayout/App.vue b/docking/righttoleftlayout/App.vue
new file mode 100644
index 00000000..96862b2f
--- /dev/null
+++ b/docking/righttoleftlayout/App.vue
@@ -0,0 +1,133 @@
+<template>
+    <JqxDocking :orientation='"horizontal"' :width="getWidth" :mode="'docked'" :rtl="true">
+        <div>
+            <div id="window1" style="height: 220px;">
+                <div>
+                    Date and Time
+                </div>
+                <div style="overflow: hidden;">
+                    <JqxCalendar :width="180" :height="180" :rtl="true" style="float: left; margin-right: 10px;">
+                    </JqxCalendar>
+                    <h3 style="text-align: center; color: #787878;">Sunny</h3>
+                    <div style="float: left; margin-left: 30px; text-align: center;">
+                        <img src="../../../images/sun-icon.png" alt="Sunny" />
+                    </div>
+                    <div style="text-align: left; margin-left: 5px; margin-top: 10px; font-size: 10px; float: right; margin-right: 20px;">
+                        Mo: 23 &deg;C<br />
+                        To 25 &deg;C<br />
+                        We: 27 &deg;C
+                    </div>
+                </div>
+            </div>
+            <div id="window2" style="height: 220px">
+                <div>
+                    News
+                </div>
+                <div style="overflow: hidden;">
+                    <JqxTabs :width="350" :height="181" :selectedItem="1" :rtl="true">
+                        <ul style="margin-left: 30px">
+                            <li>World</li>
+                            <li>Local</li>
+                            <li>Sports</li>
+                        </ul>
+                        <div>
+                            <div style="padding: 3px; margin: 10px; width: 150px; height: 84px; float: left;">
+                                <img src="../../../images/news_ie6.jpg" alt="IE6" title="IE6" />
+                            </div>
+                            <span style="font-size: 11px;">
+                                Microsoft is set to get a little more pushy ensuring
+                                you have an up-to-date browser and will automatically update Internet Explorer...
+                                <span style="font-size: 8px;">(BBC)</span>
+                            </span>
+                        </div>
+                        <div>
+                            <div style="padding: 3px; margin: 10px; width: 144px; height: 81px; float: left;">
+                                <img src="../../../images/local.jpg" alt="Tennis" title="Tennis" />
+                            </div>
+                            <span style="font-size: 11px;">
+                                The High Court has dismissed a challenge to laws that
+                                require immigrant spouses to be able to speak English in order to live in the UK...
+                                <span style="font-size: 8px;">(BBC)</span>
+                            </span>
+                        </div>
+                        <div>
+                            <div style="padding: 3px; margin: 10px; width: 130px; height: 73px; float: left;">
+                                <img src="../../../images/tennis.jpg" alt="Tennis" title="Tennis" />
+                            </div>
+                            <span style="font-size: 11px;">
+                                British number one Elena Baltacha says Judy Murray is
+                                a "fantastic" appointment as Great Britain's new Fed Cup captain... <span style="font-size: 8px;">(BBC)</span>
+                            </span>
+                        </div>
+                    </JqxTabs>
+                </div>
+            </div>
+        </div>
+        <div>
+            <div id="window3" style="height: 220px">
+                <div>
+                    Zodiac
+                </div>
+                <div style="overflow: hidden;">
+                    <JqxPanel :width="'100%'" :height="180" :rtl="true">
+                        <div style="padding-left: 20px;">
+                            <div style="padding: 3px; width: 150px; height: 110px; float: left; margin: 10px;">
+                                <img src="../../../images/leo.jpg" alt="Leo" title="Leo" />
+                            </div>
+                            <h4 style="text-align: right; color: #787878;">Leo</h4>
+                            <span style="text-align: right; direction: rtl; font-size: 12px">
+                                Individuals born under the zodiac sign of Leo are very
+                                good looking and have a healthy physique, with a broad forehead. Leo are very intelligent,
+                                extremely courageous, love their freedom and live by their own rules. Indulgence
+                                and extravagance is like second nature to them and they love to...
+                            </span>
+                        </div>
+                    </JqxPanel>
+                </div>
+            </div>
+            <div id="window4" style="height: 220px;">
+                <div>
+                    E-mail
+                </div>
+                <div style="overflow: hidden;">
+                    <JqxListBox :width="'100%'" :height="181" :source="source" :rtl="true">
+                    </JqxListBox>
+                </div>
+            </div>
+        </div>
+    </JqxDocking>
+</template>
+
+<script>
+    import JqxDocking from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue";
+    import JqxCalendar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue";
+    import JqxTabs from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxDocking,
+            JqxCalendar,
+            JqxTabs,
+            JqxPanel,
+            JqxListBox
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('docking'),
+                source: [
+                    'JavaScript Certification - Welcome to our network',
+                    'Business Challenges via Web take a part',
+                    'jQWidgets better web, less time. Take a tour',
+                    'Facebook - you have 7 new notifications',
+                    'Twitter - John Doe is following you. Look at his profile',
+                    'New videos, take a look at YouTube.com'
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/docking/righttoleftlayout/main.js b/docking/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/docking/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/docking/righttoleftlayout/package.json b/docking/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/docking/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/docking/settings/App.vue b/docking/settings/App.vue
new file mode 100644
index 00000000..fca663e6
--- /dev/null
+++ b/docking/settings/App.vue
@@ -0,0 +1,137 @@
+<template>
+    <div>
+        <div style="float: left">
+            <JqxDocking ref="myDocking"
+                        :width="420" :orientation="'horizontal'" :mode="'default'"
+                        :windowsMode="{ window0: 'floating' }">
+                <div id='panel0'>
+                    <div id='window0' style="height: 70px; width: 220px">
+                        <div>VueDock2</div>
+                        <div>You cannot drop this object.</div>
+                    </div>
+                    <div id='window1' style="height: 70px; width: 100px">
+                        <div>VueDock1</div>
+                        <div>You cannot drag this object.</div>
+                    </div>
+                </div>
+                <div id='panel1'>
+                    <div id='window2' style="height: 70px; width: 100px">
+                        <div>VueDock3</div>
+                        <div>You can drag and drop this object.</div>
+                    </div>
+                    <div id='window3' style="height: 70px; width: 100px">
+                        <div>VueDock4</div>
+                        <div>You can drag and drop this object.</div>
+                    </div>
+                </div>
+            </JqxDocking>
+        </div>
+
+        <div style="float: left; margin-top: 30px">
+            <span style="margin-left: 20px; margin-top: 20px; margin-bottom: 30px">Settings</span>
+            <table style="margin-left: 20px; margin-top: 20px; margin-bottom: 30px">
+                <tr>
+                    <td>
+                        <JqxCheckBox ref="collapseButtonsCheckbox" @change="collapseButtonsCheckboxOnChange()"
+                                     :width="200" :checked="true">
+                            Collapse Buttons
+                        </JqxCheckBox>
+                    </td>
+                    <td>
+                        <JqxButton @click="moveButtonOnClick()">Move VueDock4 To Left Zone</JqxButton>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <JqxCheckBox ref="closeButtonsCheckbox" @change="closeButtonsCheckboxOnChange()"
+                                     :width="200">
+                            Close Buttons
+                        </JqxCheckBox>
+                    </td>
+                    <td>
+                        <JqxButton @click="collapseButtonOnClick()">Collapse VueDock1</JqxButton>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <JqxCheckBox @change="disabledCheckboxOnChange()" :width="200">Disabled</JqxCheckBox>
+                    </td>
+                    <td>
+                        <JqxButton @click="expandButtonOnClick()">Expand VueDock1</JqxButton>
+                    </td>
+                </tr>
+                <tr>
+                    <td style="width: 100px">
+                        <span style="font-family: Verdana; font-size: 13px">Windows Margin</span>
+                        <JqxSlider @change="mySliderOnChange($event)"
+                                   :width="200" :max="9" :value="5" :mode="'fixed'" :ticksFrequency="1">
+                        </JqxSlider>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDocking from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+
+    export default {
+        components: {
+            JqxDocking,
+            JqxCheckBox,
+            JqxButton,
+            JqxSlider
+        },
+        mounted: function () {
+            this.$refs.myDocking.setWindowPosition('window0', 100, 100);
+            this.$refs.myDocking.pinWindow('window1');
+            this.$refs.myDocking.hideAllCloseButtons();
+            this.$refs.myDocking.showAllCollapseButtons();
+        },
+        methods: {
+            collapseButtonsCheckboxOnChange: function() {
+                let checked = this.$refs.collapseButtonsCheckbox.checked;
+                if (checked) {
+                    this.$refs.myDocking.showAllCollapseButtons();
+                } else {
+                    this.$refs.myDocking.hideAllCollapseButtons();
+                }
+            },
+            closeButtonsCheckboxOnChange: function() {
+                let checked = this.$refs.closeButtonsCheckbox.checked;
+                if (checked) {
+                    this.$refs.myDocking.showAllCloseButtons();
+                } else {
+                    this.$refs.myDocking.hideAllCloseButtons();
+                }
+            },
+            disabledCheckboxOnChange: function() {
+                let disabled = this.$refs.myDocking.disabled;
+                if (disabled) {
+                    this.$refs.myDocking.enable();
+                } else {
+                    this.$refs.myDocking.disable();
+                }
+            },
+            moveButtonOnClick: function() {
+                this.$refs.myDocking.move('window3', 0, 1);
+            },
+            collapseButtonOnClick: function() {
+                this.$refs.myDocking.collapseWindow('window1');
+            },
+            expandButtonOnClick: function() {
+                this.$refs.myDocking.expandWindow('window1');
+            },
+            mySliderOnChange: function (event) {
+                this.$refs.myDocking.windowsOffset = event.args.value;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/docking/settings/main.js b/docking/settings/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/docking/settings/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/docking/settings/package.json b/docking/settings/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/docking/settings/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dockinglayout/createcomponent/App.vue b/dockinglayout/createcomponent/App.vue
new file mode 100644
index 00000000..feab6f06
--- /dev/null
+++ b/dockinglayout/createcomponent/App.vue
@@ -0,0 +1,230 @@
+<template>
+    <JqxDockingLayout ref="myDockingLayout" :autoCreate="false">
+        <!--The panel content divs can have a flat structure-->
+        <!--autoHideGroup-->
+        <div data-container="ToolboxPanel">
+            List of tools
+        </div>
+        <div data-container="HelpPanel">
+            Help topics
+        </div>
+        <!--documentGroup-->
+        <div data-container="Document1Panel">
+            Document 1 content
+        </div>
+        <div data-container="Document2Panel">
+            Document 2 content
+        </div>
+        <!--bottom tabbedGroup-->
+        <div data-container="ErrorListPanel">
+            List of errors
+        </div>
+        <!--right tabbedGroup-->
+        <div data-container="SolutionExplorerPanel">
+            <div id="treeContainer" style="border: none;"></div>
+        </div>
+        <div data-container="PropertiesPanel">
+            List of properties
+        </div>
+        <!--floatGroup-->
+        <div data-container="OutputPanel">
+            <div style="font-family: Consolas;">
+                <p>
+                    Themes installation complete.
+                </p>
+                <p>
+                    List of installed stylesheet files. Include at least one stylesheet Theme file and
+                    the images folder:
+                </p>
+                <ul>
+                    <li>
+                        styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file should
+                        be always included in your project.
+                    </li>
+                    <li>styles/jqx.arctic.css: Stylesheet for the Arctic Theme</li>
+                    <li>styles/jqx.web.css: Stylesheet for the Web Theme</li>
+                    <li>styles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme</li>
+                    <li>styles/jqx.classic.css: Stylesheet for the Classic Theme</li>
+                    <li>styles/jqx.darkblue.css: Stylesheet for the DarkBlue Theme</li>
+                    <li>styles/jqx.energyblue.css: Stylesheet for the EnergyBlue Theme</li>
+                    <li>styles/jqx.shinyblack.css: Stylesheet for the ShinyBlack Theme</li>
+                    <li>styles/jqx.office.css: Stylesheet for the Office Theme</li>
+                    <li>styles/jqx.metro.css: Stylesheet for the Metro Theme</li>
+                    <li>styles/jqx.metrodark.css: Stylesheet for the Metro Dark Theme</li>
+                    <li>styles/jqx.orange.css: Stylesheet for the Orange Theme</li>
+                    <li>styles/jqx.summer.css: Stylesheet for the Summer Theme</li>
+                    <li>styles/jqx.black.css: Stylesheet for the Black Theme</li>
+                    <li>styles/jqx.fresh.css: Stylesheet for the Fresh Theme</li>
+                    <li>styles/jqx.highcontrast.css: Stylesheet for the HighContrast Theme</li>
+                    <li>styles/jqx.blackberry.css: Stylesheet for the Blackberry Theme</li>
+                    <li>styles/jqx.android.css: Stylesheet for the Android Theme</li>
+                    <li>styles/jqx.mobile.css: Stylesheet for the Mobile Theme</li>
+                    <li>styles/jqx.windowsphone.css: Stylesheet for the Windows Phone Theme</li>
+                    <li>styles/jqx.ui-darkness.css: Stylesheet for the UI Darkness Theme</li>
+                    <li>styles/jqx.ui-lightness.css: Stylesheet for the UI Lightness Theme</li>
+                    <li>styles/jqx.ui-le-frog.css: Stylesheet for the UI Le Frog Theme</li>
+                    <li>styles/jqx.ui-overcast.css: Stylesheet for the UI Overcast Theme</li>
+                    <li>styles/jqx.ui-redmond.css: Stylesheet for the UI Redmond Theme</li>
+                    <li>styles/jqx.ui-smoothness.css: Stylesheet for the UI Smoothness Theme</li>
+                    <li>styles/jqx.ui-start.css: Stylesheet for the UI Start Theme</li>
+                    <li>styles/jqx.ui-sunny.css: Stylesheet for the UI Sunny Theme</li>
+                    <li>styles/images: contains images referenced in the stylesheet files</li>
+                </ul>
+            </div>
+        </div>
+    </JqxDockingLayout>
+</template>
+
+<script>
+    import JqxDockingLayout from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdockinglayout.vue";
+    import JqxTree from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue";
+
+    export default {
+        components: {
+            JqxDockingLayout
+        },
+        mounted: function () {
+            this.$refs.myDockingLayout.createComponent({ width: getWidth('dockingLayout'), height: 600, layout: this.generateLayout() });
+        },
+        methods: {
+            generateLayout: function () {
+                const layout = [
+                    {
+                        type: 'layoutGroup',
+                        orientation: 'horizontal',
+                        items: [{
+                            type: 'autoHideGroup',
+                            alignment: 'left',
+                            width: 80,
+                            unpinnedWidth: 200,
+                            items: [{
+                                type: 'layoutPanel',
+                                title: 'Toolbox',
+                                contentContainer: 'ToolboxPanel'
+                            }, {
+                                type: 'layoutPanel',
+                                title: 'Help',
+                                contentContainer: 'HelpPanel'
+                            }]
+                        },
+                        {
+                            type: 'layoutGroup',
+                            orientation: 'vertical',
+                            width: 500,
+                            items: [{
+                                type: 'documentGroup',
+                                height: 400,
+                                minHeight: 200,
+                                items: [{
+                                    type: 'documentPanel',
+                                    title: 'Document 1',
+                                    contentContainer: 'Document1Panel'
+                                },
+                                {
+                                    type: 'documentPanel',
+                                    title: 'Document 2',
+                                    contentContainer: 'Document2Panel'
+                                }]
+                            },
+                            {
+                                type: 'tabbedGroup',
+                                height: 200,
+                                pinnedHeight: 30,
+                                items: [{
+                                    type: 'layoutPanel',
+                                    title: 'Error List',
+                                    contentContainer: 'ErrorListPanel'
+                                }]
+                            }]
+                        },
+                        {
+                            type: 'tabbedGroup',
+                            width: 220,
+                            minWidth: 200,
+                            items: [
+                                {
+                                    type: 'layoutPanel',
+                                    title: 'Solution Explorer',
+                                    contentContainer: 'SolutionExplorerPanel',
+                                    initContent: () => {
+                                        // initialize a jqxTree inside the Solution Explorer Panel
+                                        let source = [{
+                                            icon: '../../../images/earth.png',
+                                            label: 'Project',
+                                            expanded: true,
+                                            items: [
+                                                {
+                                                    icon: '../../../images/folder.png',
+                                                    label: 'css',
+                                                    expanded: true,
+                                                    items: [{
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqx.base.css'
+                                                    },
+                                                    {
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqx.energyblue.css'
+                                                    }, {
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqx.orange.css'
+                                                    }]
+                                                },
+                                                {
+                                                    icon: '../../../images/folder.png',
+                                                    label: 'scripts',
+                                                    items: [{
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqxcore.js'
+                                                    },
+                                                    {
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqxdata.js'
+                                                    }, {
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqxgrid.js'
+                                                    }]
+                                                },
+                                                {
+                                                    icon: '../../../images/nav1.png',
+                                                    label: 'index.htm'
+                                                }]
+                                        }];
+
+                                        jqwidgets.createInstance('#treeContainer', 'jqxTree', { width: '100%', height: '99%', source: source })
+                                    }
+                                },
+                                {
+                                    type: 'layoutPanel',
+                                    title: 'Properties',
+                                    contentContainer: 'PropertiesPanel'
+                                }]
+                        }]
+                    },
+                    {
+                        type: 'floatGroup',
+                        width: 500,
+                        height: 300,
+                        position: {
+                            x: 350,
+                            y: 250
+                        },
+                        items: [{
+                            type: 'layoutPanel',
+                            title: 'Output',
+                            contentContainer: 'OutputPanel',
+                            selected: true
+                        }]
+                    }
+                ];
+
+                return layout;
+            }
+        }
+    };
+</script>
+
+<style>
+    .jqx-layout-group-auto-hide-content-vertical {
+        width: 200px;
+    }
+</style>
\ No newline at end of file
diff --git a/dockinglayout/createcomponent/main.js b/dockinglayout/createcomponent/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dockinglayout/createcomponent/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dockinglayout/createcomponent/package.json b/dockinglayout/createcomponent/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dockinglayout/createcomponent/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dockinglayout/defaultfunctionality/App.vue b/dockinglayout/defaultfunctionality/App.vue
new file mode 100644
index 00000000..b51408c2
--- /dev/null
+++ b/dockinglayout/defaultfunctionality/App.vue
@@ -0,0 +1,226 @@
+<template>
+    <JqxDockingLayout :width="getWidth" :height="600" :layout="layout">
+        <!--The panel content divs can have a flat structure-->
+        <!--autoHideGroup-->
+        <div data-container="ToolboxPanel">
+            List of tools
+        </div>
+        <div data-container="HelpPanel">
+            Help topics
+        </div>
+        <!--documentGroup-->
+        <div data-container="Document1Panel">
+            Document 1 content
+        </div>
+        <div data-container="Document2Panel">
+            Document 2 content
+        </div>
+        <!--bottom tabbedGroup-->
+        <div data-container="ErrorListPanel">
+            List of errors
+        </div>
+        <!--right tabbedGroup-->
+        <div data-container="SolutionExplorerPanel">
+            <div id="treeContainer" style="border: none;"></div>
+        </div>
+        <div data-container="PropertiesPanel">
+            List of properties
+        </div>
+        <!--floatGroup-->
+        <div data-container="OutputPanel">
+            <div style="font-family: Consolas;">
+                <p>
+                    Themes installation complete.
+                </p>
+                <p>
+                    List of installed stylesheet files. Include at least one stylesheet Theme file and
+                    the images folder:
+                </p>
+                <ul>
+                    <li>
+                        styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file should
+                        be always included in your project.
+                    </li>
+                    <li>styles/jqx.arctic.css: Stylesheet for the Arctic Theme</li>
+                    <li>styles/jqx.web.css: Stylesheet for the Web Theme</li>
+                    <li>styles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme</li>
+                    <li>styles/jqx.classic.css: Stylesheet for the Classic Theme</li>
+                    <li>styles/jqx.darkblue.css: Stylesheet for the DarkBlue Theme</li>
+                    <li>styles/jqx.energyblue.css: Stylesheet for the EnergyBlue Theme</li>
+                    <li>styles/jqx.shinyblack.css: Stylesheet for the ShinyBlack Theme</li>
+                    <li>styles/jqx.office.css: Stylesheet for the Office Theme</li>
+                    <li>styles/jqx.metro.css: Stylesheet for the Metro Theme</li>
+                    <li>styles/jqx.metrodark.css: Stylesheet for the Metro Dark Theme</li>
+                    <li>styles/jqx.orange.css: Stylesheet for the Orange Theme</li>
+                    <li>styles/jqx.summer.css: Stylesheet for the Summer Theme</li>
+                    <li>styles/jqx.black.css: Stylesheet for the Black Theme</li>
+                    <li>styles/jqx.fresh.css: Stylesheet for the Fresh Theme</li>
+                    <li>styles/jqx.highcontrast.css: Stylesheet for the HighContrast Theme</li>
+                    <li>styles/jqx.blackberry.css: Stylesheet for the Blackberry Theme</li>
+                    <li>styles/jqx.android.css: Stylesheet for the Android Theme</li>
+                    <li>styles/jqx.mobile.css: Stylesheet for the Mobile Theme</li>
+                    <li>styles/jqx.windowsphone.css: Stylesheet for the Windows Phone Theme</li>
+                    <li>styles/jqx.ui-darkness.css: Stylesheet for the UI Darkness Theme</li>
+                    <li>styles/jqx.ui-lightness.css: Stylesheet for the UI Lightness Theme</li>
+                    <li>styles/jqx.ui-le-frog.css: Stylesheet for the UI Le Frog Theme</li>
+                    <li>styles/jqx.ui-overcast.css: Stylesheet for the UI Overcast Theme</li>
+                    <li>styles/jqx.ui-redmond.css: Stylesheet for the UI Redmond Theme</li>
+                    <li>styles/jqx.ui-smoothness.css: Stylesheet for the UI Smoothness Theme</li>
+                    <li>styles/jqx.ui-start.css: Stylesheet for the UI Start Theme</li>
+                    <li>styles/jqx.ui-sunny.css: Stylesheet for the UI Sunny Theme</li>
+                    <li>styles/images: contains images referenced in the stylesheet files</li>
+                </ul>
+            </div>
+        </div>
+    </JqxDockingLayout>
+</template>
+
+<script>
+    import JqxDockingLayout from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdockinglayout.vue";
+    import JqxTree from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue";
+
+    export default {
+        components: {
+            JqxDockingLayout
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dockingLayout'),
+                layout: [
+                    {
+                        type: 'layoutGroup',
+                        orientation: 'horizontal',
+                        items: [{
+                            type: 'autoHideGroup',
+                            alignment: 'left',
+                            width: 80,
+                            unpinnedWidth: 200,
+                            items: [{
+                                type: 'layoutPanel',
+                                title: 'Toolbox',
+                                contentContainer: 'ToolboxPanel'
+                            }, {
+                                type: 'layoutPanel',
+                                title: 'Help',
+                                contentContainer: 'HelpPanel'
+                            }]
+                        },
+                        {
+                            type: 'layoutGroup',
+                            orientation: 'vertical',
+                            width: 500,
+                            items: [{
+                                type: 'documentGroup',
+                                height: 400,
+                                minHeight: 200,
+                                items: [{
+                                    type: 'documentPanel',
+                                    title: 'Document 1',
+                                    contentContainer: 'Document1Panel'
+                                },
+                                {
+                                    type: 'documentPanel',
+                                    title: 'Document 2',
+                                    contentContainer: 'Document2Panel'
+                                }]
+                            },
+                            {
+                                type: 'tabbedGroup',
+                                height: 200,
+                                pinnedHeight: 30,
+                                items: [{
+                                    type: 'layoutPanel',
+                                    title: 'Error List',
+                                    contentContainer: 'ErrorListPanel'
+                                }]
+                            }]
+                        },
+                        {
+                            type: 'tabbedGroup',
+                            width: 220,
+                            minWidth: 200,
+                            items: [
+                                {
+                                    type: 'layoutPanel',
+                                    title: 'Solution Explorer',
+                                    contentContainer: 'SolutionExplorerPanel',
+                                    initContent: () => {
+                                        // initialize a jqxTree inside the Solution Explorer Panel
+                                        let source = [{
+                                            icon: '../../../images/earth.png',
+                                            label: 'Project',
+                                            expanded: true,
+                                            items: [
+                                                {
+                                                    icon: '../../../images/folder.png',
+                                                    label: 'css',
+                                                    expanded: true,
+                                                    items: [{
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqx.base.css'
+                                                    },
+                                                    {
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqx.energyblue.css'
+                                                    }, {
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqx.orange.css'
+                                                    }]
+                                                },
+                                                {
+                                                    icon: '../../../images/folder.png',
+                                                    label: 'scripts',
+                                                    items: [{
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqxcore.js'
+                                                    },
+                                                    {
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqxdata.js'
+                                                    }, {
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqxgrid.js'
+                                                    }]
+                                                },
+                                                {
+                                                    icon: '../../../images/nav1.png',
+                                                    label: 'index.htm'
+                                                }]
+                                        }];
+
+                                        jqwidgets.createInstance('#treeContainer', 'jqxTree', { width: '100%', height: '99%', source: source })
+                                    }
+                                },
+                                {
+                                    type: 'layoutPanel',
+                                    title: 'Properties',
+                                    contentContainer: 'PropertiesPanel'
+                                }]
+                        }]
+                    },
+                    {
+                        type: 'floatGroup',
+                        width: 500,
+                        height: 300,
+                        position: {
+                            x: 350,
+                            y: 250
+                        },
+                        items: [{
+                            type: 'layoutPanel',
+                            title: 'Output',
+                            contentContainer: 'OutputPanel',
+                            selected: true
+                        }]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+    .jqx-layout-group-auto-hide-content-vertical {
+        width: 200px;
+    }
+</style>
\ No newline at end of file
diff --git a/dockinglayout/defaultfunctionality/main.js b/dockinglayout/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dockinglayout/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dockinglayout/defaultfunctionality/package.json b/dockinglayout/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dockinglayout/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dockinglayout/fluidsize/App.vue b/dockinglayout/fluidsize/App.vue
new file mode 100644
index 00000000..eda96d6b
--- /dev/null
+++ b/dockinglayout/fluidsize/App.vue
@@ -0,0 +1,105 @@
+<template>
+    <JqxDockingLayout :width="'100%'" :height="'90%'" :layout="layout">
+        <!--The panel content divs can have a flat structure-->
+        <!--documentGroup-->
+        <div data-container="Document1Panel">
+            Document 1 content
+        </div>
+        <div data-container="Document2Panel">
+            Document 2 content
+        </div>
+        <!--bottom tabbedGroup-->
+        <div data-container="ErrorListPanel">
+            List of errors
+        </div>
+        <div data-container="OutputPanel">
+            Output
+        </div>
+        <!--right tabbedGroup-->
+        <div data-container="SolutionExplorerPanel">
+            Solution structure
+        </div>
+        <div data-container="PropertiesPanel">
+            List of properties
+        </div>
+    </JqxDockingLayout>
+</template>
+
+<script>
+    import JqxDockingLayout from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdockinglayout.vue";
+
+    export default {
+        components: {
+            JqxDockingLayout
+        },
+        data: function () {
+            return {
+                layout: [
+                    {
+                        type: 'layoutGroup',
+                        orientation: 'horizontal',
+                        items: [{
+                            type: 'layoutGroup',
+                            orientation: 'vertical',
+                            width: '60%',
+                            items: [{
+                                type: 'documentGroup',
+                                height: '50%',
+                                minHeight: '25%',
+                                items: [{
+                                    type: 'documentPanel',
+                                    title: 'Document 1',
+                                    contentContainer: 'Document1Panel'
+                                }, {
+                                    type: 'documentPanel',
+                                    title: 'Document 2',
+                                    contentContainer: 'Document2Panel'
+                                }]
+                            }, {
+                                type: 'tabbedGroup',
+                                height: '50%',
+                                pinnedHeight: '10%',
+                                items: [{
+                                    type: 'layoutPanel',
+                                    title: 'Error List',
+                                    contentContainer: 'ErrorListPanel'
+                                }, {
+                                    type: 'layoutPanel',
+                                    title: 'Output',
+                                    contentContainer: 'OutputPanel',
+                                    selected: true
+                                }]
+                            }]
+                        }, {
+                            type: 'tabbedGroup',
+                            width: '40%',
+                            items: [{
+                                type: 'layoutPanel',
+                                title: 'Solution Explorer',
+                                contentContainer: 'SolutionExplorerPanel'
+                            }, {
+                                type: 'layoutPanel',
+                                title: 'Properties',
+                                contentContainer: 'PropertiesPanel'
+                            }]
+                        }]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+    .jqx-layout-group-auto-hide-content-vertical {
+        width: 200px;
+    }
+
+    html, body {
+        padding: 0;
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+</style>
\ No newline at end of file
diff --git a/dockinglayout/fluidsize/main.js b/dockinglayout/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dockinglayout/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dockinglayout/fluidsize/package.json b/dockinglayout/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dockinglayout/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dockinglayout/idelikelayout/App.vue b/dockinglayout/idelikelayout/App.vue
new file mode 100644
index 00000000..14714584
--- /dev/null
+++ b/dockinglayout/idelikelayout/App.vue
@@ -0,0 +1,271 @@
+<template>
+    <div>
+        <JqxDockingLayout ref="myDockingLayout" :width="getWidth" :height="600" :layout="layout">
+            <!--The panel content divs can have a flat structure-->
+            <!--autoHideGroup-->
+            <div data-container="ToolboxPanel">
+                List of tools
+            </div>
+            <div data-container="HelpPanel">
+                Help topics
+            </div>
+            <!--documentGroup-->
+            <div data-container="Document1Panel">
+                <div style="padding: 5px;">
+                    <textarea id="Document1TextArea" style="margin: 5px;"></textarea>
+                </div>
+            </div>
+            <div data-container="Document2Panel">
+                <div style="padding: 5px;">
+                    <textarea id="Document2TextArea" style="margin: 5px;"></textarea>
+                </div>
+            </div>
+            <!--bottom tabbedGroup-->
+            <div data-container="ErrorListPanel">
+                No errors.
+            </div>
+            <div data-container="PerformancePanel">
+                <div id="cpuUsage" style="width: 99%; height: 100px;">
+                </div>
+            </div>
+            <!--right tabbedGroup-->
+            <div data-container="SolutionExplorerPanel">
+                <div id="solutionExplorerTree" style="border: none;">
+                </div>
+            </div>
+            <div data-container="PropertiesPanel">
+                List of properties
+            </div>
+        </JqxDockingLayout>
+
+        <br />
+
+        <JqxButton ref="viewServerExplorerBtn" :width="200"
+                   @click="viewServerExplorerBtnOnClick()">
+            View Server Explorer
+        </JqxButton>
+    </div>
+</template>
+
+<script>
+    import JqxDockingLayout from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdockinglayout.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxTextArea from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue";
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxTree from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue";
+
+    export default {
+        components: {
+            JqxDockingLayout,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dockingLayout'),
+                layout: [
+                    {
+                        type: 'layoutGroup',
+                        orientation: 'horizontal',
+                        items: [{
+                            type: 'autoHideGroup',
+                            alignment: 'left',
+                            width: 80,
+                            unpinnedWidth: 200,
+                            items: [{
+                                type: 'layoutPanel',
+                                title: 'Toolbox',
+                                contentContainer: 'ToolboxPanel'
+                            }, {
+                                type: 'layoutPanel',
+                                title: 'Help',
+                                contentContainer: 'HelpPanel'
+                            }]
+                        }, {
+                            type: 'layoutGroup',
+                            orientation: 'vertical',
+                            width: 500,
+                            items: [{
+                                type: 'documentGroup',
+                                height: 400,
+                                minHeight: 200,
+                                items: [{
+                                    type: 'documentPanel',
+                                    title: 'index.htm',
+                                    contentContainer: 'Document1Panel',
+                                    initContent: () => {
+                                        let textArea = jqwidgets.createInstance('#Document1TextArea', 'jqxTextArea', { width: '100%', height: 400 });
+                                        textArea.val('<!DOCTYPE html>\n<html>\n\t<head>\n\t<title>Page Title</title>\n\t        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>\n\t<body>\n\t\t<h1>This is a Heading</h1>\n\t\t<p>This is a paragraph.</p>\n\t</body>\n</html>');
+                                    }
+                                }, {
+                                    type: 'documentPanel',
+                                    title: 'New Document',
+                                    contentContainer: 'Document2Panel',
+                                    initContent: () => {
+                                        jqwidgets.createInstance('#Document2TextArea', 'jqxTextArea', { width: '100%', height: 400, placeHolder: 'Blank document' });
+                                    }
+                                }]
+                            }, {
+                                type: 'tabbedGroup',
+                                height: 200,
+                                minHeight: 200,
+                                pinnedHeight: 30,
+                                items: [{
+                                    type: 'layoutPanel',
+                                    title: 'Error List',
+                                    contentContainer: 'ErrorListPanel'
+                                }, {
+                                    type: 'layoutPanel',
+                                    title: 'Performance',
+                                    contentContainer: 'PerformancePanel',
+                                    selected: true,
+                                    initContent: () => {
+                                        let data = [1, 5, 12, 5, 33, 38, 40, 42, 18, 18, 70, 76, 75, 99, 100, 88, 64, 13, 19, 15];
+
+                                        let chartOptions = {
+                                            title: 'CPU Usage',
+                                            description: '',
+                                            showLegend: false,
+                                            enableAnimations: false,
+                                            showBorderLine: false,
+                                            showToolTips: false,
+                                            backgroundColor: 'transparent',
+                                            padding: {
+                                                left: 0,
+                                                top: 10,
+                                                right: 0,
+                                                bottom: 0
+                                            },
+                                            titlePadding: {
+                                                left: 0,
+                                                top: 0,
+                                                right: 0,
+                                                bottom: 0
+                                            },
+                                            source: data,
+                                            xAxis: {
+                                                visible: false,
+                                                valuesOnTicks: false
+                                            },
+                                            colorScheme: 'scheme01',
+                                            seriesGroups: [{
+                                                type: 'line',
+                                                columnsGapPercent: 0,
+                                                columnsMaxWidth: 2,
+                                                valueAxis: {
+                                                    minValue: 0,
+                                                    visible: false
+                                                },
+                                                series: [{
+                                                    linesUnselectMode: 'click',
+                                                    colorFunction: function (value, itemIndex, serie, group) {
+                                                        if (value <= 33) {
+                                                            return '#32CD32';
+                                                        } else if (value <= 66) {
+                                                            return '#FFD700';
+                                                        } else {
+                                                            return '#AA4643';
+                                                        }
+                                                    }
+                                                }]
+                                            }]
+                                        };
+                                        jqwidgets.createInstance('#cpuUsage', 'jqxChart', chartOptions);
+                                    }
+                                }]
+                            }]
+                        }, {
+                            type: 'tabbedGroup',
+                            width: 220,
+                            minWidth: 200,
+                            items: [{
+                                type: 'layoutPanel',
+                                title: 'Solution Explorer',
+                                contentContainer: 'SolutionExplorerPanel',
+                                initContent: () => {
+                                    // initialize a jqxTree inside the Solution Explorer Panel
+                                    let source = [{
+                                        icon: '../../../images/earth.png',
+                                        label: 'Project',
+                                        expanded: true,
+                                        items: [{
+                                            icon: '../../../images/folder.png',
+                                            label: 'css',
+                                            expanded: true,
+                                            items: [{
+                                                icon: '../../../images/nav1.png',
+                                                label: 'jqx.base.css'
+                                            }, {
+                                                icon: '../../../images/nav1.png',
+                                                label: 'jqx.energyblue.css'
+                                            }, {
+                                                icon: '../../../images/nav1.png',
+                                                label: 'jqx.orange.css'
+                                            }]
+                                        }, {
+                                            icon: '../../../images/folder.png',
+                                            label: 'scripts',
+                                            items: [{
+                                                icon: '../../../images/nav1.png',
+                                                label: 'jqxcore.js'
+                                            }, {
+                                                icon: '../../../images/nav1.png',
+                                                label: 'jqxdata.js'
+                                            }, {
+                                                icon: '../../../images/nav1.png',
+                                                label: 'jqxgrid.js'
+                                            }]
+                                        }, {
+                                            icon: '../../../images/nav1.png',
+                                            label: 'index.htm',
+                                            selected: true
+                                        }]
+                                    }];
+                                    jqwidgets.createInstance('#solutionExplorerTree', 'jqxTree', { width: 190, height: '99%', source: source });
+                                }
+                            }, {
+                                type: 'layoutPanel',
+                                title: 'Properties',
+                                contentContainer: 'PropertiesPanel'
+                            }]
+                        }]
+                    }
+                ]
+            }
+        },
+        methods: {
+            viewServerExplorerBtnOnClick: function () {
+                this.$refs.myDockingLayout.addFloatGroup(300, 200, { x: 500, y: 200 }, 'layoutPanel', 'Server Explorer', '<div id="serverExplorerTree" />',
+                    () => {
+                        let source = [{
+                            icon: '../../../images/dataadapter.png',
+                            label: 'Data Connections',
+                            expanded: true,
+                            items: [{
+                                icon: '../../../images/validator.png',
+                                label: 'northwinddatabase.mdf'
+                            }]
+                        }, {
+                            icon: '../../../images/nav1.png',
+                            label: 'Servers',
+                            items: [{
+                                icon: '../../../images/nav1.png',
+                                label: 'WorkStation3-PC'
+                            }, {
+                                icon: '../../../images/dragdrop.png',
+                                label: 'SharePoint Connections'
+                            }]
+                        }];
+                        jqwidgets.createInstance('#serverExplorerTree', 'jqxTree', { width: '99%', height: '99%', source: source });
+                    }
+                );
+                this.$refs.viewServerExplorerBtn.disabled = true;
+            }
+        }
+    };
+</script>
+
+<style>
+    .jqx-layout-group-auto-hide-content-vertical {
+        width: 200px;
+    }
+</style>
\ No newline at end of file
diff --git a/dockinglayout/idelikelayout/main.js b/dockinglayout/idelikelayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dockinglayout/idelikelayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dockinglayout/idelikelayout/package.json b/dockinglayout/idelikelayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dockinglayout/idelikelayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dockinglayout/righttoleftlayout/App.vue b/dockinglayout/righttoleftlayout/App.vue
new file mode 100644
index 00000000..f3e88ba2
--- /dev/null
+++ b/dockinglayout/righttoleftlayout/App.vue
@@ -0,0 +1,234 @@
+<template>
+    <JqxDockingLayout ref="myDockingLayout" :width="getWidth" :height="600" :layout="layout" :rtl="true">
+        <!--The panel content divs can have a flat structure-->
+        <!--autoHideGroup-->
+        <div data-container="ToolboxPanel">
+            List of tools
+        </div>
+        <div data-container="HelpPanel">
+            Help topics
+        </div>
+        <!--documentGroup-->
+        <div data-container="Document1Panel">
+            Document 1 content
+        </div>
+        <div data-container="Document2Panel">
+            Document 2 content
+        </div>
+        <!--bottom tabbedGroup-->
+        <div data-container="ErrorListPanel">
+            List of errors
+        </div>
+        <!--right tabbedGroup-->
+        <div data-container="SolutionExplorerPanel">
+            <div id="treeContainer" style="border: none;"></div>
+        </div>
+        <div data-container="PropertiesPanel">
+            List of properties
+        </div>
+        <!--floatGroup-->
+        <div data-container="OutputPanel">
+            <div style="font-family: Consolas;">
+                <p>
+                    Themes installation complete.
+                </p>
+                <p>
+                    List of installed stylesheet files. Include at least one stylesheet Theme file and
+                    the images folder:
+                </p>
+                <ul>
+                    <li>
+                        styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file should
+                        be always included in your project.
+                    </li>
+                    <li>styles/jqx.arctic.css: Stylesheet for the Arctic Theme</li>
+                    <li>styles/jqx.web.css: Stylesheet for the Web Theme</li>
+                    <li>styles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme</li>
+                    <li>styles/jqx.classic.css: Stylesheet for the Classic Theme</li>
+                    <li>styles/jqx.darkblue.css: Stylesheet for the DarkBlue Theme</li>
+                    <li>styles/jqx.energyblue.css: Stylesheet for the EnergyBlue Theme</li>
+                    <li>styles/jqx.shinyblack.css: Stylesheet for the ShinyBlack Theme</li>
+                    <li>styles/jqx.office.css: Stylesheet for the Office Theme</li>
+                    <li>styles/jqx.metro.css: Stylesheet for the Metro Theme</li>
+                    <li>styles/jqx.metrodark.css: Stylesheet for the Metro Dark Theme</li>
+                    <li>styles/jqx.orange.css: Stylesheet for the Orange Theme</li>
+                    <li>styles/jqx.summer.css: Stylesheet for the Summer Theme</li>
+                    <li>styles/jqx.black.css: Stylesheet for the Black Theme</li>
+                    <li>styles/jqx.fresh.css: Stylesheet for the Fresh Theme</li>
+                    <li>styles/jqx.highcontrast.css: Stylesheet for the HighContrast Theme</li>
+                    <li>styles/jqx.blackberry.css: Stylesheet for the Blackberry Theme</li>
+                    <li>styles/jqx.android.css: Stylesheet for the Android Theme</li>
+                    <li>styles/jqx.mobile.css: Stylesheet for the Mobile Theme</li>
+                    <li>styles/jqx.windowsphone.css: Stylesheet for the Windows Phone Theme</li>
+                    <li>styles/jqx.ui-darkness.css: Stylesheet for the UI Darkness Theme</li>
+                    <li>styles/jqx.ui-lightness.css: Stylesheet for the UI Lightness Theme</li>
+                    <li>styles/jqx.ui-le-frog.css: Stylesheet for the UI Le Frog Theme</li>
+                    <li>styles/jqx.ui-overcast.css: Stylesheet for the UI Overcast Theme</li>
+                    <li>styles/jqx.ui-redmond.css: Stylesheet for the UI Redmond Theme</li>
+                    <li>styles/jqx.ui-smoothness.css: Stylesheet for the UI Smoothness Theme</li>
+                    <li>styles/jqx.ui-start.css: Stylesheet for the UI Start Theme</li>
+                    <li>styles/jqx.ui-sunny.css: Stylesheet for the UI Sunny Theme</li>
+                    <li>styles/images: contains images referenced in the stylesheet files</li>
+                </ul>
+            </div>
+        </div>
+    </JqxDockingLayout>
+</template>
+
+<script>
+    import JqxDockingLayout from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdockinglayout.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxTextArea from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue";
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxTree from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue";
+
+    export default {
+        components: {
+            JqxDockingLayout,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dockingLayout'),
+                layout: [
+                    {
+                        type: 'layoutGroup',
+                        orientation: 'horizontal',
+                        items: [{
+                            type: 'autoHideGroup',
+                            alignment: 'left',
+                            width: 80,
+                            unpinnedWidth: 200,
+                            items: [{
+                                type: 'layoutPanel',
+                                title: 'Toolbox',
+                                contentContainer: 'ToolboxPanel'
+                            }, {
+                                type: 'layoutPanel',
+                                title: 'Help',
+                                contentContainer: 'HelpPanel'
+                            }]
+                        },
+                        {
+                            type: 'layoutGroup',
+                            orientation: 'vertical',
+                            width: 500,
+                            items: [{
+                                type: 'documentGroup',
+                                height: 400,
+                                minHeight: 200,
+                                items: [{
+                                    type: 'documentPanel',
+                                    title: 'Document 1',
+                                    contentContainer: 'Document1Panel'
+                                },
+                                {
+                                    type: 'documentPanel',
+                                    title: 'Document 2',
+                                    contentContainer: 'Document2Panel'
+                                }]
+                            },
+                            {
+                                type: 'tabbedGroup',
+                                height: 200,
+                                pinnedHeight: 30,
+                                items: [{
+                                    type: 'layoutPanel',
+                                    title: 'Error List',
+                                    contentContainer: 'ErrorListPanel'
+                                }]
+                            }]
+                        },
+                        {
+                            type: 'tabbedGroup',
+                            width: 220,
+                            minWidth: 200,
+                            items: [
+                                {
+                                    type: 'layoutPanel',
+                                    title: 'Solution Explorer',
+                                    contentContainer: 'SolutionExplorerPanel',
+                                    initContent: () => {
+                                        // initialize a jqxTree inside the Solution Explorer Panel
+                                        let source = [{
+                                            icon: '../../../images/earth.png',
+                                            label: 'Project',
+                                            expanded: true,
+                                            items: [
+                                                {
+                                                    icon: '../../../images/folder.png',
+                                                    label: 'css',
+                                                    expanded: true,
+                                                    items: [{
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqx.base.css'
+                                                    },
+                                                    {
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqx.energyblue.css'
+                                                    }, {
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqx.orange.css'
+                                                    }]
+                                                },
+                                                {
+                                                    icon: '../../../images/folder.png',
+                                                    label: 'scripts',
+                                                    items: [{
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqxcore.js'
+                                                    },
+                                                    {
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqxdata.js'
+                                                    }, {
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqxgrid.js'
+                                                    }]
+                                                },
+                                                {
+                                                    icon: '../../../images/nav1.png',
+                                                    label: 'index.htm'
+                                                }]
+                                        }];
+
+                                        jqwidgets.createInstance('#treeContainer', 'jqxTree', { width: '100%', height: '99%', source: source, rtl: true })
+                                    }
+                                },
+                                {
+                                    type: 'layoutPanel',
+                                    title: 'Properties',
+                                    contentContainer: 'PropertiesPanel'
+                                }]
+                        }]
+                    },
+                    {
+                        type: 'floatGroup',
+                        width: 500,
+                        height: 300,
+                        position: {
+                            x: 350,
+                            y: 250
+                        },
+                        items: [{
+                            type: 'layoutPanel',
+                            title: 'Output',
+                            contentContainer: 'OutputPanel',
+                            selected: true
+                        }]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<style>
+    .jqx-layout-group-auto-hide-content-vertical {
+        width: 200px;
+    }
+
+    .jqx-ribbon-content-section {
+        text-align: right;
+    }
+</style>
\ No newline at end of file
diff --git a/dockinglayout/righttoleftlayout/main.js b/dockinglayout/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dockinglayout/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dockinglayout/righttoleftlayout/package.json b/dockinglayout/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dockinglayout/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dockinglayout/saveloadlayout/App.vue b/dockinglayout/saveloadlayout/App.vue
new file mode 100644
index 00000000..3a0e8c06
--- /dev/null
+++ b/dockinglayout/saveloadlayout/App.vue
@@ -0,0 +1,257 @@
+<template>
+    <div>
+        <JqxDockingLayout ref="myDockingLayout" :width="getWidth" :height="600" :layout="layout">
+            <!--The panel content divs can have a flat structure-->
+            <!--autoHideGroup-->
+            <div data-container="ToolboxPanel">
+                List of tools
+            </div>
+            <div data-container="HelpPanel">
+                Help topics
+            </div>
+            <!--documentGroup-->
+            <div data-container="Document1Panel">
+                Document 1 content
+            </div>
+            <div data-container="Document2Panel">
+                Document 2 content
+            </div>
+            <!--bottom tabbedGroup-->
+            <div data-container="ErrorListPanel">
+                List of errors
+            </div>
+            <!--right tabbedGroup-->
+            <div data-container="SolutionExplorerPanel">
+                <div id="treeContainer" style="border: none;"></div>
+            </div>
+            <div data-container="PropertiesPanel">
+                List of properties
+            </div>
+            <!--floatGroup-->
+            <div data-container="OutputPanel">
+                <div style="font-family: Consolas;">
+                    <p>
+                        Themes installation complete.
+                    </p>
+                    <p>
+                        List of installed stylesheet files. Include at least one stylesheet Theme file and
+                        the images folder:
+                    </p>
+                    <ul>
+                        <li>
+                            styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file should
+                            be always included in your project.
+                        </li>
+                        <li>styles/jqx.arctic.css: Stylesheet for the Arctic Theme</li>
+                        <li>styles/jqx.web.css: Stylesheet for the Web Theme</li>
+                        <li>styles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme</li>
+                        <li>styles/jqx.classic.css: Stylesheet for the Classic Theme</li>
+                        <li>styles/jqx.darkblue.css: Stylesheet for the DarkBlue Theme</li>
+                        <li>styles/jqx.energyblue.css: Stylesheet for the EnergyBlue Theme</li>
+                        <li>styles/jqx.shinyblack.css: Stylesheet for the ShinyBlack Theme</li>
+                        <li>styles/jqx.office.css: Stylesheet for the Office Theme</li>
+                        <li>styles/jqx.metro.css: Stylesheet for the Metro Theme</li>
+                        <li>styles/jqx.metrodark.css: Stylesheet for the Metro Dark Theme</li>
+                        <li>styles/jqx.orange.css: Stylesheet for the Orange Theme</li>
+                        <li>styles/jqx.summer.css: Stylesheet for the Summer Theme</li>
+                        <li>styles/jqx.black.css: Stylesheet for the Black Theme</li>
+                        <li>styles/jqx.fresh.css: Stylesheet for the Fresh Theme</li>
+                        <li>styles/jqx.highcontrast.css: Stylesheet for the HighContrast Theme</li>
+                        <li>styles/jqx.blackberry.css: Stylesheet for the Blackberry Theme</li>
+                        <li>styles/jqx.android.css: Stylesheet for the Android Theme</li>
+                        <li>styles/jqx.mobile.css: Stylesheet for the Mobile Theme</li>
+                        <li>styles/jqx.windowsphone.css: Stylesheet for the Windows Phone Theme</li>
+                        <li>styles/jqx.ui-darkness.css: Stylesheet for the UI Darkness Theme</li>
+                        <li>styles/jqx.ui-lightness.css: Stylesheet for the UI Lightness Theme</li>
+                        <li>styles/jqx.ui-le-frog.css: Stylesheet for the UI Le Frog Theme</li>
+                        <li>styles/jqx.ui-overcast.css: Stylesheet for the UI Overcast Theme</li>
+                        <li>styles/jqx.ui-redmond.css: Stylesheet for the UI Redmond Theme</li>
+                        <li>styles/jqx.ui-smoothness.css: Stylesheet for the UI Smoothness Theme</li>
+                        <li>styles/jqx.ui-start.css: Stylesheet for the UI Start Theme</li>
+                        <li>styles/jqx.ui-sunny.css: Stylesheet for the UI Sunny Theme</li>
+                        <li>styles/images: contains images referenced in the stylesheet files</li>
+                    </ul>
+                </div>
+            </div>
+        </JqxDockingLayout>
+
+        <div style="margin-top: 25px">
+            <JqxButton style="float: left; margin-right: 10px"
+                       @click="saveBtnOnClick()" :width="90">
+                Save Layout
+            </JqxButton>
+
+            <JqxButton ref="loadLayoutButton" style="float: left"
+                       @click="loadBtnOnClick()" :width="90" :disabled="true">
+                Load Layout
+            </JqxButton>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDockingLayout from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdockinglayout.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxTextArea from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue";
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxTree from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue";
+
+    export default {
+        components: {
+            JqxDockingLayout,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('dockingLayout'),
+                layout: [
+                    {
+                        type: 'layoutGroup',
+                        orientation: 'horizontal',
+                        items: [{
+                            type: 'autoHideGroup',
+                            alignment: 'left',
+                            width: 80,
+                            unpinnedWidth: 200,
+                            items: [{
+                                type: 'layoutPanel',
+                                title: 'Toolbox',
+                                contentContainer: 'ToolboxPanel'
+                            }, {
+                                type: 'layoutPanel',
+                                title: 'Help',
+                                contentContainer: 'HelpPanel'
+                            }]
+                        },
+                        {
+                            type: 'layoutGroup',
+                            orientation: 'vertical',
+                            width: 500,
+                            items: [{
+                                type: 'documentGroup',
+                                height: 400,
+                                minHeight: 200,
+                                items: [{
+                                    type: 'documentPanel',
+                                    title: 'Document 1',
+                                    contentContainer: 'Document1Panel'
+                                },
+                                {
+                                    type: 'documentPanel',
+                                    title: 'Document 2',
+                                    contentContainer: 'Document2Panel'
+                                }]
+                            },
+                            {
+                                type: 'tabbedGroup',
+                                height: 200,
+                                pinnedHeight: 30,
+                                items: [{
+                                    type: 'layoutPanel',
+                                    title: 'Error List',
+                                    contentContainer: 'ErrorListPanel'
+                                }]
+                            }]
+                        },
+                        {
+                            type: 'tabbedGroup',
+                            width: 220,
+                            minWidth: 200,
+                            items: [
+                                {
+                                    type: 'layoutPanel',
+                                    title: 'Solution Explorer',
+                                    contentContainer: 'SolutionExplorerPanel',
+                                    initContent: () => {
+                                        // initialize a jqxTree inside the Solution Explorer Panel
+                                        let source = [{
+                                            icon: '../../../images/earth.png',
+                                            label: 'Project',
+                                            expanded: true,
+                                            items: [
+                                                {
+                                                    icon: '../../../images/folder.png',
+                                                    label: 'css',
+                                                    expanded: true,
+                                                    items: [{
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqx.base.css'
+                                                    },
+                                                    {
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqx.energyblue.css'
+                                                    }, {
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqx.orange.css'
+                                                    }]
+                                                },
+                                                {
+                                                    icon: '../../../images/folder.png',
+                                                    label: 'scripts',
+                                                    items: [{
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqxcore.js'
+                                                    },
+                                                    {
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqxdata.js'
+                                                    }, {
+                                                        icon: '../../../images/nav1.png',
+                                                        label: 'jqxgrid.js'
+                                                    }]
+                                                },
+                                                {
+                                                    icon: '../../../images/nav1.png',
+                                                    label: 'index.htm'
+                                                }]
+                                        }];
+
+                                        jqwidgets.createInstance('#treeContainer', 'jqxTree', { width: '100%', height: '99%', source: source })
+                                    }
+                                },
+                                {
+                                    type: 'layoutPanel',
+                                    title: 'Properties',
+                                    contentContainer: 'PropertiesPanel'
+                                }]
+                        }]
+                    },
+                    {
+                        type: 'floatGroup',
+                        width: 500,
+                        height: 300,
+                        position: {
+                            x: 350,
+                            y: 250
+                        },
+                        items: [{
+                            type: 'layoutPanel',
+                            title: 'Output',
+                            contentContainer: 'OutputPanel',
+                            selected: true
+                        }]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.savedLayout;
+        },
+        methods: {
+            saveBtnOnClick: function() {
+                this.savedLayout = this.$refs.myDockingLayout.saveLayout();
+                this.$refs.loadLayoutButton.disabled = false;
+            },
+            loadBtnOnClick: function() {
+                this.$refs.myDockingLayout.loadLayout(this.savedLayout);
+                this.$refs.loadLayoutButton.disabled = true;
+            }
+        }
+    };
+</script>
+
+<style>
+    .jqx-layout-group-auto-hide-content-vertical {
+        width: 200px;
+    }
+</style>
\ No newline at end of file
diff --git a/dockinglayout/saveloadlayout/main.js b/dockinglayout/saveloadlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dockinglayout/saveloadlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dockinglayout/saveloadlayout/package.json b/dockinglayout/saveloadlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dockinglayout/saveloadlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dragdrop/defaultfunctionality/App.vue b/dragdrop/defaultfunctionality/App.vue
new file mode 100644
index 00000000..f2f677b3
--- /dev/null
+++ b/dragdrop/defaultfunctionality/App.vue
@@ -0,0 +1,325 @@
+<template>
+    <div id="shop" class="draggable-demo-shop jqx-rc-all">
+        <div id="catalog" class="draggable-demo-catalog jqx-rc-all"></div>
+        <div class="draggable-demo-cart-wrapper jqx-rc-all">
+            <div class="draggable-demo-title jqx-rc-t">Shopping Cart</div>
+            <div id="cart" class="draggable-demo-cart jqx-rc-all">
+
+                <JqxGrid ref="myGrid" @cellclick="gridOnCellClick($event)"
+                         :width="230" :height="335" :columns="gridColumns"
+                         :selectionmode="'none'" :keyboardnavigation="false">
+                </JqxGrid>
+
+            </div>
+            <div class="draggable-demo-total">Total: <strong><span id="total">$ 0</span></strong></div>
+        </div>
+        <div style="clear: both"></div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxDragDrop from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                gridColumns: [
+                    { text: 'Item', dataField: 'name', width: 120 },
+                    { text: 'Count', dataField: 'count', width: 50 },
+                    { text: 'Remove', dataField: 'remove', width: 60 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.theme = jqx.theme;
+            this.cartItems = [];
+            this.totalPrice = 0;
+            this.onCart = false;
+        },
+        mounted: function () {
+            this.productsRendering();
+            this.addClasses();
+        },
+        methods: {
+            updatePrice: function(price) {
+                this.totalPrice = this.totalPrice + parseInt(price)
+                document.getElementById('total').innerHTML = '$ ' + this.totalPrice;
+            },
+            addGridRow: function(row) {
+                this.$refs.myGrid.addrow(null, row);
+            },
+            updateGridRow: function (id, row) {
+                let rowID = this.$refs.myGrid.getrowid(id);
+                this.$refs.myGrid.updaterow(rowID, row);
+            },
+            getItemIndex: function(name) {
+                let items = this.cartItems;
+                for (let i = 0; i < items.length; i += 1) {
+                    if (items[i].name === name) {
+                        return i;
+                    }
+                }
+                return -1;
+            },
+            addItem: function (item) {
+                let index = this.getItemIndex(item.name);
+                let product = item;
+                if (index >= 0) {
+                    let temp = this.cartItems;
+                    temp[index].count += 1;
+                    this.cartItems = temp;
+                    this.updateGridRow(index, this.cartItems[index]);
+                } else {
+                    let id = this.cartItems.length;
+                    let item = {
+                        name: product.name,
+                        count: 1,
+                        price: product.price,
+                        index: id,
+                        remove: '<div style="text-align: center; cursor: pointer; width: 53px;"' +
+                            'id="draggable-demo-row-' + id + '">X</div>'
+                    };
+                    let temp = this.cartItems;
+                    temp.push(item)
+                    this.cartItems = temp;
+                    this.addGridRow(item);
+                }
+                this.updatePrice(item.price);
+            },
+            addClasses: function () {
+                let catalog = document.getElementsByClassName('draggable-demo-catalog');
+                for (let i = 0; i < catalog.length; i++) {
+                    catalog[i].className += 'jqx-scrollbar-state-normal-' + this.theme;
+                }
+
+                let title = document.getElementsByClassName('draggable-demo-title');
+                for (let i = 0; i < title.length; i++) {
+                    title[i].className += 'jqx-expander-header-' + this.theme;
+                    title[i].className += 'jqx-expander-header-expanded-' + this.theme;
+                }
+
+                let total = document.getElementsByClassName('draggable-demo-catalog');
+                for (let i = 0; i < total.length; i++) {
+                    total[i].className += 'jqx-expander-header-' + this.theme;
+                    total[i].className += 'jqx-expander-header-expanded-' + this.theme;
+                }
+
+                if (this.theme === 'shinyblack') {
+                    let shop = document.getElementsByClassName('draggable-demo-shop');
+                    for (let i = 0; i < shop.length; i++) {
+                        shop[i].style.backgroundColor = '#555';
+                    }
+
+                    let product = document.getElementsByClassName('draggable-demo-product');
+                    for (let i = 0; i < product.length; i++) {
+                        product[i].style.backgroundColor = '#999';
+                    }
+                }
+            },
+            productsRendering: function () {
+                let products = {
+                    'Retro Rock T-shirt': {
+                        pic: 'black-retro-rock-band-guitar-controller.png',
+                        price: 15
+                    },
+                    'Lucky T-shirt': {
+                        pic: 'bright-green-gettin-lucky-in-kentucky.png',
+                        price: 18
+                    },
+                    'Loading T-shirt': {
+                        pic: 'brown-loading-bar-computer-geek.png',
+                        price: 25
+                    },
+                    'Cool Story T-shirt': {
+                        pic: 'cool-story-bro.png',
+                        price: 20
+                    },
+                    'The beard T-shirt': {
+                        pic: 'fear-the-beard.png',
+                        price: 17
+                    },
+                    'Don\'t care T-shirt': {
+                        pic: 'honey-badger-don-t-care.png',
+                        price: 19
+                    },
+                    'Guitar T-shirt': {
+                        pic: 'scott-pilgrim-red-rock-band.png',
+                        price: 24
+                    },
+                    'Dodgers T-shirt': {
+                        pic: '2-sided-dodgers-bankrupt-t-shirt-ash.png',
+                        price: 21
+                    },
+                    'Misfits T-shirt': {
+                        pic: 'misfits-sf-giants-white.png',
+                        price: 21
+                    }
+                };
+                let catalog = document.getElementById('catalog');
+                let image, product, left = 0, top = 0, counter = 0;
+
+                for (let name in products) {
+
+                    if (counter !== 0 && counter % 3 === 0) {
+                        top += 147;
+                        left = 0;
+                    }
+
+                    let element = document.createElement('div');
+                    element.classList.add('draggable-demo-product', 'jqx-rc-all', `${counter}DragDrop`);
+                    element.style.cssText = `left: ${left}px; top: ${top}px`;
+
+                    product = products[name];
+
+                    element.innerHTML =
+                        `<div class="jqx-rc-t draggable-demo-product-header jqx-widget-header-${this.theme} jqx-fill-state-normal-${this.theme}">
+                      <div class="draggable-demo-product-header-label">${name}</div>
+                      </div>
+                      <div class="jqx-fill-state-normal-${this.theme} draggable-demo-product-price">
+                           Price: <strong>$${product.price}</strong>
+                      </div>
+                      <img src="../../../images/t-shirts/${product.pic}" alt=${name} class="jqx-rc-b" />`
+
+                    catalog.appendChild(element)
+
+                    let widget = jqwidgets.createInstance(`.${counter}DragDrop`, 'jqxDragDrop', { dropTarget: $('#cart'), revert: true });
+
+                    left += 127;
+                    counter += 1;
+
+                    let widgetChilds = widget.getInstance().element.children;
+                    widget.addEventHandler('mouseenter', () => {
+                        $(widgetChilds[1]).fadeTo(100, 0.9);
+                    });
+                    widget.addEventHandler('mouseleave', () => {
+                        $(widgetChilds[1]).fadeTo(100, 0);
+                    });
+                    widget.addEventHandler('dropTargetEnter', (event) => {
+                        event.args.target[0].style.border = '2px solid #000';
+                        this.onCart = true;
+                        widget.dropAction = 'none';
+                    });
+                    widget.addEventHandler('dropTargetLeave', (event) => {
+                        event.args.target[0].style.border = '2px solid #aaa';
+                        this.onCart = false;
+                        widget.dropAction = 'default';
+                    });
+                    widget.addEventHandler('dragEnd', (event) => {
+                        let cartElement = document.getElementById('cart');
+                        cartElement.style.border = '2px dashed #aaa';
+                        if (this.onCart) {
+                            let price = (widgetChilds[1]).innerText.substr(8, 11);
+                            let name = (widgetChilds[2]).alt;
+                            this.addItem({ price: price, name: name });
+                            this.onCart = false;
+                        }
+                    });
+                    widget.addEventHandler('dragStart', () => {
+                        let cartElement = document.getElementById('cart');
+                        cartElement.style.border = '2px solid #aaa';
+                    });
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+    .draggable-demo-cart {
+        border: 2px dashed #aaa;
+        padding: 5px;
+        width: 232px;
+        margin: auto;
+    }
+
+    .draggable-demo-shop {
+        border: 1px solid #666;
+        width: 665px;
+        padding: 5px;
+    }
+
+    .draggable-demo-catalog {
+        position: relative;
+        width: 397px;
+        border: 1px solid #bbb;
+        height: 457px;
+        float: left;
+    }
+
+    .draggable-demo-product-image {
+        width: 150px;
+    }
+
+    .draggable-demo-product {
+        padding: 5px;
+        border: 1px solid #888;
+        width: 115px;
+        height: 135px;
+        background-color: #fff;
+        position: absolute;
+        margin: 5px;
+    }
+
+    .draggable-demo-product img {
+        width: 113px;
+        border: 1px solid #aaa;
+        border-top-width: 0px;
+        outline-width: 15px;
+    }
+
+    .draggable-demo-product-header {
+        border: 1px solid #888;
+        height: 20px;
+        border-bottom-width: 0px;
+        font-size: 13px;
+        position: relative;
+        text-align: center;
+    }
+
+    .draggable-demo-product-header-label {
+        margin-top: 3px;
+    }
+
+    .draggable-demo-product-price {
+        position: absolute;
+        top: 124px;
+        left: 6px;
+        width: 113px;
+        text-align: center;
+        font-family: Verdana;
+        font-size: 11px;
+        display: none;
+        height: 16px;
+        border-top: 1px solid #888;
+        border-bottom: 1px solid #fff;
+    }
+
+    .draggable-demo-title {
+        font-size: 23px;
+        font-family: Verdana;
+        text-align: center;
+        padding: 7px;
+        margin: 5px;
+        font-weight: bold;
+        border: 1px solid #aaa;
+    }
+
+    .draggable-demo-cart-wrapper {
+        float: right;
+        border: 1px solid #aaa;
+        height: 457px;
+        width: 260px;
+    }
+
+    .draggable-demo-total {
+        font-size: 17px;
+        font-family: Verdana;
+        margin: 6px;
+        margin-top: 7px;
+        padding: 7px;
+    }
+</style>
\ No newline at end of file
diff --git a/dragdrop/defaultfunctionality/main.js b/dragdrop/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dragdrop/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dragdrop/defaultfunctionality/package.json b/dragdrop/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dragdrop/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dragdrop/events/App.vue b/dragdrop/events/App.vue
new file mode 100644
index 00000000..d19454e8
--- /dev/null
+++ b/dragdrop/events/App.vue
@@ -0,0 +1,123 @@
+<template>
+    <div class="main-container">
+        <div id="draggable-parent">
+
+            <JqxDragDrop class="draggable"
+                         @dragStart="onDragStart($event)" @dragEnd="onDragEnd($event)"
+                         @dropTargetEnter="onDropTargetEnter($event)" @dropTargetLeave="onDropTargetLeave($event)"
+                         :restricter="restricter" :dropTarget="'.drop-target'">
+                <div class="label">I can be dragged only inside my parent</div>
+            </JqxDragDrop>
+
+            <div class="drop-target">
+                <div class="label">I am a drop target</div>
+            </div>
+        </div>
+
+        <JqxPanel ref="myPanel" class="events" :width="260" :height="330"></JqxPanel>
+
+    </div>
+</template>
+
+<script>
+    import JqxDragDrop from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxDragDrop,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                restricter: { left: 8, top: 8, width: 247, height: 247 }
+            }
+        },
+        mounted: function () {
+            this.centerLabels();
+        },
+        methods: {
+            centerLabels: function () {
+                let labels = document.getElementsByClassName('label');
+                for (let i = 0; i < labels.length; i++) {
+                    let parentHeight = labels[i].parentElement.offsetHeight;
+                    let elementheight = labels[i].clientHeight;
+                    let top = (parentHeight - elementheight) / 2;
+                    labels[i].style.top = top + 'px';
+                }
+            },
+            addEvent: function (type, position) {
+                let left = position.left.toString().substring(0, 2).replace(/\./g, '').replace(/\-/g, '');
+                let top = position.top.toString().substring(0, 2).replace(/\./g, '').replace(/\-/g, '');
+                this.$refs.myPanel.prepend(`<div class="row">Event: ${type}, (${left}, ${top})</div>`);
+            },
+            onDragStart: function (event) {
+                this.addEvent(event.type, event.args.position);
+            },
+            onDragEnd: function (event) {
+                this.addEvent(event.type, event.args.position);
+            },
+            onDropTargetEnter: function (event) {
+                this.addEvent(event.type, event.args.position);
+            },
+            onDropTargetLeave: function (event) {
+                this.addEvent(event.type, event.args.position);
+            }
+        }
+    };
+</script>
+
+<style>
+    .row {
+        padding: 1px;
+    }
+
+    .draggable > div {
+        border: 1px solid #bbb;
+        background-color: #C9ECFF;
+        width: 100px;
+        height: 100px;
+        left: 30px;
+        top: 50px;
+        padding: 5px;
+        z-index: 2;
+    }
+
+    #draggable-parent {
+        background-color: #eeffee;
+        width: 350px;
+        height: 350px;
+        text-align: center;
+        border: 1px solid #eee;
+        float: left;
+    }
+
+    .main-container {
+        width: 650px;
+        z-index: 0;
+    }
+
+    .events > div {
+        float: right;
+        padding: 10px;
+        font-family: Tahoma;
+        font-size: 13px;
+    }
+
+    .label {
+        position: relative;
+        font-family: Verdana;
+        font-size: 11px;
+        color: #000;
+    }
+
+    .drop-target {
+        background-color: #FBFFB5;
+        width: 150px;
+        height: 150px;
+        border: 1px solid #ddd;
+        margin-left: 190px;
+        margin-top: 70px;
+        z-index: 1;
+    }
+</style>
\ No newline at end of file
diff --git a/dragdrop/events/main.js b/dragdrop/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dragdrop/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dragdrop/events/package.json b/dragdrop/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dragdrop/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/draw/defaultfunctionality/App.vue b/draw/defaultfunctionality/App.vue
new file mode 100644
index 00000000..b925bb03
--- /dev/null
+++ b/draw/defaultfunctionality/App.vue
@@ -0,0 +1,54 @@
+<template>
+    <JqxDraw style="width: 850px; height: 500px" 
+             ref="myDraw">
+    </JqxDraw>
+</template>
+
+<script>
+    import JqxDraw from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue";
+
+    export default {
+        components: {
+            JqxDraw
+        },
+        mounted: function () {
+            let size = this.$refs.myDraw.getSize();
+            
+            let circleElement = this.$refs.myDraw.circle(250, 150, 50, {});
+            this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
+
+            let borderElement = this.$refs.myDraw.rect(0, 0, size.width, size.height, { stroke: '#777777', fill: 'transparent' });
+
+            let pathElement = this.$refs.myDraw.path('M 100,100 L 150, 130 C 130,130 180,190 150,150', { stroke: '#777777', fill: 'red' });
+
+            let areaElement = this.$refs.myDraw.path('M 300,300 L 350, 330 C 330,330 380,390 350,350 Z', { stroke: '#777777', fill: 'yellow' });
+
+            this.$refs.myDraw.line(600, 100, 600, 200, { stroke: 'blue', 'stroke-width': 6 });
+            this.$refs.myDraw.line(550, 50, 650, 90, { stroke: 'green', 'stroke-width': 6 });
+
+            this.$refs.myDraw.text('Drawing shapes', 50, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
+            this.$refs.myDraw.text('This is rotated text', 600, 300, undefined, undefined, 45, { 'class': 'smallText' }, false, 'center', 'center', 'centermiddle');
+
+            let circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
+            let pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
+            let circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
+            let pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
+            this.$refs.myDraw.text('Click these buttons:', 20, 390);
+
+            let moveCircle = (moveUp) => {
+                let circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy'));
+                this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
+            }
+
+            this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); });
+            this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); });
+            this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); });
+            this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
+            this.$refs.myDraw.refresh();
+        }   
+    };
+</script>
+
+<style>
+    
+</style>
\ No newline at end of file
diff --git a/draw/defaultfunctionality/main.js b/draw/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/draw/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/draw/defaultfunctionality/package.json b/draw/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/draw/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownbutton/defaultfunctionality/App.vue b/dropdownbutton/defaultfunctionality/App.vue
new file mode 100644
index 00000000..e51f6c74
--- /dev/null
+++ b/dropdownbutton/defaultfunctionality/App.vue
@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <JqxDropDownButton ref="myDropDownButton" style="float: left"
+                           :width="150" :height="25">
+            <JqxTree ref="myTree"
+                     @select="treeOnSelect($event)" :width="200">
+                <ul>
+                    <li item-selected="true">Home</li>
+                    <li item-expanded="true">
+                        Solutions
+                        <ul>
+                            <li>Education</li>
+                            <li>Financial services</li>
+                            <li>Government</li>
+                            <li>Manufacturing</li>
+                            <li>
+                                Solutions
+                                <ul>
+                                    <li>eLearning</li>
+                                    <li>Mobile</li>
+                                    <li>RIA</li>
+                                    <li>Training</li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </li>
+                    <li>
+                        Products
+                        <ul>
+                            <li>PC products</li>
+                            <li>Mobile products</li>
+                            <li>All products</li>
+                        </ul>
+                    </li>
+                </ul>
+            </JqxTree>
+        </JqxDropDownButton>
+
+        <div style="float: left; margin-top: 5px; margin-left: 30px">
+            <JqxCheckBox @change="checkBoxOnChange($event)">
+                Open On Mouse Over
+            </JqxCheckBox>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDropDownButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue";
+    import JqxTree from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+
+    export default {
+        components: {
+            JqxDropDownButton,
+            JqxTree,
+            JqxCheckBox
+        },
+        mounted: function () {
+            this.$refs.myDropDownButton.setContent('<div style="position: relative; margin-left: 3px; margin-top: 4px;">Home</div>');
+        },
+        methods: {
+            treeOnSelect: function (event) {
+                let item = this.$refs.myTree.getItem(event.args.element);
+                let dropDownContent = `<div style="position: relative; margin-left: 3px; margin-top: 4px;">${item.label}</div>`;
+                this.$refs.myDropDownButton.setContent(dropDownContent);
+            },
+            checkBoxOnChange: function (event) {
+                this.$refs.myDropDownButton.autoOpen = event.args.checked;
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownbutton/defaultfunctionality/main.js b/dropdownbutton/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownbutton/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownbutton/defaultfunctionality/package.json b/dropdownbutton/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownbutton/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/animation/App.vue b/dropdownlist/animation/App.vue
new file mode 100644
index 00000000..05a0dea3
--- /dev/null
+++ b/dropdownlist/animation/App.vue
@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <div style="float: left; font-size: 13px; font-family: Verdana">
+            <h3>Animation Type</h3>
+
+            <JqxRadioButton @checked="noneAnimationBtnOnChacked()">
+                None
+            </JqxRadioButton>
+
+            <JqxRadioButton style="margin-top: 10px" @checked="slideAnimationBtnOnChacked()">
+                Slide
+            </JqxRadioButton>
+
+            <JqxRadioButton style="margin-top: 10px" @checked="fadeAnimationBtnOnChacked()" :checked=true>
+                Fade
+            </JqxRadioButton>
+
+        </div>
+
+        <JqxDropDownList ref="myDropDownList" style="float: left; margin-top: 20px; margin-left: 100px"
+                         :width="150" :height="25" :source="dataAdapter" :selectedIndex="0"
+                         :animationType="'fade'" :dropDownHorizontalAlignment="'right'"
+                         :dropDownWidth="200" :displayMember="'ContactName'" :valueMember="'CompanyName'">
+        </JqxDropDownList>
+    </div>
+</template>
+
+<script>
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxRadioButton,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'CompanyName' },
+                    { name: 'ContactName' }
+                ],
+                id: 'id',
+                url: '../sampledata/customers.txt',
+                async: false
+            };
+        },
+        methods: {
+            noneAnimationBtnOnChacked: function () {
+                this.$refs.myDropDownList.animationType = 'none';
+            },
+            slideAnimationBtnOnChacked: function () {
+                this.$refs.myDropDownList.animationType = 'slide';
+            },
+            fadeAnimationBtnOnChacked: function () {
+                this.$refs.myDropDownList.animationType = 'fade';
+            }
+        }
+    };
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownlist/animation/main.js b/dropdownlist/animation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/animation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/animation/package.json b/dropdownlist/animation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/animation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/autoopen/App.vue b/dropdownlist/autoopen/App.vue
new file mode 100644
index 00000000..a11e7ca4
--- /dev/null
+++ b/dropdownlist/autoopen/App.vue
@@ -0,0 +1,53 @@
+<template>
+    <JqxDropDownList 
+        :width="200" :height="25" :source="source" :selectedIndex="1" :autoOpen="true">
+    </JqxDropDownList>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                source: [
+                    'Affogato',
+                    'Americano',
+                    'Bicerin',
+                    'Breve',
+                    'Cafe Bombon',
+                    'Cafe au lait',
+                    'Caffe Corretto',
+                    'Cafe Crema',
+                    'Caffe Latte',
+                    'Caffe macchiato',
+                    'Cafe melange',
+                    'Coffee milk',
+                    'Cafe mocha',
+                    'Cappuccino',
+                    'Carajillo',
+                    'Cortado',
+                    'Cuban espresso',
+                    'Espresso',
+                    'Eiskaffee',
+                    'The Flat White',
+                    'Frappuccino',
+                    'Galao',
+                    'Greek frappe coffee',
+                    'Iced Coffee',
+                    'Indian filter coffee',
+                    'Instant coffee',
+                    'Irish coffee',
+                    'Liqueur coffee'
+                ]
+            }
+        }   
+    };
+</script>
+
+<style>
+    
+</style>
\ No newline at end of file
diff --git a/dropdownlist/autoopen/main.js b/dropdownlist/autoopen/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/autoopen/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/autoopen/package.json b/dropdownlist/autoopen/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/autoopen/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/bindingtojson/App.vue b/dropdownlist/bindingtojson/App.vue
new file mode 100644
index 00000000..a2721525
--- /dev/null
+++ b/dropdownlist/bindingtojson/App.vue
@@ -0,0 +1,58 @@
+<template>
+    <div>
+        <JqxDropDownList @select="listOnSelect($event)"
+                         :width="200" :height="25" :source="dataAdapter" :selectedIndex="2"
+                         :displayMember="'ContactName'" :valueMember="'CompanyName'">
+        </JqxDropDownList>
+
+        <div ref="log" style="font-size: 12px; font-family: Verdana"></div>
+    </div>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'CompanyName' },
+                    { name: 'ContactName' }
+                ],
+                id: 'id',
+                url: '../sampledata/customers.txt'
+            };
+        },
+        methods: {
+            listOnSelect: function (event) {
+                if (event.args) {
+                    let item = event.args.item;
+                    if (item) {
+                        let valueElement = document.createElement('div');
+                        valueElement.innerHTML = `Value: ${item.value}`;
+
+                        let labelElement = document.createElement('div');
+                        labelElement.innerHTML = `Label: ${item.label}`;
+
+                        let selectionLog = this.$refs.log;
+                        selectionLog.innerHTML = '';
+                        selectionLog.appendChild(labelElement);
+                        selectionLog.appendChild(valueElement);
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownlist/bindingtojson/main.js b/dropdownlist/bindingtojson/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/bindingtojson/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/bindingtojson/package.json b/dropdownlist/bindingtojson/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/bindingtojson/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/bindingtoxml/App.vue b/dropdownlist/bindingtoxml/App.vue
new file mode 100644
index 00000000..b6d0336e
--- /dev/null
+++ b/dropdownlist/bindingtoxml/App.vue
@@ -0,0 +1,60 @@
+<template>
+    <div>
+        <JqxDropDownList @select="listOnSelect($event)"
+                         :width="200" :height="25" :source="dataAdapter" :selectedIndex="0"
+                         :displayMember="'ContactName'" :valueMember="'CompanyName'">
+        </JqxDropDownList>
+
+        <div ref="log" style="font-size: 12px; font-family: Verdana"></div>
+    </div>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
+                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' },
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:CustomerID',
+                url: '../sampledata/customers.xml'
+            };
+        },
+        methods: {
+            listOnSelect: function (event) {
+                if (event.args) {
+                    let item = event.args.item;
+                    if (item) {
+                        let valueElement = document.createElement('div');
+                        valueElement.innerHTML = `Value: ${item.value}`;
+
+                        let labelElement = document.createElement('div');
+                        labelElement.innerHTML = `Label: ${item.label}`;
+
+                        let selectionLog = this.$refs.log;
+                        selectionLog.innerHTML = '';
+                        selectionLog.appendChild(labelElement);
+                        selectionLog.appendChild(valueElement);
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownlist/bindingtoxml/main.js b/dropdownlist/bindingtoxml/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/bindingtoxml/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/bindingtoxml/package.json b/dropdownlist/bindingtoxml/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/bindingtoxml/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/categories/App.vue b/dropdownlist/categories/App.vue
new file mode 100644
index 00000000..8c798b28
--- /dev/null
+++ b/dropdownlist/categories/App.vue
@@ -0,0 +1,38 @@
+<template>
+    <JqxDropDownList :width="300" :height="35" :source="source" :selectedIndex="0">
+    </JqxDropDownList>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                source: [
+                    // Business & Investing
+                    { html: '<div style="padding: 1px;"><div>Title: Do the Work</div><div>Author: Steven Pressfield</div></div>', title: 'Do the Work', group: 'Business & Investing' },
+                    { html: '<div style="padding: 1px;"><div>Title: Think and Grow Rich</div><div>Author: Napoleon Hill</div></div>', title: 'Think and Grow Rich', group: 'Business & Investing' },
+                    { html: '<div style="padding: 1px;"><div>Title: The Toyota Way to Continuous...</div><div>Author: Jeffrey K. Liker</div></div>', title: 'The Toyota Way to Continuous...', group: 'Business & Investing' },
+                    { html: '<div style="padding: 1px;"><div>Title: Redesigning Leadership </div><div>Author: John Maeda</div></div>', title: 'Redesigning Leadership ', group: 'Business & Investing' },
+                    // Computer & Internet Books
+                    { html: '<div style="padding: 1px;"><div>Title: MacBook Pro Portable Genius</div><div>Author: Brad Miser</div></div>', title: 'MacBook Pro Portable Genius', group: 'Computer & Internet Books' },
+                    { html: '<div style="padding: 1px;"><div>Title: Social Media Metrics Secrets</div><div>Author: John Lovett</div></div>', title: 'Social Media Metrics Secrets', group: 'Computer & Internet Books' },
+                    { html: '<div style="padding: 1px;"><div>Title: iPad 2: The Missing Manual</div><div>Author: J D Biersdorfer J.D</div></div>', title: 'iPad 2: The Missing Manual', group: 'Computer & Internet Books' },
+                    // History
+                    { html: '<div style="padding: 1px;"><div>Lincoln and His Admirals</div><div>Author:Craig L. Symonds</div></div>', title: 'Lincoln and His Admirals', group: 'History' },
+                    { html: '<div style="padding: 1px;"><div>The Dogs of War: 1861</div><div>Author:Emory M. Thomas</div></div>', title: 'The Dogs of War: 1861', group: 'History' },
+                    { html: '<div style="padding: 1px;"><div>Cleopatra: A Life</div><div>Author:Stacy Schiff</div></div>', title: 'Cleopatra: A Life', group: 'History' },
+                    { html: '<div style="padding: 1px;"><div>Mother Teresa: A Biography</div><div>Author:Meg Greene</div></div>', title: 'Mother Teresa: A Biography', group: 'History' },
+                    { html: '<div style="padding: 1px;"><div>The Federalist Papers</div><div>Author:John Jay</div></div>', title: 'The Federalist Papers', group: 'History' }
+                ]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownlist/categories/main.js b/dropdownlist/categories/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/categories/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/categories/package.json b/dropdownlist/categories/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/categories/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/checkboxes/App.vue b/dropdownlist/checkboxes/App.vue
new file mode 100644
index 00000000..053210d3
--- /dev/null
+++ b/dropdownlist/checkboxes/App.vue
@@ -0,0 +1,72 @@
+<template>
+    <div>
+        <JqxDropDownList ref="myDropDownList" @select="listOnSelect($event)"
+                         :width="200" :height="25" :source="dataAdapter" :checkboxes="true"
+                         :displayMember="'ContactName'" :valueMember="'companyName'">
+        </JqxDropDownList>
+
+        <div style="float: left; margin-left: 20px; font-size: 13px; font-family: Verdana">
+            <div ref="log"></div>
+            <div ref="checkedItemsLog" style="max-width: 300px; margin-top: 20px"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'CompanyName' },
+                    { name: 'ContactName' }
+                ],
+                id: 'id',
+                url: '../sampledata/customers.txt'
+            };
+        },
+        methods: {
+            listOnSelect: function (event) {
+                if (event.args) {
+                    let item = event.args.item;
+                    if (item) {
+                        let valueElement = document.createElement('div');
+                        valueElement.innerHTML = `Value: ${item.value}`;
+
+                        let labelElement = document.createElement('div');
+                        labelElement.innerHTML = `Label: ${item.label}`;
+
+                        let checkedElement = document.createElement('div');
+                        checkedElement.innerHTML = `Checked: ${item.checked}`;
+
+                        let selectionLog = this.$refs.log;
+                        selectionLog.innerHTML = '';
+                        selectionLog.appendChild(labelElement);
+                        selectionLog.appendChild(valueElement);
+                        selectionLog.appendChild(checkedElement);
+
+                        let items = this.$refs.myDropDownList.getCheckedItems();
+                        let checkedItems = '';
+                        for (let i = 0; i < items.length; i++) {
+                            checkedItems += items[i].label + ', ';
+                        }
+                        this.$refs.checkedItemsLog.innerHTML = checkedItems;
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownlist/checkboxes/main.js b/dropdownlist/checkboxes/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/checkboxes/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/checkboxes/package.json b/dropdownlist/checkboxes/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/checkboxes/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/createcomponent/App.vue b/dropdownlist/createcomponent/App.vue
new file mode 100644
index 00000000..48125c57
--- /dev/null
+++ b/dropdownlist/createcomponent/App.vue
@@ -0,0 +1,54 @@
+<template>
+    <JqxDropDownList ref="myDropDownList" :autoCreate="false">
+    </JqxDropDownList>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDropDownList
+        },
+        mounted: function () {
+            const source = [
+                'Affogato',
+                'Americano',
+                'Bicerin',
+                'Breve',
+                'Café Bombón',
+                'Café au lait',
+                'Caffé Corretto',
+                'Café Crema',
+                'Caffé Latte',
+                'Caffé macchiato',
+                'Café mélange',
+                'Coffee milk',
+                'Cafe mocha',
+                'Cappuccino',
+                'Carajillo',
+                'Cortado',
+                'Cuban espresso',
+                'Espresso',
+                'Eiskaffee',
+                'The Flat White',
+                'Frappuccino',
+                'Galao',
+                'Greek frappé coffee',
+                'Iced Coffee',
+                'Indian filter coffee',
+                'Instant coffee',
+                'Irish coffee',
+                'Liqueur coffee'
+            ];
+
+            const settings = { source: source, selectedIndex: 1, width: '200', height: '25' };
+
+            this.$refs.myDropDownList.createComponent(settings);
+        }
+    }
+</script>
+
+<style>
+    
+</style>
\ No newline at end of file
diff --git a/dropdownlist/createcomponent/main.js b/dropdownlist/createcomponent/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/createcomponent/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/createcomponent/package.json b/dropdownlist/createcomponent/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/createcomponent/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/customrendering/App.vue b/dropdownlist/customrendering/App.vue
new file mode 100644
index 00000000..e1031a2b
--- /dev/null
+++ b/dropdownlist/customrendering/App.vue
@@ -0,0 +1,85 @@
+<template>
+    <JqxDropDownList :width="270" :height="25" :source="dataAdapter" :selectedIndex="0"
+                     :displayMember="'firstname'" :valueMember="'notes'"
+                     :itemHeight="70" :renderer="renderer">
+    </JqxDropDownList>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            const generateData = () => {
+                let data = new Array();
+                let firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne'];
+                let lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth'];
+                let titles = ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager', 'Sales Representative', 'Sales Representative', 'Inside Sales Coordinator', 'Sales Representative'];
+                let titleofcourtesy = ['Ms.', 'Dr.', 'Ms.', 'Mrs.', 'Mr.', 'Mr.', 'Mr.', 'Ms.', 'Ms.'];
+                let birthdate = ['08-Dec-48', '19-Feb-52', '30-Aug-63', '19-Sep-37', '04-Mar-55', '02-Jul-63', '29-May-60', '09-Jan-58', '27-Jan-66'];
+                let hiredate = ['01-May-92', '14-Aug-92', '01-Apr-92', '03-May-93', '17-Oct-93', '17-Oct-93', '02-Jan-94', '05-Mar-94', '15-Nov-94'];
+                let address = ['507 - 20th Ave. E. Apt. 2A', '908 W. Capital Way', '722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House', 'Miner Rd.', 'Edgeham Hollow', 'Winchester Way', '4726 - 11th Ave. N.E.', '7 Houndstooth Rd.'];
+                let city = ['Seattle', 'Tacoma', 'Kirkland', 'Redmond', 'London', 'London', 'London', 'Seattle', 'London'];
+                let postalcode = ['98122', '98401', '98033', '98052', 'SW1 8JR', 'EC2 7JR', 'RG1 9SP', '98105', 'WG2 7LT'];
+                let country = ['USA', 'USA', 'USA', 'USA', 'UK', 'UK', 'UK', 'USA', 'UK'];
+                let homephone = ['(206) 555-9857', '(206) 555-9482', '(206) 555-3412', '(206) 555-8122', '(71) 555-4848', '(71) 555-7773', '(71) 555-5598', '(206) 555-1189', '(71) 555-4444'];
+                let notes = ['Education includes a BA in psychology from Colorado State University in 1970.  She also completed "The Art of the Cold Call."  Nancy is a member of Toastmasters International.',
+                    'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
+                    'Janet has a BS degree in chemistry from Boston College (1984).  She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
+                    'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.',
+                    'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London.  He was promoted to sales manager in March 1993.  Mr. Buchanan has completed the courses "Successful Telemarketing" and "International Sales Management."  He is fluent in French.',
+                    'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986).  He has also taken the courses "Multi-Cultural Selling" and "Time Management for the Sales Professional."  He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
+                    'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company.  After completing a course entitled "Selling in Europe," he was transferred to the London office in March 1993.',
+                    'Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.',
+                    'Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.'];
+                let k = 0;
+                for (let i = 0; i < firstNames.length; i++) {
+                    let row = {};
+                    row['firstname'] = firstNames[k];
+                    row['lastname'] = lastNames[k];
+                    row['title'] = titles[k];
+                    row['titleofcourtesy'] = titleofcourtesy[k];
+                    row['birthdate'] = birthdate[k];
+                    row['hiredate'] = hiredate[k];
+                    row['address'] = address[k];
+                    row['city'] = city[k];
+                    row['postalcode'] = postalcode[k];
+                    row['country'] = country[k];
+                    row['homephone'] = homephone[k];
+                    row['notes'] = notes[k];
+                    data[i] = row;
+                    k++;
+                }
+
+                return data;
+            };
+
+            this.data = generateData();
+
+            this.source = {
+                localdata: this.data,
+                datatype: 'array'
+            };
+        },
+        methods: {
+            renderer: function (index, label, value) {
+                let datarecord = this.data[index];
+                let imgurl = '../../../images/' + label.toLowerCase() + '.png';
+                let img = '<img height="50" width="45" src="' + imgurl + '"/>';
+                let table = '<table style="min-width: 150px;"><tr><td style="width: 55px;" rowspan="2">' + img + '</td><td>' + datarecord.firstname + ' ' + datarecord.lastname + '</td></tr><tr><td>' + datarecord.title + '</td></tr></table>';
+                return table;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownlist/customrendering/main.js b/dropdownlist/customrendering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/customrendering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/customrendering/package.json b/dropdownlist/customrendering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/customrendering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/defaultfunctionality/App.vue b/dropdownlist/defaultfunctionality/App.vue
new file mode 100644
index 00000000..87ae6367
--- /dev/null
+++ b/dropdownlist/defaultfunctionality/App.vue
@@ -0,0 +1,53 @@
+<template>
+    <JqxDropDownList
+        :width="200" :height="25" :source="source" :selectedIndex="1">
+    </JqxDropDownList>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                source: [
+                    'Affogato',
+                    'Americano',
+                    'Bicerin',
+                    'Breve',
+                    'Café Bombón',
+                    'Café au lait',
+                    'Caffé Corretto',
+                    'Café Crema',
+                    'Caffé Latte',
+                    'Caffé macchiato',
+                    'Café mélange',
+                    'Coffee milk',
+                    'Cafe mocha',
+                    'Cappuccino',
+                    'Carajillo',
+                    'Cortado',
+                    'Cuban espresso',
+                    'Espresso',
+                    'Eiskaffee',
+                    'The Flat White',
+                    'Frappuccino',
+                    'Galao',
+                    'Greek frappé coffee',
+                    'Iced Coffee',
+                    'Indian filter coffee',
+                    'Instant coffee',
+                    'Irish coffee',
+                    'Liqueur coffee'
+                ]
+            }
+        }
+    }
+</script>
+
+<style>
+    
+</style>
\ No newline at end of file
diff --git a/dropdownlist/defaultfunctionality/main.js b/dropdownlist/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/defaultfunctionality/package.json b/dropdownlist/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/dropdownhorizontalalignment/App.vue b/dropdownlist/dropdownhorizontalalignment/App.vue
new file mode 100644
index 00000000..15b786ce
--- /dev/null
+++ b/dropdownlist/dropdownhorizontalalignment/App.vue
@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <div style="float: left; font-size: 13px; font-family: Verdana">
+            <h3>Alignment</h3>
+
+            <JqxRadioButton @checked="leftAlignBtnOnChecked()">
+                Left
+            </JqxRadioButton>
+
+            <JqxRadioButton :checked="true" @checked="rightAlignBtnOnChecked()">
+                Right
+            </JqxRadioButton>
+
+        </div>
+
+        <JqxDropDownList ref="myDropDownList" style="float: left; margin-top: 20px; margin-left: 100px"
+                         :width="150" :height="25" :source="dataAdapter" :selectedIndex="0"
+                         :displayMember="'ContactName'" :valueMember="'notes'"
+                         :dropDownHorizontalAlignment="'right'" :dropDownWidth="200">
+        </JqxDropDownList>
+    </div>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+
+    export default {
+        components: {
+            JqxDropDownList,
+            JqxRadioButton
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'CompanyName' },
+                    { name: 'ContactName' }
+                ],
+                id: 'id',
+                url: '../sampledata/customers.txt',
+            };
+        },
+        methods: {
+            leftAlignBtnOnChecked: function () {
+                this.$refs.myDropDownList.dropDownHorizontalAlignment = 'left';
+            },
+            rightAlignBtnOnChecked: function () {
+                this.$refs.myDropDownList.dropDownHorizontalAlignment = 'right';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownlist/dropdownhorizontalalignment/main.js b/dropdownlist/dropdownhorizontalalignment/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/dropdownhorizontalalignment/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/dropdownhorizontalalignment/package.json b/dropdownlist/dropdownhorizontalalignment/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/dropdownhorizontalalignment/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/dropdownverticalalignment/App.vue b/dropdownlist/dropdownverticalalignment/App.vue
new file mode 100644
index 00000000..efd4ce10
--- /dev/null
+++ b/dropdownlist/dropdownverticalalignment/App.vue
@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <JqxDropDownList ref="myDropDownList" style="float: left; margin-top: 270px"
+                         :width="150" :height="25" :source="dataAdapter" :selectedIndex="0"
+                         :displayMember="'ContactName'" :valueMember="'notes'"
+                         :dropDownVerticalAlignment="'top'" :dropDownWidth="200">
+        </JqxDropDownList>
+
+        <div style="float: left; font-size: 13px; font-family: Verdana; margin-left: 100px; margin-top: 270px">
+            <h3>Alignment</h3>
+
+            <JqxRadioButton @checked="topAlignBtnOnChecked()" :checked="true">
+                Top
+            </JqxRadioButton>
+
+            <JqxRadioButton @checked="bottomAlignBtnOnChecked()">
+                Bottom
+            </JqxRadioButton>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+
+    export default {
+        components: {
+            JqxDropDownList,
+            JqxRadioButton
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'CompanyName' },
+                    { name: 'ContactName' }
+                ],
+                id: 'id',
+                url: '../sampledata/customers.txt',
+            };
+        },
+        methods: {
+            bottomAlignBtnOnChecked: function () {
+                this.$refs.myDropDownList.dropDownVerticalAlignment = 'bottom';
+            },
+            topAlignBtnOnChecked: function () {
+                this.$refs.myDropDownList.dropDownVerticalAlignment = 'top';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownlist/dropdownverticalalignment/main.js b/dropdownlist/dropdownverticalalignment/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/dropdownverticalalignment/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/dropdownverticalalignment/package.json b/dropdownlist/dropdownverticalalignment/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/dropdownverticalalignment/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/events/App.vue b/dropdownlist/events/App.vue
new file mode 100644
index 00000000..10890201
--- /dev/null
+++ b/dropdownlist/events/App.vue
@@ -0,0 +1,85 @@
+<template>
+    <div>
+        <JqxDropDownList ref="myDropDownList" style="float: left; margin-top: 10px"
+                         @select="listOnSelect($event)" @unselect="listOnUnselect($event)"
+                         :width="200" :height="25" :source="source" :selectedIndex="0">
+        </JqxDropDownList>
+
+        <div style="float: left; margin-left: 20px; margin-top: 10px">
+            <div>
+                <span>Events:</span>
+
+                <JqxPanel ref="myPanel" :width="200" :height="250"></JqxPanel>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxDropDownList,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                source: [
+                    'Affogato',
+                    'Americano',
+                    'Bicerin',
+                    'Breve',
+                    'Café Bombón',
+                    'Café au lait',
+                    'Caffé Corretto',
+                    'Café Crema',
+                    'Caffé Latte',
+                    'Caffé macchiato',
+                    'Café mélange',
+                    'Coffee milk',
+                    'Cafe mocha',
+                    'Cappuccino',
+                    'Carajillo',
+                    'Cortado',
+                    'Cuban espresso',
+                    'Espresso',
+                    'Eiskaffee',
+                    'The Flat White',
+                    'Frappuccino',
+                    'Galao',
+                    'Greek frappé coffee',
+                    'Iced Coffee',
+                    'Indian filter coffee',
+                    'Instant coffee',
+                    'Irish coffee',
+                    'Liqueur coffee'
+                ]
+            }
+        },
+        mounted: function () {
+            this.$refs.myPanel.$el.style.border = 'none';
+        },
+        methods: {
+            listOnSelect: function (event) {
+                let args = event.args;
+                let item = this.$refs.myDropDownList.getItem(args.index);
+                if (item != null) {
+                    this.$refs.myPanel.prepend('<div style="margin-top: 5px;">Selected: ' + item.label + '</div>');
+                }
+            },
+            listOnUnselect: function (event) {
+                let args = event.args;
+                let item = this.$refs.myDropDownList.getItem(args.index);
+                if (item != null) {
+                    this.$refs.myPanel.prepend('<div style="margin-top: 5px;">Unselected: ' + item.label + '</div>');
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownlist/events/main.js b/dropdownlist/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/events/package.json b/dropdownlist/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/filtering/App.vue b/dropdownlist/filtering/App.vue
new file mode 100644
index 00000000..77b6f93b
--- /dev/null
+++ b/dropdownlist/filtering/App.vue
@@ -0,0 +1,47 @@
+<template>
+    <JqxDropDownList :width="280" :height="30" :source="shirts" :selectedIndex="0" :itemHeight="90"
+                     :filterable="true" :renderer="renderer" :selectionRenderer="selectionRenderer">
+    </JqxDropDownList>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                shirts: [
+                    "2 sided dodgers\nbankrupt\nt shirt ash", "black retro\nrock band\nguitar controller",
+                    "bright green\ngettin lucky\nin kentucky", "brown loading\nbar computer geek", "cool story bro",
+                    "fear the beard", "honey badger\ndon t care", "misfits sf\ngiants white", "scott pilgrim\nred rock\nband"
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.shirtFileNames = [
+                "2-sided-dodgers-bankrupt-t-shirt-ash", "black-retro-rock-band-guitar-controller",
+                "bright-green-gettin-lucky-in-kentucky", "brown-loading-bar-computer-geek", "cool-story-bro",
+                "fear-the-beard", "honey-badger-don-t-care", "misfits-sf-giants-white", "scott-pilgrim-red-rock-band"
+            ];
+        },
+        methods: {
+            renderer: function (index, label, value) {
+                let datarecord = this.shirtFileNames[index];
+                let imgurl = '../../../images/t-shirts/' + datarecord.toLowerCase() + '.png';
+                let img = '<img height="70" width="70" src="' + imgurl + '"/>';
+                let table = '<table style="min-width: 130px;"><tr><td style="width: 80px;">' + img + '</td><td>' + label + '</td></tr></table>';
+                return table;
+            },
+            selectionRenderer: function (element, index, label, value) {
+                let text = label.replace(/\n/g, " ");
+                return '<span style="left: 4px; top: 6px; position: relative;">' + text + '</span>';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownlist/filtering/main.js b/dropdownlist/filtering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/filtering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/filtering/package.json b/dropdownlist/filtering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/filtering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/fluidsize/App.vue b/dropdownlist/fluidsize/App.vue
new file mode 100644
index 00000000..5134071e
--- /dev/null
+++ b/dropdownlist/fluidsize/App.vue
@@ -0,0 +1,52 @@
+<template>
+    <JqxDropDownList 
+        :width="'100%'" :height="35" :source="source" :selectedIndex="1">
+    </JqxDropDownList>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                source: [
+                    'Affogato',
+                    'Americano',
+                    'Bicerin',
+                    'Breve',
+                    'Café Bombón',
+                    'Café au lait',
+                    'Caffé Corretto',
+                    'Café Crema',
+                    'Caffé Latte',
+                    'Caffé macchiato',
+                    'Café mélange',
+                    'Coffee milk',
+                    'Cafe mocha',
+                    'Cappuccino',
+                    'Carajillo',
+                    'Cortado',
+                    'Cuban espresso',
+                    'Espresso',
+                    'Eiskaffee',
+                    'The Flat White',
+                    'Frappuccino',
+                    'Galao',
+                    'Greek frappé coffee',
+                    'Iced Coffee',
+                    'Indian filter coffee',
+                    'Instant coffee',
+                    'Irish coffee',
+                    'Liqueur coffee'
+                ]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownlist/fluidsize/main.js b/dropdownlist/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/fluidsize/package.json b/dropdownlist/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/keyboardnavigation/App.vue b/dropdownlist/keyboardnavigation/App.vue
new file mode 100644
index 00000000..d9912442
--- /dev/null
+++ b/dropdownlist/keyboardnavigation/App.vue
@@ -0,0 +1,268 @@
+<template>
+    <div>
+        <JqxDropDownList style="float: left"
+                         :width="200" :height="25" :source="source" :selectedIndex="4">
+        </JqxDropDownList>
+
+        <div style="font-family: Verdana; font-size: 12px; width: 400px; margin-left: 20px; float: left">
+            <ul>
+                <li><b>Tab</b> - Like other widgets, the jqxDropDownList widget receives focus by tabbing into it. Once focus is received, users will be able to use the keyboard to change the selection. A second tab will take the user out of the widget.</li>
+                <li><b>Shift+Tab</b> - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous focusable element in the tab order.</li>
+                <li><b>Up/Down</b> arrow keys - select previous or next item.</li>
+                <li><b>Page Up/Page Down</b> keys - navigate up or down with one page.</li>
+                <li><b>Home/End</b> keys - navigate to the first or last item.</li>
+                <li><b>Alt Up/Down</b> arrow keys - opens or closes the popup.</li>
+                <li><b>Esc</b> - closes the popup.</li>
+                <li><b>Enter</b> - selects an item when the popup is opened. Opens the popup when closed.</li>
+                <li><b>Incremental Search</b> - start typing to select the matching item.</li>
+                <li><b>First letter</b> - press a key to navigate to a matching item. Subsequent press on the same key will iterate over the matches.</li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                source: [
+                    { value: 'AF', label: 'Afghanistan' },
+                    { value: 'AL', label: 'Albania' },
+                    { value: 'DZ', label: 'Algeria' },
+                    { value: 'AS', label: 'American Samoa' },
+                    { value: 'AD', label: 'Andorra' },
+                    { value: 'AO', label: 'Angola' },
+                    { value: 'AI', label: 'Anguilla' },
+                    { value: 'AQ', label: 'Antarctica' },
+                    { value: 'AG', label: 'Antigua and Barbuda' },
+                    { value: 'AR', label: 'Argentina' },
+                    { value: 'AM', label: 'Armenia' },
+                    { value: 'AW', label: 'Aruba' },
+                    { value: 'AU', label: 'Australia' },
+                    { value: 'AT', label: 'Austria' },
+                    { value: 'AZ', label: 'Azerbaijan' },
+                    { value: 'BS', label: 'Bahamas' },
+                    { value: 'BH', label: 'Bahrain' },
+                    { value: 'BD', label: 'Bangladesh' },
+                    { value: 'BB', label: 'Barbados' },
+                    { value: 'BY', label: 'Belarus' },
+                    { value: 'BE', label: 'Belgium' },
+                    { value: 'BZ', label: 'Belize' },
+                    { value: 'BJ', label: 'Benin' },
+                    { value: 'BM', label: 'Bermuda' },
+                    { value: 'BT', label: 'Bhutan' },
+                    { value: 'BO', label: 'Bolivia' },
+                    { value: 'BA', label: 'Bosnia and Herzegovina' },
+                    { value: 'BW', label: 'Botswana' },
+                    { value: 'BV', label: 'Bouvet Island' },
+                    { value: 'BR', label: 'Brazil' },
+                    { value: 'BN', label: 'Brunei' },
+                    { value: 'BG', label: 'Bulgaria' },
+                    { value: 'BF', label: 'Burkina Faso' },
+                    { value: 'BI', label: 'Burundi' },
+                    { value: 'KH', label: 'Cambodia' },
+                    { value: 'CM', label: 'Cameroon' },
+                    { value: 'CA', label: 'Canada' },
+                    { value: 'CV', label: 'Cape Verde' },
+                    { value: 'KY', label: 'Cayman Islands' },
+                    { value: 'CF', label: 'Central African Republic' },
+                    { value: 'TD', label: 'Chad' },
+                    { value: 'CL', label: 'Chile' },
+                    { value: 'CN', label: 'China' },
+                    { value: 'CX', label: 'Christmas Island' },
+                    { value: 'CC', label: 'Cocos (Keeling) Islands' },
+                    { value: 'CO', label: 'Columbia' },
+                    { value: 'KM', label: 'Comoros' },
+                    { value: 'CG', label: 'Congo' },
+                    { value: 'CK', label: 'Cook Islands' },
+                    { value: 'CR', label: 'Costa Rica' },
+                    { value: 'CI', label: 'Cote D`Ivorie' },
+                    { value: 'HR', label: 'Croatia (Hrvatska)' },
+                    { value: 'CU', label: 'Cuba' },
+                    { value: 'CY', label: 'Cyprus' },
+                    { value: 'CZ', label: 'Czech Republic' },
+                    { value: 'DK', label: 'Denmark' },
+                    { value: 'DJ', label: 'Djibouti' },
+                    { value: 'DM', label: 'Dominica' },
+                    { value: 'DO', label: 'Dominican Republic' },
+                    { value: 'TP', label: 'East Timor' },
+                    { value: 'EC', label: 'Ecuador' },
+                    { value: 'EG', label: 'Egypt' },
+                    { value: 'SV', label: 'El Salvador' },
+                    { value: 'GQ', label: 'Equatorial Guinea' },
+                    { value: 'ER', label: 'Eritrea' },
+                    { value: 'EE', label: 'Estonia' },
+                    { value: 'ET', label: 'Ethiopia' },
+                    { value: 'FO', label: 'Faroe Islands' },
+                    { value: 'FJ', label: 'Fiji' },
+                    { value: 'FI', label: 'Finland' },
+                    { value: 'FR', label: 'France' },
+                    { value: 'GF', label: 'French Guinea' },
+                    { value: 'PF', label: 'French Polynesia' },
+                    { value: 'GA', label: 'Gabon' },
+                    { value: 'GM', label: 'Gambia' },
+                    { value: 'GE', label: 'Georgia' },
+                    { value: 'DE', label: 'Germany' },
+                    { value: 'GH', label: 'Ghana' },
+                    { value: 'GI', label: 'Gibraltar' },
+                    { value: 'GR', label: 'Greece' },
+                    { value: 'GL', label: 'Greenland' },
+                    { value: 'GD', label: 'Grenada' },
+                    { value: 'GP', label: 'Guadeloupe' },
+                    { value: 'GU', label: 'Guam' },
+                    { value: 'GT', label: 'Guatemala' },
+                    { value: 'GN', label: 'Guinea' },
+                    { value: 'GW', label: 'Guinea-Bissau' },
+                    { value: 'GY', label: 'Guyana' },
+                    { value: 'HT', label: 'Haiti' },
+                    { value: 'HN', label: 'Honduras' },
+                    { value: 'HK', label: 'Hong Kong' },
+                    { value: 'HU', label: 'Hungary' },
+                    { value: 'IS', label: 'Iceland' },
+                    { value: 'IN', label: 'India' },
+                    { value: 'ID', label: 'Indonesia' },
+                    { value: 'IR', label: 'Iran' },
+                    { value: 'IQ', label: 'Iraq' },
+                    { value: 'IE', label: 'Ireland' },
+                    { value: 'IL', label: 'Israel' },
+                    { value: 'IT', label: 'Italy' },
+                    { value: 'JM', label: 'Jamaica' },
+                    { value: 'JP', label: 'Japan' },
+                    { value: 'JO', label: 'Jordan' },
+                    { value: 'KZ', label: 'Kazakhstan' },
+                    { value: 'KE', label: 'Kenya' },
+                    { value: 'KI', label: 'Kiribati' },
+                    { value: 'KW', label: 'Kuwait' },
+                    { value: 'KG', label: 'Kyrgyzstan' },
+                    { value: 'LA', label: 'Laos' },
+                    { value: 'LV', label: 'Latvia' },
+                    { value: 'LB', label: 'Lebanon' },
+                    { value: 'LS', label: 'Lesotho' },
+                    { value: 'LR', label: 'Liberia' },
+                    { value: 'LY', label: 'Libya' },
+                    { value: 'LI', label: 'Liechtenstein' },
+                    { value: 'LT', label: 'Lithuania' },
+                    { value: 'LU', label: 'Luxembourg' },
+                    { value: 'MO', label: 'Macau' },
+                    { value: 'MK', label: 'Macedonia' },
+                    { value: 'MG', label: 'Madagascar' },
+                    { value: 'MW', label: 'Malawi' },
+                    { value: 'MY', label: 'Malaysia' },
+                    { value: 'MV', label: 'Maldives' },
+                    { value: 'ML', label: 'Mali' },
+                    { value: 'MT', label: 'Malta' },
+                    { value: 'MH', label: 'Marshall Islands' },
+                    { value: 'MQ', label: 'Martinique' },
+                    { value: 'MR', label: 'Mauritania' },
+                    { value: 'MU', label: 'Mauritius' },
+                    { value: 'YT', label: 'Mayotte' },
+                    { value: 'MX', label: 'Mexico' },
+                    { value: 'FM', label: 'Micronesia' },
+                    { value: 'MD', label: 'Moldova' },
+                    { value: 'MC', label: 'Monaco' },
+                    { value: 'MN', label: 'Mongolia' },
+                    { value: 'MS', label: 'Montserrat' },
+                    { value: 'MA', label: 'Morocco' },
+                    { value: 'MZ', label: 'Mozambique' },
+                    { value: 'MM', label: 'Myanmar (Burma)' },
+                    { value: 'NA', label: 'Namibia' },
+                    { value: 'NR', label: 'Nauru' },
+                    { value: 'NP', label: 'Nepal' },
+                    { value: 'NL', label: 'Netherlands' },
+                    { value: 'AN', label: 'Netherlands Antilles' },
+                    { value: 'NC', label: 'New Caledonia' },
+                    { value: 'NZ', label: 'New Zealand' },
+                    { value: 'NI', label: 'Nicaragua' },
+                    { value: 'NE', label: 'Niger' },
+                    { value: 'NG', label: 'Nigeria' },
+                    { value: 'NU', label: 'Niue' },
+                    { value: 'NF', label: 'Norfolk Island' },
+                    { value: 'KP', label: 'North Korea' },
+                    { value: 'NO', label: 'Norway' },
+                    { value: 'OM', label: 'Oman' },
+                    { value: 'PK', label: 'Pakistan' },
+                    { value: 'PW', label: 'Palau' },
+                    { value: 'PA', label: 'Panama' },
+                    { value: 'PG', label: 'Papua New Guinea' },
+                    { value: 'PY', label: 'Paraguay' },
+                    { value: 'PE', label: 'Peru' },
+                    { value: 'PH', label: 'Philippines' },
+                    { value: 'PN', label: 'Pitcairn' },
+                    { value: 'PL', label: 'Poland' },
+                    { value: 'PT', label: 'Portugal' },
+                    { value: 'PR', label: 'Puerto Rico' },
+                    { value: 'QA', label: 'Qatar' },
+                    { value: 'RE', label: 'Reunion' },
+                    { value: 'RO', label: 'Romania' },
+                    { value: 'RU', label: 'Russia' },
+                    { value: 'RW', label: 'Rwanda' },
+                    { value: 'SH', label: 'Saint Helena' },
+                    { value: 'KN', label: 'Saint Kitts and Nevis' },
+                    { value: 'LC', label: 'Saint Lucia' },
+                    { value: 'SM', label: 'San Marino' },
+                    { value: 'SA', label: 'Saudi Arabia' },
+                    { value: 'SN', label: 'Senegal' },
+                    { value: 'SC', label: 'Seychelles' },
+                    { value: 'SL', label: 'Sierra Leone' },
+                    { value: 'SG', label: 'Singapore' },
+                    { value: 'SK', label: 'Slovak Republic' },
+                    { value: 'SI', label: 'Slovenia' },
+                    { value: 'SB', label: 'Solomon Islands' },
+                    { value: 'SO', label: 'Somalia' },
+                    { value: 'ZA', label: 'South Africa' },
+                    { value: 'GS', label: 'South Georgia' },
+                    { value: 'KR', label: 'South Korea' },
+                    { value: 'ES', label: 'Spain' },
+                    { value: 'LK', label: 'Sri Lanka' },
+                    { value: 'SD', label: 'Sudan' },
+                    { value: 'SR', label: 'Suriname' },
+                    { value: 'SZ', label: 'Swaziland' },
+                    { value: 'SE', label: 'Sweden' },
+                    { value: 'CH', label: 'Switzerland' },
+                    { value: 'SY', label: 'Syria' },
+                    { value: 'TW', label: 'Taiwan' },
+                    { value: 'TJ', label: 'Tajikistan' },
+                    { value: 'TZ', label: 'Tanzania' },
+                    { value: 'TH', label: 'Thailand' },
+                    { value: 'TG', label: 'Togo' },
+                    { value: 'TK', label: 'Tokelau' },
+                    { value: 'TO', label: 'Tonga' },
+                    { value: 'TT', label: 'Trinidad and Tobago' },
+                    { value: 'TN', label: 'Tunisia' },
+                    { value: 'TR', label: 'Turkey' },
+                    { value: 'TM', label: 'Turkmenistan' },
+                    { value: 'TC', label: 'Turks and Caicos Islands' },
+                    { value: 'TV', label: 'Tuvalu' },
+                    { value: 'UG', label: 'Uganda' },
+                    { value: 'UA', label: 'Ukraine' },
+                    { value: 'AE', label: 'United Arab Emirates' },
+                    { value: 'UK', label: 'United Kingdom' },
+                    { value: 'US', label: 'United States' },
+                    { value: 'UY', label: 'Uruguay' },
+                    { value: 'UZ', label: 'Uzbekistan' },
+                    { value: 'VU', label: 'Vanuatu' },
+                    { value: 'VA', label: 'Vatican City (Holy See)' },
+                    { value: 'VE', label: 'Venezuela' },
+                    { value: 'VN', label: 'Vietnam' },
+                    { value: 'VG', label: 'Virgin Islands (British)' },
+                    { value: 'VI', label: 'Virgin Islands (US)' },
+                    { value: 'WF', label: 'Wallis and Futuna Islands' },
+                    { value: 'EH', label: 'Western Sahara' },
+                    { value: 'WS', label: 'Western Samoa' },
+                    { value: 'YE', label: 'Yemen' },
+                    { value: 'YU', label: 'Yugoslavia' },
+                    { value: 'ZM', label: 'Zambia' },
+                    { value: 'ZW', label: 'Zimbabwe' }
+                ]
+            }
+        },
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownlist/keyboardnavigation/main.js b/dropdownlist/keyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/keyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/keyboardnavigation/package.json b/dropdownlist/keyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/keyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/loaddatafromselect/App.vue b/dropdownlist/loaddatafromselect/App.vue
new file mode 100644
index 00000000..22431181
--- /dev/null
+++ b/dropdownlist/loaddatafromselect/App.vue
@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <JqxDropDownList ref="myDropDownList" style="float: left"
+                         @select="listOnSelect($event)"
+                         :width="200" :height="25" :selectedIndex="0">
+        </JqxDropDownList>
+
+        <div style="float: left">
+            <select ref="select" id="select" style="height: 25px; width: 200px; margin-left: 30px">
+                <option>Affogato</option>
+                <option>Americano</option>
+                <option>Bicerin</option>
+                <option>Breve</option>
+                <option>Café Bombón</option>
+                <option>Caffé Corretto</option>
+                <option>Café Crema</option>
+                <option>Caffé Latte</option>
+                <option>Caffé macchiato</option>
+                <option>Café mélange</option>
+                <option>Coffee milk</option>
+                <option>Cafe mocha</option>
+                <option>Cappuccino</option>
+                <option>Carajillo</option>
+                <option>Cuban espresso</option>
+                <option>Espresso</option>
+                <option>The Flat White</option>
+                <option>Frappuccino</option>
+                <option>Galao</option>
+                <option>Greek frappé coffee</option>
+                <option>Iced Coffee</option>
+                <option>Indian filter coffee</option>
+                <option>Instant coffee</option>
+                <option>Irish coffee</option>
+                <option>Liqueur coffee</option>
+            </select>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDropDownList
+        },
+        mounted: function () {
+            this.$refs.myDropDownList.loadFromSelect('select');
+            this.selectElement = this.$refs.select;
+
+            this.selectElement.addEventListener('change', (event) => {
+                this.updating = true;
+                let index = this.selectElement.selectedIndex;
+                this.$refs.myDropDownList.selectIndex(index);
+                this.$refs.myDropDownList.ensureVisible(index);
+                this.updating = false;
+            });
+        },
+        methods: {
+            listOnSelect: function(event) {
+                if (event.args && !this.updating) {
+                    let index = event.args.item.index;
+                    this.selectElement.selectedIndex = index;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownlist/loaddatafromselect/main.js b/dropdownlist/loaddatafromselect/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/loaddatafromselect/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/loaddatafromselect/package.json b/dropdownlist/loaddatafromselect/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/loaddatafromselect/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/righttoleftlayout/App.vue b/dropdownlist/righttoleftlayout/App.vue
new file mode 100644
index 00000000..07f62761
--- /dev/null
+++ b/dropdownlist/righttoleftlayout/App.vue
@@ -0,0 +1,255 @@
+<template>
+    <JqxDropDownList ref="myDropDownList"
+        :width="200" :height="25" :source="source" :rtl="true">
+    </JqxDropDownList>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                source: [
+                    { value: 'AF', label: 'Afghanistan' },
+                    { value: 'AL', label: 'Albania' },
+                    { value: 'DZ', label: 'Algeria' },
+                    { value: 'AS', label: 'American Samoa' },
+                    { value: 'AD', label: 'Andorra' },
+                    { value: 'AO', label: 'Angola' },
+                    { value: 'AI', label: 'Anguilla' },
+                    { value: 'AQ', label: 'Antarctica' },
+                    { value: 'AG', label: 'Antigua and Barbuda' },
+                    { value: 'AR', label: 'Argentina' },
+                    { value: 'AM', label: 'Armenia' },
+                    { value: 'AW', label: 'Aruba' },
+                    { value: 'AU', label: 'Australia' },
+                    { value: 'AT', label: 'Austria' },
+                    { value: 'AZ', label: 'Azerbaijan' },
+                    { value: 'BS', label: 'Bahamas' },
+                    { value: 'BH', label: 'Bahrain' },
+                    { value: 'BD', label: 'Bangladesh' },
+                    { value: 'BB', label: 'Barbados' },
+                    { value: 'BY', label: 'Belarus' },
+                    { value: 'BE', label: 'Belgium' },
+                    { value: 'BZ', label: 'Belize' },
+                    { value: 'BJ', label: 'Benin' },
+                    { value: 'BM', label: 'Bermuda' },
+                    { value: 'BT', label: 'Bhutan' },
+                    { value: 'BO', label: 'Bolivia' },
+                    { value: 'BA', label: 'Bosnia and Herzegovina' },
+                    { value: 'BW', label: 'Botswana' },
+                    { value: 'BV', label: 'Bouvet Island' },
+                    { value: 'BR', label: 'Brazil' },
+                    { value: 'BN', label: 'Brunei' },
+                    { value: 'BG', label: 'Bulgaria' },
+                    { value: 'BF', label: 'Burkina Faso' },
+                    { value: 'BI', label: 'Burundi' },
+                    { value: 'KH', label: 'Cambodia' },
+                    { value: 'CM', label: 'Cameroon' },
+                    { value: 'CA', label: 'Canada' },
+                    { value: 'CV', label: 'Cape Verde' },
+                    { value: 'KY', label: 'Cayman Islands' },
+                    { value: 'CF', label: 'Central African Republic' },
+                    { value: 'TD', label: 'Chad' },
+                    { value: 'CL', label: 'Chile' },
+                    { value: 'CN', label: 'China' },
+                    { value: 'CX', label: 'Christmas Island' },
+                    { value: 'CC', label: 'Cocos (Keeling) Islands' },
+                    { value: 'CO', label: 'Columbia' },
+                    { value: 'KM', label: 'Comoros' },
+                    { value: 'CG', label: 'Congo' },
+                    { value: 'CK', label: 'Cook Islands' },
+                    { value: 'CR', label: 'Costa Rica' },
+                    { value: 'CI', label: 'Cote D`Ivorie' },
+                    { value: 'HR', label: 'Croatia (Hrvatska)' },
+                    { value: 'CU', label: 'Cuba' },
+                    { value: 'CY', label: 'Cyprus' },
+                    { value: 'CZ', label: 'Czech Republic' },
+                    { value: 'DK', label: 'Denmark' },
+                    { value: 'DJ', label: 'Djibouti' },
+                    { value: 'DM', label: 'Dominica' },
+                    { value: 'DO', label: 'Dominican Republic' },
+                    { value: 'TP', label: 'East Timor' },
+                    { value: 'EC', label: 'Ecuador' },
+                    { value: 'EG', label: 'Egypt' },
+                    { value: 'SV', label: 'El Salvador' },
+                    { value: 'GQ', label: 'Equatorial Guinea' },
+                    { value: 'ER', label: 'Eritrea' },
+                    { value: 'EE', label: 'Estonia' },
+                    { value: 'ET', label: 'Ethiopia' },
+                    { value: 'FO', label: 'Faroe Islands' },
+                    { value: 'FJ', label: 'Fiji' },
+                    { value: 'FI', label: 'Finland' },
+                    { value: 'FR', label: 'France' },
+                    { value: 'GF', label: 'French Guinea' },
+                    { value: 'PF', label: 'French Polynesia' },
+                    { value: 'GA', label: 'Gabon' },
+                    { value: 'GM', label: 'Gambia' },
+                    { value: 'GE', label: 'Georgia' },
+                    { value: 'DE', label: 'Germany' },
+                    { value: 'GH', label: 'Ghana' },
+                    { value: 'GI', label: 'Gibraltar' },
+                    { value: 'GR', label: 'Greece' },
+                    { value: 'GL', label: 'Greenland' },
+                    { value: 'GD', label: 'Grenada' },
+                    { value: 'GP', label: 'Guadeloupe' },
+                    { value: 'GU', label: 'Guam' },
+                    { value: 'GT', label: 'Guatemala' },
+                    { value: 'GN', label: 'Guinea' },
+                    { value: 'GW', label: 'Guinea-Bissau' },
+                    { value: 'GY', label: 'Guyana' },
+                    { value: 'HT', label: 'Haiti' },
+                    { value: 'HN', label: 'Honduras' },
+                    { value: 'HK', label: 'Hong Kong' },
+                    { value: 'HU', label: 'Hungary' },
+                    { value: 'IS', label: 'Iceland' },
+                    { value: 'IN', label: 'India' },
+                    { value: 'ID', label: 'Indonesia' },
+                    { value: 'IR', label: 'Iran' },
+                    { value: 'IQ', label: 'Iraq' },
+                    { value: 'IE', label: 'Ireland' },
+                    { value: 'IL', label: 'Israel' },
+                    { value: 'IT', label: 'Italy' },
+                    { value: 'JM', label: 'Jamaica' },
+                    { value: 'JP', label: 'Japan' },
+                    { value: 'JO', label: 'Jordan' },
+                    { value: 'KZ', label: 'Kazakhstan' },
+                    { value: 'KE', label: 'Kenya' },
+                    { value: 'KI', label: 'Kiribati' },
+                    { value: 'KW', label: 'Kuwait' },
+                    { value: 'KG', label: 'Kyrgyzstan' },
+                    { value: 'LA', label: 'Laos' },
+                    { value: 'LV', label: 'Latvia' },
+                    { value: 'LB', label: 'Lebanon' },
+                    { value: 'LS', label: 'Lesotho' },
+                    { value: 'LR', label: 'Liberia' },
+                    { value: 'LY', label: 'Libya' },
+                    { value: 'LI', label: 'Liechtenstein' },
+                    { value: 'LT', label: 'Lithuania' },
+                    { value: 'LU', label: 'Luxembourg' },
+                    { value: 'MO', label: 'Macau' },
+                    { value: 'MK', label: 'Macedonia' },
+                    { value: 'MG', label: 'Madagascar' },
+                    { value: 'MW', label: 'Malawi' },
+                    { value: 'MY', label: 'Malaysia' },
+                    { value: 'MV', label: 'Maldives' },
+                    { value: 'ML', label: 'Mali' },
+                    { value: 'MT', label: 'Malta' },
+                    { value: 'MH', label: 'Marshall Islands' },
+                    { value: 'MQ', label: 'Martinique' },
+                    { value: 'MR', label: 'Mauritania' },
+                    { value: 'MU', label: 'Mauritius' },
+                    { value: 'YT', label: 'Mayotte' },
+                    { value: 'MX', label: 'Mexico' },
+                    { value: 'FM', label: 'Micronesia' },
+                    { value: 'MD', label: 'Moldova' },
+                    { value: 'MC', label: 'Monaco' },
+                    { value: 'MN', label: 'Mongolia' },
+                    { value: 'MS', label: 'Montserrat' },
+                    { value: 'MA', label: 'Morocco' },
+                    { value: 'MZ', label: 'Mozambique' },
+                    { value: 'MM', label: 'Myanmar (Burma)' },
+                    { value: 'NA', label: 'Namibia' },
+                    { value: 'NR', label: 'Nauru' },
+                    { value: 'NP', label: 'Nepal' },
+                    { value: 'NL', label: 'Netherlands' },
+                    { value: 'AN', label: 'Netherlands Antilles' },
+                    { value: 'NC', label: 'New Caledonia' },
+                    { value: 'NZ', label: 'New Zealand' },
+                    { value: 'NI', label: 'Nicaragua' },
+                    { value: 'NE', label: 'Niger' },
+                    { value: 'NG', label: 'Nigeria' },
+                    { value: 'NU', label: 'Niue' },
+                    { value: 'NF', label: 'Norfolk Island' },
+                    { value: 'KP', label: 'North Korea' },
+                    { value: 'NO', label: 'Norway' },
+                    { value: 'OM', label: 'Oman' },
+                    { value: 'PK', label: 'Pakistan' },
+                    { value: 'PW', label: 'Palau' },
+                    { value: 'PA', label: 'Panama' },
+                    { value: 'PG', label: 'Papua New Guinea' },
+                    { value: 'PY', label: 'Paraguay' },
+                    { value: 'PE', label: 'Peru' },
+                    { value: 'PH', label: 'Philippines' },
+                    { value: 'PN', label: 'Pitcairn' },
+                    { value: 'PL', label: 'Poland' },
+                    { value: 'PT', label: 'Portugal' },
+                    { value: 'PR', label: 'Puerto Rico' },
+                    { value: 'QA', label: 'Qatar' },
+                    { value: 'RE', label: 'Reunion' },
+                    { value: 'RO', label: 'Romania' },
+                    { value: 'RU', label: 'Russia' },
+                    { value: 'RW', label: 'Rwanda' },
+                    { value: 'SH', label: 'Saint Helena' },
+                    { value: 'KN', label: 'Saint Kitts and Nevis' },
+                    { value: 'LC', label: 'Saint Lucia' },
+                    { value: 'SM', label: 'San Marino' },
+                    { value: 'SA', label: 'Saudi Arabia' },
+                    { value: 'SN', label: 'Senegal' },
+                    { value: 'SC', label: 'Seychelles' },
+                    { value: 'SL', label: 'Sierra Leone' },
+                    { value: 'SG', label: 'Singapore' },
+                    { value: 'SK', label: 'Slovak Republic' },
+                    { value: 'SI', label: 'Slovenia' },
+                    { value: 'SB', label: 'Solomon Islands' },
+                    { value: 'SO', label: 'Somalia' },
+                    { value: 'ZA', label: 'South Africa' },
+                    { value: 'GS', label: 'South Georgia' },
+                    { value: 'KR', label: 'South Korea' },
+                    { value: 'ES', label: 'Spain' },
+                    { value: 'LK', label: 'Sri Lanka' },
+                    { value: 'SD', label: 'Sudan' },
+                    { value: 'SR', label: 'Suriname' },
+                    { value: 'SZ', label: 'Swaziland' },
+                    { value: 'SE', label: 'Sweden' },
+                    { value: 'CH', label: 'Switzerland' },
+                    { value: 'SY', label: 'Syria' },
+                    { value: 'TW', label: 'Taiwan' },
+                    { value: 'TJ', label: 'Tajikistan' },
+                    { value: 'TZ', label: 'Tanzania' },
+                    { value: 'TH', label: 'Thailand' },
+                    { value: 'TG', label: 'Togo' },
+                    { value: 'TK', label: 'Tokelau' },
+                    { value: 'TO', label: 'Tonga' },
+                    { value: 'TT', label: 'Trinidad and Tobago' },
+                    { value: 'TN', label: 'Tunisia' },
+                    { value: 'TR', label: 'Turkey' },
+                    { value: 'TM', label: 'Turkmenistan' },
+                    { value: 'TC', label: 'Turks and Caicos Islands' },
+                    { value: 'TV', label: 'Tuvalu' },
+                    { value: 'UG', label: 'Uganda' },
+                    { value: 'UA', label: 'Ukraine' },
+                    { value: 'AE', label: 'United Arab Emirates' },
+                    { value: 'UK', label: 'United Kingdom' },
+                    { value: 'US', label: 'United States' },
+                    { value: 'UY', label: 'Uruguay' },
+                    { value: 'UZ', label: 'Uzbekistan' },
+                    { value: 'VU', label: 'Vanuatu' },
+                    { value: 'VA', label: 'Vatican City (Holy See)' },
+                    { value: 'VE', label: 'Venezuela' },
+                    { value: 'VN', label: 'Vietnam' },
+                    { value: 'VG', label: 'Virgin Islands (British)' },
+                    { value: 'VI', label: 'Virgin Islands (US)' },
+                    { value: 'WF', label: 'Wallis and Futuna Islands' },
+                    { value: 'EH', label: 'Western Sahara' },
+                    { value: 'WS', label: 'Western Samoa' },
+                    { value: 'YE', label: 'Yemen' },
+                    { value: 'YU', label: 'Yugoslavia' },
+                    { value: 'ZM', label: 'Zambia' },
+                    { value: 'ZW', label: 'Zimbabwe' }
+                ]
+            }
+        },
+        mounted: function () {
+            const item = this.$refs.myDropDownList.getItemByValue('US');
+            this.$refs.myDropDownList.selectItem(item);
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownlist/righttoleftlayout/main.js b/dropdownlist/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/righttoleftlayout/package.json b/dropdownlist/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/saveloadselectionusingcookies/App.vue b/dropdownlist/saveloadselectionusingcookies/App.vue
new file mode 100644
index 00000000..b94c7527
--- /dev/null
+++ b/dropdownlist/saveloadselectionusingcookies/App.vue
@@ -0,0 +1,47 @@
+<template>
+    <JqxDropDownList @select="listOnSelect($event)"
+                     :width="200" :height="25" :source="dataAdapter" :selectedIndex="index"
+                     :displayMember="'ContactName'" :valueMember="'CompanyName'">
+    </JqxDropDownList>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                index: this.index,
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.index = +jqx.cookie.cookie('jqxDropDownList_jqxWidget');
+
+            if (!this.index) {
+                this.index = 0;
+            };
+
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'CompanyName' },
+                    { name: 'ContactName' }
+                ],
+                id: 'id',
+                url: '../sampledata/customers.txt'
+            };
+        },
+        methods: {
+            listOnSelect: function (event) {
+                jqx.cookie.cookie('jqxDropDownList_jqxWidget', event.args.index);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownlist/saveloadselectionusingcookies/main.js b/dropdownlist/saveloadselectionusingcookies/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/saveloadselectionusingcookies/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/saveloadselectionusingcookies/package.json b/dropdownlist/saveloadselectionusingcookies/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/saveloadselectionusingcookies/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/templates/App.vue b/dropdownlist/templates/App.vue
new file mode 100644
index 00000000..fb27e5c4
--- /dev/null
+++ b/dropdownlist/templates/App.vue
@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <JqxDropDownList :width="200" :height="30" :source="source" :selectedIndex="1">
+        </JqxDropDownList>
+
+        <br />
+
+        <JqxDropDownList :width="200" :height="30" :source="source" :selectedIndex="1" :template="'primary'">
+        </JqxDropDownList>
+
+        <br />
+
+        <JqxDropDownList :width="200" :height="30" :source="source" :selectedIndex="1" :template="'success'">
+        </JqxDropDownList>
+
+        <br />
+
+        <JqxDropDownList :width="200" :height="30" :source="source" :selectedIndex="1" :template="'info'">
+        </JqxDropDownList>
+
+        <br />
+
+        <JqxDropDownList :width="200" :height="30" :source="source" :selectedIndex="1" :template="'warning'">
+        </JqxDropDownList>
+
+        <br />
+
+        <JqxDropDownList :width="200" :height="30" :source="source" :selectedIndex="1" :template="'danger'">
+        </JqxDropDownList>
+    </div>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                source: [
+                    'Affogato',
+                    'Americano',
+                    'Bicerin',
+                    'Breve',
+                    'Café Bombón',
+                    'Café au lait',
+                    'Caffé Corretto',
+                    'Café Crema',
+                    'Caffé Latte',
+                    'Caffé macchiato',
+                    'Café mélange',
+                    'Coffee milk',
+                    'Cafe mocha',
+                    'Cappuccino',
+                    'Carajillo',
+                    'Cortado',
+                    'Cuban espresso',
+                    'Espresso',
+                    'Eiskaffee',
+                    'The Flat White',
+                    'Frappuccino',
+                    'Galao',
+                    'Greek frappé coffee',
+                    'Iced Coffee',
+                    'Indian filter coffee',
+                    'Instant coffee',
+                    'Irish coffee',
+                    'Liqueur coffee'
+                ]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownlist/templates/main.js b/dropdownlist/templates/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/templates/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/templates/package.json b/dropdownlist/templates/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/templates/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/textwithicons/App.vue b/dropdownlist/textwithicons/App.vue
new file mode 100644
index 00000000..14b23c0e
--- /dev/null
+++ b/dropdownlist/textwithicons/App.vue
@@ -0,0 +1,34 @@
+<template>
+    <JqxDropDownList :width="200" :height="25" :source="source" :selectedIndex="0">
+    </JqxDropDownList>
+</template>
+
+<script>
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                source: [
+                    { html: '<div style="height: 20px; float: left;"><img style="float: left; margin-top: 2px; margin-right: 5px;" src="../../../images/numberinput.png"/><span style="float: left; font-size: 13px; font-family: Verdana Arial;">jqxNumberInput</span></div>', title: 'jqxNumberInput' },
+                    { html: '<div style="height: 20px; float: left;"><img style="float: left; margin-top: 2px; margin-right: 5px;" src="../../../images/progressbar.png"/><span style="float: left; font-size: 13px; font-family: Verdana Arial;">jqxProgressBar</span></div>', title: 'jqxProgressBar' },
+                    { html: '<div style="height: 20px; float: left;"><img style="float: left; margin-top: 2px; margin-right: 5px;" src="../../../images/calendar.png"/><span style="float: left; font-size: 13px; font-family: Verdana Arial;">jqxCalendar</span></div>', title: 'jqxCalendar' },
+                    { html: '<div style="height: 20px; float: left;"><img style="float: left; margin-top: 2px; margin-right: 5px;" src="../../../images/button.png"/><span style="float: left; font-size: 13px; font-family: Verdana Arial;">jqxButton</span></div>', title: 'jqxButton' },
+                    { html: '<div style="height: 20px; float: left;"><img style="float: left; margin-top: 2px; margin-right: 5px;" src="../../../images/dropdownlist.png"/><span style="float: left; font-size: 13px; font-family: Verdana Arial;">jqxDropDownList</span></div>', title: 'jqxDropDownList' },
+                    { html: '<div style="height: 20px; float: left;"><img style="float: left; margin-top: 2px; margin-right: 5px;" src="../../../images/listbox.png"/><span style="float: left; font-size: 13px; font-family: Verdana Arial;">jqxListBox</span></div>', title: 'jqxListBox' },
+                    { html: '<div style="height: 20px; float: left;"><img style="float: left; margin-top: 2px; margin-right: 5px;" src="../../../images/tooltip.png"/><span style="float: left; font-size: 13px; font-family: Verdana Arial;">jqxTooltip</span></div>', title: 'jqxTooltip' },
+                    { html: '<div style="height: 20px; float: left;"><img style="float: left; margin-top: 2px; margin-right: 5px;" src="../../../images/scrollbar.png"/><span style="float: left; font-size: 13px; font-family: Verdana Arial;">jqxScrollBar</span></div>', title: 'jqxScrollBar' },
+                    { html: '<div style="height: 20px; float: left;"><img style="float: left; margin-top: 2px; margin-right: 5px;" src="../../../images/datetimeinput.png"/><span style="float: left; font-size: 13px; font-family: Verdana Arial;">jqxDateTimeInput</span></div>', title: 'jqxDateTimeInput' },
+                    { html: '<div style="height: 20px; float: left;"><img style="float: left; margin-top: 2px; margin-right: 5px;" src="../../../images/expander.png"/><span style="float: left; font-size: 13px; font-family: Verdana Arial;">jqxExpander</span></div>', title: 'jqxExpander' },
+                    { html: '<div style="height: 20px; float: left;"><img style="float: left; margin-top: 2px; margin-right: 5px;" src="../../../images/menu.png"/><span style="float: left; font-size: 13px; font-family: Verdana Arial;">jqxMenu</span></div>', title: 'jqxMenu' },
+                ]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/dropdownlist/textwithicons/main.js b/dropdownlist/textwithicons/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/textwithicons/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/textwithicons/package.json b/dropdownlist/textwithicons/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/textwithicons/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/dropdownlist/twowaydatabinding/App.vue b/dropdownlist/twowaydatabinding/App.vue
new file mode 100644
index 00000000..3caf2ed3
--- /dev/null
+++ b/dropdownlist/twowaydatabinding/App.vue
@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <div>The value is: {{ item }}</div><br />
+
+        <JqxDropDownList v-model="item" :width="200" :height="25" :source="source" :selectedIndex="0" />
+    </div>
+</template>
+
+<script>
+    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
+
+    export default {
+        components: {
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                item: 'Affogato',
+                source: [
+                    'Affogato',
+                    'Americano',
+                    'Bicerin',
+                    'Breve',
+                    'Cafe Bombon',
+                    'Cafe au lait',
+                    'Cafe mocha',
+                    'Cappuccino',
+                    'Carajillo',
+                    'Iced Coffee',
+                    'Instant coffee',
+                    'Irish coffee',
+                    'Liqueur coffee'
+                ]
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/dropdownlist/twowaydatabinding/main.js b/dropdownlist/twowaydatabinding/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/dropdownlist/twowaydatabinding/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/dropdownlist/twowaydatabinding/package.json b/dropdownlist/twowaydatabinding/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/dropdownlist/twowaydatabinding/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/editor/customtools/App.vue b/editor/customtools/App.vue
new file mode 100644
index 00000000..c4586196
--- /dev/null
+++ b/editor/customtools/App.vue
@@ -0,0 +1,97 @@
+<template>
+    <JqxEditor ref="myEditor"
+               :width="getWidth" :height="400" :tools="tools" :createCommand="createCommand">
+    </JqxEditor>
+</template>
+
+<script>
+    import JqxEditor from "jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue";
+
+    export default {
+        components: {
+            JqxEditor
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('editor'),
+                tools: 'datetime | print | clear | backcolor | font | bold italic underline'
+            }
+        },
+        methods: {
+            createCommand: function (name) {
+                switch (name) {
+                    case 'datetime':
+                        return {
+                            type: 'list',
+                            tooltip: 'Insert Date/Time',
+                            init: (widget) => {
+                                widget.jqxDropDownList({ placeHolder: 'Insert Custom HTML', width: 170, source: ['Insert Time', 'Insert Date'], autoDropDownHeight: true });
+                            },
+                            refresh: (widget, style) => {
+                                // do something here when the selection is changed.
+                                widget.jqxDropDownList('clearSelection');
+                            },
+                            action: (widget, editor) => {
+                                let widgetValue = widget.val();
+                                let date = new Date();
+                                // return object with command and value members.
+                                return { command: 'inserthtml', value: widgetValue == 'Insert Time' ? date.getHours() + ':' + date.getMinutes() : date.getDate() + '-' + date.getMonth() + '-' + date.getFullYear() };
+                            }
+                        }
+                    case 'print':
+                        return {
+                            type: 'button',
+                            tooltip: 'Print',
+                            init: (widget) => {
+                                widget.jqxButton({ height: 25, width: 40 });
+                                widget.html('<span style="line-height: 24px;">Print</span>');
+                            },
+                            refresh: (widget, style) => {
+                                // do something here when the selection is changed.
+                            },
+                            action: (widget, editor) => {
+                                // return nothing and perform a custom action.
+                                this.$refs.myEditor.print();
+                            }
+                        }
+                    case 'clear':
+                        return {
+                            type: 'button',
+                            tooltip: 'Clear',
+                            init: (widget) => {
+                                widget.jqxButton({ height: 25, width: 40 });
+                                widget.html('<span style="line-height: 24px;">Clear</span>');
+                            },
+                            refresh: (widget, style) => {
+                                // do something here when the selection is changed.
+                            },
+                            action: (widget, editor) => {
+                                // return nothing and perform a custom action.
+                                this.$refs.myEditor.val('')
+                            }
+                        }
+                    case 'backcolor':
+                        return {
+                            type: 'colorPicker',
+                            tooltip: 'Background',
+                            init: (widget) => {
+                                widget.jqxDropDownButton({ width: 170 });
+                                widget.jqxDropDownButton('setContent', '<span style="line-height: 24px;">Choose Background</span>');
+                            },
+                            refresh: (widget, style) => {
+                                // do something here when the selection is changed.
+                            },
+                            action: (widget, editor) => {
+                                // return nothing and perform a custom action.
+                                let color = widget.val();
+                                editor.css('background', color);
+                            }
+                        }
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/editor/customtools/main.js b/editor/customtools/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/editor/customtools/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/editor/customtools/package.json b/editor/customtools/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/editor/customtools/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/editor/defaultfunctionality/App.vue b/editor/defaultfunctionality/App.vue
new file mode 100644
index 00000000..679be524
--- /dev/null
+++ b/editor/defaultfunctionality/App.vue
@@ -0,0 +1,35 @@
+<template>
+    <JqxEditor :width="getWidth" :height="400">
+        &lt;b&gt;jqxEditor&lt;/b&gt; is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea.
+        &lt;br /&gt;
+        &lt;br /&gt;
+        Features include:
+        &lt;br /&gt;
+        &lt;ul&gt;
+        &lt;li&gt;Text formatting&lt;/li&gt;
+        &lt;li&gt;Text alignment&lt;/li&gt;
+        &lt;li&gt;Hyperlink dialog&lt;/li&gt;
+        &lt;li&gt;Image dialog&lt;/li&gt;
+        &lt;li&gt;Bulleted list&lt;/li&gt;
+        &lt;li&gt;Numbered list&lt;/li&gt;
+        &lt;/ul&gt;
+    </JqxEditor>
+</template>
+
+<script>
+    import JqxEditor from "jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue";
+
+    export default {
+        components: {
+            JqxEditor
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('editor')
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/editor/defaultfunctionality/main.js b/editor/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/editor/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/editor/defaultfunctionality/package.json b/editor/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/editor/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/editor/fluidsize/App.vue b/editor/fluidsize/App.vue
new file mode 100644
index 00000000..c6e18a92
--- /dev/null
+++ b/editor/fluidsize/App.vue
@@ -0,0 +1,38 @@
+<template>
+    <JqxEditor :width="'100%'" :height="'95%'" :tools="'bold italic underline | left center right'">
+        &lt;b&gt;jqxEditor&lt;/b&gt; is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea.
+        &lt;br /&gt;
+        &lt;br /&gt;
+        Features include:
+        &lt;br /&gt;
+        &lt;ul&gt;
+        &lt;li&gt;Text formatting&lt;/li&gt;
+        &lt;li&gt;Text alignment&lt;/li&gt;
+        &lt;li&gt;Hyperlink dialog&lt;/li&gt;
+        &lt;li&gt;Image dialog&lt;/li&gt;
+        &lt;li&gt;Bulleted list&lt;/li&gt;
+        &lt;li&gt;Numbered list&lt;/li&gt;
+        &lt;/ul&gt;
+    </JqxEditor>
+</template>
+
+<script>
+    import JqxEditor from "jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue";
+
+    export default {
+        components: {
+            JqxEditor
+        }
+    }
+</script>
+
+<style>
+    body, html {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        padding: 3px;
+        box-sizing: border-box;
+        margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/editor/fluidsize/main.js b/editor/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/editor/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/editor/fluidsize/package.json b/editor/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/editor/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/editor/importstyles/App.vue b/editor/importstyles/App.vue
new file mode 100644
index 00000000..80062a18
--- /dev/null
+++ b/editor/importstyles/App.vue
@@ -0,0 +1,63 @@
+<template>
+    <JqxEditor :width="getWidth" :height="400" :stylesheets="['editor.css']" :createCommand="createCommand">
+        &lt;b&gt;jqxEditor&lt;/b&gt; is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea.
+        &lt;br /&gt;
+        &lt;br /&gt;
+        Features include:
+        &lt;br /&gt;
+        &lt;ul&gt;
+        &lt;li&gt;Text formatting&lt;/li&gt;
+        &lt;li&gt;Text alignment&lt;/li&gt;
+        &lt;li&gt;Hyperlink dialog&lt;/li&gt;
+        &lt;li&gt;Image dialog&lt;/li&gt;
+        &lt;li&gt;Bulleted list&lt;/li&gt;
+        &lt;li&gt;Numbered list&lt;/li&gt;
+        &lt;/ul&gt;
+    </JqxEditor>
+</template>
+
+<script>
+    import JqxEditor from "jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue";
+
+    export default {
+        components: {
+            JqxEditor
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('editor')
+            }
+        },
+        methods: {
+            createCommand: function (name) {
+                switch (name) {
+                    case 'font':
+                        return {
+                            init: (widget) => {
+                                let source =
+                                    [
+                                        { label: 'Arial', value: 'Arial, Helvetica, sans-serif' },
+                                        { label: 'Comic Sans MS', value: '"Comic Sans MS", cursive, sans-serif' },
+                                        { label: 'Courier New', value: '"Courier New", Courier, monospace' },
+                                        { label: 'Georgia', value: 'Georgia,serif' },
+                                        { label: 'Helvetica', value: 'HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica' },
+                                        { label: 'Impact', value: 'Impact,Charcoal,sans-serif' },
+                                        { label: 'Lucida Console', value: '"Lucida Console",Monaco,monospace' },
+                                        { label: 'Tahoma', value: 'Tahoma,Geneva,sans-serif' },
+                                        { label: 'Times New Roman', value: '"Times New Roman",Times,serif' },
+                                        { label: 'Trebuchet MS', value: '"Trebuchet MS",Helvetica,sans-serif' },
+                                        { label: 'Verdana', value: 'Verdana,Geneva,sans-serif' }
+                                    ];
+                                widget.jqxDropDownList({
+                                    source: source
+                                });
+                            }
+                        }
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/editor/importstyles/main.js b/editor/importstyles/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/editor/importstyles/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/editor/importstyles/package.json b/editor/importstyles/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/editor/importstyles/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/editor/linebreakconfig/App.vue b/editor/linebreakconfig/App.vue
new file mode 100644
index 00000000..59ea2a0c
--- /dev/null
+++ b/editor/linebreakconfig/App.vue
@@ -0,0 +1,22 @@
+<template>
+    <JqxEditor :width="getWidth" :height="400" :lineBreak="'div'">
+    </JqxEditor>
+</template>
+
+<script>
+    import JqxEditor from "jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue";
+
+    export default {
+        components: {
+            JqxEditor
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('editor')
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/editor/linebreakconfig/main.js b/editor/linebreakconfig/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/editor/linebreakconfig/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/editor/linebreakconfig/package.json b/editor/linebreakconfig/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/editor/linebreakconfig/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/editor/localization/App.vue b/editor/localization/App.vue
new file mode 100644
index 00000000..a08cd33b
--- /dev/null
+++ b/editor/localization/App.vue
@@ -0,0 +1,56 @@
+<template>
+    <JqxEditor :width="getWidth" :height="400" :localization="localization">
+        &lt;b&gt;jqxEditor&lt;/b&gt; is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea or you can create it from a DIV element.
+        &lt;br /&gt;
+        &lt;br /&gt;
+        Features include:
+        &lt;br /&gt;
+        &lt;ul&gt;
+        &lt;li&gt;Text formatting&lt;/li&gt;
+        &lt;li&gt;Text alignment&lt;/li&gt;
+        &lt;li&gt;Hyperlink dialog&lt;/li&gt;
+        &lt;li&gt;Image dialog&lt;/li&gt;
+        &lt;li&gt;Bulleted list&lt;/li&gt;
+        &lt;li&gt;Numbered list&lt;/li&gt;
+        &lt;/ul&gt;
+    </JqxEditor>
+</template>
+
+<script>
+    import JqxEditor from "jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue";
+
+    export default {
+        components: {
+            JqxEditor
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('editor'),
+                localization: {
+                    'bold': 'Fett',
+                    'italic': 'Kursiv',
+                    'underline': 'Unterstreichen',
+                    'format': 'Block-Format',
+                    'font': 'Schriftname',
+                    'size': 'Schriftgröße',
+                    'color': 'Textfarbe',
+                    'background': 'Hintergrundfarbe',
+                    'left': 'Links ausrichten',
+                    'center': 'Mitte ausrichten',
+                    'right': 'Rechts ausrichten',
+                    'outdent': 'Weniger Einzug',
+                    'indent': 'Mehr Einzug',
+                    'ul': 'Legen Sie ungeordnete Liste',
+                    'ol': 'Geordnete Liste einfügen',
+                    'image': 'Bild einfügen',
+                    'link': 'Link einfügen',
+                    'html': 'html anzeigen',
+                    'clean': 'Formatierung entfernen'
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/editor/localization/main.js b/editor/localization/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/editor/localization/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/editor/localization/package.json b/editor/localization/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/editor/localization/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/editor/popupeditor/App.vue b/editor/popupeditor/App.vue
new file mode 100644
index 00000000..b6dc2a48
--- /dev/null
+++ b/editor/popupeditor/App.vue
@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <JqxButton @click="btnOnClick()" :width="120">Open Editor</JqxButton>
+
+        <JqxWindow ref="myWindow"
+                   :width="600" :height="400" :maxWidth="800"
+                   :autoOpen="false" :resizable="false" :position="'top, left'">
+            <div>jqxEditor</div>
+            <JqxEditor :width="'100%'" :height="'94%'"
+                       :tools="'bold | italic | underline | font | size'">
+            </JqxEditor>
+        </JqxWindow>
+    </div>
+</template>
+
+<script>
+    import JqxEditor from "jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue";
+    import JqxWindow from "jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxEditor,
+            JqxWindow,
+            JqxButton
+        },
+        methods: {
+            btnOnClick: function () {
+                this.$refs.myWindow.open();
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/editor/popupeditor/main.js b/editor/popupeditor/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/editor/popupeditor/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/editor/popupeditor/package.json b/editor/popupeditor/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/editor/popupeditor/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/editor/printing/App.vue b/editor/printing/App.vue
new file mode 100644
index 00000000..210ba8fb
--- /dev/null
+++ b/editor/printing/App.vue
@@ -0,0 +1,59 @@
+<template>
+    <JqxEditor ref="myEditor"
+               :width="getWidth" :height="400" :tools="tools" :createCommand="createCommand">
+        &lt;b&gt;jqxEditor&lt;/b&gt; is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea or you can create it from a DIV element.
+        &lt;br /&gt;
+        &lt;br /&gt;
+        Features include:
+        &lt;br /&gt;
+        &lt;ul&gt;
+        &lt;li&gt;Text formatting&lt;/li&gt;
+        &lt;li&gt;Text alignment&lt;/li&gt;
+        &lt;li&gt;Hyperlink dialog&lt;/li&gt;
+        &lt;li&gt;Image dialog&lt;/li&gt;
+        &lt;li&gt;Bulleted list&lt;/li&gt;
+        &lt;li&gt;Numbered list&lt;/li&gt;
+        &lt;/ul&gt;
+    </JqxEditor>
+</template>
+
+<script>
+    import JqxEditor from "jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue";
+
+    export default {
+        components: {
+            JqxEditor
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('editor'),
+                tools: 'bold italic underline | format font size | left center right | print'
+            }
+        },
+        methods: {
+            createCommand: function (name) {
+                switch (name) {
+                    case 'print':
+                        return {
+                            type: 'button',
+                            tooltip: 'Print',
+                            init: (widget) => {
+                                widget.jqxButton({ height: 25, width: 40 });
+                                widget.html('<span style="line-height: 23px;">Print</span>');
+                            },
+                            refresh: (widget, style) => {
+                                // do something here when the selection is changed.
+                            },
+                            action: (widget, style) => {
+                                // return nothing and perform a custom action.
+                                this.$refs.myEditor.print();
+                            }
+                        }
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/editor/printing/main.js b/editor/printing/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/editor/printing/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/editor/printing/package.json b/editor/printing/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/editor/printing/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/editor/righttoleftlayout/App.vue b/editor/righttoleftlayout/App.vue
new file mode 100644
index 00000000..de41a078
--- /dev/null
+++ b/editor/righttoleftlayout/App.vue
@@ -0,0 +1,35 @@
+<template>
+    <JqxEditor :width="getWidth" :height="400" :rtl="true">
+        &lt;b&gt;jqxEditor&lt;/b&gt; is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea or you can create it from a DIV element.
+        &lt;br /&gt;
+        &lt;br /&gt;
+        Features include:
+        &lt;br /&gt;
+        &lt;ul&gt;
+        &lt;li&gt;Text formatting&lt;/li&gt;
+        &lt;li&gt;Text alignment&lt;/li&gt;
+        &lt;li&gt;Hyperlink dialog&lt;/li&gt;
+        &lt;li&gt;Image dialog&lt;/li&gt;
+        &lt;li&gt;Bulleted list&lt;/li&gt;
+        &lt;li&gt;Numbered list&lt;/li&gt;
+        &lt;/ul&gt;
+    </JqxEditor>
+</template>
+
+<script>
+    import JqxEditor from "jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue";
+
+    export default {
+        components: {
+            JqxEditor
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('editor')
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/editor/righttoleftlayout/main.js b/editor/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/editor/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/editor/righttoleftlayout/package.json b/editor/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/editor/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/editor/toolbarposition/App.vue b/editor/toolbarposition/App.vue
new file mode 100644
index 00000000..1dec5219
--- /dev/null
+++ b/editor/toolbarposition/App.vue
@@ -0,0 +1,35 @@
+<template>
+    <JqxEditor :width="getWidth" :height="400" :toolbarPosition="'bottom'">
+        &lt;b&gt;jqxEditor&lt;/b&gt; is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea or you can create it from a DIV element.
+        &lt;br /&gt;
+        &lt;br /&gt;
+        Features include:
+        &lt;br /&gt;
+        &lt;ul&gt;
+        &lt;li&gt;Text formatting&lt;/li&gt;
+        &lt;li&gt;Text alignment&lt;/li&gt;
+        &lt;li&gt;Hyperlink dialog&lt;/li&gt;
+        &lt;li&gt;Image dialog&lt;/li&gt;
+        &lt;li&gt;Bulleted list&lt;/li&gt;
+        &lt;li&gt;Numbered list&lt;/li&gt;
+        &lt;/ul&gt;
+    </JqxEditor>
+</template>
+
+<script>
+    import JqxEditor from "jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue";
+
+    export default {
+        components: {
+            JqxEditor
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('editor')
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/editor/toolbarposition/main.js b/editor/toolbarposition/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/editor/toolbarposition/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/editor/toolbarposition/package.json b/editor/toolbarposition/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/editor/toolbarposition/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/editor/toolscustomization/App.vue b/editor/toolscustomization/App.vue
new file mode 100644
index 00000000..5036c417
--- /dev/null
+++ b/editor/toolscustomization/App.vue
@@ -0,0 +1,67 @@
+<template>
+    <JqxEditor :width="getWidth" :height="400" :tools="tools" :createCommand="createCommand">
+        &lt;b&gt;jqxEditor&lt;/b&gt; is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea or you can create it from a DIV element.
+        &lt;br /&gt;
+        &lt;br /&gt;
+        Features include:
+        &lt;br /&gt;
+        &lt;ul&gt;
+        &lt;li&gt;Text formatting&lt;/li&gt;
+        &lt;li&gt;Text alignment&lt;/li&gt;
+        &lt;li&gt;Hyperlink dialog&lt;/li&gt;
+        &lt;li&gt;Image dialog&lt;/li&gt;
+        &lt;li&gt;Bulleted list&lt;/li&gt;
+        &lt;li&gt;Numbered list&lt;/li&gt;
+        &lt;/ul&gt;
+    </JqxEditor>
+</template>
+
+<script>
+    import JqxEditor from "jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue";
+
+    export default {
+        components: {
+            JqxEditor
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('editor'),
+                tools: 'bold italic underline | font size | left center right | outdent indent'
+            }
+        },
+        methods: {
+            createCommand: function (name) {
+                switch (name) {
+                    case 'font':
+                        return {
+                            init: (widget) => {
+                                widget.jqxDropDownList({
+                                    source: [
+                                        { label: 'Arial', value: 'Arial, Helvetica, sans-serif' },
+                                        { label: 'Comic Sans MS', value: '"Comic Sans MS", cursive, sans-serif' },
+                                        { label: 'Courier New', value: '"Courier New", Courier, monospace' },
+                                        { label: 'Georgia', value: 'Georgia,serif' }]
+                                });
+                            }
+                        }
+                    case 'size':
+                        return {
+                            init: (widget) => {
+                                widget.jqxDropDownList({
+                                    source: [
+                                        { label: '8pt', value: 'xx-small' },
+                                        { label: '12pt', value: 'small' },
+                                        { label: '18pt', value: 'large' },
+                                        { label: '36pt', value: 'xx-large' }
+                                    ]
+                                });
+                            }
+                        }
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/editor/toolscustomization/main.js b/editor/toolscustomization/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/editor/toolscustomization/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/editor/toolscustomization/package.json b/editor/toolscustomization/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/editor/toolscustomization/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/editor/toolsvisibility/App.vue b/editor/toolsvisibility/App.vue
new file mode 100644
index 00000000..bd5a509a
--- /dev/null
+++ b/editor/toolsvisibility/App.vue
@@ -0,0 +1,35 @@
+<template>
+    <JqxEditor :width="getWidth" :height="400" :tools="'bold italic underline | left center right'">
+        &lt;b&gt;jqxEditor&lt;/b&gt; is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea or you can create it from a DIV element.
+        &lt;br /&gt;
+        &lt;br /&gt;
+        Features include:
+        &lt;br /&gt;
+        &lt;ul&gt;
+        &lt;li&gt;Text formatting&lt;/li&gt;
+        &lt;li&gt;Text alignment&lt;/li&gt;
+        &lt;li&gt;Hyperlink dialog&lt;/li&gt;
+        &lt;li&gt;Image dialog&lt;/li&gt;
+        &lt;li&gt;Bulleted list&lt;/li&gt;
+        &lt;li&gt;Numbered list&lt;/li&gt;
+        &lt;/ul&gt;
+    </JqxEditor>
+</template>
+
+<script>
+    import JqxEditor from "jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue";
+
+    export default {
+        components: {
+            JqxEditor
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('editor')
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/editor/toolsvisibility/main.js b/editor/toolsvisibility/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/editor/toolsvisibility/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/editor/toolsvisibility/package.json b/editor/toolsvisibility/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/editor/toolsvisibility/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/expander/defaultfunctionality/App.vue b/expander/defaultfunctionality/App.vue
new file mode 100644
index 00000000..728913c8
--- /dev/null
+++ b/expander/defaultfunctionality/App.vue
@@ -0,0 +1,40 @@
+<template>
+    <JqxExpander :width="350">
+        <div>
+            Early History of the Internet
+        </div>
+        <div>
+            <ul>
+                <li>1961 First packet-switching papers</li>
+                <li>1966 Merit Network founded</li>
+                <li>1966 ARPANET planning starts</li>
+                <li>1969 ARPANET carries its first packets</li>
+                <li>1970 Mark I network at NPL (UK)</li>
+                <li>1970 Network Information Center (NIC)</li>
+                <li>1971 Merit Network's packet-switched network operational</li>
+                <li>1971 Tymnet packet-switched network</li>
+                <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
+                <li>1973 CYCLADES network demonstrated</li>
+                <li>1974 Telenet packet-switched network</li>
+                <li>1976 X.25 protocol approved</li>
+                <li>1979 Internet Activities Board (IAB)</li>
+                <li>1980 USENET news using UUCP</li>
+                <li>1980 Ethernet standard introduced</li>
+                <li>1981 BITNET established</li>
+            </ul>
+        </div>
+    </JqxExpander>
+</template>
+
+<script>
+    import JqxExpander from "jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue";
+
+    export default {
+        components: {
+            JqxExpander
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/expander/defaultfunctionality/main.js b/expander/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/expander/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/expander/defaultfunctionality/package.json b/expander/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/expander/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/expander/fluidsize/App.vue b/expander/fluidsize/App.vue
new file mode 100644
index 00000000..7952e456
--- /dev/null
+++ b/expander/fluidsize/App.vue
@@ -0,0 +1,48 @@
+<template>
+    <JqxExpander :width="'50%'" :height="'50%'">
+        <div>
+            Early History of the Internet
+        </div>
+        <div>
+            <ul>
+                <li>1961 First packet-switching papers</li>
+                <li>1966 Merit Network founded</li>
+                <li>1966 ARPANET planning starts</li>
+                <li>1969 ARPANET carries its first packets</li>
+                <li>1970 Mark I network at NPL (UK)</li>
+                <li>1970 Network Information Center (NIC)</li>
+                <li>1971 Merit Network's packet-switched network operational</li>
+                <li>1971 Tymnet packet-switched network</li>
+                <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
+                <li>1973 CYCLADES network demonstrated</li>
+                <li>1974 Telenet packet-switched network</li>
+                <li>1976 X.25 protocol approved</li>
+                <li>1979 Internet Activities Board (IAB)</li>
+                <li>1980 USENET news using UUCP</li>
+                <li>1980 Ethernet standard introduced</li>
+                <li>1981 BITNET established</li>
+            </ul>
+        </div>
+    </JqxExpander>
+</template>
+
+<script>
+    import JqxExpander from "jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue";
+
+    export default {
+        components: {
+            JqxExpander
+        }
+    }
+</script>
+
+<style>
+    body, html {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        padding: 3px;
+        box-sizing: border-box;
+        margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/expander/fluidsize/main.js b/expander/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/expander/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/expander/fluidsize/package.json b/expander/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/expander/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/expander/loadingdataondemand/App.vue b/expander/loadingdataondemand/App.vue
new file mode 100644
index 00000000..99138251
--- /dev/null
+++ b/expander/loadingdataondemand/App.vue
@@ -0,0 +1,48 @@
+<template>
+    <JqxExpander ref="myExpander" :width="350" :height="350">
+        <div>
+            Loading Header...
+        </div>
+        <div>
+            Loading Content...
+        </div>
+    </JqxExpander>
+</template>
+
+<script>
+    import JqxExpander from "jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue";
+
+    export default {
+        components: {
+            JqxExpander
+        },
+        mounted: function () {
+            fetch('../sampledata/jqxexpanderxmldata.xml')
+                .then(response => response.text().then(data => this.populateExpader(data)));
+        },
+        methods: {
+            populateExpader: function(data) {
+                const content = document.createElement('div');
+                content.innerHTML = data;
+
+                let LIArray = content.getElementsByTagName('li');
+                const container = document.createElement('div');
+                const ul = document.createElement('ul');
+
+                for (let i = 0; i < LIArray.length; i++) {
+                    const li = document.createElement('li');
+                    li.innerText = LIArray[i].innerHTML;
+                    ul.appendChild(li)
+                }
+
+                container.appendChild(ul);
+
+                this.$refs.myExpander.setContent(container);
+                this.$refs.myExpander.setHeaderContent(content.getElementsByTagName('header')[0].innerHTML);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/expander/loadingdataondemand/main.js b/expander/loadingdataondemand/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/expander/loadingdataondemand/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/expander/loadingdataondemand/package.json b/expander/loadingdataondemand/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/expander/loadingdataondemand/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/expander/righttoleftlayout/App.vue b/expander/righttoleftlayout/App.vue
new file mode 100644
index 00000000..a52b719f
--- /dev/null
+++ b/expander/righttoleftlayout/App.vue
@@ -0,0 +1,38 @@
+<template>
+    <JqxExpander :width="350" :rtl="true">
+        <div>Early History of the Internet</div>
+        <div>
+            <ul style="direction: rtl">
+                <li>1961 First packet-switching papers</li>
+                <li>1966 Merit Network founded</li>
+                <li>1966 ARPANET planning starts</li>
+                <li>1969 ARPANET carries its first packets</li>
+                <li>1970 Mark I network at NPL (UK)</li>
+                <li>1970 Network Information Center (NIC)</li>
+                <li>1971 Merit Networks packet-switched network operational</li>
+                <li>1971 Tymnet packet-switched network</li>
+                <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
+                <li>1973 CYCLADES network demonstrated</li>
+                <li>1974 Telenet packet-switched network</li>
+                <li>1976 X.25 protocol approved</li>
+                <li>1979 Internet Activities Board (IAB)</li>
+                <li>1980 USENET news using UUCP</li>
+                <li>1980 Ethernet standard introduced</li>
+                <li>1981 BITNET established</li>
+            </ul>
+        </div>
+    </JqxExpander>
+</template>
+
+<script>
+    import JqxExpander from "jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue";
+
+    export default {
+        components: {
+            JqxExpander
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/expander/righttoleftlayout/main.js b/expander/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/expander/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/expander/righttoleftlayout/package.json b/expander/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/expander/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/expander/toggleondoubleclick/App.vue b/expander/toggleondoubleclick/App.vue
new file mode 100644
index 00000000..adb1e6a8
--- /dev/null
+++ b/expander/toggleondoubleclick/App.vue
@@ -0,0 +1,38 @@
+<template>
+    <JqxExpander :width="350" :toggleMode="'dblclick'">
+        <div>Early History of the Internet</div>
+        <div>
+            <ul style="direction: rtl">
+                <li>1961 First packet-switching papers</li>
+                <li>1966 Merit Network founded</li>
+                <li>1966 ARPANET planning starts</li>
+                <li>1969 ARPANET carries its first packets</li>
+                <li>1970 Mark I network at NPL (UK)</li>
+                <li>1970 Network Information Center (NIC)</li>
+                <li>1971 Merit Networks packet-switched network operational</li>
+                <li>1971 Tymnet packet-switched network</li>
+                <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
+                <li>1973 CYCLADES network demonstrated</li>
+                <li>1974 Telenet packet-switched network</li>
+                <li>1976 X.25 protocol approved</li>
+                <li>1979 Internet Activities Board (IAB)</li>
+                <li>1980 USENET news using UUCP</li>
+                <li>1980 Ethernet standard introduced</li>
+                <li>1981 BITNET established</li>
+            </ul>
+        </div>
+    </JqxExpander>
+</template>
+
+<script>
+    import JqxExpander from "jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue";
+
+    export default {
+        components: {
+            JqxExpander
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/expander/toggleondoubleclick/main.js b/expander/toggleondoubleclick/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/expander/toggleondoubleclick/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/expander/toggleondoubleclick/package.json b/expander/toggleondoubleclick/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/expander/toggleondoubleclick/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/fileupload/buttonsrendering/App.vue b/fileupload/buttonsrendering/App.vue
new file mode 100644
index 00000000..5d26420f
--- /dev/null
+++ b/fileupload/buttonsrendering/App.vue
@@ -0,0 +1,18 @@
+<template>
+    <JqxFileUpload :width="300" :uploadUrl="'imageUpload.php'" :fileInputName="'fileToUpload'"
+                   :cancelTemplate="'danger'" :browseTemplate="'success'" :uploadTemplate="'primary'">
+    </JqxFileUpload>
+</template>
+
+<script>
+    import JqxFileUpload from "jqwidgets-scripts/jqwidgets-vue/vue_jqxfileupload.vue";
+
+    export default {
+        components: {
+            JqxFileUpload
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/fileupload/buttonsrendering/main.js b/fileupload/buttonsrendering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/fileupload/buttonsrendering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/fileupload/buttonsrendering/package.json b/fileupload/buttonsrendering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/fileupload/buttonsrendering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/fileupload/defaultfunctionality/App.vue b/fileupload/defaultfunctionality/App.vue
new file mode 100644
index 00000000..496cffb7
--- /dev/null
+++ b/fileupload/defaultfunctionality/App.vue
@@ -0,0 +1,17 @@
+<template>
+    <JqxFileUpload :width="300" :uploadUrl="'imageUpload.php'" :fileInputName="'fileToUpload'">
+    </JqxFileUpload>
+</template>
+
+<script>
+    import JqxFileUpload from "jqwidgets-scripts/jqwidgets-vue/vue_jqxfileupload.vue";
+
+    export default {
+        components: {
+            JqxFileUpload
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/fileupload/defaultfunctionality/main.js b/fileupload/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/fileupload/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/fileupload/defaultfunctionality/package.json b/fileupload/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/fileupload/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/fileupload/events/App.vue b/fileupload/events/App.vue
new file mode 100644
index 00000000..19d30fb2
--- /dev/null
+++ b/fileupload/events/App.vue
@@ -0,0 +1,57 @@
+<template>
+    <div>
+        <JqxFileUpload style="float: left"
+                       @select="onSelect($event)" @remove="onRemove($event)"
+                       @uploadStart="onUploadStart($event)" @uploadEnd="onUploadEnd($event)"
+                       :width="300" :uploadUrl="'upload.php'" :fileInputName="'fileToUpload'">
+        </JqxFileUpload>
+
+        <div style="float: left; margin-left: 50px">
+            <div style="margin-bottom: 10px; font-family: Verdana; font-size: smaller">
+                Events log:
+            </div>
+
+            <JqxPanel ref="myPanel" :width="300" :height="150"></JqxPanel>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxFileUpload from "jqwidgets-scripts/jqwidgets-vue/vue_jqxfileupload.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxFileUpload,
+            JqxPanel
+        },
+        methods: {
+            onSelect: function (event) {
+                let args = event.args;
+                let fileName = args.file;
+                let fileSize = args.size;
+                this.$refs.myPanel.append('<strong>' + event.type + ':</strong> ' +
+                    fileName + ';<br />' + 'size: ' + fileSize + '<br />');
+            },
+            onRemove: function (event) {
+                let fileName = event.args.file;
+                this.$refs.myPanel.append('<strong>' + event.type + ':</strong> ' + fileName + '<br />');
+            },
+            onUploadStart: function (event) {
+                let fileName = event.args.file;
+                this.$refs.myPanel.append('<strong>' + event.type + ':</strong> ' + fileName + '<br />');
+            },
+            onUploadEnd: function (event) {
+                let args = event.args;
+                let fileName = args.file;
+                let serverResponce = args.response;
+                this.$refs.myPanel.append('<strong>' + event.type + ':</strong> ' +
+                    fileName + ';<br />' + 'server response: ' + serverResponce + '<br />');
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/fileupload/events/main.js b/fileupload/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/fileupload/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/fileupload/events/package.json b/fileupload/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/fileupload/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/fileupload/righttoleftlayout/App.vue b/fileupload/righttoleftlayout/App.vue
new file mode 100644
index 00000000..4b17235b
--- /dev/null
+++ b/fileupload/righttoleftlayout/App.vue
@@ -0,0 +1,18 @@
+<template>
+    <JqxFileUpload 
+                   :width="300" :uploadUrl="'upload.php'" :fileInputName="'fileToUpload'" :rtl="true">
+    </JqxFileUpload>
+</template>
+
+<script>
+    import JqxFileUpload from "jqwidgets-scripts/jqwidgets-vue/vue_jqxfileupload.vue";
+
+    export default {
+        components: {
+            JqxFileUpload
+        }
+    } 
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/fileupload/righttoleftlayout/main.js b/fileupload/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/fileupload/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/fileupload/righttoleftlayout/package.json b/fileupload/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/fileupload/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/fileupload/selectedfilesrendering/App.vue b/fileupload/selectedfilesrendering/App.vue
new file mode 100644
index 00000000..c91abc0d
--- /dev/null
+++ b/fileupload/selectedfilesrendering/App.vue
@@ -0,0 +1,37 @@
+<template>
+    <JqxFileUpload :width="300" :uploadUrl="'upload.php'" :fileInputName="'fileToUpload'" :renderFiles="renderFiles">
+    </JqxFileUpload>
+</template>
+
+<script>
+    import JqxFileUpload from "jqwidgets-scripts/jqwidgets-vue/vue_jqxfileupload.vue";
+
+    export default {
+        components: {
+            JqxFileUpload
+        },
+        beforeCreate: function () {
+            this.imageTypes = ['.gif', '.jpg', '.png'];
+            this.videoTypes = ['.wmv', '.mov', '.avi', '.divx', '.mpeg', '.mpg', '.m4p'];
+        },
+        methods: {
+            renderFiles: function (fileName) {
+                let stopIndex = fileName.indexOf('.');
+                let name = fileName.slice(0, stopIndex);
+                let extension = fileName.slice(stopIndex);
+                let iconUrl;
+                if (this.imageTypes.indexOf(extension) !== -1) {
+                    iconUrl = '../../../images/nav3.png';
+                } else if (this.videoTypes.indexOf(extension) !== -1) {
+                    iconUrl = '../../../images/movie.png';
+                } else {
+                    iconUrl = '../../../images/nav1.png';
+                }
+                return '<div><img src="' + iconUrl + '" style="dislplay: inline; width: 16px; height: 16px; margin-right: 5px;" /><span>' + name + '<strong>' + extension + '</strong></span></div>';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/fileupload/selectedfilesrendering/main.js b/fileupload/selectedfilesrendering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/fileupload/selectedfilesrendering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/fileupload/selectedfilesrendering/package.json b/fileupload/selectedfilesrendering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/fileupload/selectedfilesrendering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/form/defaultfunctionality/App.vue b/form/defaultfunctionality/App.vue
new file mode 100644
index 00000000..d18a2192
--- /dev/null
+++ b/form/defaultfunctionality/App.vue
@@ -0,0 +1,119 @@
+<template>
+    <JqxForm ref="myForm"
+        style="width: 400px; height: auto;"  
+        :template="template" :value="value">
+    </JqxForm>
+</template>
+
+<script>
+    import JqxForm from "jqwidgets-scripts/jqwidgets-vue/vue_jqxform.vue";
+
+    export default {
+        components: {
+            JqxForm
+        },
+        data: function () {
+            return {
+                template: [
+                    {
+                        bind: 'firstName',
+                        type: 'text',
+                        label: 'First name',
+                        required: true,
+                        labelWidth: '85px',
+                        width: '250px',
+                        info: 'Enter first name',
+                        infoPosition: 'right'
+                    },
+                    {
+                        bind: 'lastName',
+                        type: 'text',
+                        label: 'Last name',
+                        required: true,
+                        labelWidth: '85px',
+                        width: '250px',
+                        info: 'Enter last name',
+                        infoPosition: 'right'
+                    },
+                    {
+                        bind: 'company',
+                        type: 'text',
+                        label: 'Company',
+                        required: false,
+                        labelWidth: '85px',
+                        width: '250px'
+                    },
+                    {
+                        bind: 'address',
+                        type: 'text',
+                        label: 'Address',
+                        required: true,
+                        labelWidth: '85px',
+                        width: '250px'
+                    },
+                    {
+                        bind: 'city',
+                        type: 'text',
+                        label: 'City',
+                        required: true,
+                        labelWidth: '85px',
+                        width: '250px'
+                    },
+                    {
+                        bind: 'state',
+                        type: 'option',
+                        label: 'State',
+                        required: true,
+                        labelWidth: '85px',
+                        width: '250px',
+                        component: 'jqxDropDownList',
+                        options: [
+                            { value: 'California' },
+                            { value: 'New York' },
+                            { value: 'Oregon' },
+                            { value: 'Illinois' },
+                            { value: 'Texas' }
+                        ]
+                    },
+                    {
+                        bind: 'zip',
+                        type: 'text',
+                        label: 'Zip code',
+                        required: true,
+                        labelWidth: '85px',
+                        width: '250px'
+                    },
+                    {
+                        type: 'blank',
+                        rowHeight: '10px'
+                    },
+                    {
+                        columns: [
+                            {
+                                type: 'button',
+                                text: 'Sign up',
+                                width: '90px',
+                                columnWidth: '50%',
+                                align: 'right'
+                            },
+                            {
+                                type: 'button',
+                                text: 'Cancel',
+                                width: '90px',
+                                columnWidth: '50%'
+                            }
+                        ]
+                    }
+                ],
+                value: {
+                    firstName: 'John',
+                    lastName: 'Scott',
+                    address: '1st Ave SW',
+                    city: 'San Antonio',
+                    state: 'Texas',
+                    zip: '78209'
+                }
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/form/defaultfunctionality/main.js b/form/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/form/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/form/defaultfunctionality/package.json b/form/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/form/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/form/events/App.vue b/form/events/App.vue
new file mode 100644
index 00000000..904ec277
--- /dev/null
+++ b/form/events/App.vue
@@ -0,0 +1,142 @@
+<template>
+    <div>
+        <JqxForm ref="myForm" @formDataChange="formDataChange($event)"
+                 style="width: 400px; height: auto;"
+                 :template="template" :value="value">
+        </JqxForm>
+
+        <div ref="eventsBox"></div>
+    </div>
+</template>
+
+<script>
+    import JqxForm from "jqwidgets-scripts/jqwidgets-vue/vue_jqxform.vue";
+
+    export default {
+        components: {
+            JqxForm
+        },
+        data: function () {
+            return {
+                template: [
+                    {
+                        bind: 'firstName',
+                        type: 'text',
+                        label: 'First name',
+                        required: true,
+                        labelWidth: '85px',
+                        width: '250px',
+                        info: 'Enter first name',
+                        infoPosition: 'right'
+                    },
+                    {
+                        bind: 'lastName',
+                        type: 'text',
+                        label: 'Last name',
+                        required: true,
+                        labelWidth: '85px',
+                        width: '250px',
+                        info: 'Enter last name',
+                        infoPosition: 'right'
+                    },
+                    {
+                        bind: 'company',
+                        type: 'text',
+                        label: 'Company',
+                        required: false,
+                        labelWidth: '85px',
+                        width: '250px'
+                    },
+                    {
+                        bind: 'address',
+                        type: 'text',
+                        label: 'Address',
+                        required: true,
+                        labelWidth: '85px',
+                        width: '250px'
+                    },
+                    {
+                        bind: 'city',
+                        type: 'text',
+                        label: 'City',
+                        required: true,
+                        labelWidth: '85px',
+                        width: '250px'
+                    },
+                    {
+                        bind: 'state',
+                        type: 'option',
+                        label: 'State',
+                        required: true,
+                        labelWidth: '85px',
+                        width: '250px',
+                        component: 'jqxDropDownList',
+                        options: [
+                            { value: 'California' },
+                            { value: 'New York' },
+                            { value: 'Oregon' },
+                            { value: 'Illinois' },
+                            { value: 'Texas' }
+                        ]
+                    },
+                    {
+                        bind: 'zip',
+                        type: 'text',
+                        label: 'Zip code',
+                        required: true,
+                        labelWidth: '85px',
+                        width: '250px'
+                    },
+                    {
+                        type: 'blank',
+                        rowHeight: '10px'
+                    },
+                    {
+                        columns: [
+                            {
+                                type: 'button',
+                                text: 'Sign up',
+                                width: '90px',
+                                columnWidth: '50%',
+                                align: 'right'
+                            },
+                            {
+                                type: 'button',
+                                text: 'Cancel',
+                                width: '90px',
+                                columnWidth: '50%'
+                            }
+                        ]
+                    }
+                ],
+                value: {
+                    firstName: 'John',
+                    lastName: 'Scott',
+                    address: '1st Ave SW',
+                    city: 'San Antonio',
+                    state: 'Texas',
+                    zip: '78209'
+                }
+            }
+        },
+        methods: {
+            formDataChange: function (event) {
+                const args = event.args;
+                const newValue = args.value;
+                const previousValue = args.previousValue;
+                let html = '<h3>Event: formdatachange</h3>';
+
+                for (let i in newValue) {
+                    let newInputValue = newValue[i];
+                    let previousInputValue = '';
+                    if (previousValue && previousValue[i] !== undefined && previousValue[i] !== newValue[i]) {
+                        previousInputValue = ', <i>previous value</i>: <span style="color:red;">' + previousValue[i] + '</span>';
+                        newInputValue = '<span style="color:green;">' + newInputValue + '</span>';
+                    }
+                    html += "<b>" + i + "</b>: " + newInputValue + previousInputValue + "<br>";
+                }
+                this.$refs.eventsBox.innerHTML = html;
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/form/events/main.js b/form/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/form/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/form/events/package.json b/form/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/form/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/form/inputalignment/App.vue b/form/inputalignment/App.vue
new file mode 100644
index 00000000..31431504
--- /dev/null
+++ b/form/inputalignment/App.vue
@@ -0,0 +1,78 @@
+<template>
+    <JqxForm ref="myForm"
+        style="width: 400px; height: auto;"
+        :template="template" :value="value">
+    </JqxForm>
+</template>
+
+<script>
+    import JqxForm from "jqwidgets-scripts/jqwidgets-vue/vue_jqxform.vue";
+
+    export default {
+        components: {
+            JqxForm
+        },
+        data: function () {
+            return {
+                template: [
+                    {
+                        bind: 'item1',
+                        type: 'text',
+                        label: 'Input left alignment',
+                        align: 'left',
+                        labelWidth: '160px',
+                        width: '160px'
+                    },
+                    {
+                        bind: 'item2',
+                        type: 'text',
+                        label: 'Input center alignment',
+                        align: 'center',
+                        labelWidth: '160px',
+                        width: '160px'
+                    },
+                    {
+                        bind: 'item3',
+                        type: 'text',
+                        label: 'Input right alignment',
+                        align: 'right',
+                        labelWidth: '160px',
+                        width: '160px'
+                    },
+                    {
+                        bind: 'item4',
+                        type: 'text',
+                        label: 'Label left alignment',
+                        labelAlign: 'left',
+                        labelWidth: '160px',
+                        width: '160px'
+                    },
+                    {
+                        bind: 'item5',
+                        type: 'text',
+                        label: 'Label center alignment',
+                        labelAlign: 'center',
+                        labelWidth: '160px',
+                        width: '160px'
+                    },
+                    {
+                        bind: 'item6',
+                        type: 'text',
+                        label: 'Label right alignment',
+                        labelAlign: 'right',
+                        labelWidth: '160px',
+                        width: '160px'
+                    }
+                ],
+                value: {
+                    item1: 'left aligned',
+                    item2: 'center aligned',
+                    item3: 'right aligned',
+                    item4: 'left aligned',
+                    item5: 'left aligned',
+                    item6: 'left aligned'
+                }
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/form/inputalignment/main.js b/form/inputalignment/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/form/inputalignment/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/form/inputalignment/package.json b/form/inputalignment/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/form/inputalignment/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/form/inputlabelposition/App.vue b/form/inputlabelposition/App.vue
new file mode 100644
index 00000000..8767e991
--- /dev/null
+++ b/form/inputlabelposition/App.vue
@@ -0,0 +1,67 @@
+<template>
+    <JqxForm ref="myForm"
+        style="width: 400px; height: auto;"
+        :template="template" :value="value">
+    </JqxForm>
+</template>
+
+<script>
+    import JqxForm from "jqwidgets-scripts/jqwidgets-vue/vue_jqxform.vue";
+
+    export default {
+        components: {
+            JqxForm
+        },
+        data: function () {
+            return {
+                template: [
+                    {
+                        bind: 'item1',
+                        type: 'text',
+                        label: 'Label position left',
+                        labelPosition: 'left',
+                        align: 'left',
+                        width: '200px',
+                        required: true
+                    },
+                    {
+                        bind: 'item2',
+                        type: 'text',
+                        label: 'Label position right',
+                        labelPosition: 'right',
+                        align: 'left',
+                        width: '200px',
+                        required: true,
+                        requiredPosition: 'left'
+                    },
+                    {
+                        bind: 'item3',
+                        type: 'text',
+                        label: 'Label position top',
+                        labelPosition: 'top',
+                        align: 'left',
+                        width: '200px',
+                        required: true
+                    },
+                    {
+                        bind: 'item4',
+                        type: 'text',
+                        label: 'Label position bottom',
+                        labelPosition: 'bottom',
+                        labelAlign: 'left',
+                        width: '200px',
+                        required: true
+                    }
+                ],
+                value: {
+                    firstName: 'John',
+                    lastName: 'Scott',
+                    address: '1st Ave SW',
+                    city: 'San Antonio',
+                    state: 'Texas',
+                    zip: '78209'
+                }
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/form/inputlabelposition/main.js b/form/inputlabelposition/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/form/inputlabelposition/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/form/inputlabelposition/package.json b/form/inputlabelposition/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/form/inputlabelposition/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/form/inputtypes/App.vue b/form/inputtypes/App.vue
new file mode 100644
index 00000000..bc59cc1d
--- /dev/null
+++ b/form/inputtypes/App.vue
@@ -0,0 +1,167 @@
+<template>
+    <JqxForm ref="myForm"
+        style="width: 500px; height: auto;"
+        :template="template" :value="value">
+    </JqxForm>
+</template>
+
+<script>
+    import JqxForm from "jqwidgets-scripts/jqwidgets-vue/vue_jqxform.vue";
+
+    export default {
+        components: {
+            JqxForm
+        },
+        data: function () {
+            return {
+                template: [
+                    {
+                        bind: 'textBoxValue',
+                        type: 'text',
+                        label: 'Text input',
+                        labelPosition: 'left',
+                        labelWidth: '30%',
+                        align: 'left',
+                        width: '250px',
+                        required: true
+                    },
+                    {
+                        bind: 'passwordBoxValue',
+                        type: 'password',
+                        label: 'Password input',
+                        labelPosition: 'left',
+                        labelWidth: '30%',
+                        align: 'left',
+                        width: '250px',
+                        required: true
+                    },
+                    {
+                        bind: 'nubmberBoxValue',
+                        type: 'number',
+                        label: 'Number input',
+                        labelPosition: 'left',
+                        labelWidth: '30%',
+                        align: 'left',
+                        width: '250px',
+                        required: true
+                    },
+                    {
+                        bind: 'datetimeBoxValue',
+                        type: 'datetime',
+                        label: 'Date & time input',
+                        labelPosition: 'left',
+                        labelWidth: '30%',
+                        align: 'left',
+                        width: '250px',
+                        required: true
+                    },
+                    {
+                        bind: 'timeBoxValue',
+                        type: 'time',
+                        label: 'Time input',
+                        labelPosition: 'left',
+                        labelWidth: '30%',
+                        align: 'left',
+                        width: '250px',
+                        required: true
+                    },
+                    {
+                        bind: 'dateBoxValue',
+                        type: 'date',
+                        label: 'Date input',
+                        labelPosition: 'left',
+                        labelWidth: '30%',
+                        align: 'left',
+                        width: '250px',
+                        required: true
+                    },
+                    {
+                        bind: 'dropdownValue',
+                        type: 'option',
+                        label: 'Drop down list',
+                        labelPosition: 'left',
+                        labelWidth: '30%',
+                        align: 'left',
+                        width: '250px',
+                        required: true,
+                        component: 'jqxDropDownList',
+                        options: [
+                            { label: 'Option 1', value: 'value1' },
+                            { label: 'Option 2', value: 'value2' },
+                            { label: 'Option 3', value: 'value3' }
+                        ]
+                    },
+                    {
+                        type: 'label',
+                        label: 'Radio buttons:',
+                        rowHeight: '40px',
+                    },
+                    {
+                        bind: 'radiobuttonValue',
+                        type: 'option',
+                        label: 'Radio buttons',
+                        labelPosition: 'right',
+                        columnWidth: '150px',
+                        align: 'left',
+                        optionsLayout: 'horizontal',
+                        options: [
+                            { label: 'Option 1', value: 'value1' },
+                            { label: 'Option 2', value: 'value2' },
+                            { label: 'Option 3', value: 'value3' }
+                        ]
+                    },
+                    {
+                        type: 'label',
+                        bind: 'radiobuttonValue_out',
+                        label: 'Boolean options / checkboxes:',
+                        rowHeight: '40px',
+                    },
+                    {
+                        columns: [
+                            {
+                                columnWidth: '150px',
+                                bind: 'checkboxValue1',
+                                type: 'boolean',
+                                label: 'Checkbox 1',
+                                labelPosition: 'right',
+                                align: 'left',
+                                labelPadding: { left: 0, top: 5, right: 0, bottom: 5 }
+                            },
+                            {
+                                columnWidth: '150px',
+                                bind: 'checkboxValue2',
+                                type: 'boolean',
+                                label: 'Checkbox 2',
+                                labelPosition: 'right',
+                                align: 'left',
+                                labelPadding: { left: 0, top: 5, right: 0, bottom: 5 }
+                            },
+                            {
+                                columnWidth: '150px',
+                                bind: 'checkboxValue3',
+                                type: 'boolean',
+                                label: 'Checkbox 3',
+                                labelPosition: 'right',
+                                align: 'left',
+                                labelPadding: { left: 0, top: 5, right: 0, bottom: 5 }
+                            }
+                        ]
+                    }
+                ],
+                value: {
+                    'textBoxValue': 'text box value',
+                    'passwordBoxValue': 'password box',
+                    'nubmberBoxValue': 67.44,
+                    'datetimeBoxValue': '2018-06-01 14:05:23',
+                    'timeBoxValue': '2018-07-01 11:05:23',
+                    'dateBoxValue': '2018-07-04 15:05:23',
+                    'dropdownValue': 'value3',
+                    'radiobuttonValue': 'value2',
+                    'checkboxValue1': false,
+                    'checkboxValue2': false,
+                    'checkboxValue3': true
+                }
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/form/inputtypes/main.js b/form/inputtypes/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/form/inputtypes/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/form/inputtypes/package.json b/form/inputtypes/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/form/inputtypes/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/form/submit/App.vue b/form/submit/App.vue
new file mode 100644
index 00000000..1c188c8f
--- /dev/null
+++ b/form/submit/App.vue
@@ -0,0 +1,156 @@
+<template>
+    <JqxForm ref='myForm'
+        style='width: 500px; height: auto;'
+        :template='template' :value='value'>
+    </JqxForm>
+</template>
+
+<script>
+    import JqxForm from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxform.vue';
+
+    export default {
+        components: {
+            JqxForm
+        },
+        mounted: function () {
+            const myForm = this.$refs.myForm;
+            const btn = myForm.getComponentByName('submitButton');
+            btn.on('click', function () {
+                // function: submit
+                // arg1: url
+                // arg2, optional: target, default is _blank
+                // arg3, optional: submit method - GET or POST, default is POST
+                myForm.submit('https://www.jqwidgets.com/form_demo/', '_blank', 'POST');
+            });
+        },
+        data: function () {
+            return {
+                template: [
+                    {
+                        bind: 'textBoxValue',
+                        type: 'text',
+                        label: 'Text input',
+                        labelPosition: 'left',
+                        labelWidth: '30%',
+                        align: 'left',
+                        width: '250px',
+                        required: true
+                    },
+                    {
+                        bind: 'passwordBoxValue',
+                        type: 'password',
+                        label: 'Password input',
+                        labelPosition: 'left',
+                        labelWidth: '30%',
+                        align: 'left',
+                        width: '250px',
+                        required: true
+                    },
+                    {
+                        bind: 'nubmberBoxValue',
+                        type: 'number',
+                        label: 'Number input',
+                        labelPosition: 'left',
+                        labelWidth: '30%',
+                        align: 'left',
+                        width: '250px',
+                        required: true
+                    },
+                    {
+                        bind: 'dropdownValue',
+                        type: 'option',
+                        label: 'Drop down list',
+                        labelPosition: 'left',
+                        labelWidth: '30%',
+                        align: 'left',
+                        width: '250px',
+                        required: true,
+                        component: 'jqxDropDownList',
+                        options: [
+                            { label: 'Option 1', value: 'value1' },
+                            { label: 'Option 2', value: 'value2' },
+                            { label: 'Option 3', value: 'value3' }
+                        ]
+                    },
+                    {
+                        type: 'label',
+                        label: 'Radio buttons:',
+                        rowHeight: '40px',
+                    },
+                    {
+                        bind: 'radiobuttonValue',
+                        type: 'option',
+                        label: 'Radio buttons',
+                        labelPosition: 'right',
+                        columnWidth: '150px',
+                        align: 'left',
+                        optionsLayout: 'horizontal',
+                        options: [
+                            { label: 'Option 1', value: 'value1' },
+                            { label: 'Option 2', value: 'value2' },
+                            { label: 'Option 3', value: 'value3' }
+                        ]
+                    },
+                    {
+                        type: 'label',
+                        bind: 'radiobuttonValue_out',
+                        label: 'Boolean options / checkboxes:',
+                        rowHeight: '40px',
+                    },
+                    {
+                        columns: [
+                            {
+                                columnWidth: '140px',
+                                bind: 'checkboxValue1',
+                                type: 'boolean',
+                                label: 'Checkbox 1',
+                                labelPosition: 'right',
+                                align: 'left',
+                                labelPadding: { left: 0, top: 5, right: 0, bottom: 5 }
+                            },
+                            {
+                                columnWidth: '140px',
+                                bind: 'checkboxValue2',
+                                type: 'boolean',
+                                label: 'Checkbox 2',
+                                labelPosition: 'right',
+                                align: 'left',
+                                labelPadding: { left: 0, top: 5, right: 0, bottom: 5 }
+                            },
+                            {
+                                columnWidth: '140px',
+                                bind: 'checkboxValue3',
+                                type: 'boolean',
+                                label: 'Checkbox 3',
+                                labelPosition: 'right',
+                                align: 'left',
+                                labelPadding: { left: 0, top: 5, right: 0, bottom: 5 }
+                            }
+                        ]
+                    },
+                    {
+                        type: 'blank',
+                        rowHeight: '20px',
+                    },
+                    {
+                        name: 'submitButton',
+                        type: 'button',
+                        text: 'Submit Form Data',
+                        align: 'right',
+                        padding: { left: 0, top: 5, bottom: 5, right: 40 }
+                    }
+                ],
+                value: {
+                    'textBoxValue': 'text box value',
+                    'passwordBoxValue': 'password box',
+                    'nubmberBoxValue': 67.44,
+                    'dropdownValue': 'value3',
+                    'radiobuttonValue': 'value2',
+                    'checkboxValue1': false,
+                    'checkboxValue2': false,
+                    'checkboxValue3': true
+                }
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/form/submit/main.js b/form/submit/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/form/submit/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/form/submit/package.json b/form/submit/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/form/submit/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/formattedinput/defaultfunctionality/App.vue b/formattedinput/defaultfunctionality/App.vue
new file mode 100644
index 00000000..f697e873
--- /dev/null
+++ b/formattedinput/defaultfunctionality/App.vue
@@ -0,0 +1,18 @@
+<template>
+    <JqxFormattedInput :width="250" :height="25" :radix="'decimal'"
+                       :value="15" :spinButtons="true" :dropDown="true">
+    </JqxFormattedInput>
+</template>
+
+<script>
+    import JqxFormattedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue";
+
+    export default {
+        components: {
+            JqxFormattedInput
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/formattedinput/defaultfunctionality/main.js b/formattedinput/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/formattedinput/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/formattedinput/defaultfunctionality/package.json b/formattedinput/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/formattedinput/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/formattedinput/events/App.vue b/formattedinput/events/App.vue
new file mode 100644
index 00000000..9e76dc4d
--- /dev/null
+++ b/formattedinput/events/App.vue
@@ -0,0 +1,56 @@
+<template>
+    <div>
+        <JqxFormattedInput @open="onOpen($event)" @close="onClose($event)"
+                           @change="onChange($event)" @radixChange="onRadixChange($event)"
+                           :width="300" :height="25" :radix="'decimal'"
+                           :value="190" :spinButtons="true" :dropDown="true">
+        </JqxFormattedInput>
+
+        <div style="margin-top: 150px">
+            Events log:
+        </div>
+
+        <JqxPanel ref="myPanel" :width="300" :height="150"></JqxPanel>
+    </div>
+</template>
+
+<script>
+    import JqxFormattedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxFormattedInput,
+            JqxPanel
+        },
+        methods: {
+            onOpen: function(event) {
+                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />');
+            },
+            onClose: function(event) {
+                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />');
+            },
+            onChange: function(event) {
+                let args = event.args;
+                let newValue = args.value;
+                let oldValue = args.oldValue;
+                let radix = args.radix;
+                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />' +
+                    'value: ' + newValue + ', old value: ' + oldValue + ', radix: ' + radix + '<br />');
+            },
+            onRadixChange: function(event) {
+                let args = event.args;
+                let newRadix = args.radix;
+                let oldRadix = args.oldRadix;
+                let newValue = args.value;
+                let oldValue = args.oldValue;
+                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />' +
+                    'radix: ' + newRadix + ', old radix: ' + oldRadix +
+                    '<br />value: ' + newValue + ', old value: ' + oldValue + '<br />');
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/formattedinput/events/main.js b/formattedinput/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/formattedinput/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/formattedinput/events/package.json b/formattedinput/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/formattedinput/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/formattedinput/exponentialnotation/App.vue b/formattedinput/exponentialnotation/App.vue
new file mode 100644
index 00000000..c048dfba
--- /dev/null
+++ b/formattedinput/exponentialnotation/App.vue
@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <JqxFormattedInput ref="myFormattedInput"
+                           :width="200" :height="25" :radix="'decimal'" :spinButtons="false"
+                           :value="330000" :decimalNotation="'exponential'">
+        </JqxFormattedInput>
+
+        <div style="margin-top: 20px">
+            <JqxButton style="float: left" @click="getDecimal()" :width="185">Get Decimal Value</JqxButton>
+            <JqxButton style="margin-left: 5px; float: left" @click="getExponential()" :width="185">Get Exponential Notation</JqxButton>
+            <br />
+            <br />
+            <JqxButton style="float: left" @click="getScientific()" :width="185">Get Scientific Notation</JqxButton>
+            <JqxButton style="margin-left: 5px; float: left" @click="getEngineering()" :width="185">Get Engineering Notation</JqxButton>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxFormattedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxFormattedInput,
+            JqxButton
+        },
+        methods: {
+            getDecimal: function () {
+                let decimalValue = this.$refs.myFormattedInput.val('decimal');
+                alert('Decimal Value: ' + decimalValue);
+            },
+            getExponential: function () {
+                let exponentialValue = this.$refs.myFormattedInput.val('exponential');
+                alert('Exponential Notation: ' + exponentialValue);
+            },
+            getScientific: function () {
+                let scientificValue = this.$refs.myFormattedInput.val('scientific');
+                alert('Scientific Notation: ' + scientificValue);
+            },
+            getEngineering: function () {
+                let engineeringValue = this.$refs.myFormattedInput.val('engineering');
+                alert('Engineering Notation: ' + engineeringValue);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/formattedinput/exponentialnotation/main.js b/formattedinput/exponentialnotation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/formattedinput/exponentialnotation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/formattedinput/exponentialnotation/package.json b/formattedinput/exponentialnotation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/formattedinput/exponentialnotation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/formattedinput/fluidsize/App.vue b/formattedinput/fluidsize/App.vue
new file mode 100644
index 00000000..6cb2c525
--- /dev/null
+++ b/formattedinput/fluidsize/App.vue
@@ -0,0 +1,18 @@
+<template>
+    <JqxFormattedInput ref="myFormattedInput"
+                       :width="'30%'" :height="25" :radix="'binary'" :value="10111">
+    </JqxFormattedInput>
+</template>
+
+<script>
+    import JqxFormattedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue";
+
+    export default {
+        components: {
+            JqxFormattedInput
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/formattedinput/fluidsize/main.js b/formattedinput/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/formattedinput/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/formattedinput/fluidsize/package.json b/formattedinput/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/formattedinput/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/formattedinput/keyboardnavigation/App.vue b/formattedinput/keyboardnavigation/App.vue
new file mode 100644
index 00000000..d23f6278
--- /dev/null
+++ b/formattedinput/keyboardnavigation/App.vue
@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <JqxFormattedInput style="float: left"
+                           :width="250" :height="25" :radix="'hexadecimal'" :value="'a1'"
+                           :spinButtons="false" :dropDown="true">
+        </JqxFormattedInput>
+
+        <div style="font-family: Verdana; font-size: 12px; width: 400px; margin-left: 20px; float: left">
+            <ul>
+                <li><b>Tab</b> - Like other widgets, the jqxFormattedInput widget receives focus by tabbing into it. Once focus is received, users will be able to use the keyboard to change the selection. A second tab will take the user out of the widget.</li>
+                <li><b>Shift+Tab</b> - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous focusable element in the tab order.</li>
+                <li><b>Up/Down</b> arrow keys - select previous or next displayFormat option.</li>
+                <li><b>Alt Up/Down</b> arrow keys - opens or closes the popup.</li>
+                <li><b>Esc</b> - closes the popup.</li>
+                <li><b>Enter</b> - selects an item.</li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxFormattedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue";
+
+    export default {
+        components: {
+            JqxFormattedInput
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/formattedinput/keyboardnavigation/main.js b/formattedinput/keyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/formattedinput/keyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/formattedinput/keyboardnavigation/package.json b/formattedinput/keyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/formattedinput/keyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/formattedinput/negativenumbers/App.vue b/formattedinput/negativenumbers/App.vue
new file mode 100644
index 00000000..b76a568c
--- /dev/null
+++ b/formattedinput/negativenumbers/App.vue
@@ -0,0 +1,17 @@
+<template>
+    <JqxFormattedInput :width="600" :height="25" :radix="'decimal'" :dropDown="true" :value="-10">
+    </JqxFormattedInput>
+</template>
+
+<script>
+    import JqxFormattedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue";
+
+    export default {
+        components: {
+            JqxFormattedInput
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/formattedinput/negativenumbers/main.js b/formattedinput/negativenumbers/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/formattedinput/negativenumbers/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/formattedinput/negativenumbers/package.json b/formattedinput/negativenumbers/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/formattedinput/negativenumbers/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/formattedinput/righttoleftlayout/App.vue b/formattedinput/righttoleftlayout/App.vue
new file mode 100644
index 00000000..944e12f6
--- /dev/null
+++ b/formattedinput/righttoleftlayout/App.vue
@@ -0,0 +1,19 @@
+<template>
+    <JqxFormattedInput style="float: left"
+                       :width="250" :height="25" :radix="'binary'" 
+                       :value="10000" :dropDown="true" :rtl="true">
+    </JqxFormattedInput>
+</template>
+
+<script>
+    import JqxFormattedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue";
+
+    export default {
+        components: {
+            JqxFormattedInput
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/formattedinput/righttoleftlayout/main.js b/formattedinput/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/formattedinput/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/formattedinput/righttoleftlayout/package.json b/formattedinput/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/formattedinput/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/formattedinput/simpleinput/App.vue b/formattedinput/simpleinput/App.vue
new file mode 100644
index 00000000..358747ef
--- /dev/null
+++ b/formattedinput/simpleinput/App.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <JqxFormattedInput ref="myFormattedInput"
+                           :width="250" :height="25" :radix="'binary'" :value="100001">
+        </JqxFormattedInput>
+
+        <div style="margin-top: 20px">
+            <JqxButton style="float: left" @click="getOctal()" :width="175">Get Octal Value</JqxButton>
+            <JqxButton style="margin-left: 5px; float: left" @click="getDecimal()" :width="175">Get Decimal Value</JqxButton>
+            <JqxButton style="margin-left: 5px; float: left" @click="getHexadecimal()" :width="175">Get Hexadecimal Value</JqxButton>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxFormattedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxFormattedInput,
+            JqxButton
+        },
+        methods: {
+            getOctal: function () {
+                let octalValue = this.$refs.myFormattedInput.val('octal');
+                alert('Octal value: ' + octalValue);
+            },
+            getDecimal: function () {
+                let decimalValue = this.$refs.myFormattedInput.val('decimal');
+                alert('Decimal value: ' + decimalValue);
+            },
+            getHexadecimal: function () {
+                let hexadecimalValue = this.$refs.myFormattedInput.val('hexadecimal');
+                alert('Hexadecimal value: ' + hexadecimalValue);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/formattedinput/simpleinput/main.js b/formattedinput/simpleinput/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/formattedinput/simpleinput/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/formattedinput/simpleinput/package.json b/formattedinput/simpleinput/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/formattedinput/simpleinput/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/formattedinput/twowaydatabinding/App.vue b/formattedinput/twowaydatabinding/App.vue
new file mode 100644
index 00000000..690c3e27
--- /dev/null
+++ b/formattedinput/twowaydatabinding/App.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <div>The value is: {{ value }}</div><br />
+
+        <JqxFormattedInput v-model="value" :width="200" :height="25" :radix="'decimal'" :spinButtons="true" :dropDown="true" />
+    </div>
+</template>
+
+<script>
+    import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
+
+    export default {
+        components: {
+            JqxFormattedInput
+        },
+        data: function () {
+            return {
+                value: 20
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/formattedinput/twowaydatabinding/main.js b/formattedinput/twowaydatabinding/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/formattedinput/twowaydatabinding/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/formattedinput/twowaydatabinding/package.json b/formattedinput/twowaydatabinding/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/formattedinput/twowaydatabinding/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/formattedinput/uppercasehexadecimals/App.vue b/formattedinput/uppercasehexadecimals/App.vue
new file mode 100644
index 00000000..f4e7b611
--- /dev/null
+++ b/formattedinput/uppercasehexadecimals/App.vue
@@ -0,0 +1,17 @@
+<template>
+    <JqxFormattedInput :width="250" :height="25" :radix="16" :value="'1CF'" :spinButtons="true" :upperCase="true">
+    </JqxFormattedInput>
+</template>
+
+<script>
+    import JqxFormattedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue";
+
+    export default {
+        components: {
+            JqxFormattedInput
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/formattedinput/uppercasehexadecimals/main.js b/formattedinput/uppercasehexadecimals/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/formattedinput/uppercasehexadecimals/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/formattedinput/uppercasehexadecimals/package.json b/formattedinput/uppercasehexadecimals/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/formattedinput/uppercasehexadecimals/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/formattedinput/validation/App.vue b/formattedinput/validation/App.vue
new file mode 100644
index 00000000..4c9a0d39
--- /dev/null
+++ b/formattedinput/validation/App.vue
@@ -0,0 +1,18 @@
+<template>
+    <JqxFormattedInput :width="250" :height="25" :radix="'decimal'"
+                       :spinButtons="true" :value="0" :min="0" :max="1000">
+    </JqxFormattedInput>
+</template>
+
+<script>
+    import JqxFormattedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue";
+
+    export default {
+        components: {
+            JqxFormattedInput
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/formattedinput/validation/main.js b/formattedinput/validation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/formattedinput/validation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/formattedinput/validation/package.json b/formattedinput/validation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/formattedinput/validation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/gauge/defaultfunctionality/App.vue b/gauge/defaultfunctionality/App.vue
new file mode 100644
index 00000000..7b068395
--- /dev/null
+++ b/gauge/defaultfunctionality/App.vue
@@ -0,0 +1,100 @@
+<template>
+    <div>
+        <div style="float: left">
+            <JqxGauge ref="myGauge" @valueChanging="onValueChanging($event)"
+                      :ranges="ranges" :ticksMinor="ticksMinor" :ticksMajor="ticksMajor"
+                      :value="0" :colorScheme="'scheme05'" :animationDuration="1200">
+            </JqxGauge>
+
+            <div ref="gaugeValue" class="gaugeValue"></div>
+        </div>
+
+
+        <JqxLinearGauge ref="myLinearGauge" style="margin-left: 60px; float: left;"
+                        :width="100" :height="350" :max="60" :orientation="'vertical'"
+                        :ticksMajor="ticksMajorLinear" :ticksMinor="ticksMinorLinear"
+                        :pointer="{ size: '5%' }" :colorScheme="'scheme05'" :labels="labels"
+                        :ranges="rangesLinear" :animationDuration="1500">
+        </JqxLinearGauge>
+    </div>
+</template>
+
+<script>
+    import JqxGauge from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgauge.vue";
+    import JqxLinearGauge from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue";
+
+    export default {
+        components: {
+            JqxGauge,
+            JqxLinearGauge
+        },
+        data: function () {
+            return {
+                ticksMinor: { interval: 5, size: '5%' },
+                ticksMajor: { interval: 10, size: '9%' },
+                ranges: [
+                    { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
+                    { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
+                    { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
+                    { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
+                ],
+                ticksMinorLinear: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa' } },
+                ticksMajorLinear: { size: '10%', interval: 10 },
+                labels: {
+                    interval: 20,
+                    formatValue: (value, position) => {
+                        if (position === 'far') {
+                            value = (9 / 5) * value + 32;
+                            if (value === -76) {
+                                return '°F';
+                            }
+                            return value + '°';
+                        }
+                        if (value === -60) {
+                            return '°C';
+                        }
+                        return value + '°';
+                    }
+                },
+                rangesLinear: [
+                    { startValue: -10, endValue: 10, style: { fill: '#FFF157', stroke: '#FFF157' } },
+                    { startValue: 10, endValue: 35, style: { fill: '#FFA200', stroke: '#FFA200' } },
+                    { startValue: 35, endValue: 60, style: { fill: '#FF4800', stroke: '#FF4800' } }
+                ]
+            }
+        },
+        mounted: function () {
+            this.$refs.myGauge.value = 140;
+            this.$refs.myLinearGauge.value = 40;
+        },
+        methods: {
+            onValueChanging: function (event) {
+                this.$refs.gaugeValue.innerHTML = Math.round(event.args.value) + ' kph';
+            }
+        }
+    }
+</script>
+
+<style>
+    .gaugeValue {
+        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(100%, #f3f3f3));
+        background-image: -webkit-linear-gradient(#fafafa, #f3f3f3);
+        background-image: -moz-linear-gradient(#fafafa, #f3f3f3);
+        background-image: -o-linear-gradient(#fafafa, #f3f3f3);
+        background-image: linear-gradient(#fafafa, #f3f3f3);
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        border-radius: 3px;
+        -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
+        -moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
+        padding: 10px;
+        position: absolute;
+        top: 290px;
+        left: 140px;
+        font-family: Sans-Serif;
+        text-align: center;
+        font-size: 17px;
+        width: 70px;
+    }
+</style>
\ No newline at end of file
diff --git a/gauge/defaultfunctionality/main.js b/gauge/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/gauge/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/gauge/defaultfunctionality/package.json b/gauge/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/gauge/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/gauge/fluidsize/App.vue b/gauge/fluidsize/App.vue
new file mode 100644
index 00000000..34aac7c8
--- /dev/null
+++ b/gauge/fluidsize/App.vue
@@ -0,0 +1,37 @@
+<template>
+    <JqxGauge :width="'40%'" :ranges="ranges" :ticksMinor="ticksMinor"
+              :ticksMajor="ticksMajor" :value="0" :colorScheme="'scheme05'" :animationDuration="1200">
+    </JqxGauge>
+</template>
+
+<script>
+    import JqxGauge from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgauge.vue";
+
+    export default {
+        components: {
+            JqxGauge
+        },
+        data: function () {
+            return {
+                ticksMinor: { interval: 10, size: '5%' },
+                ticksMajor: { interval: 20, size: '9%' },
+                ranges: [
+                    { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
+                    { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
+                    { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
+                    { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
+                ]
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body, app-root {
+        padding: 0;
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+</style>
\ No newline at end of file
diff --git a/gauge/fluidsize/main.js b/gauge/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/gauge/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/gauge/fluidsize/package.json b/gauge/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/gauge/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/gauge/gaugesettings/App.vue b/gauge/gaugesettings/App.vue
new file mode 100644
index 00000000..e59dc003
--- /dev/null
+++ b/gauge/gaugesettings/App.vue
@@ -0,0 +1,152 @@
+<template>
+    <div style="width: 600px">
+        <div style="float: left">
+            <JqxGauge ref="myGauge"
+                      :value="0" :colorScheme="'scheme04'" :animationDuration="1500"
+                      :ranges="ranges" :ticksMinor="ticksMinor" :ticksMajor="ticksMajor"
+                      :labels="labels" :styleProperty="style" :caption="caption" :cap="'radius: 0.04'">
+            </JqxGauge>
+        </div>
+
+        <JqxExpander style="float: right"
+                     :width="200" :showArrow="false" :toggleMode="'none'">
+            <div>Options</div>
+            <div>
+                <ul style="list-style: none; padding: 0px; margin: 10px">
+                    <li style="padding: 3px; font-family: Verdana; font-size: 12px">
+
+                        <JqxCheckBox @change="showLabelsCheckboxOnChange($event)"
+                                     :width="150" :checked="true">
+                            Show Labels
+                        </JqxCheckBox>
+
+                        <ul style="list-style: none; padding: 0; margin-top: 10px; margin-left: 20px; font-family: Verdana; font-size: 12px">
+                            <li>
+                                <JqxRadioButton @change="insideRadioOnChange($event)"
+                                                :width="150" :checked="true">
+                                    Inside the Gauge
+                                </JqxRadioButton>
+                            </li>
+                            <li>
+                                <JqxRadioButton style="margin-top: 5px" @change="outsideRadioOnChange($event)"
+                                                :width="150">
+                                    Outside the Gauge
+                                </JqxRadioButton>
+                            </li>
+                        </ul>
+                    </li>
+                    <li style="padding: 3px; font-family: Verdana; font-size: 12px">
+
+                        <JqxCheckBox @change="showRangesCheckboxOnChange($event)"
+                                     :width="150" :checked="true">
+                            Show Ranges
+                        </JqxCheckBox>
+
+                    </li>
+                    <li style="padding: 3px; font-family: Verdana; font-size: 12px">
+
+                        <JqxCheckBox @change="showBorderCheckboxOnChange($event)"
+                                     :width="150" :checked="true">
+                            Show Border
+                        </JqxCheckBox>
+
+                    </li>
+                </ul>
+            </div>
+        </JqxExpander>
+    </div>
+</template>
+
+<script>
+    import JqxGauge from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgauge.vue";
+    import JqxExpander from "jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+
+    export default {
+        components: {
+            JqxGauge,
+            JqxExpander,
+            JqxCheckBox,
+            JqxRadioButton
+        },
+        beforeCreate: function () {
+
+            this.ticksMinor = { interval: 5, size: '5%' };
+
+            this.ticksMajor = { interval: 10, size: '10%' };
+
+            this.labels = { visible: true, position: 'inside' };
+
+            this.style = { stroke: '#ffffff', 'stroke-width': '1px', fill: '#eeeee' };
+
+            this.caption = { offset: [0, -25], value: 'jQWidgets', position: 'bottom' };
+
+            this.ranges =
+                [
+                    { startValue: 0, endValue: 90, style: { fill: '#e2e2e2', stroke: '#e2e2e2' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
+                    { startValue: 90, endValue: 140, style: { fill: '#f6de54', stroke: '#f6de54' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
+                    { startValue: 140, endValue: 180, style: { fill: '#db5016', stroke: '#db5016' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
+                    { startValue: 180, endValue: 220, style: { fill: '#d02841', stroke: '#d02841' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 }
+                ];
+
+            this.showLabelsCheckboxOnChange = (event) => {
+                this.labels.visible = event.args.checked;
+                this.$refs.myGauge.labels = this.labels;
+            };
+
+            this.showRangesCheckboxOnChange = (event) => {
+                this.$refs.myGauge.showRanges = event.args.checked;
+            };
+
+            this.showBorderCheckboxOnChange = (event) => {
+                this.$refs.myGauge.border = { visible: event.args.checked };
+            };
+
+            this.insideRadioOnChange = (event) => {
+                if(event.args.checked) {
+                    this.labels.position = 'inside';
+                    this.$refs.myGauge.labels = this.labels;
+                }
+            };
+
+            this.outsideRadioOnChange = (event) => {
+                if(event.args.checked) {
+                    this.labels.position = 'outside';
+                    this.$refs.myGauge.labels = this.labels;
+                }
+            };   
+        },
+        mounted: function () {
+            this.$refs.myGauge.value = 220;
+        }
+    }
+</script>
+
+<style>
+    body, html {
+        height: 100%;
+    }
+
+    .gaugeValue {
+        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(100%, #f3f3f3));
+        background-image: -webkit-linear-gradient(#fafafa, #f3f3f3);
+        background-image: -moz-linear-gradient(#fafafa, #f3f3f3);
+        background-image: -o-linear-gradient(#fafafa, #f3f3f3);
+        background-image: linear-gradient(#fafafa, #f3f3f3);
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        border-radius: 3px;
+        -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
+        -moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
+        padding: 10px;
+        position: absolute;
+        top: 235px;
+        left: 132px;
+        font-family: Sans-Serif;
+        text-align: center;
+        font-size: 17px;
+        width: 70px;
+    }
+</style>
\ No newline at end of file
diff --git a/gauge/gaugesettings/main.js b/gauge/gaugesettings/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/gauge/gaugesettings/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/gauge/gaugesettings/package.json b/gauge/gaugesettings/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/gauge/gaugesettings/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/gauge/gaugewithslider/App.vue b/gauge/gaugewithslider/App.vue
new file mode 100644
index 00000000..81abb7be
--- /dev/null
+++ b/gauge/gaugewithslider/App.vue
@@ -0,0 +1,82 @@
+<template>
+    <div style="position: relative; height: 380px">
+        <JqxGauge ref="myGauge"
+                  :animationDuration="1500"
+                  :ranges="ranges" :cap="cap" :border="border"
+                  :ticksMinor="ticksMinor" :ticksMajor="ticksMajor"
+                  :labels="labels" :pointer="pointer">
+        </JqxGauge>
+
+        <JqxSlider ref="mySlider" style="position: absolute; top: 250px; left: 93px"
+                   @change="mySliderOnChange()"
+                   :width="180" :value="120" :min="0" :max="220"
+                   :ticksFrequency="20" :mode="'fixed'" :showButtons="false">
+        </JqxSlider>
+    </div>
+</template>
+
+<script>
+    import JqxGauge from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgauge.vue";
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+
+    export default {
+        components: {
+            JqxGauge,
+            JqxSlider
+        },
+        data: function () {
+            return {
+                ticksMinor: { interval: 5, size: '5%' },
+                ticksMajor: { interval: 20, size: '10%' },
+                labels: { position: 'outside', interval: 20 },
+                cap: { size: '5%', style: { fill: '#2e79bb', stroke: '#2e79bb' } },
+                border: { style: { fill: '#8e9495', stroke: '#7b8384', 'stroke-width': 1 } },
+                pointer: { style: { fill: '#2e79bb' }, width: 5 },
+                ranges: [
+                    { startValue: 0, endValue: 130, style: { fill: '#4cb848', stroke: '#4cb848' }, startDistance: 0, endDistance: 0 },
+                    { startValue: 130, endValue: 180, style: { fill: '#fad00b', stroke: '#fad00b' }, startDistance: 0, endDistance: 0 },
+                    { startValue: 180, endValue: 220, style: { fill: '#e53d37', stroke: '#e53d37' }, startDistance: 0, endDistance: 0 }
+                ]
+            }
+
+
+        },
+        mounted: function () {
+            this.$refs.myGauge.value = 120;
+        },
+        methods: {
+            mySliderOnChange: function () {
+                let val = this.$refs.mySlider.value;
+                this.$refs.myGauge.value = val;
+            }
+        }
+    }
+</script>
+
+<style>
+    body, html {
+        height: 100%;
+    }
+
+    .gaugeValue {
+        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(100%, #f3f3f3));
+        background-image: -webkit-linear-gradient(#fafafa, #f3f3f3);
+        background-image: -moz-linear-gradient(#fafafa, #f3f3f3);
+        background-image: -o-linear-gradient(#fafafa, #f3f3f3);
+        background-image: linear-gradient(#fafafa, #f3f3f3);
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        border-radius: 3px;
+        -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
+        -moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
+        padding: 10px;
+        position: absolute;
+        top: 235px;
+        left: 132px;
+        font-family: Sans-Serif;
+        text-align: center;
+        font-size: 17px;
+        width: 70px;
+    }
+</style>
\ No newline at end of file
diff --git a/gauge/gaugewithslider/main.js b/gauge/gaugewithslider/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/gauge/gaugewithslider/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/gauge/gaugewithslider/package.json b/gauge/gaugewithslider/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/gauge/gaugewithslider/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/gauge/lineargauge/App.vue b/gauge/lineargauge/App.vue
new file mode 100644
index 00000000..684f8521
--- /dev/null
+++ b/gauge/lineargauge/App.vue
@@ -0,0 +1,182 @@
+<template>
+    <div>
+        <JqxLinearGauge ref="myLinearGauge" style="margin-left: 20px; float: left;"
+                        :max="60" :value="-60" :pointer="pointer"
+                        :colorScheme="'scheme05'" :orientation="'vertical'"
+                        :labels="labels" :ticksMajor="ticksMajor"
+                        :ticksMinor="ticksMinor" :ranges="ranges">
+        </JqxLinearGauge>
+
+        <div style="margin-left: 330px">
+            <JqxExpander :width="280" :height="320" :toggleMode="'none'" :showArrow="false">
+                <div>Options</div>
+                <div class="demo-options">
+                    <JqxCheckBox @change="isVerticalCheckboxOnChange($event)" :checked="true">Is Vertical</JqxCheckBox>
+                    <br />
+                    <div>
+                        <table style="float: left; margin-left: 10px">
+                            <tbody>
+                                <tr>
+                                    <td>Labels position:</td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <JqxRadioButton @checked="labelsNearRadioOnChecked()" :groupName="'labels-position'">Near</JqxRadioButton>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <JqxRadioButton @checked="labelsFarRadioOnChecked()" :groupName="'labels-position'">Far</JqxRadioButton>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <JqxRadioButton @checked="labelsBothRadioOnChecked()" :groupName="'labels-position'" :checked="true">Both</JqxRadioButton>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <table style="float: right; margin-right: 10px">
+                            <tbody>
+                                <tr>
+                                    <td>Ticks position:</td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <JqxRadioButton @checked="ticksNearRadioOnChecked()" :groupName="'ticks-position'">Near</JqxRadioButton>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <JqxRadioButton @checked="ticksFarRadioOnChecked()" :groupName="'ticks-position'">Far</JqxRadioButton>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <JqxRadioButton @checked="ticksBothRadioOnChecked()" :groupName="'ticks-position'" :checked="true">Both</JqxRadioButton>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <div style="clear: both"></div>
+                    </div>
+                    <br />
+                    <JqxCheckBox @change="showTicksCheckboxOnChange($event)" :checked="true">Show Ticks</JqxCheckBox>
+                    <JqxCheckBox @change="showLabelsCheckboxOnChange($event)" :checked="true">Show Labels</JqxCheckBox>
+                    <JqxCheckBox @change="showRangesCheckboxOnChange($event)" :checked="true">Show Ranges</JqxCheckBox>
+                    <JqxCheckBox @change="showBackgroundCheckboxOnChange($event)" :checked="true">Show Background</JqxCheckBox>
+                    <br />
+                    <JqxButton style="margin-left: 90px; text-align: center" @click="showAnimationButtonOnClick()" :width="100" :height="20">Reset Value</JqxButton>
+                </div>
+            </JqxExpander>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxLinearGauge from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue";
+    import JqxExpander from "jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+
+    export default {
+        components: {
+            JqxLinearGauge,
+            JqxExpander,
+            JqxCheckBox,
+            JqxButton,
+            JqxRadioButton
+        },
+        data: function () {
+            return {
+                pointer: { size: '6%' },
+                labels: { interval: 20 },
+                ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa' } },
+                ticksMajor: { size: '10%', interval: 10 },
+                ranges: [
+                    { startValue: -10, endValue: 10, style: { fill: '#FFF157', stroke: '#FFF157' } },
+                    { startValue: 10, endValue: 35, style: { fill: '#FFA200', stroke: '#FFA200' } },
+                    { startValue: 35, endValue: 60, style: { fill: '#FF4800', stroke: '#FF4800' } }
+                ]
+            }
+        },
+        mounted: function () {
+            this.$refs.myLinearGauge.value = 50;
+        },
+        methods: {
+            isVerticalCheckboxOnChange: function (event) {
+                if (event.args.checked) {
+                    this.$refs.myLinearGauge.width = '100px';
+                    this.$refs.myLinearGauge.height = '300px';
+                    this.$refs.myLinearGauge.orientation = 'vertical';
+                } else {
+                    this.$refs.myLinearGauge.width = '300px';
+                    this.$refs.myLinearGauge.height = '100px';
+                    this.$refs.myLinearGauge.orientation = 'horizontal';
+                }
+            },
+            showTicksCheckboxOnChange: function (event) {
+                if (event.args.checked) {
+                    this.$refs.myLinearGauge.ticksMajor = { visible: true, size: '10%', interval: 10 };
+                    this.$refs.myLinearGauge.ticksMinor = { visible: true, size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa' } };
+                } else {
+                    this.$refs.myLinearGauge.ticksMajor = { visible: false };
+                    this.$refs.myLinearGauge.ticksMinor = { visible: false };
+                }
+
+            },
+            showLabelsCheckboxOnChange: function (event) {
+                if (event.args.checked) {
+                    this.$refs.myLinearGauge.labels = { visible: true, interval: 20 };
+                } else {
+                    this.$refs.myLinearGauge.labels = { visible: false };
+                }
+            },
+            showRangesCheckboxOnChange: function (event) {
+                if (event.args.checked) {
+                    this.$refs.myLinearGauge.showRanges = true;
+                } else {
+                    this.$refs.myLinearGauge.showRanges = false;
+                }
+            },
+            showBackgroundCheckboxOnChange: function (event) {
+                if (event.args.checked) {
+                    this.$refs.myLinearGauge.background = { visible: true };
+                } else {
+                    this.$refs.myLinearGauge.background = { visible: false };
+                }
+            },
+            labelsNearRadioOnChecked: function () {
+                this.$refs.myLinearGauge.labels = { interval: 20, position: 'near' };
+            },
+            labelsFarRadioOnChecked: function () {
+                this.$refs.myLinearGauge.labels = { interval: 20, position: 'far' };
+            },
+            labelsBothRadioOnChecked: function () {
+                this.$refs.myLinearGauge.labels = { interval: 20, position: 'both' };
+            },
+            ticksNearRadioOnChecked: function () {
+                this.$refs.myLinearGauge.ticksPosition = 'near';
+            },
+            ticksFarRadioOnChecked: function () {
+                this.$refs.myLinearGauge.ticksPosition = 'far';
+            },
+            ticksBothRadioOnChecked: function () {
+                this.$refs.myLinearGauge.ticksPosition = 'both';
+            },
+            showAnimationButtonOnClick: function () {
+                this.$refs.myLinearGauge.animationDuration = 0;
+                this.$refs.myLinearGauge.value = -60;
+                this.$refs.myLinearGauge.animationDuration = 1000;
+                this.$refs.myLinearGauge.value = 50;
+            }
+        }
+    }
+</script>
+
+<style>
+    .demo-options {
+        margin-top: 5px;
+    }
+</style>
\ No newline at end of file
diff --git a/gauge/lineargauge/main.js b/gauge/lineargauge/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/gauge/lineargauge/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/gauge/lineargauge/package.json b/gauge/lineargauge/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/gauge/lineargauge/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/addnewbottomrow/App.vue b/grid/addnewbottomrow/App.vue
new file mode 100644
index 00000000..0cbcda7c
--- /dev/null
+++ b/grid/addnewbottomrow/App.vue
@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :filterable="true"
+                 :showeverpresentrow="true" :everpresentrowposition="'bottom'"
+                 :editable="true" :columns="columns"
+                 :selectionmode="'multiplecellsadvanced'">
+        </JqxGrid>
+
+        <br />
+
+        <JqxRadioButton @checked="btnTopOnChecked()" :checked="true">Add New Row to Top</JqxRadioButton>
+
+        <JqxRadioButton @checked="btnBottomOnChecked()">Add New Row to Bottom</JqxRadioButton>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxRadioButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 },
+                    { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220 },
+                    { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd' },
+                    { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(20, false),
+                datafields:
+                    [
+                        { name: 'name', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        },
+        methods: {
+            btnTopOnChecked: function () {
+                this.$refs.myGrid.everpresentrowactions = 'add reset';
+            },
+            btnBottomOnChecked: function () {
+                this.$refs.myGrid.everpresentrowactions = 'addBottom reset';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/addnewbottomrow/main.js b/grid/addnewbottomrow/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/addnewbottomrow/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/addnewbottomrow/package.json b/grid/addnewbottomrow/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/addnewbottomrow/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/addnewrow/App.vue b/grid/addnewrow/App.vue
new file mode 100644
index 00000000..81341fc7
--- /dev/null
+++ b/grid/addnewrow/App.vue
@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :filterable="true"
+                 :showeverpresentrow="true" :everpresentrowposition="'top'"
+                 :editable="true" :columns="columns"
+                 :selectionmode="'multiplecellsadvanced'">
+        </JqxGrid>
+
+        <br />
+
+        <JqxRadioButton @checked="btnTopOnChecked()" :checked="true">Add New Row to Top</JqxRadioButton>
+
+        <JqxRadioButton @checked="btnBottomOnChecked()">Add New Row to Bottom</JqxRadioButton>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxRadioButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 },
+                    { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220 },
+                    { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd' },
+                    { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(20, false),
+                datafields:
+                    [
+                        { name: 'name', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        },
+        methods: {
+            btnTopOnChecked: function() {
+                this.$refs.myGrid.everpresentrowactions = 'add reset';
+            },
+            btnBottomOnChecked: function() {
+                this.$refs.myGrid.everpresentrowactions = 'addBottom reset';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/addnewrow/main.js b/grid/addnewrow/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/addnewrow/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/addnewrow/package.json b/grid/addnewrow/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/addnewrow/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/addremoveupdate/App.vue b/grid/addremoveupdate/App.vue
new file mode 100644
index 00000000..962f0e43
--- /dev/null
+++ b/grid/addremoveupdate/App.vue
@@ -0,0 +1,47 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :filterable="true"
+             :showeverpresentrow="true" :everpresentrowposition="'top'"
+             :editable="true" :columns="columns"
+             :everpresentrowactions="'add update remove reset'"
+             :selectionmode="'multiplecellsadvanced'">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 },
+                    { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220 },
+                    { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd' },
+                    { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(10, false),
+                datafields:
+                    [
+                        { name: 'name', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/addremoveupdate/main.js b/grid/addremoveupdate/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/addremoveupdate/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/addremoveupdate/package.json b/grid/addremoveupdate/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/addremoveupdate/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/aggregates/App.vue b/grid/aggregates/App.vue
new file mode 100644
index 00000000..d85fec39
--- /dev/null
+++ b/grid/aggregates/App.vue
@@ -0,0 +1,96 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :showstatusbar="true"
+             :editable="true" :showaggregates="true" :statusbarheight="50"
+             :columns="columns" :selectionmode="'singlecell'">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 170 },
+                    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 170 },
+                    {
+                        text: 'Product', datafield: 'productname', width: 170,
+                        aggregates: ['count',
+                            {
+                                'Cappuccino Items':
+                                    (aggregatedValue, currentValue) => {
+                                        if (currentValue == 'Cappuccino') {
+                                            return aggregatedValue + 1;
+                                        }
+                                        return aggregatedValue;
+                                    }
+                            }
+                        ]
+                    },
+                    {
+                        text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125,
+                        aggregates: [{
+                            'In Stock':
+                                (aggregatedValue, currentValue) => {
+                                    if (currentValue) {
+                                        return aggregatedValue + 1;
+                                    }
+                                    return aggregatedValue;
+                                }
+                        },
+                        {
+                            'Not In Stock':
+                                (aggregatedValue, currentValue) => {
+                                    if (!currentValue) {
+                                        return aggregatedValue + 1;
+                                    }
+                                    return aggregatedValue;
+                                }
+                        }
+                        ]
+                    },
+                    {
+                        text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2', aggregates: ['min', 'max'],
+                        aggregatesrenderer: (aggregates) => {
+                            let renderstring = '';
+                            for (let obj in aggregates) {
+                                let name = obj == 'min' ? 'Min' : 'Max';
+                                let value = aggregates[obj];
+                                renderstring += '<div style="position: relative; margin: 4px; overflow: hidden;">' + name + ': ' + value + '</div>';
+                            }
+                            return renderstring;
+                        }
+                    },
+                    { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'] }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(200, false),
+                datatype: 'array',
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' }
+                    ],
+                updaterow: (rowid, rowdata) => {
+                    // synchronize with the server - send update command
+                }
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/aggregates/main.js b/grid/aggregates/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/aggregates/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/aggregates/package.json b/grid/aggregates/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/aggregates/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/aggregatesgrouping/App.vue b/grid/aggregatesgrouping/App.vue
new file mode 100644
index 00000000..7925357d
--- /dev/null
+++ b/grid/aggregatesgrouping/App.vue
@@ -0,0 +1,63 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :groupable="true" :groups="['price']"
+             :showgroupaggregates="true" :showstatusbar="true" :statusbarheight="25"
+             :showaggregates="true" :columns="columns" :selectionmode="'singlecell'">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', groupable: true, aggregates: ['count'], datafield: 'firstname', width: 100 },
+                    { text: 'Last Name', groupable: true, aggregates: ['count'], datafield: 'lastname', width: 100 },
+                    { text: 'Product', groupable: true, columntype: 'dropdownlist', datafield: 'productname', width: 200 },
+                    { text: 'Quantity', datafield: 'quantity', aggregates: ['sum'], width: 70, cellsalign: 'right' },
+                    { text: 'Price', datafield: 'price', aggregates: ['sum'], cellsalign: 'right', width: 100, cellsformat: 'c2' },
+                    {
+                        text: 'Total', datafield: 'total', aggregates: ['sum'], cellsalign: 'right', cellsformat: 'c2',
+                        cellsrenderer: (row, column, value, defaultRender, rowData) => {
+                            if (value.toString().indexOf('Sum') >= 0) {
+                                return defaultRender.replace('Sum', 'Total');
+                            }
+                        },
+                        aggregatesrenderer: (aggregates, column, element) => {
+                            let renderstring = '<div style="position: relative; margin-top: 4px; margin-right:5px; text-align: right; overflow: hidden;">' + 'Total' + ': ' + aggregates.sum + '</div>';
+                            return renderstring;
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(50, false),
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'total', type: 'number' }
+                    ],
+                datatype: 'array',
+                updaterow: (rowid, rowdata) => {
+                    // synchronize with the server - send update command
+                }
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/aggregatesgrouping/main.js b/grid/aggregatesgrouping/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/aggregatesgrouping/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/aggregatesgrouping/package.json b/grid/aggregatesgrouping/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/aggregatesgrouping/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/aggregatesrenderer/App.vue b/grid/aggregatesrenderer/App.vue
new file mode 100644
index 00000000..74da5841
--- /dev/null
+++ b/grid/aggregatesrenderer/App.vue
@@ -0,0 +1,103 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :showstatusbar="true"
+             :editable="true" :showaggregates="true" :statusbarheight="50"
+             :columns="columns" :selectionmode="'singlecell'">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 190,
+                        aggregatesrenderer: (aggregates, column, element) => {
+                            let renderstring = '<div class="jqx-widget-content jqx-widget-content" style="float: left; width: 100%; height: 100%; "/>';
+                            return renderstring;
+                        }
+                    },
+                    {
+                        text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 190,
+                        aggregatesrenderer: (aggregates, column, element) => {
+                            let renderstring = '<div class="jqx-widget-content jqx-widget-content" style="float: left; width: 100%; height: 100%; "/>';
+                            return renderstring;
+                        }
+                    },
+                    {
+                        text: 'Product', datafield: 'productname', width: 170,
+                        aggregatesrenderer: (aggregates, column, element) => {
+                            let renderstring = '<div class="jqx-widget-content jqx-widget-content" style="float: left; width: 100%; height: 100%; "/>';
+                            return renderstring;
+                        }
+                    },
+                    {
+                        text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2', aggregates: ['min', 'max'],
+                        aggregatesrenderer: (aggregates, column, element) => {
+                            let renderstring = '<div class="jqx-widget-content jqx-widget-content" style="float: left; width: 100%; height: 100%; ">';
+                            for (let obj in aggregates) {
+                                let name = obj == 'min' ? 'Min' : 'Max';
+                                let color = obj == 'max' ? 'green' : 'red';
+                                let value = aggregates[obj];
+                                renderstring += '<div style="color: ' + color + '; position: relative; margin: 6px; text-align: right; overflow: hidden">' + name + ': ' + value + '</div>';
+                            }
+                            renderstring += '</div>';
+                            return renderstring;
+                        }
+                    },
+                    {
+                        text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'],
+                        aggregatesrenderer: (aggregates, column, element, summaryData) => {
+                            let renderstring = '<div class="jqx-widget-content jqx-widget-content" style="float: left; width: 100%; height: 100%;">';
+                            for (let obj in aggregates) {
+                                let name = obj == 'sum' ? 'Sum' : 'Avg';
+                                let color = 'green';
+                                let value = aggregates[obj];
+
+                                if (obj == 'sum' && summaryData['sum'] < 650) {
+                                    color = 'red';
+                                }
+                                if (obj == 'avg' && summaryData['avg'] < 4) {
+                                    color = 'red';
+                                }
+
+                                renderstring += '<div style="color: ' + color + '; position: relative; margin: 6px; text-align: right; overflow: hidden;">' + name + ': ' + value + '</div>';
+                            }
+                            renderstring += '</div>';
+                            return renderstring;
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(200, false),
+                datatype: 'array',
+                updaterow: (rowid, rowdata, commit) => {
+                    // synchronize with the server - send update command
+                    commit(true);
+                },
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' }
+                    ]
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/aggregatesrenderer/main.js b/grid/aggregatesrenderer/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/aggregatesrenderer/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/aggregatesrenderer/package.json b/grid/aggregatesrenderer/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/aggregatesrenderer/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/autorowheight/App.vue b/grid/autorowheight/App.vue
new file mode 100644
index 00000000..5d88b43d
--- /dev/null
+++ b/grid/autorowheight/App.vue
@@ -0,0 +1,49 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :pageable="true"
+             :autorowheight="true" :autoheight="true" :altrows="true"
+             :columns="columns">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Ship Name', datafield: 'ShipName', width: 150 },
+                    { text: 'Freight', datafield: 'Freight', width: 100, cellsformat: 'F2', cellsalign: 'right' },
+                    { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
+                    { text: 'Ship City', datafield: 'ShipCity', width: 100 },
+                    { text: 'Ship Country', datafield: 'ShipCountry' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
+                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:OrderID',
+                url: '../sampledata/orders.xml'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/autorowheight/main.js b/grid/autorowheight/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/autorowheight/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/autorowheight/package.json b/grid/autorowheight/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/autorowheight/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/autosizecolumns/App.vue b/grid/autosizecolumns/App.vue
new file mode 100644
index 00000000..db5976d8
--- /dev/null
+++ b/grid/autosizecolumns/App.vue
@@ -0,0 +1,63 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left;">
+
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :columns="columns">
+        </JqxGrid>
+
+        <div style="margin-top: 30px">
+
+            <JqxButton @click="btnOnClick()" :width="150">Auto Resize Columns</JqxButton>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Ship Name', datafield: 'ShipName', width: 50 },
+                    { text: 'Shipped Date', datafield: 'ShippedDate', width: 30, cellsformat: 'D' },
+                    { text: 'Freight', datafield: 'Freight', width: 30, cellsformat: 'F2', cellsalign: 'right' },
+                    { text: 'Ship Address', datafield: 'ShipAddress', width: 50 },
+                    { text: 'Ship City', datafield: 'ShipCity', width: 100 },
+                    { text: 'Ship Country', datafield: 'ShipCountry' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
+                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:OrderID',
+                url: '../sampledata/orders.xml'
+            };
+        },
+        methods: {
+            btnOnClick: function () {
+                this.$refs.myGrid.autoresizecolumns();
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/grid/autosizecolumns/main.js b/grid/autosizecolumns/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/autosizecolumns/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/autosizecolumns/package.json b/grid/autosizecolumns/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/autosizecolumns/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/bindingtoarray/App.vue b/grid/bindingtoarray/App.vue
new file mode 100644
index 00000000..4bab0043
--- /dev/null
+++ b/grid/bindingtoarray/App.vue
@@ -0,0 +1,46 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns" :columnsresize="true">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', datafield: 'firstname', width: 120 },
+                    { text: 'Last Name', datafield: 'lastname', width: 120 },
+                    { text: 'Product', datafield: 'productname', width: 180 },
+                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
+                    { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(200),
+                datatype: 'array',
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'total', type: 'number' }
+                    ]
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/bindingtoarray/main.js b/grid/bindingtoarray/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/bindingtoarray/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/bindingtoarray/package.json b/grid/bindingtoarray/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/bindingtoarray/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/bindingtocsv/App.vue b/grid/bindingtocsv/App.vue
new file mode 100644
index 00000000..42481096
--- /dev/null
+++ b/grid/bindingtocsv/App.vue
@@ -0,0 +1,39 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns" :columnsresize="true">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Date', datafield: 'Date', cellsformat: 'D', width: 250 },
+                    { text: 'S&P 500', datafield: 'S&P 500', width: 300, cellsformat: 'f' },
+                    { text: 'NASDAQ', datafield: 'NASDAQ', cellsformat: 'f' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: "csv",
+                datafields: [
+                    { name: 'Date', type: 'date' },
+                    { name: 'S&P 500', type: 'float' },
+                    { name: 'NASDAQ', type: 'float' }
+                ],
+                url: '../sampledata/nasdaq_vs_sp500.txt'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/bindingtocsv/main.js b/grid/bindingtocsv/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/bindingtocsv/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/bindingtocsv/package.json b/grid/bindingtocsv/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/bindingtocsv/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/bindingtojsarray/App.vue b/grid/bindingtojsarray/App.vue
new file mode 100644
index 00000000..5b735465
--- /dev/null
+++ b/grid/bindingtojsarray/App.vue
@@ -0,0 +1,67 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+             :columnsresize="true" :sortable="true">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Company Name', datafield: 'CompanyName', width: 200 },
+                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
+                    { text: 'Contact Title', datafield: 'Title', width: 100 },
+                    { text: 'Address', datafield: 'Address', width: 100 },
+                    { text: 'City', datafield: 'City', width: 100 },
+                    { text: 'Country', datafield: 'Country' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: [
+                    ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
+                    ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
+                    ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico'],
+                    ['Around the Horn', 'Thomas Hardy', 'Sales Representative', '120 Hanover Sq.', 'London', 'UK'],
+                    ['Berglunds snabbkp', 'Christina Berglund', 'Order Administrator', 'Berguvsvgen 8', 'Lule', 'Sweden'],
+                    ['Blauer See Delikatessen', 'Hanna Moos', 'Sales Representative', 'Forsterstr. 57', 'Mannheim', 'Germany'],
+                    ['Blondesddsl pre et fils', 'Frdrique Citeaux', 'Marketing Manager', '24, place Klber', 'Strasbourg', 'France'],
+                    ['Blido Comidas preparadas', 'Martn Sommer', 'Owner', 'C\/ Araquil, 67', 'Madrid', 'Spain'],
+                    ['Bon app', 'Laurence Lebihan', 'Owner', '12, rue des Bouchers', 'Marseille', 'France'],
+                    ['Bottom-Dollar Markets', 'Elizabeth Lincoln', 'Accounting Manager', '23 Tsawassen Blvd.', 'Tsawassen', 'Canada'],
+                    ['B`s Beverages', 'Victoria Ashworth', 'Sales Representative', 'Fauntleroy Circus', 'London', 'UK'],
+                    ['Cactus Comidas para llelet', 'Patricio Simpson', 'Sales Agent', 'Cerrito 333', 'Buenos Aires', 'Argentina'],
+                    ['Centro comercial Moctezuma', 'Francisco Chang', 'Marketing Manager', 'Sierras de Granada 9993', 'Mxico D.F.', 'Mexico'],
+                    ['Chop-suey Chinese', 'Yang Wang', 'Owner', 'Hauptstr. 29', 'Bern', 'Switzerland'],
+                    ['Comrcio Mineiro', 'Pedro Afonso', 'Sales Associate', 'Av. dos Lusadas, 23', 'Sao Paulo', 'Brazil'],
+                    ['Consolidated Holdings', 'Elizabeth Brown', 'Sales Representative', 'Berkeley Gardens 12 Brewery', 'London', 'UK'],
+                    ['Drachenblut Delikatessen', 'Sven Ottlieb', 'Order Administrator', 'Walserweg 21', 'Aachen', 'Germany'],
+                    ['Du monde entier', 'Janine Labrune', 'Owner', '67, rue des Cinquante Otages', 'Nantes', 'France'],
+                    ['Eastern Connection', 'Ann Devon', 'Sales Agent', '35 King George', 'London', 'UK'],
+                    ['Ernst Handel', 'Roland Mendel', 'Sales Manager', 'Kirchgasse 6', 'Graz', 'Austria']
+                ],
+                datafields: [
+                    { name: 'CompanyName', type: 'string', map: '0' },
+                    { name: 'ContactName', type: 'string', map: '1' },
+                    { name: 'Title', type: 'string', map: '2' },
+                    { name: 'Address', type: 'string', map: '3' },
+                    { name: 'City', type: 'string', map: '4' },
+                    { name: 'Country', type: 'string', map: '5' }
+                ],
+                datatype: 'array'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/bindingtojsarray/main.js b/grid/bindingtojsarray/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/bindingtojsarray/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/bindingtojsarray/package.json b/grid/bindingtojsarray/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/bindingtojsarray/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/bindingtojson/App.vue b/grid/bindingtojson/App.vue
new file mode 100644
index 00000000..c83c4df0
--- /dev/null
+++ b/grid/bindingtojson/App.vue
@@ -0,0 +1,48 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left;">
+
+        <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns" :columnsresize="true">
+        </JqxGrid>
+
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', datafield: 'name', width: 250 },
+                    { text: 'Beverage Type', datafield: 'type', width: 250 },
+                    { text: 'Calories', datafield: 'calories', width: 180 },
+                    { text: 'Total Fat', datafield: 'totalfat', width: 120 },
+                    { text: 'Protein', datafield: 'protein', minwidth: 120 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'name', type: 'string' },
+                    { name: 'type', type: 'string' },
+                    { name: 'calories', type: 'int' },
+                    { name: 'totalfat', type: 'string' },
+                    { name: 'protein', type: 'string' }
+                ],
+                id: 'id',
+                url: '../sampledata/beverages.txt'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/bindingtojson/main.js b/grid/bindingtojson/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/bindingtojson/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/bindingtojson/package.json b/grid/bindingtojson/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/bindingtojson/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/bindingtojsonstring/App.vue b/grid/bindingtojsonstring/App.vue
new file mode 100644
index 00000000..4e3a021a
--- /dev/null
+++ b/grid/bindingtojsonstring/App.vue
@@ -0,0 +1,47 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns" :columnsresize="true">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
+                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
+                    { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
+                    { text: 'City', datafield: 'City', width: 120 },
+                    { text: 'Country', datafield: 'Country' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';
+
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'CompanyName', type: 'string' },
+                    { name: 'ContactName', type: 'string' },
+                    { name: 'ContactTitle', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Country', type: 'string' }
+                ],
+                localdata: data
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/bindingtojsonstring/main.js b/grid/bindingtojsonstring/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/bindingtojsonstring/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/bindingtojsonstring/package.json b/grid/bindingtojsonstring/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/bindingtojsonstring/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/bindingtojsonusingphp/App.vue b/grid/bindingtojsonusingphp/App.vue
new file mode 100644
index 00000000..ed4c9fda
--- /dev/null
+++ b/grid/bindingtojsonusingphp/App.vue
@@ -0,0 +1,49 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left;">
+        <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns" :columnsresize="true">
+        </JqxGrid>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', dataField: 'firstname', width: 200 },
+                    { text: 'Last Name', dataField: 'lastname', width: 200 },
+                    { text: 'Product', dataField: 'productname', width: 180 },
+                    { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
+                    { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'firstname' },
+                    { name: 'lastname' },
+                    { name: 'productname' },
+                    { name: 'quantity', type: 'int' },
+                    { name: 'price', type: 'float' },
+                    { name: 'total', type: 'float' }
+                ],
+                id: 'id',
+                url: '../sampledata/data.php',
+                root: 'data'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/bindingtojsonusingphp/main.js b/grid/bindingtojsonusingphp/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/bindingtojsonusingphp/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/bindingtojsonusingphp/package.json b/grid/bindingtojsonusingphp/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/bindingtojsonusingphp/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/bindingtoobservablearray/App.vue b/grid/bindingtoobservablearray/App.vue
new file mode 100644
index 00000000..aa2da5c1
--- /dev/null
+++ b/grid/bindingtoobservablearray/App.vue
@@ -0,0 +1,113 @@
+<template>
+    <div>
+        <JqxGrid :width="getWidth" height="150" :source="dataAdapter" :columns="columns" :columnsresize="true">
+        </JqxGrid>
+
+        <br />
+        <br />
+
+        <JqxButton style="float: left; margin-right: 5px" @click="addItemBtnOnClick()">Add Item</JqxButton>
+        <JqxButton style="float: left; margin-right: 5px" @click="deleteItemBtnOnClick()">Delete Item</JqxButton>
+        <JqxButton style="float: left; margin-right: 5px" @click="updateItemBtnOnClick()">Update Item</JqxButton>
+        <JqxButton style="float: left" @click="updatePathBtnOnClick()">Update Path</JqxButton>
+
+        <br />
+
+        <div ref="log" style="clear: both"></div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                columns: [
+                    { text: 'Name', datafield: 'firstname', width: 120 },
+                    { text: 'Last Name', datafield: 'lastname', width: 120 },
+                    { text: 'Product', datafield: 'productname', width: 180 },
+                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
+                    { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.observableArray = new jqx.observableArray(generatedata(2, false), (changed) => {
+                this.updateLog(this.observableArray);
+            });
+
+            const source = {
+                localdata: this.observableArray,
+                datatype: 'obserableArray',
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'total', type: 'number' }
+                    ]
+            };
+
+            this.dataAdapter = new jqx.dataAdapter(source);
+
+        },
+        mounted: function () {
+            this.updateLog(this.observableArray);
+        },
+        methods: {
+            updateLog: function (observableArray) {
+                let rows = '';
+                for (let i = 0; i < observableArray.length; i++) {
+                    rows += observableArray.toJSON(['firstname', 'lastname', 'productname', 'quantity', 'price', 'total'], observableArray[i]);
+                    rows += '<br/>';
+                }
+                let container = document.getElementById('log');
+                this.$refs.log.innerHTML = rows;
+            },
+            addItemBtnOnClick: function () {
+                let row = generatedata(1, false)[0];
+                let temp = this.observableArray;
+                temp.push(row);
+                this.observableArray = temp
+            },
+            deleteItemBtnOnClick: function () {
+                if (this.observableArray.length > 0) {
+                    let temp = this.observableArray;
+                    temp.splice(0, 1);
+                    this.observableArray = temp
+                }
+            },
+            updateItemBtnOnClick: function () {
+                if (this.observableArray.length > 0) {
+                    let row = generatedata(1, false)[0];
+                    let temp = this.observableArray;
+                    temp.set(0, row);
+                    this.observableArray = temp;
+                }
+            },
+            updatePathBtnOnClick: function () {
+                if (this.observableArray.length > 0) {
+                    let row = generatedata(1, false)[0];
+                    let temp = this.observableArray;
+                    temp.set('0.firstname', row.firstname);
+                    temp.set('0.lastname', row.lastname);
+                    this.observableArray = temp
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/bindingtoobservablearray/main.js b/grid/bindingtoobservablearray/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/bindingtoobservablearray/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/bindingtoobservablearray/package.json b/grid/bindingtoobservablearray/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/bindingtoobservablearray/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/bindingtoremotedata/App.vue b/grid/bindingtoremotedata/App.vue
new file mode 100644
index 00000000..f7665c17
--- /dev/null
+++ b/grid/bindingtoremotedata/App.vue
@@ -0,0 +1,53 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left;">
+        <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns" :columnsresize="true">
+        </JqxGrid>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source,
+                    {
+                        formatData: (data) => {
+                            data.featureClass = 'P';
+                            data.style = 'full';
+                            data.maxRows = 50;
+                            data.username = 'jqwidgets';
+                            return data;
+                        }
+                    }
+                ),
+                columns: [
+                    { text: 'Country Name', datafield: 'countryName', width: 200 },
+                    { text: 'City', datafield: 'name', width: 170 },
+                    { text: 'Population', datafield: 'population', cellsformat: 'f', width: 170 },
+                    { text: 'Continent Code', datafield: 'continentCode', minwidth: 110 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'jsonp',
+                datafields: [
+                    { name: 'countryName', type: 'string' },
+                    { name: 'name', type: 'string' },
+                    { name: 'population', type: 'float' },
+                    { name: 'continentCode', type: 'string' }
+                ],
+                url: 'http://api.geonames.org/searchJSON'
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/bindingtoremotedata/main.js b/grid/bindingtoremotedata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/bindingtoremotedata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/bindingtoremotedata/package.json b/grid/bindingtoremotedata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/bindingtoremotedata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/bindingtotsv/App.vue b/grid/bindingtotsv/App.vue
new file mode 100644
index 00000000..312c4280
--- /dev/null
+++ b/grid/bindingtotsv/App.vue
@@ -0,0 +1,43 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns" :columnsresize="true">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Year', datafield: 'Year', width: 200 },
+                    { text: 'HPI', datafield: 'HPI', cellsformat: 'f2', width: 200 },
+                    { text: 'Build Cost', datafield: 'BuildCost', cellsformat: 'f2', width: 180 },
+                    { text: 'Population', datafield: 'Population', cellsformat: 'f2', width: 100 },
+                    { text: 'Rate', datafield: 'Rate', cellsformat: 'f5', minwidth: 100 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'tab',
+                datafields: [
+                    { name: 'Year', type: 'int' },
+                    { name: 'HPI', type: 'float' },
+                    { name: 'BuildCost', type: 'float' },
+                    { name: 'Population', type: 'float' },
+                    { name: 'Rate', type: 'float' }
+                ],
+                url: '../sampledata/homeprices.txt'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/bindingtotsv/main.js b/grid/bindingtotsv/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/bindingtotsv/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/bindingtotsv/package.json b/grid/bindingtotsv/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/bindingtotsv/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/bindingtoxml/App.vue b/grid/bindingtoxml/App.vue
new file mode 100644
index 00000000..d15f1b37
--- /dev/null
+++ b/grid/bindingtoxml/App.vue
@@ -0,0 +1,50 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left;">
+        <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns" :columnsresize="true">
+        </JqxGrid>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
+                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
+                    { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
+                    { text: 'City', datafield: 'City', width: 120 },
+                    { text: 'Postal Code', datafield: 'PostalCode', width: 90 },
+                    { text: 'Country', datafield: 'Country', width: 100 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName', type: 'string' },
+                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName', type: 'string' },
+                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle', type: 'string' },
+                    { name: 'City', map: 'm\\:properties>d\\:City', type: 'string' },
+                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode', type: 'string' },
+                    { name: 'Country', map: 'm\\:properties>d\\:Country', type: 'string' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:CustomerID',
+                url: '../sampledata/customers.xml'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/bindingtoxml/main.js b/grid/bindingtoxml/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/bindingtoxml/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/bindingtoxml/package.json b/grid/bindingtoxml/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/bindingtoxml/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/cascadingcomboboxes/App.vue b/grid/cascadingcomboboxes/App.vue
new file mode 100644
index 00000000..41956ff9
--- /dev/null
+++ b/grid/cascadingcomboboxes/App.vue
@@ -0,0 +1,70 @@
+<template>
+    <JqxGrid ref="myGrid"
+             :width="300" :source="dataAdapter" :columns="columns"
+             :autoheight="true" :editable="true" :selectionmode="'singlecell'">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'Country', datafield: 'Country', width: 150, columntype: 'combobox',
+                        cellvaluechanging: (row, datafield, columntype, oldvalue, newvalue) => {
+                            if (newvalue != oldvalue) {
+                                this.$refs.myGrid.setcellvalue(row, 'City', 'Select a city...');
+                            };
+                        }
+                    },
+                    {
+                        text: 'City', datafield: 'City', width: 150, columntype: 'combobox',
+                        initeditor: (row, cellvalue, editor, celltext, cellwidth, cellheight) => {
+                            let country = this.$refs.myGrid.getcellvalue(row, 'Country');
+                            let city = editor.val();
+                            let cities = new Array();
+                            switch (country) {
+                                case 'Belgium':
+                                    cities = ['Bruges', 'Brussels', 'Ghent'];
+                                    break;
+                                case 'France':
+                                    cities = ['Bordeaux', 'Lille', 'Paris'];
+                                    break;
+                                case 'USA':
+                                    cities = ['Los Angeles', 'Minneapolis', 'Washington'];
+                                    break;
+                            };
+                            editor.jqxComboBox({ autoDropDownHeight: true, source: cities });
+                            if (city != 'Select a city...') {
+                                let index = cities.indexOf(city);
+                                editor.jqxComboBox('selectIndex', index);
+                            }
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const data = '[{ "Country": "Belgium", "City": "Brussels"}, {"Country": "France", "City": "Paris"}, {"Country": "USA", "City": "Washington" }]';
+
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' }
+                ],
+                localdata: data
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/cascadingcomboboxes/main.js b/grid/cascadingcomboboxes/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/cascadingcomboboxes/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/cascadingcomboboxes/package.json b/grid/cascadingcomboboxes/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/cascadingcomboboxes/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/cellsselection/App.vue b/grid/cellsselection/App.vue
new file mode 100644
index 00000000..dde97ada
--- /dev/null
+++ b/grid/cellsselection/App.vue
@@ -0,0 +1,188 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+
+        <JqxGrid ref="myGrid" @cellselect="myGridOnCellSelect($event)" @cellunselect="myGridOnCellUnselect($event)"
+                 :width="getWidth" :source="dataAdapter"
+                 :columns="columns" :selectionmode="'singlecell'">
+        </JqxGrid>
+
+        <div style="margin-top: 20px">
+            <div style="float: left">
+                <div>
+                    <JqxInput ref="myInput1" style="float: left; margin-right: 5px"
+                              :width="50" :height="20" :value="100">
+                    </JqxInput>
+
+                    <JqxButton style="float: left" @click="scrollToBtnOnClick()">Scroll to Row</JqxButton>
+                </div>
+                <div style="clear: both"></div>
+                <div style="margin-top: 10px;">
+                </div>
+                <JqxCheckBox :checked="true" @change="myCheckBoxOnChange($event)">Enable Hover</JqxCheckBox>
+                <div style="margin-top: 10px">
+                    <span>Selection Mode</span>
+
+                    <JqxDropDownList style="margin-top: 5px" @select="myDropDownListOnSelect($event)"
+                                     :width="120" :height="25" :selectedIndex="1" :dropDownWidth="200"
+                                     :autoDropDownHeight="true" :source="dropDownSource1">
+                    </JqxDropDownList>
+
+                </div>
+            </div>
+            <div style="float: left; margin-left: 20px">
+                <div>
+                    <div>
+                        <table>
+                            <tbody>
+                                <tr>
+                                    <td align="right">Row</td>
+                                    <td>
+                                        <JqxInput ref="myInput2" style="float: left" :width="50" :value="0"></JqxInput>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td align="right">Column:</td>
+                                    <td>
+                                        <JqxDropDownList ref="myDropDownList"
+                                                         :width="120" :height="25" :selectedIndex="1"
+                                                         :autoDropDownHeight="true" :source="dropDownSource2">
+                                        </JqxDropDownList>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td align="right">
+                                        <JqxButton style="float: left; margin-right: 5px" @click="clearBtnOnClick()">Clear Selection</JqxButton>
+                                    </td>
+                                    <td>
+                                        <JqxButton style="float: left" @click="selectBtnOnClick()">Select Cell</JqxButton>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <div style="float: left; margin-left: 20px">
+                <span>Selection Log:</span>
+                <div style="margin-top: 10px">
+                    <span>Selected Cell:</span>
+                    <span ref="selectedCell"></span>
+                    <br />
+                    <span>Unselected Cell:</span>
+                    <span ref="unselectedCell"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxInput,
+            JqxButton,
+            JqxCheckBox,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', datafield: 'firstname', width: 200 },
+                    { text: 'Last Name', datafield: 'lastname', width: 200 },
+                    { text: 'Product', datafield: 'productname', width: 180 },
+                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
+                ],
+                dropDownSource1: ['none', 'single cell', 'multiple cells', 'multiple cells extended', 'multiple cells advanced'],
+                dropDownSource2: ['First Name', 'Last Name', 'Product Name', 'Quantity', 'Unit Price', 'Total']
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(200, false),
+                datafields:
+                    [
+                        { name: 'id', type: 'number' },
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'total', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        },
+        mounted: function () {
+            this.$refs.myGrid.selectcell(2, 'lastname');
+        },
+        methods: {
+            scrollToBtnOnClick: function () {
+
+                let index = parseInt(this.$refs.myInput1.value);
+                if (!isNaN(index)) {
+                    this.$refs.myGrid.ensurerowvisible(index);
+                }
+            },
+            clearBtnOnClick: function () {
+                this.$refs.myGrid.clearselection();
+            },
+            selectBtnOnClick: function () {
+                let index = parseInt(this.$refs.myInput2.val());
+                let columnindex = this.$refs.myDropDownList.getSelectedIndex();
+                let columndatafield = this.$refs.myGrid.getcolumnat(columnindex).datafield;
+                if (!isNaN(index)) {
+                    this.$refs.myGrid.selectcell(index, columndatafield);
+                }
+            },
+            // enable or disable the selection.
+            myDropDownListOnSelect: function (event) {
+                let index = event.args.index;
+                switch (index) {
+                    case 0:
+                        this.$refs.myGrid.selectionmode = 'none';
+                        break;
+                    case 1:
+                        this.$refs.myGrid.selectionmode = 'singlecell';
+                        break;
+                    case 2:
+                        this.$refs.myGrid.selectionmode = 'multiplecells';
+                        break;
+                    case 3:
+                        this.$refs.myGrid.selectionmode = 'multiplecellsextended';
+                        break;
+                    case 4:
+                        this.$refs.myGrid.selectionmode = 'multiplecellsadvanced';
+                        break;
+                }
+            },
+            // enable or disable the hover state.
+            myCheckBoxOnChange: function (event) {
+                this.$refs.myGrid.enablehover = event.args.checked;
+            },
+            // display selected row index.
+            myGridOnCellSelect: function (event) {
+                let columnheader = this.$refs.myGrid.getcolumn(event.args.datafield).text;
+                this.$refs.selectedCell.innerHTML = 'Row: ' + event.args.rowindex + ', Column: ' + columnheader;
+            },
+            // display unselected row index.
+            myGridOnCellUnselect: function (event) {
+                let columnheader = this.$refs.myGrid.getcolumn(event.args.datafield).text;
+                this.$refs.unselectedCell.innerHTML = 'Row: ' + event.args.rowindex + ', Column: ' + columnheader;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/cellsselection/main.js b/grid/cellsselection/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/cellsselection/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/cellsselection/package.json b/grid/cellsselection/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/cellsselection/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/cellsstyling/App.vue b/grid/cellsstyling/App.vue
new file mode 100644
index 00000000..91489e98
--- /dev/null
+++ b/grid/cellsstyling/App.vue
@@ -0,0 +1,93 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+
+        <JqxGrid :width="getWidth" :source="dataAdapter" :pageable="true"
+                 :autoheight="true" :sortable="true" :altrows="true"
+                 :enabletooltips="true" :editable="true"
+                 :columns="columns" :selectionmode="'multiplecellsadvanced'">
+        </JqxGrid>
+
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Product Name', datafield: 'ProductName', width: 250 },
+                    { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
+                    { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
+                    { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellclassname: this.cellClass, width: 100 },
+                    { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ProductName', type: 'string' },
+                    { name: 'QuantityPerUnit', type: 'int' },
+                    { name: 'UnitPrice', type: 'float' },
+                    { name: 'UnitsInStock', type: 'float' },
+                    { name: 'Discontinued', type: 'bool' }
+                ],
+                root: 'Products',
+                record: 'Product',
+                id: 'ProductID',
+                url: '../sampledata/products.xml'
+            };
+        },
+        methods: {
+            cellClass: function (row, columnfield, value) {
+                if (value < 20) {
+                    return 'red';
+                }
+                else if (value >= 20 && value < 50) {
+                    return 'yellow';
+                }
+                else return 'green';
+            }
+        }
+    }
+</script>
+
+<style>
+    .green {
+        color: black\9;
+        background-color: #b6ff00\9;
+    }
+
+    .yellow {
+        color: black\9;
+        background-color: yellow\9;
+    }
+
+    .red {
+        color: black\9;
+        background-color: #e83636\9;
+    }
+
+    .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
+        color: black;
+        background-color: #b6ff00;
+    }
+
+    .yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
+        color: black;
+        background-color: yellow;
+    }
+
+    .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
+        color: black;
+        background-color: #e83636;
+    }
+</style>
\ No newline at end of file
diff --git a/grid/cellsstyling/main.js b/grid/cellsstyling/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/cellsstyling/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/cellsstyling/package.json b/grid/cellsstyling/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/cellsstyling/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/checkboxcolumn/App.vue b/grid/checkboxcolumn/App.vue
new file mode 100644
index 00000000..3e3a0d6a
--- /dev/null
+++ b/grid/checkboxcolumn/App.vue
@@ -0,0 +1,52 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+
+        <JqxGrid :width="getWidth" :source="dataAdapter" :editable="true" :columns="columns">
+        </JqxGrid>
+
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', editable: false, datafield: 'firstname', width: 120 },
+                    { text: 'Last Name', editable: false, datafield: 'lastname', width: 120 },
+                    { text: 'Product', editable: false, datafield: 'productname', width: 180 },
+                    { text: 'Available', datafield: 'available', threestatecheckbox: true, columntype: 'checkbox', width: 70 },
+                    { text: 'Quantity', editable: false, datafield: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', editable: false, datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
+                    { text: 'Total', editable: false, datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(200, true),
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'total', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/checkboxcolumn/main.js b/grid/checkboxcolumn/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/checkboxcolumn/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/checkboxcolumn/package.json b/grid/checkboxcolumn/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/checkboxcolumn/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/checkboxselection/App.vue b/grid/checkboxselection/App.vue
new file mode 100644
index 00000000..64005bb5
--- /dev/null
+++ b/grid/checkboxselection/App.vue
@@ -0,0 +1,52 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+
+        <JqxGrid :width="getWidth" height="450" :source="dataAdapter" :columns="columns"
+                 :filterable="true" :sortable="true" :altrows="true" :selectionmode="'checkbox'">
+        </JqxGrid>
+
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Ship Name', datafield: 'ShipName', width: 250 },
+                    { text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd' },
+                    { text: 'Freight', datafield: 'Freight', width: 150, cellsformat: 'F2', cellsalign: 'right' },
+                    { text: 'Ship City', datafield: 'ShipCity', width: 150 },
+                    { text: 'Ship Country', datafield: 'ShipCountry' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
+                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:OrderID',
+                url: '../sampledata/orders.xml'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/checkboxselection/main.js b/grid/checkboxselection/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/checkboxselection/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/checkboxselection/package.json b/grid/checkboxselection/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/checkboxselection/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/columnshierarchy/App.vue b/grid/columnshierarchy/App.vue
new file mode 100644
index 00000000..9c15858f
--- /dev/null
+++ b/grid/columnshierarchy/App.vue
@@ -0,0 +1,60 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+             :pageable="true" :autorowheight="true" :altrows="true"
+             :columnsresize="true" :columngroups="columngroups">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName', width: 110 },
+                    { text: 'Name', columngroup: 'ProductDetails', cellsalign: 'center', align: 'center', datafield: 'ProductName', width: 120 },
+                    { text: 'Quantity', columngroup: 'ProductDetails', datafield: 'Quantity', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 80 },
+                    { text: 'Freight', columngroup: 'OrderDetails', datafield: 'Freight', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 100 },
+                    { text: 'Order Date', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', cellsformat: 'd', datafield: 'OrderDate', width: 100 },
+                    { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress', width: 100 },
+                    { text: 'Price', columngroup: 'ProductDetails', datafield: 'Price', cellsformat: 'c2', align: 'center', cellsalign: 'center', width: 70 },
+                    { text: 'Address', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'Address', width: 120 },
+                    { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City', width: 80 }
+                ],
+                columngroups: [
+                    { text: 'Product Details', align: 'center', name: 'ProductDetails' },
+                    { text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
+                    { text: 'Location', align: 'center', name: 'Location' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'SupplierName', type: 'string' },
+                    { name: 'Quantity', type: 'number' },
+                    { name: 'OrderDate', type: 'date' },
+                    { name: 'OrderAddress', type: 'string' },
+                    { name: 'Freight', type: 'number' },
+                    { name: 'Price', type: 'number' },
+                    { name: 'City', type: 'string' },
+                    { name: 'ProductName', type: 'string' },
+                    { name: 'Address', type: 'string' }
+                ],
+                url: '../sampledata/orderdetailsextended.xml',
+                root: 'DATA',
+                record: 'ROW'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/columnshierarchy/main.js b/grid/columnshierarchy/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/columnshierarchy/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/columnshierarchy/package.json b/grid/columnshierarchy/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/columnshierarchy/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/columnsreorder/App.vue b/grid/columnsreorder/App.vue
new file mode 100644
index 00000000..70685f7f
--- /dev/null
+++ b/grid/columnsreorder/App.vue
@@ -0,0 +1,57 @@
+<template>
+    <div>
+        <JqxGrid @columnreordered="myGridOnColumnReordered($event)"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :columnsresize="true" :columnsreorder="true">
+        </JqxGrid>
+
+        <div ref="eventLog" style="margin-top: 30px"></div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', datafield: 'name', width: 200 },
+                    { text: 'Beverage Type', datafield: 'type', width: 200 },
+                    { text: 'Calories', datafield: 'calories', width: 100 },
+                    { text: 'Total Fat', datafield: 'totalfat' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'name' },
+                    { name: 'type' },
+                    { name: 'calories', type: 'int' },
+                    { name: 'totalfat' },
+                    { name: 'protein' }
+                ],
+                id: 'id',
+                url: '../sampledata/beverages.txt'
+            };
+        },
+        methods: {
+            myGridOnColumnReordered: function (event) {
+                let column = event.args.columntext;
+                let newindex = event.args.newindex
+                let oldindex = event.args.oldindex;
+                this.$refs.eventLog.innerHTML = `Column: ${column}, New Index: ${newindex}, Old Index: ${oldindex}`;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/columnsreorder/main.js b/grid/columnsreorder/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/columnsreorder/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/columnsreorder/package.json b/grid/columnsreorder/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/columnsreorder/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/columnsresize/App.vue b/grid/columnsresize/App.vue
new file mode 100644
index 00000000..d4c20193
--- /dev/null
+++ b/grid/columnsresize/App.vue
@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <JqxGrid @columnresized="myGridOnColumnResized($event)"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :autoheight="true" :columnsresize="true">
+        </JqxGrid>
+
+        <div ref="eventLog" style="margin-top: 30px"></div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', datafield: 'firstname', width: 100 },
+                    { text: 'Last Name', datafield: 'lastname', width: 100 },
+                    { text: 'Product', datafield: 'productname', width: 180 },
+                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
+                    { text: 'Total', datafield: 'total', minwidth: 100, resizable: false, width: 'auto', cellsalign: 'right', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(10, false),
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'total', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        },
+        methods: {
+            myGridOnColumnResized: function (event) {
+                let column = event.args.columntext;
+                let newwidth = event.args.newwidth
+                let oldwidth = event.args.oldwidth;
+                this.$refs.eventLog.innerHTML = `Column: ${column}, New Width: ${newwidth}, Old Width ${oldwidth}`;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/columnsresize/main.js b/grid/columnsresize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/columnsresize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/columnsresize/package.json b/grid/columnsresize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/columnsresize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/columntemplate/App.vue b/grid/columntemplate/App.vue
new file mode 100644
index 00000000..01a79947
--- /dev/null
+++ b/grid/columntemplate/App.vue
@@ -0,0 +1,56 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+        <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :autorowheight="true" :pageable="true">
+        </JqxGrid>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Link', datafield: 'link', width: 550, cellsrenderer: this.linkrenderer },
+                    { text: 'Title', datafield: 'title', width: 200 },
+                    { text: 'Publish Date', datafield: 'pubDate', width: 250, cellsformat: 'D' },
+                    { text: 'Creator', datafield: 'creator', width: 200 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'title', type: 'string' },
+                    { name: 'link', type: 'string' },
+                    { name: 'pubDate', type: 'date' },
+                    { name: 'creator', map: 'dc\\:creator', type: 'string' },
+                ],
+                root: 'channel',
+                record: 'item',
+                url: '../sampledata/feed.xml'
+            };
+        },
+        methods: {
+            linkrenderer: function (row, column, value) {
+                if (value.indexOf('#') != -1) {
+                    value = value.substring(0, value.indexOf('#'));
+                }
+                let format = { target: '"_blank"' };
+                let html = jqx.dataFormat.formatlink(value, format);
+                return html;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/columntemplate/main.js b/grid/columntemplate/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/columntemplate/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/columntemplate/package.json b/grid/columntemplate/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/columntemplate/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/columntooltips/App.vue b/grid/columntooltips/App.vue
new file mode 100644
index 00000000..e7c912b7
--- /dev/null
+++ b/grid/columntooltips/App.vue
@@ -0,0 +1,63 @@
+<template>
+    <JqxGrid :width="getWidth" :height="450" :source="dataAdapter"
+             :columns="columns" :altrows="true" :sortable="true">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxTooltip from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Ship Name', datafield: 'ShipName', width: 250, rendered: this.tooltiprenderer },
+                    { text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd', rendered: this.tooltiprenderer },
+                    { text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right', rendered: this.tooltiprenderer },
+                    { text: 'Ship Address', datafield: 'ShipAddress', width: 350, rendered: this.tooltiprenderer },
+                    { text: 'Ship City', datafield: 'ShipCity', width: 100, rendered: this.tooltiprenderer },
+                    { text: 'Ship Country', datafield: 'ShipCountry', width: 101, rendered: this.tooltiprenderer }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
+                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:OrderID',
+                url: '../sampledata/orders.xml',
+                sortcolumn: 'ShipName',
+                sortdirection: 'asc'
+            };
+
+            this.counter = 1;
+        },
+        methods: {
+            tooltiprenderer: function (element) {
+                let id = `toolTipContainer${this.counter}`;
+                element[0].id = id;
+                let content = element[0].innerHTML;
+                setTimeout(_ => jqwidgets.createInstance(`#${id}`, 'jqxTooltip', { position: 'mouse', content: content }))
+                this.counter++;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/columntooltips/main.js b/grid/columntooltips/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/columntooltips/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/columntooltips/package.json b/grid/columntooltips/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/columntooltips/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/computedcolumn/App.vue b/grid/computedcolumn/App.vue
new file mode 100644
index 00000000..8ef83700
--- /dev/null
+++ b/grid/computedcolumn/App.vue
@@ -0,0 +1,82 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+             :editable="true" :slectionmode="'multiplecelladvanced'">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
+                    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80 },
+                    { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
+                    {
+                        text: 'Quantity', datafield: 'quantity', width: 100, align: 'right', cellsalign: 'right', columntype: 'numberinput',
+                        validation: (cell, value) => {
+                            if (value < 0 || value > 1500) {
+                                return { result: false, message: 'Quantity should be in the 0-150 interval' };
+                            }
+                            return true;
+                        },
+                        createeditor: (row, cellvalue, editor) => {
+                            editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
+                        }
+                    },
+                    {
+                        text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
+                        validation: (cell, value) => {
+                            if (value < 0 || value > 1500) {
+                                return { result: false, message: 'Price should be in the 0-15 interval' };
+                            }
+                            return true;
+                        },
+                        createeditor: (row, cellvalue, editor) => {
+                            editor.jqxNumberInput({ digits: 3 });
+                        }
+                    },
+                    {
+                        text: 'Total', editable: false, datafield: 'total',
+                        cellsrenderer: (index, datafield, value, defaultvalue, column, rowdata) => {
+                            let total = parseFloat(rowdata.price) * parseFloat(rowdata.quantity);
+                            return '<div style="margin: 4px;" class="jqx-right-align">' + this.dataAdapter.formatNumber(total, 'c2') + '</div>';
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(200, false),
+                datatype: 'array',
+                updaterow: (rowid, rowdata, commit) => {
+                    // synchronize with the server - send update command
+                    // call commit with parameter true if the synchronization with the server is successful
+                    // and with parameter false if the synchronization failder.
+                    commit(true);
+                },
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'date', type: 'date' }
+                    ]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/computedcolumn/main.js b/grid/computedcolumn/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/computedcolumn/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/computedcolumn/package.json b/grid/computedcolumn/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/computedcolumn/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/contextmenu/App.vue b/grid/contextmenu/App.vue
new file mode 100644
index 00000000..666ca950
--- /dev/null
+++ b/grid/contextmenu/App.vue
@@ -0,0 +1,172 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid" @contextmenu="myGridOnContextMenu()" @rowclick="myGridOnRowClick($event)"
+                 :width="getWidth" :source="dataAdapter" :pageable="true"
+                 :autoheight="true" :columns="columns">
+        </JqxGrid>
+
+        <div style="margin-top: 30px">
+            <div id="cellbegineditevent"></div>
+            <div style="margin-top: 10px" id="cellendeditevent"></div>
+        </div>
+
+        <JqxWindow ref="myWindow"
+                   :width="250" :height="230" :modalOpacity="'0.01'"
+                   :resizable="false" :isModal="true" :autoOpen="false">
+            <div>Edit</div>
+            <div style="overflow: hidden">
+                <table>
+                    <tbody>
+                        <tr>
+                            <td align="right">First Name:</td>
+                            <td align="left"><JqxInput ref="firstName" :width="150" :height="23"></JqxInput></td>
+                        </tr>
+                        <tr>
+                            <td align="right">Last Name:</td>
+                            <td align="left"><JqxInput ref="lastName" :width="150" :height="23"></JqxInput></td>
+                        </tr>
+                        <tr>
+                            <td align="right">Product:</td>
+                            <td align="left"><JqxInput ref="product" :width="150" :height="23"></JqxInput></td>
+                        </tr>
+                        <tr>
+                            <td align="right">Quantity:</td>
+                            <td align="left">
+                                <JqxNumberInput ref="quantity"
+                                                :width="150" :height="23" :decimalDigits="0" :spinButtons="true">
+                                </JqxNumberInput>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td align="right">Price:</td>
+                            <td align="left">
+                                <JqxNumberInput ref="price"
+                                                :width="150" :height="23" :symbol="'$'" :spinButtons="true">
+                                </JqxNumberInput>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td align="right"></td>
+                            <td style="padding-top: 10px" align="right">
+                                <JqxButton ref="SaveBtn" style="margin-right: 5px; float: left" @click="saveBtnOnClick()">Save</JqxButton>
+                                <JqxButton ref="CancelBtn" style="float: left" @click="cancelBtnOnClick()">Cancel</JqxButton>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </JqxWindow>
+
+        <JqxMenu ref="myMenu" @itemclick="myMenuOnItemClick($event)"
+                 :width="200" :height="58" :mode="'popup'" :autoOpenPopup="false">
+            <ul>
+                <li>Edit Selected Row</li>
+                <li>Delete Selected Row</li>
+            </ul>
+        </JqxMenu>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxWindow from "jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+    import JqxNumberInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxWindow,
+            JqxInput,
+            JqxNumberInput,
+            JqxButton,
+            JqxMenu
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', datafield: 'firstname', width: 200 },
+                    { text: 'Last Name', datafield: 'lastname', width: 200 },
+                    { text: 'Product', datafield: 'productname', width: 190 },
+                    { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
+                    { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(25, false),
+                datatype: 'array',
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' }
+                    ]
+            }
+
+            this.editrow = -1;
+        },
+        mounted: function () {
+            document.addEventListener('contextmenu', event => event.preventDefault());
+        },
+        methods: {
+            myGridOnContextMenu: function () {
+                return false;
+            },
+            myGridOnRowClick: function (event) {
+                if (event.args.rightclick) {
+                    this.$refs.myGrid.selectrow(event.args.rowindex);
+                    let scrollTop = window.scrollY;
+                    let scrollLeft = window.scrollX;
+                    this.$refs.myMenu.open(parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
+                    return false;
+                }
+            },
+            myMenuOnItemClick: function (event) {
+                let args = event.args;
+                let rowindex = this.$refs.myGrid.getselectedrowindex();
+                if (args.innerHTML == 'Edit Selected Row') {
+                    this.editrow = rowindex;
+                    this.$refs.myWindow.position = { x: 60, y: 60 };
+                    // get the clicked row's data and initialize the input fields.
+                    let dataRecord = this.$refs.myGrid.getrowdata(this.editrow);
+                    this.$refs.firstName.value = dataRecord.firstname;
+                    this.$refs.lastName.value = dataRecord.lastname;
+                    this.$refs.product.value = dataRecord.productname;
+                    this.$refs.quantity.decimal = dataRecord.quantity;
+                    this.$refs.price.decimal = dataRecord.price;
+                    // show the popup window.
+                    this.$refs.myWindow.open();
+                }
+                else {
+                    let rowid = this.$refs.myGrid.getrowid(rowindex);
+                    this.$refs.myGrid.deleterow(rowid);
+                }
+            },
+            saveBtnOnClick: function () {
+                if (this.editrow >= 0) {
+                    let row = {
+                        firstname: this.$refs.firstName.value, lastname: this.$refs.lastName.value, productname: this.$refs.product.value,
+                        quantity: parseInt(this.$refs.quantity.decimal), price: parseFloat(this.$refs.price.decimal)
+                    };
+                    let rowid = this.$refs.myGrid.getrowid(this.editrow);
+                    this.$refs.myGrid.updaterow(rowid, row);
+                    this.$refs.myWindow.hide();
+                }
+            },
+            cancelBtnOnClick: function () {
+                this.$refs.myWindow.hide();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/contextmenu/main.js b/grid/contextmenu/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/contextmenu/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/contextmenu/package.json b/grid/contextmenu/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/contextmenu/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/createComponent/App.vue b/grid/createComponent/App.vue
new file mode 100644
index 00000000..c2b06d6e
--- /dev/null
+++ b/grid/createComponent/App.vue
@@ -0,0 +1,69 @@
+<template>
+    <JqxGrid ref="myGrid" :autoCreate="false">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        mounted: function () {
+            const source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ProductName', type: 'string' },
+                    { name: 'QuantityPerUnit', type: 'int' },
+                    { name: 'UnitPrice', type: 'float' },
+                    { name: 'UnitsInStock', type: 'float' },
+                    { name: 'Discontinued', type: 'bool' }
+                ],
+                root: 'Products',
+                record: 'Product',
+                id: 'ProductID',
+                url: '../sampledata/products.xml'
+            }
+
+            const dataAdapter = new jqx.dataAdapter(source);
+
+            const settings = {
+                width: getWidth('grid'),
+                source: dataAdapter,
+                pageable: true,
+                autoheight: true,
+                sortable: true,
+                altrows: true,
+                enabletooltips: true,
+                editable: true,
+                selectionmode: 'multiplecellsadvanced',
+                columns: [
+                    { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
+                    { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right' },
+                    { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2' },
+                    { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: this.cellsrenderer, width: 100 },
+                    { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', align: 'center' }
+                ],
+                columngroups: [
+                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
+                ]
+            };
+
+            this.$refs.myGrid.createComponent(settings);
+        },
+        methods: {
+            cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
+                if (value < 20) {
+                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
+                }
+                else {
+                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/createComponent/main.js b/grid/createComponent/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/createComponent/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/createComponent/package.json b/grid/createComponent/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/createComponent/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/createremoveupdate/App.vue b/grid/createremoveupdate/App.vue
new file mode 100644
index 00000000..44b19bfa
--- /dev/null
+++ b/grid/createremoveupdate/App.vue
@@ -0,0 +1,159 @@
+<template>
+    <JqxGrid ref="myGrid"
+             :width="getWidth" :height="350" :source="dataAdapter" :columns="columns"
+             :showtoolbar="true" :rendertoolbar="rendertoolbar">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', datafield: 'firstname', width: 200 },
+                    { text: 'Last Name', datafield: 'lastname', width: 200 },
+                    { text: 'Product', datafield: 'productname', width: 180 },
+                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
+                    { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const firstNames =
+                [
+                    'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
+                ];
+
+            const lastNames =
+                [
+                    'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
+                ];
+
+            const productNames =
+                [
+                    'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
+                ];
+
+            const priceValues =
+                [
+                    '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
+                ];
+
+            this.generaterow = () => {
+                let row = {};
+                let productindex = Math.floor(Math.random() * productNames.length);
+                let price = parseFloat(priceValues[productindex]);
+                let quantity = 1 + Math.round(Math.random() * 10);
+                row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
+                row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
+                row['productname'] = productNames[productindex];
+                row['price'] = price;
+                row['quantity'] = quantity;
+                row['total'] = price * quantity;
+                return row;
+            }
+
+            generateData = () => {
+                let data = {};
+
+                for (let i = 0; i < 10; i++) {
+                    let row = this.generaterow();
+                    data[i] = row;
+                }
+                return data;
+            }
+
+            this.source = {
+                localdata: generatedata(10),
+                datatype: 'local',
+                datafields: [
+                    { name: 'firstname', type: 'string' },
+                    { name: 'lastname', type: 'string' },
+                    { name: 'productname', type: 'string' },
+                    { name: 'quantity', type: 'number' },
+                    { name: 'price', type: 'number' },
+                    { name: 'total', type: 'number' }
+                ]
+            }
+        },
+        methods: {
+            rendertoolbar: function (toolbar) {
+                let container = document.createElement('div');
+                container.style.margin = '5px';
+
+                let buttonContainer1 = document.createElement('div');
+                let buttonContainer2 = document.createElement('div');
+                let buttonContainer3 = document.createElement('div');
+                let buttonContainer4 = document.createElement('div');
+
+                buttonContainer1.id = 'buttonContainer1';
+                buttonContainer2.id = 'buttonContainer2';
+                buttonContainer3.id = 'buttonContainer3';
+                buttonContainer4.id = 'buttonContainer4';
+
+                buttonContainer1.style.cssText = 'float: left';
+                buttonContainer2.style.cssText = 'float: left; margin-left: 5px';
+                buttonContainer3.style.cssText = 'float: left; margin-left: 5px';
+                buttonContainer4.style.cssText = 'float: left; margin-left: 5px';
+
+                container.appendChild(buttonContainer1);
+                container.appendChild(buttonContainer2);
+                container.appendChild(buttonContainer3);
+                container.appendChild(buttonContainer4);
+                toolbar[0].appendChild(container);
+
+                let addRowButton = jqwidgets.createInstance('#buttonContainer1', 'jqxButton', { width: 105, value: 'Add New Row' });
+                let addMultipleRowsButton = jqwidgets.createInstance('#buttonContainer2', 'jqxButton', { width: 170, value: 'Add Multiple New Rows' });
+                let deleteRowButton = jqwidgets.createInstance('#buttonContainer3', 'jqxButton', { width: 150, value: 'Delete Selected Row' });
+                let updateRowButton = jqwidgets.createInstance('#buttonContainer4', 'jqxButton', { width: 155, value: 'Update Selected Row' });
+
+                addRowButton.addEventHandler('click', () => {
+                    let datarow = this.generaterow();
+                    this.$refs.myGrid.addrow(null, datarow);
+                });
+
+                addMultipleRowsButton.addEventHandler('click', () => {
+                    this.$refs.myGrid.beginupdate();
+                    for (let i = 0; i < 10; i++) {
+                        let datarow = this.generaterow();
+                        this.$refs.myGrid.addrow(null, datarow);
+                    }
+                    this.$refs.myGrid.endupdate();
+                });
+
+                deleteRowButton.addEventHandler('click', () => {
+                    let selectedrowindex = this.$refs.myGrid.getselectedrowindex();
+                    let rowscount = this.$refs.myGrid.getdatainformation().rowscount;
+                    if (selectedrowindex >= 0 && selectedrowindex < parseFloat(rowscount)) {
+                        let id = this.$refs.myGrid.getrowid(selectedrowindex);
+                        this.$refs.myGrid.deleterow(id);
+                    }
+                });
+
+                updateRowButton.addEventHandler('click', () => {
+                    let datarow = this.generaterow();
+                    let selectedrowindex = this.$refs.myGrid.getselectedrowindex();
+                    let rowscount = this.$refs.myGrid.getdatainformation().rowscount;
+                    if (selectedrowindex >= 0 && selectedrowindex < parseFloat(rowscount)) {
+                        let id = this.$refs.myGrid.getrowid(selectedrowindex);
+                        this.$refs.myGrid.updaterow(id, datarow);
+                        this.$refs.myGrid.ensurerowvisible(selectedrowindex);
+                    }
+                });
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/createremoveupdate/main.js b/grid/createremoveupdate/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/createremoveupdate/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/createremoveupdate/package.json b/grid/createremoveupdate/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/createremoveupdate/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/customaggregates/App.vue b/grid/customaggregates/App.vue
new file mode 100644
index 00000000..246918b3
--- /dev/null
+++ b/grid/customaggregates/App.vue
@@ -0,0 +1,59 @@
+<template>
+    <JqxGrid ref="myGrid"
+             :width="getWidth" :source="dataAdapter" :columns="columns"
+             :showstatusbar="true" :altrows="true" :showaggregates="true"
+             :statusbarheight="25">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 150 },
+                    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 150 },
+                    { text: 'Product', datafield: 'productname', width: 200 },
+                    { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'right', cellsformat: 'n2' },
+                    {
+                        text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2',
+                        aggregates: [{
+                            '<b>Total</b>': (aggregatedValue, currentValue, column, record) => {
+                                let total = currentValue * parseInt(record['quantity']);
+                                return aggregatedValue + total;
+                            }
+                        }]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(200, false),
+                datatype: 'array',
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' }
+                    ],
+                updaterow: (rowid, rowdata, commit) => {
+                    // synchronize with the server - send update command
+                    commit(true);
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/customaggregates/main.js b/grid/customaggregates/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/customaggregates/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/customaggregates/package.json b/grid/customaggregates/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/customaggregates/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/customcolumneditor/App.vue b/grid/customcolumneditor/App.vue
new file mode 100644
index 00000000..30376ece
--- /dev/null
+++ b/grid/customcolumneditor/App.vue
@@ -0,0 +1,170 @@
+<template>
+    <JqxGrid ref="myGrid"
+             :width="getWidth" :source="dataAdapter" :columns="columns"
+             :editable="true" :selectionmode="'singlecell'">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'First Name', columntype: 'template', datafield: 'firstname', width: 80,
+                        createeditor: (row, cellvalue, editor, cellText, width, height) => {
+                            // construct the editor.
+                            let container = document.createElement('input');
+                            container.className = 'firstName';
+                            container.style.border = 'none';
+                            editor[0].appendChild(container);
+
+                            let options = {
+                                width: width, height: height,
+                                displayMember: 'firstname',
+                                source: this.getEditorDataAdapter('firstname')
+                            };
+
+                            this.input = jqwidgets.createInstance('.firstName', 'jqxInput', options);
+                        },
+                        initeditor: (row, cellvalue, editor, celltext, pressedkey) => {
+                            // set the editor's current value. The callback is called each time the editor is displayed.
+                            if (pressedkey) {
+                                this.input.val(pressedkey);
+                                this.input.selectLast();
+                            }
+                            else {
+                                this.input.val(cellvalue);
+                                this.input.selectAll();
+                            }
+                        },
+                        geteditorvalue: (row, cellvalue, editor) => {
+                            // return the editor's value
+                            return this.input.val();
+                        }
+                    },
+                    {
+                        text: 'Last Name', datafield: 'lastname', columntype: 'template', width: 80, createeditor: (row, cellvalue, editor, cellText, width, height) => {
+                            // construct the editor.
+                            let container = document.createElement('input');
+                            editor[0].appendChild(container);
+                            container.className = 'lastName';
+                            container.style.border = 'none';
+                            editor[0].appendChild(container);
+
+                            let options = {
+                                width: width, height: height,
+                                displayMember: 'lastname',
+                                source: this.getEditorDataAdapter('lastname')
+                            };
+
+                            this.input = jqwidgets.createInstance('.lastName', 'jqxInput', options);
+                        },
+                        initeditor: (row, cellvalue, editor, celltext, pressedkey) => {
+                            // set the editor's current value. The callback is called each time the editor is displayed.
+                            if (pressedkey) {
+                                this.input.val(pressedkey);
+                                this.input.selectLast();
+                            }
+                            else {
+                                this.input.val(cellvalue);
+                                this.input.selectAll();
+                            }
+                        },
+                        geteditorvalue: (row, cellvalue, editor) => {
+                            // return the editor's value.
+                            return this.input.val();
+                        }
+                    },
+                    {
+                        text: 'Products', columntype: 'template', datafield: 'productname',
+                        createeditor: (row, cellvalue, editor, cellText, width, height) => {
+                            editor.css('border', 'none');
+                            // construct the editor.
+                            editor.jqxDropDownList({
+                                checkboxes: true, source: this.getEditorDataAdapter('productname'), displayMember: 'productname', valueMember: 'productname', width: width, height: height,
+                                selectionRenderer: () => {
+                                    return '<span style="top: 4px; position: relative;">Please Choose:</span>';
+                                }
+                            });
+                        },
+                        initeditor: (row, cellvalue, editor, celltext, pressedkey) => {
+                            // set the editor's current value. The callback is called each time the editor is displayed.
+                            let items = editor.jqxDropDownList('getItems');
+                            editor.jqxDropDownList('uncheckAll');
+                            let values = cellvalue.split(/,\s*/);
+                            for (let j = 0; j < values.length; j++) {
+                                for (let i = 0; i < items.length; i++) {
+                                    if (items[i].label === values[j]) {
+                                        editor.jqxDropDownList('checkIndex', i);
+                                    }
+                                }
+                            }
+                        },
+                        geteditorvalue: (row, cellvalue, editor) => {
+                            // return the editor's value.
+                            return editor.val();
+                        }
+                    },
+                    {
+                        text: 'Quantity', width: 200, columntype: 'custom', datafield: 'quantity',
+                        createeditor: (row, cellvalue, editor, cellText, width, height) => {
+                            // construct the editor.
+                            editor.css('margin-top', '2px');
+                            editor.jqxSlider({ step: 1, mode: 'fixed', showTicks: false, min: 0, max: 30, width: width, height: height });
+                        },
+                        initeditor: (row, cellvalue, editor, celltext, pressedkey) => {
+                            // set the editor's current value. The callback is called each time the editor is displayed.
+                            let value = parseInt(cellvalue);
+                            if (isNaN(value)) value = 0;
+                            editor.jqxSlider('setValue', value);
+                        },
+                        geteditorvalue: (row, cellvalue, editor) => {
+                            // return the editor's value.
+                            return editor.val();
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(200, false),
+                datatype: 'array',
+                updaterow: (rowid, rowdata, commit) => {
+                    // synchronize with the server - send update command
+                    // call commit with parameter true if the synchronization with the server is successful
+                    // and with parameter false if the synchronization failder.
+                    commit(true);
+                },
+                datafields:
+                [
+                    { name: 'firstname', type: 'string' },
+                    { name: 'lastname', type: 'string' },
+                    { name: 'productname', type: 'string' },
+                    { name: 'available', type: 'bool' },
+                    { name: 'quantity', type: 'number' },
+                    { name: 'price', type: 'number' },
+                    { name: 'date', type: 'date' }
+                ]
+            };
+
+            this.input;
+        },
+        methods: {
+            getEditorDataAdapter: function (datafield) {
+                let dataAdapter = new jqx.dataAdapter(this.source, { uniqueDataFields: [datafield] });
+                return dataAdapter;
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/grid/customcolumneditor/main.js b/grid/customcolumneditor/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/customcolumneditor/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/customcolumneditor/package.json b/grid/customcolumneditor/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/customcolumneditor/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/customcomboboxcolumn/App.vue b/grid/customcomboboxcolumn/App.vue
new file mode 100644
index 00000000..fb91e453
--- /dev/null
+++ b/grid/customcomboboxcolumn/App.vue
@@ -0,0 +1,180 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid" @cellselect="myGridOnCellSelect($event)" @cellendedit="myGridOnCellEndEdit($event)"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :editable="true" :autoheight="true" :selectionmode="'singlecell'">
+        </JqxGrid>
+
+        <div ref="eventLog" style="font-size: 13px; margin-top: 20px; font-family: Verdana"></div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'Country', datafield: 'countryCode', displayfield: 'Country', columntype: 'combobox',
+                        createeditor: (row, value, editor) => {
+                            editor.jqxComboBox({ source: this.countriesAdapter, displayMember: 'label', valueMember: 'value' });
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const countries = [
+                { value: 'AF', label: 'Afghanistan' },
+                { value: 'AL', label: 'Albania' },
+                { value: 'DZ', label: 'Algeria' },
+                { value: 'AR', label: 'Argentina' },
+                { value: 'AM', label: 'Armenia' },
+                { value: 'AU', label: 'Australia' },
+                { value: 'AT', label: 'Austria' },
+                { value: 'AZ', label: 'Azerbaijan' },
+                { value: 'BS', label: 'Bahamas' },
+                { value: 'BH', label: 'Bahrain' },
+                { value: 'BD', label: 'Bangladesh' },
+                { value: 'BB', label: 'Barbados' },
+                { value: 'BY', label: 'Belarus' },
+                { value: 'BE', label: 'Belgium' },
+                { value: 'BZ', label: 'Belize' },
+                { value: 'BJ', label: 'Benin' },
+                { value: 'BM', label: 'Bermuda' },
+                { value: 'BR', label: 'Brazil' },
+                { value: 'BN', label: 'Brunei' },
+                { value: 'BG', label: 'Bulgaria' },
+                { value: 'CM', label: 'Cameroon' },
+                { value: 'CA', label: 'Canada' },
+                { value: 'CL', label: 'Chile' },
+                { value: 'CN', label: 'China' },
+                { value: 'CO', label: 'Columbia' },
+                { value: 'CR', label: 'Costa Rica' },
+                { value: 'HR', label: 'Croatia (Hrvatska)' },
+                { value: 'CU', label: 'Cuba' },
+                { value: 'CY', label: 'Cyprus' },
+                { value: 'CZ', label: 'Czech Republic' },
+                { value: 'DK', label: 'Denmark' },
+                { value: 'TP', label: 'East Timor' },
+                { value: 'EC', label: 'Ecuador' },
+                { value: 'EG', label: 'Egypt' },
+                { value: 'ER', label: 'Eritrea' },
+                { value: 'EE', label: 'Estonia' },
+                { value: 'ET', label: 'Ethiopia' },
+                { value: 'FI', label: 'Finland' },
+                { value: 'FR', label: 'France' },
+                { value: 'DE', label: 'Germany' },
+                { value: 'GR', label: 'Greece' },
+                { value: 'HK', label: 'Hong Kong' },
+                { value: 'HU', label: 'Hungary' },
+                { value: 'IS', label: 'Iceland' },
+                { value: 'IN', label: 'India' },
+                { value: 'ID', label: 'Indonesia' },
+                { value: 'IR', label: 'Iran' },
+                { value: 'IQ', label: 'Iraq' },
+                { value: 'IE', label: 'Ireland' },
+                { value: 'IL', label: 'Israel' },
+                { value: 'IT', label: 'Italy' },
+                { value: 'JM', label: 'Jamaica' },
+                { value: 'JP', label: 'Japan' },
+                { value: 'MX', label: 'Mexico' },
+                { value: 'MC', label: 'Monaco' },
+                { value: 'MA', label: 'Morocco' },
+                { value: 'NL', label: 'Netherlands' },
+                { value: 'NZ', label: 'New Zealand' },
+                { value: 'NE', label: 'Niger' },
+                { value: 'NG', label: 'Nigeria' },
+                { value: 'KP', label: 'North Korea' },
+                { value: 'NO', label: 'Norway' },
+                { value: 'PA', label: 'Panama' },
+                { value: 'PE', label: 'Peru' },
+                { value: 'PH', label: 'Philippines' },
+                { value: 'PL', label: 'Poland' },
+                { value: 'PT', label: 'Portugal' },
+                { value: 'RO', label: 'Romania' },
+                { value: 'RU', label: 'Russia' },
+                { value: 'SA', label: 'Saudi Arabia' },
+                { value: 'SK', label: 'Slovak Republic' },
+                { value: 'SI', label: 'Slovenia' },
+                { value: 'ZA', label: 'South Africa' },
+                { value: 'KR', label: 'South Korea' },
+                { value: 'ES', label: 'Spain' },
+                { value: 'SE', label: 'Sweden' },
+                { value: 'CH', label: 'Switzerland' },
+                { value: 'TN', label: 'Tunisia' },
+                { value: 'TR', label: 'Turkey' },
+                { value: 'UA', label: 'Ukraine' },
+                { value: 'AE', label: 'United Arab Emirates' },
+                { value: 'UK', label: 'United Kingdom' },
+                { value: 'US', label: 'United States' }
+            ];
+
+            const countriesSource = {
+                datatype: 'array',
+                datafields: [
+                    { name: 'label', type: 'string' },
+                    { name: 'value', type: 'string' }
+                ],
+                localdata: countries
+            };
+
+            this.countriesAdapter = new jqx.dataAdapter(countriesSource, { autoBind: true });
+
+            this.source = {
+                datatype: 'array',
+                localdata:
+                    [
+                        { countryCode: 'UK' },
+                        { countryCode: 'US' },
+                        { countryCode: 'DE' },
+                        { countryCode: 'FR' },
+                        { countryCode: 'IN' },
+                        { countryCode: 'HK' }
+                    ],
+                datafields: [
+                    // name - determines the field's name.
+                    // value - the field's value in the data source.
+                    // values - specifies the field's values.
+                    // values.source - specifies the foreign source. The expected value is an array.
+                    // values.value - specifies the field's value in the foreign source.
+                    // values.name - specifies the field's name in the foreign source.
+                    // When the adapter is loaded, each record will have a field called 'Country'. The 'Country' for each record comes from the countriesAdapter where the record's 'countryCode' from gridAdapter matches to the 'value' from countriesAdapter.
+                    { name: 'Country', value: 'countryCode', values: { source: this.countriesAdapter.records, value: 'value', name: 'label' } },
+                    { name: 'countryCode', type: 'string' }
+                ]
+            };
+        },
+        methods: {
+            myGridOnCellSelect: function (event) {
+                let column = this.$refs.myGrid.getcolumn(event.args.datafield);
+                let value = this.$refs.myGrid.getcellvalue(event.args.rowindex, column.datafield);
+                let displayValue = this.$refs.myGrid.getcellvalue(event.args.rowindex, column.displayfield);
+                this.$refs.eventLog.innerHTML = '<div>Selected Cell<br/>Row: ' + event.args.rowindex + ', Column: ' + column.text + ', Value: ' + value + ', Label: ' + displayValue + '</div>';
+            },
+            myGridOnCellEndEdit: function (event) {
+                let column = this.$refs.myGrid.getcolumn(event.args.datafield);
+                let container = this.$refs.eventLog;
+                if (column.displayfield != column.datafield) {
+                    container.innerHTML = '<div>Cell Edited:<br/>Index: ' + event.args.rowindex + ', Column: ' + column.text + '<br/>Value: ' + event.args.value.value + ', Label: ' + event.args.value.label
+                        + '<br/>Old Value: ' + event.args.oldvalue.value + ', Old Label: ' + event.args.oldvalue.label + '</div>';
+                }
+                else {
+                    container.innerHTML = '<div>Cell Edited:<br/>Row: ' + event.args.rowindex + ', Column: ' + column.text + '<br/>Value: ' + event.args.value
+                        + '<br/>Old Value: ' + event.args.oldvalue + '</div>';
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/customcomboboxcolumn/main.js b/grid/customcomboboxcolumn/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/customcomboboxcolumn/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/customcomboboxcolumn/package.json b/grid/customcomboboxcolumn/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/customcomboboxcolumn/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/customdropdownlistcolumn/App.vue b/grid/customdropdownlistcolumn/App.vue
new file mode 100644
index 00000000..44731524
--- /dev/null
+++ b/grid/customdropdownlistcolumn/App.vue
@@ -0,0 +1,180 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid" @cellselect="myGridOnCellSelect($event)" @cellendedit="myGridOnCellEndEdit($event)"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :editable="true" :autoheight="true" :selectionmode="'singlecell'">
+        </JqxGrid>
+
+        <div ref="eventLog" style="font-size: 13px; margin-top: 20px; font-family: Verdana"></div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'Country', datafield: 'countryCode', displayfield: 'Country', columntype: 'dropdownlist',
+                        createeditor: (row, value, editor) => {
+                            editor.jqxDropDownList({ width: '99%', height: 27, source: this.countriesAdapter, displayMember: 'label', valueMember: 'value' });
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const countries = [
+                { value: 'AF', label: 'Afghanistan' },
+                { value: 'AL', label: 'Albania' },
+                { value: 'DZ', label: 'Algeria' },
+                { value: 'AR', label: 'Argentina' },
+                { value: 'AM', label: 'Armenia' },
+                { value: 'AU', label: 'Australia' },
+                { value: 'AT', label: 'Austria' },
+                { value: 'AZ', label: 'Azerbaijan' },
+                { value: 'BS', label: 'Bahamas' },
+                { value: 'BH', label: 'Bahrain' },
+                { value: 'BD', label: 'Bangladesh' },
+                { value: 'BB', label: 'Barbados' },
+                { value: 'BY', label: 'Belarus' },
+                { value: 'BE', label: 'Belgium' },
+                { value: 'BZ', label: 'Belize' },
+                { value: 'BJ', label: 'Benin' },
+                { value: 'BM', label: 'Bermuda' },
+                { value: 'BR', label: 'Brazil' },
+                { value: 'BN', label: 'Brunei' },
+                { value: 'BG', label: 'Bulgaria' },
+                { value: 'CM', label: 'Cameroon' },
+                { value: 'CA', label: 'Canada' },
+                { value: 'CL', label: 'Chile' },
+                { value: 'CN', label: 'China' },
+                { value: 'CO', label: 'Columbia' },
+                { value: 'CR', label: 'Costa Rica' },
+                { value: 'HR', label: 'Croatia (Hrvatska)' },
+                { value: 'CU', label: 'Cuba' },
+                { value: 'CY', label: 'Cyprus' },
+                { value: 'CZ', label: 'Czech Republic' },
+                { value: 'DK', label: 'Denmark' },
+                { value: 'TP', label: 'East Timor' },
+                { value: 'EC', label: 'Ecuador' },
+                { value: 'EG', label: 'Egypt' },
+                { value: 'ER', label: 'Eritrea' },
+                { value: 'EE', label: 'Estonia' },
+                { value: 'ET', label: 'Ethiopia' },
+                { value: 'FI', label: 'Finland' },
+                { value: 'FR', label: 'France' },
+                { value: 'DE', label: 'Germany' },
+                { value: 'GR', label: 'Greece' },
+                { value: 'HK', label: 'Hong Kong' },
+                { value: 'HU', label: 'Hungary' },
+                { value: 'IS', label: 'Iceland' },
+                { value: 'IN', label: 'India' },
+                { value: 'ID', label: 'Indonesia' },
+                { value: 'IR', label: 'Iran' },
+                { value: 'IQ', label: 'Iraq' },
+                { value: 'IE', label: 'Ireland' },
+                { value: 'IL', label: 'Israel' },
+                { value: 'IT', label: 'Italy' },
+                { value: 'JM', label: 'Jamaica' },
+                { value: 'JP', label: 'Japan' },
+                { value: 'MX', label: 'Mexico' },
+                { value: 'MC', label: 'Monaco' },
+                { value: 'MA', label: 'Morocco' },
+                { value: 'NL', label: 'Netherlands' },
+                { value: 'NZ', label: 'New Zealand' },
+                { value: 'NE', label: 'Niger' },
+                { value: 'NG', label: 'Nigeria' },
+                { value: 'KP', label: 'North Korea' },
+                { value: 'NO', label: 'Norway' },
+                { value: 'PA', label: 'Panama' },
+                { value: 'PE', label: 'Peru' },
+                { value: 'PH', label: 'Philippines' },
+                { value: 'PL', label: 'Poland' },
+                { value: 'PT', label: 'Portugal' },
+                { value: 'RO', label: 'Romania' },
+                { value: 'RU', label: 'Russia' },
+                { value: 'SA', label: 'Saudi Arabia' },
+                { value: 'SK', label: 'Slovak Republic' },
+                { value: 'SI', label: 'Slovenia' },
+                { value: 'ZA', label: 'South Africa' },
+                { value: 'KR', label: 'South Korea' },
+                { value: 'ES', label: 'Spain' },
+                { value: 'SE', label: 'Sweden' },
+                { value: 'CH', label: 'Switzerland' },
+                { value: 'TN', label: 'Tunisia' },
+                { value: 'TR', label: 'Turkey' },
+                { value: 'UA', label: 'Ukraine' },
+                { value: 'AE', label: 'United Arab Emirates' },
+                { value: 'UK', label: 'United Kingdom' },
+                { value: 'US', label: 'United States' }
+            ];
+
+            const countriesSource = {
+                datatype: 'array',
+                datafields: [
+                    { name: 'label', type: 'string' },
+                    { name: 'value', type: 'string' }
+                ],
+                localdata: countries
+            };
+
+            this.countriesAdapter = new jqx.dataAdapter(countriesSource, { autoBind: true });
+
+            this.source = {
+                datatype: 'array',
+                localdata:
+                    [
+                        { countryCode: 'UK' },
+                        { countryCode: 'US' },
+                        { countryCode: 'DE' },
+                        { countryCode: 'FR' },
+                        { countryCode: 'IN' },
+                        { countryCode: 'HK' }
+                    ],
+                datafields: [
+                    // name - determines the field's name.
+                    // value - the field's value in the data source.
+                    // values - specifies the field's values.
+                    // values.source - specifies the foreign source. The expected value is an array.
+                    // values.value - specifies the field's value in the foreign source.
+                    // values.name - specifies the field's name in the foreign source.
+                    // When the adapter is loaded, each record will have a field called 'Country'. The 'Country' for each record comes from the countriesAdapter where the record's 'countryCode' from gridAdapter matches to the 'value' from countriesAdapter.
+                    { name: 'Country', value: 'countryCode', values: { source: this.countriesAdapter.records, value: 'value', name: 'label' } },
+                    { name: 'countryCode', type: 'string' }
+                ]
+            };
+        },
+        methods: {
+            myGridOnCellSelect: function (event) {
+                let column = this.$refs.myGrid.getcolumn(event.args.datafield);
+                let value = this.$refs.myGrid.getcellvalue(event.args.rowindex, column.datafield);
+                let displayValue = this.$refs.myGrid.getcellvalue(event.args.rowindex, column.displayfield);
+                this.$refs.eventLog.innerHTML = '<div>Selected Cell<br/>Row: ' + event.args.rowindex + ', Column: ' + column.text + ', Value: ' + value + ', Label: ' + displayValue + '</div>';
+            },
+            myGridOnCellEndEdit: function (event) {
+                let column = this.$refs.myGrid.getcolumn(event.args.datafield);
+                let container = this.$refs.eventLog;
+                if (column.displayfield != column.datafield) {
+                    container.innerHTML = '<div>Cell Edited:<br/>Index: ' + event.args.rowindex + ', Column: ' + column.text + '<br/>Value: ' + event.args.value.value + ', Label: ' + event.args.value.label
+                        + '<br/>Old Value: ' + event.args.oldvalue.value + ', Old Label: ' + event.args.oldvalue.label + '</div>';
+                }
+                else {
+                    container.innerHTML = '<div>Cell Edited:<br/>Row: ' + event.args.rowindex + ', Column: ' + column.text + '<br/>Value: ' + event.args.value
+                        + '<br/>Old Value: ' + event.args.oldvalue + '</div>';
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/customdropdownlistcolumn/main.js b/grid/customdropdownlistcolumn/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/customdropdownlistcolumn/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/customdropdownlistcolumn/package.json b/grid/customdropdownlistcolumn/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/customdropdownlistcolumn/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/customfiltermenu/App.vue b/grid/customfiltermenu/App.vue
new file mode 100644
index 00000000..78a590cb
--- /dev/null
+++ b/grid/customfiltermenu/App.vue
@@ -0,0 +1,209 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+        <JqxGrid ref="myGrid" @filter="myGridOnFilter()"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :sortable="true" :filterable="true"
+                 :autoshowfiltericon="true" :columnmenuopening="columnmenuopening">
+        </JqxGrid>
+
+        <div style="margin-top: 30px">
+            <div style="width: 200px; float: left; margin-right: 10px">
+
+                <JqxButton :height="22" @click="removeFilterBtnOnClick()">Remove Filter</JqxButton>
+
+                <JqxCheckBox @change="filterBackgroundCheckBoxOnChange($event)"
+                             :height="25" :checked="true">
+                    Filter Background
+                </JqxCheckBox>
+
+                <JqxCheckBox :height="25" @change="filterIconsCheckBoxOnChange($event)">
+                    Show All Filter Icons
+                </JqxCheckBox>
+
+            </div>
+            <div style="float: left">
+                Event Log:
+
+                <JqxPanel ref="myPanel" :width="300" :height="80"></JqxPanel>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxButton,
+            JqxCheckBox,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'First Name', datafield: 'firstname', width: 160,
+                        filtertype: 'custom',
+                        createfilterpanel: (datafield, filterPanel) => {
+                            this.buildFilterPanel(filterPanel, datafield);
+                        }
+                    },
+                    {
+                        text: 'Last Name', datafield: 'lastname',
+                        filtertype: 'custom',
+                        createfilterpanel: (datafield, filterPanel) => {
+                            this.buildFilterPanel(filterPanel, datafield);
+                        },
+                        width: 160
+                    },
+                    { text: 'Product', datafield: 'productname', filtertype: 'checkedlist', width: 170 },
+                    { text: 'Order Date', datafield: 'date', filtertype: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },
+                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(500, false),
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        },
+        methods: {
+            buildFilterPanel: function (filterPanel, datafield) {
+
+                let inputContainer = document.createElement('input');
+                inputContainer.id = 'inputContainer';
+                inputContainer.style.margin = '5px';
+
+                let buttonsContainer = document.createElement('div');
+                buttonsContainer.className = 'filter';
+                Object.assign(buttonsContainer.style, { height: '25px', marginLeft: '20px', marginTop: '7px' })
+
+                let filterButtonContainer = document.createElement('div');
+                let filterClearButtonContainer = document.createElement('div');
+
+                filterButtonContainer.style.cssText = 'margin-left: 16px; float: left';
+                filterClearButtonContainer.style.cssText = 'margin-left: 12px; float: left';
+
+                filterButtonContainer.id = 'filterButtonContainer';
+                filterClearButtonContainer.id = 'filterClearButtonContainer';
+
+                buttonsContainer.appendChild(filterButtonContainer);
+                buttonsContainer.appendChild(filterClearButtonContainer);
+
+                filterPanel[0].appendChild(inputContainer);
+                filterPanel[0].appendChild(buttonsContainer);
+
+                let filterButtonOptions = { width: 45, height: 25, value: 'Filter' };
+                let filterButton = jqwidgets.createInstance('#filterButtonContainer', 'jqxButton', filterButtonOptions);
+
+                let filterClearButtonOptions = { width: 45, height: 25, value: 'Clear' };
+                let filterClearButton = jqwidgets.createInstance('#filterClearButtonContainer', 'jqxButton', filterClearButtonOptions);
+
+                let dataSource =
+                    {
+                        localdata: this.dataAdapter.records,
+                        datatype: 'array',
+                        async: false
+                    }
+                let dataadapter = new jqx.dataAdapter(dataSource,
+                    {
+                        autoBind: false,
+                        autoSort: true,
+                        autoSortField: datafield,
+                        async: false,
+                        uniqueDataFields: [datafield]
+                    });
+
+                let column = this.$refs.myGrid.getcolumn(datafield);
+
+                let inputOptions = {
+                    width: 175, height: 20, source: dataadapter,
+                    displayMember: 'datafield', popupZIndex: 99999,
+                    placeHolder: `Enter ${column.text}`
+                };
+
+                let input = jqwidgets.createInstance('#inputContainer', 'jqxInput', inputOptions);
+
+                filterButton.addEventHandler('click', () => {
+                    let filtergroup = new jqx.filter();
+                    let filter_or_operator = 1;
+                    let filtervalue = input.val();
+                    let filtercondition = 'contains';
+                    let filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
+                    filtergroup.addfilter(filter_or_operator, filter1);
+                    // add the filters.
+                    this.$refs.myGrid.addfilter(datafield, filtergroup);
+                    // apply the filters.
+                    this.$refs.myGrid.applyfilters();
+                    this.$refs.myGrid.closemenu();
+                });
+
+                filterClearButton.addEventHandler('click', () => {
+                    this.$refs.myGrid.removefilter(datafield, false);
+                    // apply the filters.
+                    this.$refs.myGrid.applyfilters();
+                    this.$refs.myGrid.closemenu();
+                });
+            },
+            columnmenuopening: function (menu, datafield, height) {
+                let column = this.$refs.myGrid.getcolumn(datafield);
+                if (column.filtertype === 'custom') {
+                    menu.height(155);
+                    setTimeout(() => {
+                        menu.find('input').focus();
+                    }, 25);
+                }
+                else menu.height(height);
+            },
+            myGridOnFilter: function () {
+                this.$refs.myPanel.clearcontent();
+                let filterinfo = this.$refs.myGrid.getfilterinformation();
+                let eventData = 'Triggered "filter" event';
+                for (let i = 0; i < filterinfo.length; i++) {
+                    let eventData = 'Filter Column: ' + filterinfo[i].filtercolumntext;
+                    this.$refs.myPanel.prepend('<div style="margin-top: 5px;">' + eventData + '</div>');
+                }
+            },
+            removeFilterBtnOnClick: function () {
+                this.$refs.myGrid.clearfilters();
+            },
+            filterBackgroundCheckBoxOnChange: function (event) {
+                this.$refs.myGrid.showfiltercolumnbackground = event.args.checked;
+            },
+            filterIconsCheckBoxOnChange: function (event) {
+                this.$refs.myGrid.autoshowfiltericon = !event.args.checked;
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        width: fit-content;
+        padding-bottom: 0;
+    }
+
+    .jqx-panel {
+        border: none;
+    }
+</style>
\ No newline at end of file
diff --git a/grid/customfiltermenu/main.js b/grid/customfiltermenu/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/customfiltermenu/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/customfiltermenu/package.json b/grid/customfiltermenu/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/customfiltermenu/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/customizededitors/App.vue b/grid/customizededitors/App.vue
new file mode 100644
index 00000000..d70f1074
--- /dev/null
+++ b/grid/customizededitors/App.vue
@@ -0,0 +1,75 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+
+        <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :pageable="true" :autoheight="true" :editable="true"
+                 :selectionmode="'singlecell'">
+        </JqxGrid>
+
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'Ship City', datafield: 'ShipCity', width: 150, columntype: 'combobox',
+                        createeditor: (row, column, editor) => {
+                            // assign a new data source to the combobox.
+                            let list = ['Stuttgart', 'Rio de Janeiro', 'Strasbourg'];
+                            editor.jqxComboBox({ autoDropDownHeight: true, source: list, promptText: 'Please Choose:' });
+                        },
+                        // update the editor's value before saving it.
+                        cellvaluechanging: (row, column, columntype, oldvalue, newvalue) => {
+                            // return the old value, if the new value is empty.
+                            if (newvalue == '') return oldvalue;
+                        }
+                    },
+                    {
+                        text: 'Ship Country', datafield: 'ShipCountry', width: 150, columntype: 'dropdownlist',
+                        createeditor: (row, column, editor) => {
+                            // assign a new data source to the dropdownlist.
+                            let list = ['Germany', 'Brazil', 'France'];
+                            editor.jqxDropDownList({ autoDropDownHeight: true, source: list });
+                        },
+                        // update the editor's value before saving it.
+                        cellvaluechanging: (row, column, columntype, oldvalue, newvalue) => {
+                            // return the old value, if the new value is empty.
+                            if (newvalue == '') return oldvalue;
+                        }
+                    },
+                    { text: 'Ship Name', datafield: 'ShipName', columntype: 'combobox' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
+                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:OrderID',
+                url: '../sampledata/orders.xml'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/customizededitors/main.js b/grid/customizededitors/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/customizededitors/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/customizededitors/package.json b/grid/customizededitors/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/customizededitors/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/customkeyboardnavigation/App.vue b/grid/customkeyboardnavigation/App.vue
new file mode 100644
index 00000000..e74f4a5a
--- /dev/null
+++ b/grid/customkeyboardnavigation/App.vue
@@ -0,0 +1,57 @@
+<template>
+
+    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+             :columnsresize="true" :editable="true" :editmode="'selectedcell'"
+             :selectionmode="'singlecell'" :handlekeyboardnavigation="handlekeyboardnavigation">
+    </JqxGrid>
+
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Date', datafield: 'Date', cellsformat: 'D', width: 250 },
+                    { text: 'S&P 500', datafield: 'S&P 500', width: 300, cellsformat: 'f' },
+                    { text: 'NASDAQ', datafield: 'NASDAQ', cellsformat: 'f' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'csv',
+                datafields: [
+                    { name: 'Date', type: 'date' },
+                    { name: 'S&P 500', type: 'float' },
+                    { name: 'NASDAQ', type: 'float' }
+                ],
+                url: '../sampledata/nasdaq_vs_sp500.txt'
+            };
+        },
+        methods: {
+            handlekeyboardnavigation: function (event) {
+                let key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
+                if (key == 13) {
+                    alert('Pressed Enter Key.');
+                    return true;
+                }
+                else if (key == 27) {
+                    alert('Pressed Esc Key.');
+                    return true;
+                }
+                return false;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/customkeyboardnavigation/main.js b/grid/customkeyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/customkeyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/customkeyboardnavigation/package.json b/grid/customkeyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/customkeyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/customlistitemswithkeyvalue/App.vue b/grid/customlistitemswithkeyvalue/App.vue
new file mode 100644
index 00000000..5efe6433
--- /dev/null
+++ b/grid/customlistitemswithkeyvalue/App.vue
@@ -0,0 +1,217 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid" @filter="myGridOnFilter()"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :filterable="true" :showfilterrow="true">
+        </JqxGrid>
+
+        <div ref="eventLog" style="font-size: 13px; width: 800px; max-width: 800px; overflow: auto; margin-top: 20px; font-family: Verdana"></div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'Country', filtertype: 'list',
+                        filteritems: new jqx.dataAdapter(this.countriesSource), datafield: 'countryCode', displayfield: 'Country',
+                        createfilterwidget: (column, htmlElement, editor) => {
+                            editor.jqxDropDownList({ displayMember: 'label', valueMember: 'value' });
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const countries = [
+                { value: 'AF', label: 'Afghanistan' },
+                { value: 'AL', label: 'Albania' },
+                { value: 'DZ', label: 'Algeria' },
+                { value: 'AR', label: 'Argentina' },
+                { value: 'AM', label: 'Armenia' },
+                { value: 'AU', label: 'Australia' },
+                { value: 'AT', label: 'Austria' },
+                { value: 'AZ', label: 'Azerbaijan' },
+                { value: 'BS', label: 'Bahamas' },
+                { value: 'BH', label: 'Bahrain' },
+                { value: 'BD', label: 'Bangladesh' },
+                { value: 'BB', label: 'Barbados' },
+                { value: 'BY', label: 'Belarus' },
+                { value: 'BE', label: 'Belgium' },
+                { value: 'BZ', label: 'Belize' },
+                { value: 'BJ', label: 'Benin' },
+                { value: 'BM', label: 'Bermuda' },
+                { value: 'BR', label: 'Brazil' },
+                { value: 'BN', label: 'Brunei' },
+                { value: 'BG', label: 'Bulgaria' },
+                { value: 'CM', label: 'Cameroon' },
+                { value: 'CA', label: 'Canada' },
+                { value: 'CL', label: 'Chile' },
+                { value: 'CN', label: 'China' },
+                { value: 'CO', label: 'Columbia' },
+                { value: 'CR', label: 'Costa Rica' },
+                { value: 'HR', label: 'Croatia (Hrvatska)' },
+                { value: 'CU', label: 'Cuba' },
+                { value: 'CY', label: 'Cyprus' },
+                { value: 'CZ', label: 'Czech Republic' },
+                { value: 'DK', label: 'Denmark' },
+                { value: 'TP', label: 'East Timor' },
+                { value: 'EC', label: 'Ecuador' },
+                { value: 'EG', label: 'Egypt' },
+                { value: 'ER', label: 'Eritrea' },
+                { value: 'EE', label: 'Estonia' },
+                { value: 'ET', label: 'Ethiopia' },
+                { value: 'FI', label: 'Finland' },
+                { value: 'FR', label: 'France' },
+                { value: 'DE', label: 'Germany' },
+                { value: 'GR', label: 'Greece' },
+                { value: 'HK', label: 'Hong Kong' },
+                { value: 'HU', label: 'Hungary' },
+                { value: 'IS', label: 'Iceland' },
+                { value: 'IN', label: 'India' },
+                { value: 'ID', label: 'Indonesia' },
+                { value: 'IR', label: 'Iran' },
+                { value: 'IQ', label: 'Iraq' },
+                { value: 'IE', label: 'Ireland' },
+                { value: 'IL', label: 'Israel' },
+                { value: 'IT', label: 'Italy' },
+                { value: 'JM', label: 'Jamaica' },
+                { value: 'JP', label: 'Japan' },
+                { value: 'MX', label: 'Mexico' },
+                { value: 'MC', label: 'Monaco' },
+                { value: 'MA', label: 'Morocco' },
+                { value: 'NL', label: 'Netherlands' },
+                { value: 'NZ', label: 'New Zealand' },
+                { value: 'NE', label: 'Niger' },
+                { value: 'NG', label: 'Nigeria' },
+                { value: 'KP', label: 'North Korea' },
+                { value: 'NO', label: 'Norway' },
+                { value: 'PA', label: 'Panama' },
+                { value: 'PE', label: 'Peru' },
+                { value: 'PH', label: 'Philippines' },
+                { value: 'PL', label: 'Poland' },
+                { value: 'PT', label: 'Portugal' },
+                { value: 'RO', label: 'Romania' },
+                { value: 'RU', label: 'Russia' },
+                { value: 'SA', label: 'Saudi Arabia' },
+                { value: 'SK', label: 'Slovak Republic' },
+                { value: 'SI', label: 'Slovenia' },
+                { value: 'ZA', label: 'South Africa' },
+                { value: 'KR', label: 'South Korea' },
+                { value: 'ES', label: 'Spain' },
+                { value: 'SE', label: 'Sweden' },
+                { value: 'CH', label: 'Switzerland' },
+                { value: 'TN', label: 'Tunisia' },
+                { value: 'TR', label: 'Turkey' },
+                { value: 'UA', label: 'Ukraine' },
+                { value: 'AE', label: 'United Arab Emirates' },
+                { value: 'UK', label: 'United Kingdom' },
+                { value: 'US', label: 'United States' }
+            ];
+
+            this.countriesSource = {
+                datatype: 'array',
+                datafields: [
+                    { name: 'label', type: 'string' },
+                    { name: 'value', type: 'string' }
+                ],
+                localdata: countries
+            };
+
+            const countriesAdapter = new jqx.dataAdapter(this.countriesSource, { autoBind: true });
+
+            this.source = {
+                datatype: 'array',
+                localdata:
+                    [
+                        { countryCode: 'UK' },
+                        { countryCode: 'US' },
+                        { countryCode: 'DE' },
+                        { countryCode: 'FR' },
+                        { countryCode: 'UA' },
+                        { countryCode: 'CH' },
+                        { countryCode: 'ES' },
+                        { countryCode: 'TR' },
+                        { countryCode: 'PL' },
+                        { countryCode: 'NO' },
+                        { countryCode: 'CZ' },
+                        { countryCode: 'RU' },
+                        { countryCode: 'BG' },
+                        { countryCode: 'MX' },
+                        { countryCode: 'DK' },
+                        { countryCode: 'SE' },
+                        { countryCode: 'ZA' },
+                        { countryCode: 'CN' },
+                        { countryCode: 'HU' },
+                        { countryCode: 'RO' },
+                        { countryCode: 'JP' },
+                        { countryCode: 'PA' },
+                        { countryCode: 'MC' },
+                        { countryCode: 'IN' },
+                        { countryCode: 'HK' }
+                    ],
+                datafields: [
+                    // name - determines the field's name.
+                    // value - the field's value in the data source.
+                    // values - specifies the field's values.
+                    // values.source - specifies the foreign source. The expected value is an array.
+                    // values.value - specifies the field's value in the foreign source.
+                    // values.name - specifies the field's name in the foreign source.
+                    // When the adapter is loaded, each record will have a field called 'Country'. The 'Country' for each record comes from the countriesAdapter where the record's 'countryCode' from gridAdapter matches to the 'value' from countriesAdapter.
+                    { name: 'Country', type: 'string', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } },
+                    { name: 'countryCode', type: 'string' }
+                ]
+            };
+        },
+        methods: {
+            myGridOnFilter: function () {
+                // get filter information.
+                let filterInformation = this.$refs.myGrid.getfilterinformation();
+                let filterdata = {};
+                let filterslength = 0;
+                let data = {};
+                for (let x = 0; x < filterInformation.length; x++) {
+                    // column's data field.
+                    let filterdatafield = filterInformation[x].datafield;
+                    // column's filter group.
+                    let filterGroup = filterInformation[x].filter;
+                    // column's filters.
+                    let filters = filterGroup.getfilters();
+                    // filter group's operator.
+                    data[filterdatafield + 'operator'] = filterGroup.operator;
+                    for (let m = 0; m < filters.length; m++) {
+                        filters[m].datafield = filterdatafield;
+                        // filter's value.
+                        let filtervalue = filters[m].value;
+                        data['filtervalue' + filterslength] = filtervalue.toString();
+                        // filter's id.
+                        if (filters[m].id) {
+                            data['filterid' + filterslength] = filters[m].id.toString();
+                        }
+                        // filter's condition.
+                        data['filtercondition' + filterslength] = filters[m].condition;
+                        // filter's operator.
+                        data['filteroperator' + filterslength] = filters[m].operator;
+                        // filter's data field.
+                        data['filterdatafield' + filterslength] = filterdatafield;
+                        filterslength++;
+                    }
+                }
+                this.$refs.eventLog.innerHTML = JSON.stringify(data);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/customlistitemswithkeyvalue/main.js b/grid/customlistitemswithkeyvalue/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/customlistitemswithkeyvalue/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/customlistitemswithkeyvalue/package.json b/grid/customlistitemswithkeyvalue/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/customlistitemswithkeyvalue/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/customroweditor/App.vue b/grid/customroweditor/App.vue
new file mode 100644
index 00000000..05baa2e9
--- /dev/null
+++ b/grid/customroweditor/App.vue
@@ -0,0 +1,102 @@
+<template>
+
+    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+             :autoheight="true" :editable="true" :selectionmode="'singlecell'">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', pinned: true, editable: false, datafield: 'Name', width: 150 },
+                    {
+                        text: 'Boston', columntype: 'custom', datafield: 'Boston', width: 150,
+                        createeditor: this.createGridEditor, initeditor: this.initGridEditor, geteditorvalue: this.gridEditorValue
+                    },
+                    {
+                        text: 'Berlin', columntype: 'custom', datafield: 'Berlin', width: 150,
+                        createeditor: this.createGridEditor, initeditor: this.initGridEditor, geteditorvalue: this.gridEditorValue
+                    },
+                    {
+                        text: 'London', columntype: 'custom', datafield: 'London',
+                        createeditor: this.createGridEditor, initeditor: this.initGridEditor, geteditorvalue: this.gridEditorValue
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const data = [
+                { 'Name': 'Population', 'Berlin': '3560154', 'Boston': '3406829', 'London': '8174100' },
+                { 'Name': 'Country', 'Berlin': 'Germany', 'Boston': 'United States', 'London': 'United Kingdom' },
+                { 'Name': 'Capital', 'Berlin': 'true', 'Boston': 'false', 'London': 'true' }
+            ];
+
+            this.source = {
+                localdata: data,
+                datatype: 'array',
+                updaterow: (rowid, rowdata, commit) => {
+                    // synchronize with the server - send update command
+                    // call commit with parameter true if the synchronization with the server is successful
+                    // and with parameter false if the synchronization failder.
+                    commit(true);
+                },
+                datafields:
+                    [
+                        { name: 'Name', type: 'string' },
+                        { name: 'Berlin', type: 'string' },
+                        { name: 'Boston', type: 'string' },
+                        { name: 'London', type: 'string' }
+                    ]
+            };
+        },
+        methods: {
+            createGridEditor: function (row, cellValue, editor, cellText, width, height) {
+                // construct the editor.
+                if (row == 0) {
+                    editor.jqxNumberInput({ decimalDigits: 0, inputMode: 'simple', width: width, height: height, spinButtons: true });
+                }
+                else if (row == 1) {
+                    editor.jqxDropDownList({ autoDropDownHeight: true, width: width, height: height, source: ['United States', 'Germany', 'United Kingdom'] });
+                }
+                else if (row == 2) {
+                    let element = $('<div tabIndex=0 style="position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -10px;"></div>');
+                    editor.append(element);
+                    element.jqxCheckBox({ animationShowDelay: 0, animationHideDelay: 0, width: 18, height: 18 });
+                }
+            },
+            initGridEditor: function (row, cellValue, editor, cellText, width, height) {
+                // set the editor's current value. The callback is called each time the editor is displayed.
+                if (row == 0) {
+                    editor.jqxNumberInput({ decimal: parseInt(cellValue) });
+                }
+                else if (row == 1) {
+                    editor.jqxDropDownList('selectItem', cellValue);
+                }
+                else if (row == 2) {
+                    var checkBoxHTMLElement = editor.find('div:first');
+                    checkBoxHTMLElement.jqxCheckBox({ checked: cellValue.toString() == "true" });
+                }
+            },
+            gridEditorValue: function (row, cellValue, editor) {
+                if (row == 2) {
+                    var checkBoxHTMLElement = editor.find('div:first');
+                    return checkBoxHTMLElement.val();
+                }
+                return editor.val();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/customroweditor/main.js b/grid/customroweditor/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/customroweditor/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/customroweditor/package.json b/grid/customroweditor/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/customroweditor/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/customsorting/App.vue b/grid/customsorting/App.vue
new file mode 100644
index 00000000..7645cf33
--- /dev/null
+++ b/grid/customsorting/App.vue
@@ -0,0 +1,102 @@
+<template>
+
+    <JqxGrid ref="myGrid"
+             :width="getWidth" :source="dataAdapter" :columns="columns"
+             :pageable="true" :sortable="true" :autoheight="true" :ready="ready">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', datafield: 'firstname', width: 200 },
+                    { text: 'Last Name', datafield: 'lastname', width: 200 },
+                    { text: 'Product', datafield: 'productname', width: 180 },
+                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
+                    { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const data = generatedata(100, false);
+
+            const compare = (value1, value2) => {
+                value1 = String(value1).toLowerCase();
+                value2 = String(value2).toLowerCase();
+                try {
+                    let tmpvalue1 = parseFloat(value1);
+                    if (isNaN(tmpvalue1)) {
+                        if (value1 < value2) { return -1; }
+                        if (value1 > value2) { return 1; }
+                    }
+                    else {
+                        let tmpvalue2 = parseFloat(value2);
+                        if (tmpvalue1 < tmpvalue2) { return -1; }
+                        if (tmpvalue1 > tmpvalue2) { return 1; }
+                    }
+                }
+                catch (error) {
+                    let er = error;
+                }
+                return 0;
+            };
+
+            const customsortfunc = (column, direction) => {
+                let sortdata = new Array();
+                if (direction == 'ascending') direction = true;
+                if (direction == 'descending') direction = false;
+                if (direction != null) {
+                    for (let i = 0; i < data.length; i++) {
+                        sortdata.push(data[i]);
+                    }
+                }
+                else sortdata = data;
+                let tmpToString = Object.prototype.toString;
+                Object.prototype.toString = (typeof column == 'function') ? column : () => { return this[column] };
+                if (direction != null) {
+                    sortdata.sort(compare);
+                    if (!direction) {
+                        sortdata.reverse();
+                    }
+                }
+                this.source.localdata = sortdata;
+                this.$refs.myGrid.updatebounddata('sort');
+                Object.prototype.toString = tmpToString;
+            };
+
+            this.source = {
+                localdata: data,
+                sort: customsortfunc,
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'total', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myGrid.sortby('firstname', 'asc');
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/customsorting/main.js b/grid/customsorting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/customsorting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/customsorting/package.json b/grid/customsorting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/customsorting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/dataexport/App.vue b/grid/dataexport/App.vue
new file mode 100644
index 00000000..188d7239
--- /dev/null
+++ b/grid/dataexport/App.vue
@@ -0,0 +1,98 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :sortable="true" :altrows="true" :selectionmode="'multiplecellsadvanced'">
+        </JqxGrid>
+
+        <div style="margin-top: 20px">
+            <div style="float: left">
+                <JqxButton @click="excelBtnOnClick()">Export to Excel</JqxButton>
+                <br /><br />
+                <JqxButton @click="xmlBtnOnClick()">Export to XML</JqxButton>
+            </div>
+            <div style="float: left; margin-left: 10px">
+                <JqxButton @click="csvBtnOnClick()">Export to CSV</JqxButton>
+                <br /><br />
+                <JqxButton @click="tsvBtnOnClick()">Export to TSV</JqxButton>
+            </div>
+            <div style="float: left; margin-left: 10px">
+                <JqxButton @click="htmlBtnOnClick()">Export to HTML</JqxButton>
+                <br /><br />
+                <JqxButton @click="jsonBtnOnClick()">Export to JSON</JqxButton>
+            </div>
+            <div style="float: left; margin-left: 10px">
+                <JqxButton @click="pdfBtnOnClick()">Export to PDF</JqxButton>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', datafield: 'firstname', width: 130 },
+                    { text: 'Last Name', datafield: 'lastname', width: 130 },
+                    { text: 'Product', datafield: 'productname', width: 200 },
+                    { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellsalign: 'center', align: 'center' },
+                    { text: 'Ship Date', datafield: 'date', width: 120, align: 'right', cellsalign: 'right', cellsformat: 'd' },
+                    { text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right' },
+                    { text: 'Price', datafield: 'price', cellsalign: 'right', align: 'right', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(100, false),
+                datatype: 'array',
+                datafields: [
+                    { name: 'firstname', type: 'string' },
+                    { name: 'lastname', type: 'string' },
+                    { name: 'productname', type: 'string' },
+                    { name: 'available', type: 'bool' },
+                    { name: 'date', type: 'date' },
+                    { name: 'quantity', type: 'number' },
+                    { name: 'price', type: 'number' }
+                ]
+            };
+        },
+        methods: {
+            excelBtnOnClick: function () {
+                this.$refs.myGrid.exportdata('xls', 'jqxGrid');
+            },
+            xmlBtnOnClick: function () {
+                this.$refs.myGrid.exportdata('xml', 'jqxGrid');
+            },
+            csvBtnOnClick: function () {
+                this.$refs.myGrid.exportdata('csv', 'jqxGrid');
+            },
+            tsvBtnOnClick: function () {
+                this.$refs.myGrid.exportdata('tsv', 'jqxGrid');
+            },
+            htmlBtnOnClick: function () {
+                this.$refs.myGrid.exportdata('html', 'jqxGrid');
+            },
+            jsonBtnOnClick: function () {
+                this.$refs.myGrid.exportdata('json', 'jqxGrid');
+            },
+            pdfBtnOnClick: function () {
+                this.$refs.myGrid.exportdata('pdf', 'jqxGrid');
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/dataexport/main.js b/grid/dataexport/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/dataexport/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/dataexport/package.json b/grid/dataexport/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/dataexport/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/dataprinting/App.vue b/grid/dataprinting/App.vue
new file mode 100644
index 00000000..0d383600
--- /dev/null
+++ b/grid/dataprinting/App.vue
@@ -0,0 +1,80 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :sortable="true" :altrows="true" :autoheight="true"
+                 :selectionmode="'multiplecellsadvanced'">
+        </JqxGrid>
+
+        <div style="margin-top: 20px">
+            <div style="margin-left: 10px; float: left">
+
+                <JqxButton @click="btnOnClick()">Print</JqxButton>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', datafield: 'firstname', width: 120 },
+                    { text: 'Last Name', datafield: 'lastname', width: 120 },
+                    { text: 'Product', datafield: 'productname', width: 177 },
+                    { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellsalign: 'center', align: 'center' },
+                    { text: 'Ship Date', datafield: 'date', width: 120, align: 'right', cellsalign: 'right', cellsformat: 'd' },
+                    { text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right' },
+                    { text: 'Price', datafield: 'price', cellsalign: 'right', align: 'right', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(10),
+                datatype: 'array',
+                datafields: [
+                    { name: 'firstname', type: 'string' },
+                    { name: 'lastname', type: 'string' },
+                    { name: 'productname', type: 'string' },
+                    { name: 'available', type: 'bool' },
+                    { name: 'date', type: 'date' },
+                    { name: 'quantity', type: 'number' },
+                    { name: 'price', type: 'number' }
+                ]
+            };
+        },
+        methods: {
+            btnOnClick: function () {
+                let gridContent = this.$refs.myGrid.exportdata('html');
+                let newWindow = window.open('', '', 'width=800, height=500'),
+                    document = newWindow.document.open(),
+                    pageContent =
+                        '<!DOCTYPE html>\n' +
+                        '<html>\n' +
+                        '<head>\n' +
+                        '<meta charset="utf-8" />\n' +
+                        '<title>jQWidgets Grid</title>\n' +
+                        '        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>\n' +
+                        '<body>\n' + gridContent + '\n</body>\n</html>';
+                document.write(pageContent);
+                document.close();
+                newWindow.print();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/dataprinting/main.js b/grid/dataprinting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/dataprinting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/dataprinting/package.json b/grid/dataprinting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/dataprinting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/daterangefilter/App.vue b/grid/daterangefilter/App.vue
new file mode 100644
index 00000000..2dbcd2ee
--- /dev/null
+++ b/grid/daterangefilter/App.vue
@@ -0,0 +1,59 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :showfilterrow="true" :filterable="true"
+                 :selectionmode="'multiplecellsadvanced'">
+        </JqxGrid>
+
+        <div style="margin-top: 20px">
+
+
+            <JqxButton @click="btnOnClick()" :width="150">Remove Filter</JqxButton>
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', columntype: 'textbox', filtercondition: 'starts_with', datafield: 'name', width: '30%' },
+                    { text: 'Range', datafield: 'range', filtertype: 'range', cellsalign: 'right', width: '35%', cellsformat: 'd' },
+                    { text: 'Date', datafield: 'date', filtertype: 'date', cellsalign: 'right', width: '35%', cellsformat: 'd' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(500, false),
+                datafields: [
+                    { name: 'name', type: 'string' },
+                    { name: 'productname', type: 'string' },
+                    { name: 'available', type: 'bool' },
+                    { name: 'date', type: 'date' },
+                    { name: 'range', map: 'date', type: 'date' },
+                    { name: 'quantity', type: 'number' }
+                ],
+                datatype: 'array'
+            };
+        },
+        methods: {
+            btnOnClick: function () {
+                this.$refs.myGrid.clearfilters();
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/grid/daterangefilter/main.js b/grid/daterangefilter/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/daterangefilter/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/daterangefilter/package.json b/grid/daterangefilter/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/daterangefilter/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/defaultfunctionality/App.vue b/grid/defaultfunctionality/App.vue
new file mode 100644
index 00000000..de3e210e
--- /dev/null
+++ b/grid/defaultfunctionality/App.vue
@@ -0,0 +1,62 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+             :pageable="true" :autoheight="true" :sortable="true"
+             :altrows="true" :enabletooltip="true" :editable="true"
+             :selectionmode="'multiplecellsadvanced'" :columngroups="columngroups">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
+                    { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right' },
+                    { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2' },
+                    { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: this.cellsrenderer, width: 100 },
+                    { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', align: 'center' }
+                ],
+                columngroups: [
+                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ProductName', type: 'string' },
+                    { name: 'QuantityPerUnit', type: 'int' },
+                    { name: 'UnitPrice', type: 'float' },
+                    { name: 'UnitsInStock', type: 'float' },
+                    { name: 'Discontinued', type: 'bool' }
+                ],
+                root: 'Products',
+                record: 'Product',
+                id: 'ProductID',
+                url: '../sampledata/products.xml'
+            };
+        },
+        methods: {
+            cellsrenderer: function (row, columnsfield, value, defaulthtml, columnproperties, rowdata) {
+                if (value < 20) {
+                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
+                }
+                else {
+                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/defaultfunctionality/main.js b/grid/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/defaultfunctionality/package.json b/grid/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/deferedscrolling/App.vue b/grid/deferedscrolling/App.vue
new file mode 100644
index 00000000..dee64cff
--- /dev/null
+++ b/grid/deferedscrolling/App.vue
@@ -0,0 +1,100 @@
+<template>
+    <JqxGrid :width="getWidth" :height="380" :source="dataAdapter" :columns="columns"
+             :altrows="true" :sortable="true" :rowsheight="115"
+             :scrollmode="'deferred'" :scrollfeedback="scrollfeedback">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'Image', datafield: 'pic', width: 115,
+                        cellsrenderer: (row, column, value) => {
+                            return '<img src="../../../images/t-shirts/' + value + '"/>';
+                        }
+                    },
+                    { text: 'Title', datafield: 'label', width: 250 },
+                    { text: 'Price', cellsformat: 'c2', datafield: 'price' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const products = [
+                {
+                    label: 'Retro Rock T-shirt',
+                    pic: 'black-retro-rock-band-guitar-controller.png',
+                    price: 15
+                },
+                {
+                    label: 'Lucky T-shirt',
+                    pic: 'bright-green-gettin-lucky-in-kentucky.png',
+                    price: 18
+                },
+                {
+                    label: 'Loading T-shirt',
+                    pic: 'brown-loading-bar-computer-geek.png',
+                    price: 25
+                },
+                {
+                    label: 'Cool Story T-shirt',
+                    pic: 'cool-story-bro.png',
+                    price: 20
+                },
+                {
+                    label: 'The beard T-shirt',
+                    pic: 'fear-the-beard.png',
+                    price: 17
+                },
+                {
+                    label: 'Don\'t care T-shirt',
+                    pic: 'honey-badger-don-t-care.png',
+                    price: 19
+                },
+                {
+                    label: 'Guitar T-shirt',
+                    pic: 'scott-pilgrim-red-rock-band.png',
+                    price: 24
+                },
+                {
+                    label: 'Dodgers T-shirt',
+                    pic: '2-sided-dodgers-bankrupt-t-shirt-ash.png',
+                    price: 21
+                },
+                {
+                    label: 'Misfits T-shirt',
+                    pic: 'misfits-sf-giants-white.png',
+                    price: 21
+                }
+            ];
+
+            this.source = {
+                datatype: 'array',
+                datafields: [
+                    { name: 'label', type: 'string' },
+                    { name: 'pic', type: 'string' },
+                    { name: 'price', type: 'number' }
+                ],
+                localdata: products
+            };
+        },
+        methods: {
+            scrollfeedback: function (row) {
+                return '<table style="height: 150px;"><tr><td><img src="../../../images/t-shirts/' + row.pic + '"/></td></tr><tr><td>' + row.label + '</td></tr></table>';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/deferedscrolling/main.js b/grid/deferedscrolling/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/deferedscrolling/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/deferedscrolling/package.json b/grid/deferedscrolling/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/deferedscrolling/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/deferedscrollingonalargedataset/App.vue b/grid/deferedscrollingonalargedataset/App.vue
new file mode 100644
index 00000000..4d25bb62
--- /dev/null
+++ b/grid/deferedscrollingonalargedataset/App.vue
@@ -0,0 +1,50 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+
+        <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :scrollmode="'deferred'" :deferreddatafields="['firstname', 'lastname', 'productname']">
+        </JqxGrid>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', datafield: 'firstname', width: 200 },
+                    { text: 'Last Name', datafield: 'lastname', width: 200 },
+                    { text: 'Product', datafield: 'productname', width: 180 },
+                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', datafield: 'price', width: 80, cellsalign: 'right', cellsformat: 'c2' },
+                    { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(2500, false),
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'total', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/deferedscrollingonalargedataset/main.js b/grid/deferedscrollingonalargedataset/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/deferedscrollingonalargedataset/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/deferedscrollingonalargedataset/package.json b/grid/deferedscrollingonalargedataset/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/deferedscrollingonalargedataset/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/disableeditingofrows/App.vue b/grid/disableeditingofrows/App.vue
new file mode 100644
index 00000000..e0f4864d
--- /dev/null
+++ b/grid/disableeditingofrows/App.vue
@@ -0,0 +1,111 @@
+<template>
+    <div>
+        <JqxGrid @cellbeginedit="myGridOnCellBeginEdit($event)" @cellendedit="myGridOnCellEndEdit($event)"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :editable="true" :selectionmode="'singlecell'">
+        </JqxGrid>
+        <div style="margin-top: 30px">
+            <div ref="cellBeginEditLog"></div>
+            <div ref="cellEndEditLog" style="margin-top: 10px"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80, cellbeginedit: this.cellbeginedit, cellsrenderer: this.cellsrenderer },
+                    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80, cellbeginedit: this.cellbeginedit, cellsrenderer: this.cellsrenderer },
+                    { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 190, cellbeginedit: this.cellbeginedit, cellsrenderer: this.cellsrenderer },
+                    { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellbeginedit: this.cellbeginedit },
+                    {
+                        text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, cellsalign: 'right', cellsformat: 'd', cellbeginedit: this.cellbeginedit,
+                        validation: (cell, value) => {
+                            let year = value.getFullYear();
+                            if (year >= 2015) {
+                                return { result: false, message: 'Ship Date should be before 1/1/2015' };
+                            }
+                            return true;
+                        }, cellsrenderer: this.cellsrenderer
+                    },
+                    {
+                        text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
+                        validation: (cell, value) => {
+                            if (value < 0 || value > 150) {
+                                return { result: false, message: 'Quantity should be in the 0-150 interval' };
+                            }
+                            return true;
+                        },
+                        initeditor: (row, cellvalue, editor) => {
+                            editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
+                        }, cellbeginedit: this.cellbeginedit, cellsrenderer: this.cellsrenderer
+                    },
+                    {
+                        text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
+                        validation: (cell, value) => {
+                            if (value < 0 || value > 15) {
+                                return { result: false, message: 'Price should be in the 0-15 interval' };
+                            }
+                            return true;
+                        },
+                        initeditor: (row, cellvalue, editor) => {
+                            editor.jqxNumberInput({ digits: 3 });
+                        }, cellbeginedit: this.cellbeginedit, cellsrenderer: this.cellsrenderer
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(200, false),
+                datatype: 'array',
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'date', type: 'date' }
+                    ],
+                updaterow: (rowid, rowdata, commit) => {
+                    // synchronize with the server - send update command
+                    commit(true);
+                }
+            };
+        },
+        methods: {
+            cellbeginedit: function (row, datafield, columntype, value) {
+                if (row == 0 || row == 2 || row == 5) return false;
+            },
+            cellsrenderer: function (row, column, value, defaultHtml) {
+                if (row == 0 || row == 2 || row == 5) {
+                    let element = defaultHtml.substring(0, 61) + "; color: #999" + defaultHtml.substring(61);
+                    return element;
+                }
+                return defaultHtml;
+            },
+            myGridOnCellBeginEdit: function (event) {
+                let args = event.args;
+                this.$refs.cellBeginEditLog.innerHTML = 'Event Type: cellbeginedit, Column: ' + args.datafield + ', Row: ' + (1 + args.rowindex) + ', Value: ' + args.value;
+            },
+            myGridOnCellEndEdit: function (event) {
+                let args = event.args;
+                this.$refs.cellEndEditLog.innerHTML = 'Event Type: cellendedit, Column: ' + args.datafield + ', Row: ' + (1 + args.rowindex) + ', Value: ' + args.value;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/disableeditingofrows/main.js b/grid/disableeditingofrows/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/disableeditingofrows/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/disableeditingofrows/package.json b/grid/disableeditingofrows/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/disableeditingofrows/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/dragdrop/App.vue b/grid/dragdrop/App.vue
new file mode 100644
index 00000000..551091bb
--- /dev/null
+++ b/grid/dragdrop/App.vue
@@ -0,0 +1,123 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid1"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :pageable="true" :autoheight="true" :sortable="true"
+                 :rendered="rendered" :selectionmode="'singlecell'">
+        </JqxGrid>
+
+        <div style="margin-top: 20px"></div>
+
+        <JqxGrid ref="myGrid2"
+                 :width="getWidth" :source="source2" :columns="columns2"
+                 :autoheight="true" :selectionmode="'singlecell'">
+        </JqxGrid>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxDragDrop from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', dataField: 'firstname', width: 300 },
+                    { text: 'Last Name', dataField: 'lastname', width: 300 },
+                    { text: 'Product', dataField: 'productname' }
+                ],
+                source2: {
+                    totalrecords: 10,
+                    unboundmode: true,
+                    datafields:
+                        [
+                            { name: 'firstname' },
+                            { name: 'lastname' },
+                            { name: 'productname' }
+                        ]
+                },
+                columns2: [
+                    { text: 'First Name', dataField: 'firstname', width: 300 },
+                    { text: 'Last Name', dataField: 'lastname', width: 300 },
+                    { text: 'Product', dataField: 'productname' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(100, false),
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' }
+                    ],
+                datatype: 'array'
+            };
+        },
+        methods: {
+            rendered: function (type) {
+                // Initialize the DragDrop plug-in. Set it's drop target to the second Grid.
+                let options = {
+                    revert: true,
+                    dragZIndex: 99999,
+                    appendTo: 'body',
+                    dropAction: 'none',
+                    initFeedback: (feedback) => {
+                        feedback.height(25);
+                    }
+                };
+
+                let uglyGridDragDropCells = jqwidgets.createInstance('.jqx-grid-cell', 'jqxDragDrop', options);
+                let flattenGridDragDropCells = flatten(uglyGridDragDropCells);
+
+                function flatten(arr) {
+                    return arr.reduce((flat, toFlatten) => {
+                        return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
+                    }, []);
+                }
+
+                // Add Event Handlers
+                for (let i = 0; i < flattenGridDragDropCells.length; i++) {
+                    // Disable revert when the dragged cell is over the second Grid.
+                    flattenGridDragDropCells[i].addEventHandler('dropTargetEnter', () => {
+                        flattenGridDragDropCells[i].revert = false;
+                    });
+
+                    // Enable revert when the dragged cell is outside the second Grid.
+                    flattenGridDragDropCells[i].addEventHandler('dropTargetLeave', () => {
+                        flattenGridDragDropCells[i].revert = true;
+                    });
+
+                    // initialize the dragged object.
+                    flattenGridDragDropCells[i].addEventHandler('dragStart', (event) => {
+                        let value = event.target.innerHTML;
+                        let position = jqx.position(event.args);
+                        let cell = this.$refs.myGrid1.getcellatposition(position.left, position.top);
+                        flattenGridDragDropCells[i].data = { value: value };
+                    });
+
+                    // Set the new cell value when the dragged cell is dropped over the second Grid.
+                    flattenGridDragDropCells[i].addEventHandler('dragEnd', (event) => {
+                        let value = event.target.innerHTML;
+                        value = value.slice(0, 37) + value.slice(62);
+                        let position = jqx.position(event.args);
+                        let cell = this.$refs.myGrid2.getcellatposition(position.left, position.top);
+                        if (typeof cell !== 'boolean') {
+                            this.$refs.myGrid2.setcellvalue(cell.row, (cell.column).toString(), value);
+                        }
+                    });
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/dragdrop/main.js b/grid/dragdrop/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/dragdrop/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/dragdrop/package.json b/grid/dragdrop/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/dragdrop/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/dropdowngrid/App.vue b/grid/dropdowngrid/App.vue
new file mode 100644
index 00000000..b8f0d4a5
--- /dev/null
+++ b/grid/dropdowngrid/App.vue
@@ -0,0 +1,64 @@
+<template>
+    <JqxDropDownButton ref="myDropDownButton" :width="150" :height="25">
+
+        <JqxGrid ref="myGrid" @rowselect="myGridOnRowSelect($event)"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :pageable="true" :columnsresize="true" :autoheight="true">
+        </JqxGrid>
+
+    </JqxDropDownButton>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxDropDownButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxDropDownButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', columntype: 'textbox', datafield: 'firstname' },
+                    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox' },
+                    { text: 'Product', columntype: 'dropdownlist', datafield: 'productname' },
+                    { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right' },
+                    { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(100, false),
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        },
+        mounted: function () {
+            this.$refs.myGrid.selectrow(0);
+            this.myGridOnRowSelect({ args: { rowindex: 0 } });
+        },
+        methods: {
+            myGridOnRowSelect: function (event) {
+                let args = event.args;
+                let row = this.$refs.myGrid.getrowdata(args.rowindex);
+                let dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['firstname'] + ' ' + row['lastname'] + '</div>';
+                this.$refs.myDropDownButton.setContent(dropDownContent);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/dropdowngrid/main.js b/grid/dropdowngrid/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/dropdowngrid/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/dropdowngrid/package.json b/grid/dropdowngrid/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/dropdowngrid/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/dynamiccolumns/App.vue b/grid/dynamiccolumns/App.vue
new file mode 100644
index 00000000..64449d98
--- /dev/null
+++ b/grid/dynamiccolumns/App.vue
@@ -0,0 +1,59 @@
+<template>
+    <JqxGrid ref="myGrid"
+             :width="getWidth" :columnsresize="true">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid')
+            }
+        },
+        beforeCreate: function () {
+
+            const source = {
+                datatype: 'json',
+                url: '../sampledata/rows_and_columns.txt'
+            };
+
+            const dataAdapter = new jqx.dataAdapter(source, {
+                autoBind: true,
+                downloadComplete: (data) => {
+                    let columns = data[0].columns;
+                    let rows = data[1].rows;
+                    let gridAdapter = new jqx.dataAdapter({
+                        datafields: [
+                            { name: 'id', type: 'number' },
+                            { name: 'name', type: 'string' },
+                            { name: 'type', type: 'string' },
+                            { name: 'calories', type: 'int' },
+                            { name: 'totalfat', type: 'string' },
+                            { name: 'protein', type: 'string' }
+                        ],
+                        id: 'id',
+                        localdata: rows
+                    });
+
+                    this.$refs.myGrid.hideloadelement();
+                    this.$refs.myGrid.beginupdate();
+                    this.$refs.myGrid.setOptions
+                        ({
+                            source: gridAdapter,
+                            columns: columns
+                        });
+                    this.$refs.myGrid.endupdate();
+                }
+            });
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/dynamiccolumns/main.js b/grid/dynamiccolumns/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/dynamiccolumns/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/dynamiccolumns/package.json b/grid/dynamiccolumns/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/dynamiccolumns/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/editing/App.vue b/grid/editing/App.vue
new file mode 100644
index 00000000..67d25fd6
--- /dev/null
+++ b/grid/editing/App.vue
@@ -0,0 +1,102 @@
+<template>
+    <div>
+        <JqxGrid @cellbeginedit="cellBeginEditEvent($event)" @cellendedit="cellEndEditEvent($event)"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :editable="true" :enabletooltips="true" :selectionmode="'multiplecellsadvanced'">
+        </JqxGrid>
+
+        <div style="font-size: 12px; font-family: Verdana; margin-top: 30px;">
+            <div ref="beginEdit"></div>
+            <div ref="endEdit" style="margin-top: 10px;"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 120 },
+                    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 120 },
+                    { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
+                    { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
+                    {
+                        text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
+                        validation: (cell, value) => {
+                            if (value == '')
+                                return true;
+
+                            let year = value.getFullYear();
+                            if (year >= 2017) {
+                                return { result: false, message: 'Ship Date should be before 1/1/2017' };
+                            }
+
+                            return true;
+                        }
+                    },
+                    {
+                        text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right', columntype: 'numberinput',
+                        validation: (cell, value) => {
+                            if (value < 0 || value > 150) {
+                                return { result: false, message: 'Quantity should be in the 0-150 interval' };
+                            }
+                            return true;
+                        },
+                        createeditor: (row, cellvalue, editor) => {
+                            editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
+                        }
+                    },
+                    {
+                        text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
+                        validation: (cell, value) => {
+                            if (value < 0 || value > 15) {
+                                return { result: false, message: 'Price should be in the 0-15 interval' };
+                            }
+                            return true;
+                        },
+                        createeditor: (row, cellvalue, editor) => {
+                            editor.jqxNumberInput({ digits: 3 });
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(500, false),
+                datatype: 'array',
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'date', type: 'date' }
+                    ]
+            };
+        },
+        methods: {
+            cellBeginEditEvent: function (event) {
+                let args = event.args;
+                this.$refs.beginEdit.innerHTML = 'Event Type: cellbeginedit, Column: ' + args.datafield + ', Row: ' + (1 + args.rowindex) + ', Value: ' + args.value;
+            },
+            cellEndEditEvent: function (event) {
+                let args = event.args;
+                this.$refs.endEdit.innerHTML = 'Event Type: cellendedit, Column: ' + args.datafield + ', Row: ' + (1 + args.rowindex) + ', Value: ' + args.value;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/editing/main.js b/grid/editing/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/editing/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/editing/package.json b/grid/editing/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/editing/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/editmodes/App.vue b/grid/editmodes/App.vue
new file mode 100644
index 00000000..a3eeabf8
--- /dev/null
+++ b/grid/editmodes/App.vue
@@ -0,0 +1,107 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :editable="true" :editmode="'click'" :selectionmode="'singlecell'">
+        </JqxGrid>
+
+
+        <div style="margin-top: 20px">
+            <div style="float: left; margin-top: 10px">
+                <span>Edit Mode:</span>
+
+                <JqxDropDownList ref="myDropDownList" @select="myDropDownListOnSelect($event)"
+                                 :width="150" :height="25" :selectedIndex="0"
+                                 :dropDownWidth="150" :autoDropDownHeight="true"
+                                 :source="['Click','Double-Click','Selected Cell Click']">
+                </JqxDropDownList>
+
+            </div>
+            <div style="float: left; margin-left: 20px; margin-top: 10px">
+                <span>Editable Columns:</span>
+                <div>
+                    <div style="float: left">
+
+                        <JqxCheckBox @change="firstnameOnChange($event)" :checked="true">First Name</JqxCheckBox>
+                        <JqxCheckBox @change="lastnameOnChange($event)" :checked="true">Last Name</JqxCheckBox>
+                        <JqxCheckBox @change="quantityOnChange($event)" :checked="true">Quantity</JqxCheckBox>
+
+                    </div>
+                    <div style="float: left; margin-left: 20px">
+
+                        <JqxCheckBox @change="productnameOnChange($event)" :checked="true">Product</JqxCheckBox>
+                        <JqxCheckBox @change="availableOnChange($event)" :checked="true">Available</JqxCheckBox>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxDropDownList,
+            JqxCheckBox
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
+                    { text: 'Last Name', datafield: 'lastname', width: 90 },
+                    { text: 'Product', datafield: 'productname' },
+                    { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right' },
+                    { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(200, false),
+                datatype: 'array',
+                datafields: [
+                    { name: 'firstname', type: 'string' },
+                    { name: 'lastname', type: 'string' },
+                    { name: 'productname', type: 'string' },
+                    { name: 'available', type: 'bool' },
+                    { name: 'quantity', type: 'number' },
+                    { name: 'price', type: 'number' }
+                ]
+            };
+        },
+        methods: {
+            myDropDownListOnSelect: function (event) {
+                let index = event.args.index;
+                let editMode = index == 0 ? 'click' : index == 1 ? 'dblclick' : 'selectedcell';
+                this.$refs.myGrid.editmode = editMode;
+            },
+            firstnameOnChange: function (event) {
+                this.$refs.myGrid.setcolumnproperty('firstname', 'editable', event.args.checked);
+            },
+            lastnameOnChange: function (event) {
+                this.$refs.myGrid.setcolumnproperty('lastname', 'editable', event.args.checked);
+            },
+            quantityOnChange: function (event) {
+                this.$refs.myGrid.setcolumnproperty('quantity', 'editable', event.args.checked);
+            },
+            productnameOnChange: function (event) {
+                this.$refs.myGrid.setcolumnproperty('productname', 'editable', event.args.checked);
+            },
+            availableOnChange: function (event) {
+                this.$refs.myGrid.setcolumnproperty('available', 'editable', event.args.checked);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/editmodes/main.js b/grid/editmodes/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/editmodes/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/editmodes/package.json b/grid/editmodes/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/editmodes/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/everpresentrowwithcolumns/App.vue b/grid/everpresentrowwithcolumns/App.vue
new file mode 100644
index 00000000..7d682f00
--- /dev/null
+++ b/grid/everpresentrowwithcolumns/App.vue
@@ -0,0 +1,48 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+             :showeverpresentrow="true" :editable="true" :filterable="true"
+             :everpresentrowposition="'top'" :everpresentrowactions="'add reset'"
+             :everpresentrowactionsmode="'columns'">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 },
+                    { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220 },
+                    { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd' },
+                    { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' },
+                    { text: '', datafield: 'addButtonColumn', width: 50 },
+                    { text: '', datafield: 'resetButtonColumn', width: 50 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(10, false),
+                datafields:
+                    [
+                        { name: 'name', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/everpresentrowwithcolumns/main.js b/grid/everpresentrowwithcolumns/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/everpresentrowwithcolumns/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/everpresentrowwithcolumns/package.json b/grid/everpresentrowwithcolumns/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/everpresentrowwithcolumns/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/everpresentrowwithcustomwidgets/App.vue b/grid/everpresentrowwithcustomwidgets/App.vue
new file mode 100644
index 00000000..9f9fa496
--- /dev/null
+++ b/grid/everpresentrowwithcustomwidgets/App.vue
@@ -0,0 +1,197 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :filterable="true" :showeverpresentrow="true" :editable="true"
+                 :everpresentrowposition="'top'" :everpresentrowactionsmode="'columns'"
+                 :selectionmode="'multiplecellsadvanced'">
+        </JqxGrid>
+
+        <br />
+
+        <JqxRadioButton @checked="topRadioBtnOnChecked()" :checked="true">Add New Row to Top</JqxRadioButton>
+        <JqxRadioButton @checked="bottomRadioBtnOnChecked()">Add New Row to Bottom</JqxRadioButton>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+    import JqxDropdownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+    import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
+    import JqxNumberInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxRadioButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215,
+                        createEverPresentRowWidget: (datafield, htmlElement, popup, addCallback) => {
+                            let container = document.createElement('input');
+                            container.id = 'myInput';
+                            container.style.border = 'none';
+                            htmlElement[0].appendChild(container);
+
+                            let options = {
+                                width: '100%', height: 30, source: this.getSourceAdapter('name'),
+                                popupZIndex: 999999, placeHolder: 'Enter Name: ', displayMember: 'name'
+                            };
+
+                            this.myInput = jqwidgets.createInstance('#myInput', 'jqxInput', options);
+
+                            return container;
+                        },
+                        initEverPresentRowWidget: (datafield, htmlElement) => {
+                        },
+                        getEverPresentRowWidgetValue: (datafield, htmlElement, validate) => {
+                            let value = this.myInput.val();
+                            return value;
+                        },
+                        resetEverPresentRowWidgetValue: (datafield, htmlElement) => {
+                            this.myInput.val('');
+                        }
+                    },
+                    {
+                        text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220,
+                        createEverPresentRowWidget: (datafield, htmlElement, popup, addCallback) => {
+                            let container = document.createElement('div');
+                            container.id = 'myDropDownList';
+                            container.style.border = 'none';
+                            htmlElement[0].appendChild(container);
+
+                            let options = {
+                                width: '100%', height: 30, source: this.getSourceAdapter('productname'),
+                                popupZIndex: 999999, placeHolder: 'Enter Product: ', displayMember: 'productname'
+                            };
+
+                            this.myDropDownList = jqwidgets.createInstance('#myDropDownList', 'jqxDropDownList', options);
+
+                            return container;
+                        },
+                        getEverPresentRowWidgetValue: (datafield, htmlElement, validate) => {
+                            let selectedItem = this.myDropDownList.getSelectedItem();
+                            if (!selectedItem)
+                                return '';
+                            let value = selectedItem.label;
+                            return value;
+                        },
+                        resetEverPresentRowWidgetValue: (datafield, htmlElement) => {
+                            this.myDropDownList.clearSelection();
+                        }
+                    },
+                    {
+                        text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd',
+                        createEverPresentRowWidget: (datafield, htmlElement, popup, addCallback) => {
+                            let container = document.createElement('div');
+                            container.id = 'myDateTimeInput';
+                            container.style.border = 'none';
+                            htmlElement[0].appendChild(container);
+
+                            let options = {
+                                width: '100%', height: 30, value: null,
+                                popupZIndex: 999999, placeHolder: 'Enter Date: '
+                            };
+
+                            this.myDateTimeInput = jqwidgets.createInstance('#myDateTimeInput', 'jqxDateTimeInput', options);
+
+                            return container;
+                        },
+                        initEverPresentRowWidget: (datafield, htmlElement) => {
+                        },
+                        getEverPresentRowWidgetValue: (datafield, htmlElement, validate) => {
+                            let value = this.myDateTimeInput.val();
+                            return value;
+                        },
+                        resetEverPresentRowWidgetValue: (datafield, htmlElement) => {
+                            this.myDateTimeInput.val(null);
+                        }
+                    },
+                    {
+                        text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right',
+                        createEverPresentRowWidget: (datafield, htmlElement, popup, addCallback) => {
+                            let container = document.createElement('div');
+                            container.id = 'myNumberInput';
+                            container.style.border = 'none';
+                            htmlElement[0].appendChild(container);
+
+                            let options = {
+                                width: '100%', height: 30, decimalDigits: 0, inputMode: 'simple'
+                            };
+
+                            this.myNumberInput = jqwidgets.createInstance('#myNumberInput', 'jqxNumberInput', options);
+
+                            return container;
+                        },
+                        initEverPresentRowWidget: (datafield, htmlElement) => {
+                        },
+                        getEverPresentRowWidgetValue: (datafield, htmlElement, validate) => {
+                            let value = this.myNumberInput.val();
+                            if (value == '') value = 0;
+                            return parseInt(value);
+                        },
+                        resetEverPresentRowWidgetValue: (datafield, htmlElement) => {
+                            this.myNumberInput.val('');
+                        }
+                    },
+                    { text: '', datafield: 'addButtonColumn', width: 50 },
+                    { text: '', datafield: 'resetButtonColumn', width: 50 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.source = {
+                localdata: generatedata(10, false),
+                datafields:
+                    [
+                        { name: 'name', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+
+            this.myInput;
+            this.myDropDownList;
+            this.myDateTimeInput;
+            this.myNumberInput;
+        },
+        methods: {
+            getSourceAdapter: function (name) {
+                let source =
+                    {
+                        localdata: generatedata(10, false),
+                        datafields:
+                            [
+                                { name: 'name', type: 'string' },
+                                { name: 'productname', type: 'string' }
+                            ],
+                        datatype: 'array'
+                    };
+                let fields = new Array();
+                fields.push(name);
+                let dataAdapter = new jqx.dataAdapter(source, { autoBind: true, autoSort: true, uniqueDataFields: fields, autoSortField: name });
+                return dataAdapter.records;
+            },
+            topRadioBtnOnChecked: function () {
+                this.$refs.myGrid.everpresentrowactions = 'add reset';
+            },
+            bottomRadioBtnOnChecked: function () {
+                this.$refs.myGrid.everpresentrowactions = 'addBottom reset';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/everpresentrowwithcustomwidgets/main.js b/grid/everpresentrowwithcustomwidgets/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/everpresentrowwithcustomwidgets/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/everpresentrowwithcustomwidgets/package.json b/grid/everpresentrowwithcustomwidgets/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/everpresentrowwithcustomwidgets/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/excellikefilter/App.vue b/grid/excellikefilter/App.vue
new file mode 100644
index 00000000..20eb704b
--- /dev/null
+++ b/grid/excellikefilter/App.vue
@@ -0,0 +1,49 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+             :filterable="true" :sortable="true" :columnsresize="true"
+             :autoshowfiltericon="true" :filtermode="'excel'">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Ship Name', datafield: 'ShipName', width: 250 },
+                    { text: 'Ship City', datafield: 'ShipCity', width: 250 },
+                    { text: 'Ship Country', datafield: 'ShipCountry', width: 200 },
+                    { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
+                    { text: 'Ship Address', datafield: 'ShipAddress', width: 350 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
+                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:OrderID',
+                url: '../sampledata/orders.xml'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/excellikefilter/main.js b/grid/excellikefilter/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/excellikefilter/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/excellikefilter/package.json b/grid/excellikefilter/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/excellikefilter/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/filterconditions/App.vue b/grid/filterconditions/App.vue
new file mode 100644
index 00000000..1e0bc3e7
--- /dev/null
+++ b/grid/filterconditions/App.vue
@@ -0,0 +1,171 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+
+        <JqxGrid ref="myGrid" @filter="myGridOnFilter($event)"
+                 :width="getWidth" :source="dataAdapter" :columns="columns" :ready="ready"
+                 :sortable="true" :filterable="true" :autoshowfiltericon="true"
+                 :updatefilterconditions="updatefilterconditions" :updatefilterpanel="updatefilterpanel">
+        </JqxGrid>
+
+        <div style="margin-top: 30px">
+            <div style="width: 200px; float: left; margin-right: 10px">
+
+                <JqxButton @click="clearFilteringBtnOnClick()" :height="22">Remove Filter</JqxButton>
+
+                <JqxCheckBox @change="filterBackgroundOnChange($event)" :height="25" :checked="true">Filter Background</JqxCheckBox>
+
+                <JqxCheckBox @change="filterIconsOnChange($event)" :height="25">Show All Filter Icons</JqxCheckBox>
+
+            </div>
+            <div style="float: left">
+                Event Log:
+
+                <JqxPanel ref="myPanel" :width="300" :height="80"></JqxPanel>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxCheckBox,
+            JqxButton,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', datafield: 'firstname', width: 200 },
+                    { text: 'Last Name', datafield: 'lastname', width: 200 },
+                    { text: 'Product', datafield: 'productname', width: 180 },
+                    { text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },
+                    { text: 'Quantity', datafield: 'quantity', cellsalign: 'right' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(500, false),
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        },
+        methods: {
+            addfilter: function () {
+                let filtergroup = new jqx.filter();
+                let filter_or_operator = 1;
+                let filtervalue = 'Beate';
+                let filtercondition = 'contains';
+                let filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
+                filtervalue = 'Andrew';
+                filtercondition = 'contains';
+                let filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
+                filtergroup.addfilter(filter_or_operator, filter1);
+                filtergroup.addfilter(filter_or_operator, filter2);
+                // add the filters.
+                this.$refs.myGrid.addfilter('firstname', filtergroup);
+                // apply the filters.
+                this.$refs.myGrid.applyfilters();
+            },
+            updatefilterconditions: function (type, defaultconditions) {
+                let stringcomparisonoperators = ['CONTAINS', 'DOES_NOT_CONTAIN'];
+                let numericcomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
+                let datecomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
+                let booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
+                switch (type) {
+                    case 'stringfilter':
+                        return stringcomparisonoperators;
+                    case 'numericfilter':
+                        return numericcomparisonoperators;
+                    case 'datefilter':
+                        return datecomparisonoperators;
+                    case 'booleanfilter':
+                        return booleancomparisonoperators;
+                }
+            },
+            updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1,
+                filterinputfield2, filterbutton, clearbutton, columnfilter, filtertype, filterconditions) {
+                let index1 = 0;
+                let index2 = 0;
+                if (columnfilter != null) {
+                    let filter1 = columnfilter.getfilterat(0);
+                    let filter2 = columnfilter.getfilterat(1);
+                    if (filter1) {
+                        index1 = filterconditions.indexOf(filter1.comparisonoperator);
+                        let value1 = filter1.filtervalue;
+                        filterinputfield1.val(value1);
+                    }
+                    if (filter2) {
+                        index2 = filterconditions.indexOf(filter2.comparisonoperator);
+                        let value2 = filter2.filtervalue;
+                        filterinputfield2.val(value2);
+                    }
+                }
+                filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
+                filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
+            },
+            ready: function () {
+                this.addfilter();
+                let localizationObject = {
+                    filterstringcomparisonoperators: ['contains', 'does not contain'],
+                    // filter numeric comparison operators.
+                    filternumericcomparisonoperators: ['less than', 'greater than'],
+                    // filter date comparison operators.
+                    filterdatecomparisonoperators: ['less than', 'greater than'],
+                    // filter bool comparison operators.
+                    filterbooleancomparisonoperators: ['equal', 'not equal']
+                }
+                this.$refs.myGrid.localizestrings(localizationObject);
+            },
+            myGridOnFilter: function (event) {
+                this.$refs.myPanel.clearcontent();
+                let filterinfo = this.$refs.myGrid.getfilterinformation();
+                let eventData = 'Triggered "filter" event';
+                for (let i = 0; i < filterinfo.length; i++) {
+                    let eventData = 'Filter Column: ' + filterinfo[i].filtercolumntext;
+                    this.$refs.myPanel.prepend('<div style="margin-top: 5px;">' + eventData + '</div>');
+                }
+            },
+            clearFilteringBtnOnClick: function () {
+                this.$refs.myGrid.clearfilters();
+            },
+            filterBackgroundOnChange: function (event) {
+                this.$refs.myGrid.showfiltercolumnbackground = event.args.checked;
+            },
+            filterIconsOnChange: function (event) {
+                this.$refs.myGrid.autoshowfiltericon = !event.args.checked;
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        width: fit-content;
+    }
+
+    .jqx-panel {
+        border: none;
+    }
+
+    .jqx-checkbox {
+        margin-top: 5px;
+    }
+</style>
\ No newline at end of file
diff --git a/grid/filterconditions/main.js b/grid/filterconditions/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/filterconditions/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/filterconditions/package.json b/grid/filterconditions/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/filterconditions/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/filtering/App.vue b/grid/filtering/App.vue
new file mode 100644
index 00000000..04702a3b
--- /dev/null
+++ b/grid/filtering/App.vue
@@ -0,0 +1,131 @@
+<template>
+    <div>
+
+        <JqxGrid ref="myGrid" @filter="onFilter($event)"
+                 :width="getWidth" :source="dataAdapter" :columns="columns" :sortable="true"
+                 :filterable="true" :autoshowfiltericon="true" :ready="ready">
+        </JqxGrid>
+
+        <div style="margin-top: 30px">
+            <div style="width: 200px; float: left; margin-right: 10px">
+
+                <JqxButton @click="clearFiltering()" :width="120">
+                    Remove Filter
+                </JqxButton>
+
+                <JqxCheckBox @change="onFilterBackground($event)"
+                             :height="25" :checked="true">
+                    Filter Background
+                </JqxCheckBox>
+
+                <JqxCheckBox @change="onFilterIcon($event)"
+                             :height="25" :checked="false">
+                    Show All Filter Icons
+                </JqxCheckBox>
+
+            </div>
+            <div style="float: left">
+                Event Log:
+
+                <JqxPanel ref="myPanel" :width="300" :height="80"></JqxPanel>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxCheckBox,
+            JqxButton,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', datafield: 'firstname', width: 160 },
+                    { text: 'Last Name', datafield: 'lastname', width: 160 },
+                    { text: 'Product', datafield: 'productname', width: 170 },
+                    { text: 'Order Date', datafield: 'date', filtertype: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },
+                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(500, false),
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        },
+        methods: {
+            addfilter: function () {
+                let filtergroup = new jqx.filter();
+                let filter_or_operator = 1;
+                let filtervalue = 'Beate';
+                let filtercondition = 'contains';
+                let filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
+                filtervalue = 'Andrew';
+                filtercondition = 'starts_with';
+                let filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
+                filtergroup.addfilter(filter_or_operator, filter1);
+                filtergroup.addfilter(filter_or_operator, filter2);
+                this.$refs.myGrid.addfilter('firstname', filtergroup, true);
+                this.$refs.myGrid.applyfilters();
+            },
+            ready: function () {
+                this.addfilter();
+            },
+            onFilter: function (event) {
+                this.$refs.myPanel.clearcontent();
+                let filterinfo = this.$refs.myGrid.getfilterinformation();
+                let eventData = 'Triggered "filter" event';
+                for (let i = 0; i < filterinfo.length; i++) {
+                    let eventData = 'Filter Column: ' + filterinfo[i].filtercolumntext;
+                    this.$refs.myPanel.prepend('<div style="margin-top: 5px;">' + eventData + '</div>');
+                }
+            },
+            clearFiltering: function () {
+                this.$refs.myGrid.clearfilters();
+            },
+            onFilterBackground: function (event) {
+                this.$refs.myGrid.showfiltercolumnbackground = event.args.checked;
+            },
+            onFilterIcon: function (event) {
+                this.$refs.myGrid.autoshowfiltericon = !event.args.checked;
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        width: fit-content;
+    }
+
+    .jqx-panel {
+        border: none;
+    }
+
+    .jqx-checkbox {
+        margin-top: 5px;
+    }
+</style>
\ No newline at end of file
diff --git a/grid/filtering/main.js b/grid/filtering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/filtering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/filtering/package.json b/grid/filtering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/filtering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/filtermenutypes/App.vue b/grid/filtermenutypes/App.vue
new file mode 100644
index 00000000..3fa872b5
--- /dev/null
+++ b/grid/filtermenutypes/App.vue
@@ -0,0 +1,121 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+
+        <JqxGrid ref="myGrid" @filter="myGridOnFilter($event)"
+                 :width="getWidth" :source="dataAdapter" :columns="columns" :sortable="true"
+                 :filterable="true" :autoshowfiltericon="true" :ready="ready">
+        </JqxGrid>
+
+        <div style="margin-top: 30px">
+            <div style="width: 200px; float: left; margin-right: 10px">
+
+                <JqxButton @click="clearFiltering()" :height="25"> Remove Filter </JqxButton>
+
+                <JqxCheckBox @change="onFilterBackground($event)" :height="25" :checked="true"> Filter Background </JqxCheckBox>
+
+                <JqxCheckBox @change="onFilterIcon($event)" :height="25"> Show All Filter Icons </JqxCheckBox>
+
+            </div>
+            <div style="float: left">
+                Event Log:
+
+                <JqxPanel ref="myPanel" :width="300" :height="80"></JqxPanel>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxCheckBox,
+            JqxButton,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', datafield: 'firstname', filtertype: 'list', width: 160 },
+                    { text: 'Last Name', datafield: 'lastname', filtertype: 'list', width: 160 },
+                    { text: 'Product', datafield: 'productname', filtertype: 'checkedlist', width: 170 },
+                    { text: 'Order Date', datafield: 'date', filtertype: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },
+                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(500, false),
+                datafields:
+                [
+                    { name: 'firstname', type: 'string' },
+                    { name: 'lastname', type: 'string' },
+                    { name: 'productname', type: 'string' },
+                    { name: 'date', type: 'date' },
+                    { name: 'quantity', type: 'number' }
+                ],
+                datatype: 'array'
+            };
+        },
+        methods: {
+            addfilter: function () {
+                let filtergroup = new jqx.filter();
+                let filter_or_operator = 1;
+                let filtervalue = 'Andrew';
+                let filtercondition = 'equal';
+                let filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
+
+                filtergroup.addfilter(filter_or_operator, filter1);
+                // add the filters.
+                this.$refs.myGrid.addfilter('firstname', filtergroup);
+                // apply the filters.
+                this.$refs.myGrid.applyfilters();
+            },
+            ready: function () {
+                this.addfilter();
+            },
+            myGridOnFilter: function (event) {
+                this.$refs.myPanel.clearcontent();
+                let filterinfo = this.$refs.myGrid.getfilterinformation();
+                let eventData = 'Triggered "filter" event';
+                for (let i = 0; i < filterinfo.length; i++) {
+                    let eventData = 'Filter Column: ' + filterinfo[i].filtercolumntext;
+                    this.$refs.myPanel.prepend('<div style="margin-top: 5px;">' + eventData + '</div>');
+                }
+            },
+            clearFiltering: function () {
+                this.$refs.myGrid.clearfilters();
+            },
+            onFilterBackground: function (event) {
+                this.$refs.myGrid.showfiltercolumnbackground = event.args.checked;
+            },
+            onFilterIcon: function (event) {
+                this.$refs.myGrid.autoshowfiltericon = !event.args.checked;
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        width: fit-content;
+    }
+
+    .jqx-panel {
+        border: none;
+    }
+
+    .jqx-checkbox {
+        margin-top: 5px;
+    }
+</style>
\ No newline at end of file
diff --git a/grid/filtermenutypes/main.js b/grid/filtermenutypes/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/filtermenutypes/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/filtermenutypes/package.json b/grid/filtermenutypes/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/filtermenutypes/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/filterrow/App.vue b/grid/filterrow/App.vue
new file mode 100644
index 00000000..1abdc73e
--- /dev/null
+++ b/grid/filterrow/App.vue
@@ -0,0 +1,62 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :filterable="true" :selectionmode="'multiplecellsextended'" :showfilterrow="true">
+        </JqxGrid>
+
+        <br />
+
+        <JqxButton @click="clearFiltering()"
+                   :width="120" :height="22">
+            Remove Filter
+        </JqxButton>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 },
+                    { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220 },
+                    { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
+                    { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd' },
+                    { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(500, false),
+                datafields:
+                    [
+                        { name: 'name', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        },
+        methods: {
+            clearFiltering: function () {
+                this.$refs.myGrid.clearfilters();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/filterrow/main.js b/grid/filterrow/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/filterrow/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/filterrow/package.json b/grid/filterrow/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/filterrow/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/filterrowcustomlistitems/App.vue b/grid/filterrowcustomlistitems/App.vue
new file mode 100644
index 00000000..ab14d375
--- /dev/null
+++ b/grid/filterrowcustomlistitems/App.vue
@@ -0,0 +1,54 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+             :showfilterrow="true" :filterable="true">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', filtertype: 'list', filteritems: this.items, datafield: 'name', width: 200 },
+                    { text: 'Product', filtertype: 'checkedlist', filteritems: ['Black Tea', 'Green Tea', 'Caffe Latte'], datafield: 'productname' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const data = generatedata(500, false);
+
+            this.source = {
+                localdata: data,
+                datafields:
+                    [
+                        { name: 'name', type: 'string' },
+                        { name: 'productname', type: 'string' }
+                    ],
+                datatype: 'array'
+            };
+
+            const generateItems = () => {
+                let items = new Array();
+                items.push(data[0].name);
+                items.push(data[1].name);
+                items.push(data[2].name);
+                items.push(data[3].name);
+                items.push(data[4].name);
+
+                return items;
+            };
+
+            this.items = generateItems();
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/filterrowcustomlistitems/main.js b/grid/filterrowcustomlistitems/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/filterrowcustomlistitems/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/filterrowcustomlistitems/package.json b/grid/filterrowcustomlistitems/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/filterrowcustomlistitems/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/fluidsize/App.vue b/grid/fluidsize/App.vue
new file mode 100644
index 00000000..e4c27bc8
--- /dev/null
+++ b/grid/fluidsize/App.vue
@@ -0,0 +1,51 @@
+<template>
+    <JqxGrid :width="'100%'" :height="'90%'" :source="dataAdapter" :columns="columns"
+             :showfilterrow="true" :filterable="true" :selectionmode="'multiplecellsadvanced'">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', columntype: 'textbox', datafield: 'name', width: '20%' },
+                    { text: 'Product', datafield: 'productname', width: '35%' },
+                    { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: '30%', cellsalign: 'right', cellsformat: 'd' },
+                    { text: 'Qty.', datafield: 'quantity', width: '15%', cellsalign: 'right' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(500, false),
+                datafields:
+                    [
+                        { name: 'name', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        }
+    }
+</script>
+
+<style>
+    body, html {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        padding: 0px;
+        margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/grid/fluidsize/main.js b/grid/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/fluidsize/package.json b/grid/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/foreignkeycolumn/App.vue b/grid/foreignkeycolumn/App.vue
new file mode 100644
index 00000000..9a8cf477
--- /dev/null
+++ b/grid/foreignkeycolumn/App.vue
@@ -0,0 +1,84 @@
+<template>
+    <JqxGrid :width="getWidth" :source="ordersAdapter" :columns="columns"
+             :autoheight="true" :pageable="true" :selectionmode="'multiplecellsadvanced'">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                ordersAdapter: new jqx.dataAdapter(this.ordersSource),
+                columns: [
+                    { text: 'Employee Name', datafield: 'EmployeeID', width: 150 },
+                    { text: 'Ship City', datafield: 'ShipCity', width: 150 },
+                    { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
+                    { text: 'Ship Name', datafield: 'ShipName' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const employeesSource = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' }
+                ],
+                root: 'Employees',
+                record: 'Employee',
+                id: 'EmployeeID',
+                async: false,
+                url: '../sampledata/employees.xml'
+            };
+
+            const employeesAdapter = new jqx.dataAdapter(employeesSource, {
+                autoBind: true,
+                beforeLoadComplete: (records) => {
+                    let data = new Array();
+                    // update the loaded records. Dynamically add EmployeeName and EmployeeID fields.
+                    for (let i = 0; i < records.length; i++) {
+                        let employee = records[i];
+                        employee.EmployeeName = employee.FirstName + ' ' + employee.LastName;
+                        employee.EmployeeID = employee.uid;
+                        data.push(employee);
+                    }
+                    return data;
+                }
+            });
+
+            this.ordersSource = {
+                datatype: 'xml',
+                datafields: [
+                    // name - determines the field's name.
+                    // values - specifies the field's values.
+                    // values.source - specifies the foreign source. The expected value is an array.
+                    // values.name - specifies the field's name in the foreign source.
+                    // When the ordersAdapter is loaded, each record will have a field called 'EmployeeID'. The 'EmployeeID' for each record will come from the employeesAdapter where the record's 'EmployeeID' from orders.xml matches to the 'EmployeeID' from employees.xml.
+                    { name: 'EmployeeID', map: 'm\\:properties>d\\:EmployeeID', values: { source: employeesAdapter.records, name: 'EmployeeName' } },
+                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
+                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:OrderID',
+                url: '../sampledata/orders.xml',
+                pager: (pagenum, pagesize, oldpagenum) => {
+                    // callback called when a page or page size is changed.
+                }
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/foreignkeycolumn/main.js b/grid/foreignkeycolumn/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/foreignkeycolumn/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/foreignkeycolumn/package.json b/grid/foreignkeycolumn/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/foreignkeycolumn/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/fullrowedit/App.vue b/grid/fullrowedit/App.vue
new file mode 100644
index 00000000..a67d6f4f
--- /dev/null
+++ b/grid/fullrowedit/App.vue
@@ -0,0 +1,114 @@
+<template>
+    <div>
+        <JqxGrid @cellbeginedit="myGridOnCellBeginEdit($event)" @cellendedit="myGridOnCellEndEdit($event)"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :editable="true" :editmode="'selectedrow'" :selectionmode="'singlerow'">
+        </JqxGrid>
+
+        <div style="font-size: 12px; font-family: Verdana; margin-top: 30px">
+            <div ref="cellBeginEditLog"></div>
+            <div ref="cellEndEditLog" style="margin-top: 30px"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
+                    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80 },
+                    { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
+                    { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
+                    {
+                        text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
+                        validation: (cell, value) => {
+                            if (value == '')
+                                return true;
+                            let year = value.getFullYear();
+                            if (year >= 2017) {
+                                return { result: false, message: 'Ship Date should be before 1/1/2017' };
+                            }
+                            return true;
+                        }
+                    },
+                    {
+                        text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right', columntype: 'numberinput',
+                        validation: (cell, value) => {
+                            if (value < 0 || value > 150) {
+                                return { result: false, message: 'Quantity should be in the 0-150 interval' };
+                            }
+                            return true;
+                        },
+                        createeditor: (row, cellvalue, editor) => {
+                            editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
+                        }
+                    },
+                    {
+                        text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
+                        validation: (cell, value) => {
+                            if (value < 0 || value > 15) {
+                                return { result: false, message: 'Price should be in the 0-15 interval' };
+                            }
+                            return true;
+                        },
+                        createeditor: (row, cellvalue, editor) => {
+                            editor.jqxNumberInput({ digits: 3 });
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(200, false),
+                datatype: 'array',
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'date', type: 'date' }
+                    ]
+            };
+
+            this.rowValues = '';
+        },
+        methods: {
+            myGridOnCellBeginEdit: function (event) {
+                let args = event.args;
+                if (args.datafield === 'firstname') {
+                    this.rowValues = '';
+                }
+                this.rowValues += args.value.toString() + '    ';
+                if (args.datafield === 'price') {
+                    this.$refs.cellBeginEditLog.innerHTML = 'Begin Row Edit: ' + (1 + args.rowindex) + ', Data: ' + this.rowValues;
+                }
+            },
+            myGridOnCellEndEdit: function (event) {
+                let args = event.args;
+                if (args.datafield === 'firstname') {
+                    this.rowValues = '';
+                }
+                this.rowValues += args.value.toString() + '    ';
+                if (args.datafield === 'price') {
+                    this.$refs.cellEndEditLog.innerHTML = 'End Row Edit: ' + (1 + args.rowindex) + ', Data: ' + this.rowValues;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/fullrowedit/main.js b/grid/fullrowedit/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/fullrowedit/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/fullrowedit/package.json b/grid/fullrowedit/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/fullrowedit/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/gridinjqxtabs/App.vue b/grid/gridinjqxtabs/App.vue
new file mode 100644
index 00000000..2914d636
--- /dev/null
+++ b/grid/gridinjqxtabs/App.vue
@@ -0,0 +1,76 @@
+<template>
+    <JqxTabs :width="getWidth" :height="560">
+        <ul>
+            <li style="margin-left: 30px">Grid 1</li>
+            <li>Grid 2</li>
+        </ul>
+        <div style="overflow: hidden">
+            <JqxGrid :width="'100%'" :height="'100%'" :source="dataAdapter" :columns="columns">
+            </JqxGrid>
+        </div>
+        <div style="overflow: hidden">
+            <JqxGrid :width="'100%'" :height="'100%'" :source="dataAdapter2" :columns="columns2">
+            </JqxGrid>
+        </div>
+    </JqxTabs>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxTabs from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxTabs
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('tabs'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                dataAdapter2: new jqx.dataAdapter(this.source2),
+                columns: [
+                    { text: 'Date', datafield: 'Date', cellsformat: 'd', width: 250 },
+                    { text: 'S&P 500', datafield: 'S&P 500', width: 150 },
+                    { text: 'NASDAQ', datafield: 'NASDAQ' }
+                ],
+                columns2: [
+                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
+                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
+                    { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
+                    { text: 'City', datafield: 'City', width: 120 },
+                    { text: 'Country', datafield: 'Country' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'csv',
+                datafields: [
+                    { name: 'Date' },
+                    { name: 'S&P 500' },
+                    { name: 'NASDAQ' }
+                ],
+                url: '../sampledata/nasdaq_vs_sp500.txt'
+            };
+
+            const data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';
+
+            this.source2 = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'CompanyName', type: 'string' },
+                    { name: 'ContactName', type: 'string' },
+                    { name: 'ContactTitle', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Country', type: 'string' }
+                ],
+                localdata: data
+            };         
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/gridinjqxtabs/main.js b/grid/gridinjqxtabs/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/gridinjqxtabs/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/gridinjqxtabs/package.json b/grid/gridinjqxtabs/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/gridinjqxtabs/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/grouping/App.vue b/grid/grouping/App.vue
new file mode 100644
index 00000000..85c9c71f
--- /dev/null
+++ b/grid/grouping/App.vue
@@ -0,0 +1,116 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid" @groupexpand="onGroupExpand($event)" @groupcollapse="onGroupCollapse($event)"
+                 :width="getWidth" :groupable="true" :columns="columns"
+                 :source="dataAdapter" :groups="['City']">
+        </JqxGrid>
+
+        <div style="margin-top: 20px;">
+            <div style="float: left; margin-left: 20px;">
+
+                <JqxButton @click="onExpandGroup()" :width="150">Expand Group</JqxButton>
+                <br />
+
+                <JqxButton @click="onCollapseGroup()" :width="150">Collapse Group</JqxButton>
+                <br />
+
+                <span style="margin-top: 10px;">Group:</span>
+                <input ref="groupNum" value="1" style="margin-top: 10px; width: 20px;" type="text" />
+            </div>
+            <div style="float: left; margin-left: 20px;">
+
+                <JqxButton @click="onExpandAllGroup()" :width="150">Expand All Group</JqxButton>
+                <br />
+
+                <JqxButton @click="onCollapseAllGroup()" :width="150">Collapse All Groups</JqxButton>
+                <br />
+
+            </div>
+            <div style="float: left; margin-left: 20px;">
+                <div style="font-weight: bold;">
+                    <span>Event Log:</span>
+                </div>
+                <div style="margin-top: 10px;">
+                    <span>Expanded Group:</span>
+                    <span ref="expandedGroup"></span>
+                </div>
+                <div style="margin-top: 10px;">
+                    <span>Collapsed Group:</span>
+                    <span ref="collapsedGroup"></span>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
+                    { text: 'City', datafield: 'City', width: 120 },
+                    { text: 'Country', datafield: 'Country' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName', type: 'string' },
+                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName', type: 'string' },
+                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle', type: 'string' },
+                    { name: 'City', map: 'm\\:properties>d\\:City', type: 'string' },
+                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode', type: 'string' },
+                    { name: 'Country', map: 'm\\:properties>d\\:Country', type: 'string' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:CustomerID',
+                url: '../sampledata/customers.xml'
+            };
+        },
+        methods: {
+            onExpandGroup: function () {
+                let groupNum = this.$refs.groupNum.value;
+                if (!isNaN(groupNum)) {
+                    this.$refs.myGrid.expandgroup(groupNum);
+                }
+            },
+            onCollapseGroup: function () {
+                let groupNum = this.$refs.groupNum.value;
+                if (!isNaN(groupNum)) {
+                    this.$refs.myGrid.collapsegroup(groupNum);
+                }
+            },
+            onExpandAllGroup: function () {
+                this.$refs.myGrid.expandallgroups();
+            },
+            onCollapseAllGroup: function () {
+                this.$refs.myGrid.collapseallgroups();
+            },
+            onGroupExpand: function (event) {
+                let args = event.args;
+                this.$refs.expandedGroup.innerHTML = 'Group: ' + args.group + ', Level: ' + args.level;
+            },
+            onGroupCollapse: function (event) {
+                let args = event.args;
+                this.$refs.collapsedGroup.innerHTML = 'Group: ' + args.group + ', Level: ' + args.level;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/grouping/main.js b/grid/grouping/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/grouping/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/grouping/package.json b/grid/grouping/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/grouping/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/groupingaggregates/App.vue b/grid/groupingaggregates/App.vue
new file mode 100644
index 00000000..d031b08b
--- /dev/null
+++ b/grid/groupingaggregates/App.vue
@@ -0,0 +1,62 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+             :groupable="true" :showgroupaggregates="true" :showstatusbar="true"
+             :showaggregates="true" :statusbarheight="25"
+             :selectionmode="'singlecell'" :groups="['price']">
+    </JqxGrid>
+
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', groupable: true, aggregates: ['count'], datafield: 'firstname', width: 100 },
+                    { text: 'Last Name', groupable: true, aggregates: ['count'], datafield: 'lastname', width: 100 },
+                    { text: 'Product', groupable: true, columntype: 'dropdownlist', datafield: 'productname', width: 200 },
+                    { text: 'Quantity', datafield: 'quantity', aggregates: ['sum'], width: 70, cellsalign: 'right' },
+                    { text: 'Price', datafield: 'price', aggregates: ['sum'], cellsalign: 'right', width: 100, cellsformat: 'c2' },
+                    {
+                        text: 'Total', datafield: 'total', aggregates: ['sum'], cellsalign: 'right', cellsformat: 'c2',
+                        cellsrenderer: (row, column, value, defaultRender, rowData) => {
+                            if (value.toString().indexOf('Sum') >= 0) {
+                                return defaultRender.replace('Sum', 'Total');
+                            }
+                        },
+                        aggregatesrenderer: (aggregates, column, element) => {
+                            var renderstring = '<div style="position: relative; margin-top: 4px; margin-right:5px; text-align: right; overflow: hidden;">' + 'Total' + ': ' + aggregates.sum + '</div>';
+                            return renderstring;
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(50, false),
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'total', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/groupingaggregates/main.js b/grid/groupingaggregates/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/groupingaggregates/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/groupingaggregates/package.json b/grid/groupingaggregates/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/groupingaggregates/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/groupingwithpager/App.vue b/grid/groupingwithpager/App.vue
new file mode 100644
index 00000000..681f6b92
--- /dev/null
+++ b/grid/groupingwithpager/App.vue
@@ -0,0 +1,112 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid"
+                 @groupexpand="myGridOnGroupExpand($event)" @groupcollapse="myGridOnGroupCollapse($event)"
+                 :width="getWidth" :height="280" :source="dataAdapter" :columns="columns"
+                 :groupable="true" :pageable="true" :groups="['City']">
+        </JqxGrid>
+
+        <div style="margin-top: 30px">
+            <div style="float: left; margin-left: 20px">
+                <JqxButton @click="expandBtnOnClick()" :width="125" :height="25">Expand Group</JqxButton>
+                <br />
+                <JqxButton @click="collapseBtnOnClick()" :width="125" :height="25">Collapse Group</JqxButton>
+                <br />
+                <span style="margin-top: 10px">Group:</span>
+                <JqxInput ref="myInput" style="margin-left: 10px; margin-top: 10px" :width="20" :value="1"></JqxInput>
+            </div>
+            <div style="float: left; margin-left: 20px">
+                <JqxButton @click="expandAllBtnOnClick()" :width="125" :height="25">Expand All</JqxButton>
+                <br />
+                <JqxButton @click="collapseAllBtnOnClick()" :width="125" :height="25">Collapse All</JqxButton>
+                <br />
+            </div>
+            <div style="float: left; margin-left: 20px">
+                <div style="font-weight: bold">
+                    <span>Event Log:</span>
+                </div>
+                <div style="margin-top: 10px">
+                    <span>Expanded Group:</span>
+                    <span ref="expandedGroupLog"></span>
+                </div>
+                <div style="margin-top: 10px">
+                    <span>Collapsed Group:</span>
+                    <span ref="collapsedGroupLog"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxButton,
+            JqxInput
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
+                    { text: 'City', datafield: 'City', width: 120 },
+                    { text: 'Country', datafield: 'Country' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName', type: 'string' },
+                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName', type: 'string' },
+                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle', type: 'string' },
+                    { name: 'City', map: 'm\\:properties>d\\:City', type: 'string' },
+                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode', type: 'string' },
+                    { name: 'Country', map: 'm\\:properties>d\\:Country', type: 'string' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:CustomerID',
+                url: '../sampledata/customers.xml'
+            };
+        },
+        methods: {
+            expandBtnOnClick: function() {
+                let groupnum = this.$refs.myInput.val();
+                if (!isNaN(groupnum)) {
+                    this.$refs.myGrid.expandgroup(groupnum);
+                }
+            },
+            collapseBtnOnClick: function() {
+                let groupnum = this.$refs.myInput.val();
+                if (!isNaN(groupnum)) {
+                    this.$refs.myGrid.collapsegroup(groupnum);
+                }
+            },
+            expandAllBtnOnClick: function() {
+                this.$refs.myGrid.expandallgroups();
+            },
+            collapseAllBtnOnClick: function() {
+                this.$refs.myGrid.collapseallgroups();
+            },
+            myGridOnGroupExpand: function(event) {
+                let args = event.args;
+                this.$refs.expandedGroupLog.innerHTML = 'Group: ' + args.group + ', Level: ' + args.level;
+            },
+            myGridOnGroupCollapse: function (event) {
+                let args = event.args;
+                this.$refs.collapsedGroupLog.innerHTML = 'Group: ' + args.group + ', Level: ' + args.level
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/groupingwithpager/main.js b/grid/groupingwithpager/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/groupingwithpager/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/groupingwithpager/package.json b/grid/groupingwithpager/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/groupingwithpager/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/imagecolumn/App.vue b/grid/imagecolumn/App.vue
new file mode 100644
index 00000000..dc491494
--- /dev/null
+++ b/grid/imagecolumn/App.vue
@@ -0,0 +1,56 @@
+<template>
+    <JqxGrid
+             :width="400" :source="dataAdapter" :columns="columns"
+             :rowsheight="60">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Image', datafield: 'Image', width: 60, cellsrenderer: this.imagerenderer },
+                    { text: 'Title', datafield: 'Title', width: 200 },
+                    { text: 'Year', datafield: 'Year' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const generateData = () => {
+                let movies = new Array();
+                // Avatar
+                movies[0] = { Image: 'avatar.png', Title: 'Avatar', Year: 2009 };
+                movies[1] = { Image: 'priest.png', Title: 'Priest', Year: 2006 };
+                movies[2] = { Image: 'endgame.png', Title: 'End Game', Year: 2006 };
+                movies[3] = { Image: 'unknown.png', Title: 'Unknown', Year: 2011 };
+                movies[4] = { Image: 'unstoppable.png', Title: 'Unstoppable', Year: 2010 };
+                movies[5] = { Image: 'twilight.png', Title: 'Twilight', Year: 2008 };
+                movies[6] = { Image: 'kungfupanda.png', Title: 'Kung Fu Panda', Year: 2008 };
+                movies[7] = { Image: 'knockout.png', Title: 'Knockout', Year: 2011 };
+                movies[8] = { Image: 'theplane.png', Title: 'The Plane', Year: 2010 };
+                movies[9] = { Image: 'bigdaddy.png', Title: 'Big Daddy', Year: 1999 };
+
+                return movies;
+            };
+
+            this.source = {
+                localdata: generateData(), datatype: 'array'
+            };
+        },
+        methods: {
+            imagerenderer : function (row, datafield, value) {
+                return '<img style="margin-left: 5px;" height="60" width="50" src="../../../images/' + value + '"/>';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/imagecolumn/main.js b/grid/imagecolumn/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/imagecolumn/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/imagecolumn/package.json b/grid/imagecolumn/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/imagecolumn/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/initialfilter/App.vue b/grid/initialfilter/App.vue
new file mode 100644
index 00000000..8593f6f3
--- /dev/null
+++ b/grid/initialfilter/App.vue
@@ -0,0 +1,63 @@
+<template>
+    <JqxGrid ref="myGrid"
+             :width="getWidth" :source="dataAdapter" :columns="columns"
+             :filterable="true" :sortable="true" :ready="ready">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', datafield: 'firstname', width: 160 },
+                    { text: 'Last Name', datafield: 'lastname', width: 160 },
+                    { text: 'Product', datafield: 'productname', width: 170 },
+                    { text: 'Order Date', datafield: 'date', filtertype: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },
+                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(500, false),
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        },
+        methods: {
+            firstNameColumnFilter: function() {
+                let filtergroup = new jqx.filter();
+                let filter_or_operator = 1;
+                let filtervalue = 'Nancy';
+                let filtercondition = 'contains';
+                let filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
+                filtergroup.addfilter(filter_or_operator, filter);
+                this.$refs.myGrid.addfilter('firstname', filtergroup);
+                this.$refs.myGrid.applyfilters();
+            },
+            ready: function () {
+                this.firstNameColumnFilter();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/initialfilter/main.js b/grid/initialfilter/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/initialfilter/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/initialfilter/package.json b/grid/initialfilter/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/initialfilter/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/initialpageandpagesize/App.vue b/grid/initialpageandpagesize/App.vue
new file mode 100644
index 00000000..c86667fb
--- /dev/null
+++ b/grid/initialpageandpagesize/App.vue
@@ -0,0 +1,103 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid"
+                 @pagechanged="myGridOnPageChanged($event)" @pagesizechanged="myGridOnPageSizeChanged($event)"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :sortable="true" :pageable="true" :autoheight="true"
+                 :columnsresize="true" :selectionmode="'multiplerowsextended'">
+        </JqxGrid>
+
+        <div style="margin-top: 30px">
+            <div style=" float: left">
+                Event Log:
+                <JqxPanel ref="myPanel" :width="300" :height="180"></JqxPanel>
+            </div>
+            <div style=" float: left">
+                Paging Details:
+                <div ref="pagingInfoLog"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Ship Name', datafield: 'ShipName', width: 250 },
+                    { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
+                    { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
+                    { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
+                    { text: 'Ship City', datafield: 'ShipCity', width: 100 },
+                    { text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
+                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:OrderID',
+                url: '../sampledata/orders.xml',
+                pagenum: 3,
+                pagesize: 20,
+                pager: (pagenum, pagesize, oldpagenum) => {
+                    // callback called when a page or page size is changed.
+                }
+            };
+        },
+        methods: {
+            myGridOnPageChanged: function(event) {
+                if (document.getElementsByClassName('logged').length >= 5) {
+                    this.$refs.myPanel.clearcontent();
+                }
+
+                let args = event.args;
+                let eventData = 'pagechanged <div>Page:' + args.pagenum + ', Page Size: ' + args.pagesize + '</div>';
+
+                this.$refs.myPanel.prepend('<div class="logged" style="margin-top: 5px">' + eventData + '</div>');
+                // get page information.
+                let paginginformation = this.$refs.myGrid.getpaginginformation();
+                this.$refs.pagingInfoLog.innerHTML = '<div style="margin-top: 5px;">Page:' + paginginformation.pagenum + ', Page Size: ' +
+                    paginginformation.pagesize + ', Pages Count: ' + paginginformation.pagescount + '</div>';
+            },
+            myGridOnPageSizeChanged: function(event) {
+                this.$refs.myPanel.clearcontent();
+
+                let args = event.args;
+                let eventData = 'pagesizechanged <div>Page:' + args.pagenum + ', Page Size: ' + args.pagesize + ', Old Page Size: ' + args.oldpagesize + '</div>';
+
+                this.$refs.myPanel.prepend('<div style="margin-top: 5px;">' + eventData + '</div>');
+                // get page information.
+                let paginginformation = this.$refs.myGrid.getpaginginformation();;
+                this.$refs.pagingInfoLog.innerHTML = '<div style="margin-top: 5px">Page:' + paginginformation.pagenum + ', Page Size: ' +
+                    paginginformation.pagesize + ', Pages Count: ' + paginginformation.pagescount + '</div>';
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-panel{
+        border: none;
+    }
+</style>
\ No newline at end of file
diff --git a/grid/initialpageandpagesize/main.js b/grid/initialpageandpagesize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/initialpageandpagesize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/initialpageandpagesize/package.json b/grid/initialpageandpagesize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/initialpageandpagesize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/keyboardnavigation/App.vue b/grid/keyboardnavigation/App.vue
new file mode 100644
index 00000000..4917940f
--- /dev/null
+++ b/grid/keyboardnavigation/App.vue
@@ -0,0 +1,85 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid"
+                 :width="670" :height="300" :source="dataAdapter" :columns="columns"
+                 :editable="true" :selectionmode="'multiplecellsadvanced'" :ready="ready">
+        </JqxGrid>
+
+        <div style="font-family: Verdana; font-size: 12px; width: 670px">
+            <ul>
+                <li><b>Left Arrow</b> key is pressed - Selects the left cell, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.</li>
+                <li><b>Right Arrow</b> key is pressed - Selects the right cell, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.</li>
+                <li><b>Up Arrow</b> key is pressed - Selects the cell above, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.</li>
+                <li><b>Down Arrow</b> key is pressed - Selects the cell below, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.</li>
+                <li><b>Page Up/Down</b> is pressed - Navigate Up or Down with one page, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.</li>
+                <li><b>Home/End</b> is pressed - Navigate to the first or last row, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.</li>
+                <li><b>Enter</b> key is pressed - Moves one cell down in 'multiplecellsadvanced' selection mode. If the cell is in edit mode, saves the new value and moves one cell down. In the other selection modes, shows the selected cell's editor. If the cell is in editmode, hides the cell's editor and saves the new value. The editor's value is equal to the cell's value.</li>
+                <li><b>Esc</b> key is pressed - Hides the cell's editor and cancels the changes.</li>
+                <li><b>Tab</b> key is pressed - Selects the right cell. If the Grid is in edit mode, saves the edit cell's value, closes its editor, selects the right cell and opens its editor.</li>
+                <li><b>Shift+Tab</b> keys are pressed - Selects the left cell. If the Grid is in edit mode, saves the edit cell's value, closes its editor, selects the left cell and opens its editor.</li>
+                <li><b>F2</b> key is pressed - shows the selected cell's editor when the Grid is in edit mode.</li>
+                <li><b>Space</b> key is pressed - Toggles the checkbox editor's check state when the selected cell's column is a checkbox column and the Grid is editable.</li>
+                <li><b>Shift+Arrow</b> key extends the selection.</li>
+                <li><b>Shift</b> extends the selection when the user clicks on a cell or row..</li>
+                <li><b>Ctrl</b> key is pressed - in 'multiplecellsextended, multiplecellsadvanced and multiplerowsextended' selection mode, extends the selection when the user clicks on a cell or row. </li>
+                <li><b>Ctrl+Arrow</b> key - moves to an edge. </li>
+                <li><b>Ctrl+C</b> Copy. </li>
+                <li><b>Ctrl+X</b> Cut. </li>
+                <li><b>Ctrl+V</b> Paste. </li>
+                <li><b>Page Down</b> - Moves one screen down</li>
+                <li><b>Page Up</b> - Moves one screen up</li>
+                <li><b>Home</b> - Moves to the beginning</li>
+                <li><b>End</b> - Moves to the end</li>
+                <li>Typing in a cell when the Grid is 'editable' will put the cell in edit mode.</li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Ship Name', datafield: 'ShipName', width: 250, align: 'left', cellsalign: 'left' },
+                    { text: 'Freight', datafield: 'Freight', width: 80, align: 'right', cellsformat: 'F2', cellsalign: 'right' },
+                    { text: 'Ship Address', datafield: 'ShipAddress', align: 'left', width: 350, cellsalign: 'left' },
+                    { text: 'Ship City', datafield: 'ShipCity', width: 100, align: 'left', cellsalign: 'left' },
+                    { text: 'Ship Country', datafield: 'ShipCountry', align: 'left', cellsalign: 'left' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
+                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:OrderID',
+                url: '../sampledata/orders.xml'
+            };
+        },
+        methods: {
+            ready: function() {
+                this.$refs.myGrid.selectcell(0, 'ShipName');
+                this.$refs.myGrid.focus();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/keyboardnavigation/main.js b/grid/keyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/keyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/keyboardnavigation/package.json b/grid/keyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/keyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/keysvaluescolumn/App.vue b/grid/keysvaluescolumn/App.vue
new file mode 100644
index 00000000..402bff2d
--- /dev/null
+++ b/grid/keysvaluescolumn/App.vue
@@ -0,0 +1,115 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid"
+                 @cellselect="myGridOnCellSelect($event)" @cellendedit="myGridOnCellEndEdit($event)"
+                 :width="getWidth" :source="ordersAdapter" :columns="columns"
+                 :pageable="true" :editable="true" :autoheight="true" 
+                 :selectionmode="'singlecell'">
+        </JqxGrid>
+
+        <div ref="eventLog" style="font-size: 13px; font-family: Verdana; margin-top: 20px"></div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                ordersAdapter: new jqx.dataAdapter(this.ordersSource),
+                columns: [
+                    { text: 'Employee Name', datafield: 'EmployeeID', displayfield: 'EmployeeName', columntype: 'dropdownlist', width: 150 },
+                    { text: 'Ship City', datafield: 'ShipCity', width: 150 },
+                    { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
+                    { text: 'Ship Name', datafield: 'ShipName' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const employeesSource = {
+                    datatype: 'xml',
+                    datafields: [
+                        { name: 'FirstName', type: 'string' },
+                        { name: 'LastName', type: 'string' }
+                    ],
+                    root: 'Employees',
+                    record: 'Employee',
+                    id: 'EmployeeID',
+                    url: '../sampledata/employees.xml',
+                    async: false
+                };
+
+            const employeesAdapter = new jqx.dataAdapter(employeesSource, {
+                autoBind: true,
+                beforeLoadComplete: (records) => {
+                    let data = new Array();
+                    // update the loaded records. Dynamically add EmployeeName and EmployeeID fields. 
+                    for (let i = 0; i < records.length; i++) {
+                        let employee = records[i];
+                        employee.EmployeeName = employee.FirstName + ' ' + employee.LastName;
+                        employee.EmployeeID = employee.uid;
+                        data.push(employee);
+                    }
+                    return data;
+                }
+            });
+
+            this.ordersSource = {
+                    datatype: 'xml',
+                    datafields: [
+                        // name - determines the field's name.
+                        // value - the field's value in the data source.
+                        // values - specifies the field's values.
+                        // values.source - specifies the foreign source. The expected value is an array.
+                        // values.value - specifies the field's name in the foreign source. 
+                        // values.name - specifies the field's value in the foreign source. 
+                        // When the ordersAdapter is loaded, each record will have a field called 'EmployeeName'. The 'EmployeeName' for each record comes from the employeesAdapter where the record's 'EmployeeID' from orders.xml matches to the 'EmployeeID' from employees.xml. 
+                        { name: 'EmployeeName', value: 'EmployeeID', values: { source: employeesAdapter.records, value: 'EmployeeID', name: 'EmployeeName' } },
+                        { name: 'EmployeeID', map: 'm\\:properties>d\\:EmployeeID' },
+                        { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                        { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                        { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
+                        { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
+                        { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
+                        { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
+                    ],
+                    root: 'entry',
+                    record: 'content',
+                    id: 'm\\:properties>d\\:OrderID',
+                    url: '../sampledata/orders.xml',
+                    pager: (pagenum, pagesize, oldpagenum) => {
+                        // callback called when a page or page size is changed.
+                    }
+                };
+        },
+        methods: {
+            myGridOnCellSelect: function(event) {
+                let column = this.$refs.myGrid.getcolumn(event.args.datafield);
+                let value = this.$refs.myGrid.getcellvalue(event.args.rowindex, column.datafield);
+                let displayValue = this.$refs.myGrid.getcellvalue(event.args.rowindex, column.displayfield);
+                this.$refs.eventLog.innerHTML = '<div>Selected Cell<br/>Row: ' + event.args.rowindex + ', Column: ' + column.text + ', Value: ' + value + ', Label: ' + displayValue + '</div>';
+            },
+            myGridOnCellEndEdit: function(event) {
+                let column = this.$refs.myGrid.getcolumn(event.args.datafield);
+                let eventLog = this.$refs.eventLog;
+
+                if (column.displayfield != column.datafield) {
+                    eventLog.innerHTML = '<div>Cell Edited:<br/>Index: ' + event.args.rowindex + ', Column: ' + column.text + '<br/>Value: ' + event.args.value.value + ', Label: ' + event.args.value.label
+                        + '<br/>Old Value: ' + event.args.oldvalue.value + ', Old Label: ' + event.args.oldvalue.label + '</div>';
+                }
+                else {
+                    eventLog.innerHTML = '<div>Cell Edited:<br/>Row: ' + event.args.rowindex + ', Column: ' + column.text + '<br/>Value: ' + event.args.value
+                        + '<br/>Old Value: ' + event.args.oldvalue + '</div>';
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/keysvaluescolumn/main.js b/grid/keysvaluescolumn/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/keysvaluescolumn/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/keysvaluescolumn/package.json b/grid/keysvaluescolumn/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/keysvaluescolumn/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/largedataset/App.vue b/grid/largedataset/App.vue
new file mode 100644
index 00000000..748ba1fa
--- /dev/null
+++ b/grid/largedataset/App.vue
@@ -0,0 +1,47 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+        <JqxGrid :width="getWidth" :source="source" :columns="columns">
+        </JqxGrid>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                source: {
+                    localdata: generatedata(30000),
+                    datafields:
+                        [
+                            { name: 'id', type: 'number' },
+                            { name: 'firstname', type: 'string' },
+                            { name: 'lastname', type: 'string' },
+                            { name: 'productname', type: 'string' },
+                            { name: 'quantity', type: 'number' },
+                            { name: 'price', type: 'number' },
+                            { name: 'total', type: 'number' }
+                        ],
+                    datatype: 'array'
+                },
+                columns: [
+                    { text: 'Id', datafield: 'id', width: 50 },
+                    { text: 'First Name', datafield: 'firstname', width: 130 },
+                    { text: 'Last Name', datafield: 'lastname', width: 130 },
+                    { text: 'Product', datafield: 'productname', width: 180 },
+                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', datafield: 'price', width: 80, cellsalign: 'right', cellsformat: 'c2' },
+                    { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
+                ]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/largedataset/main.js b/grid/largedataset/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/largedataset/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/largedataset/package.json b/grid/largedataset/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/largedataset/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/loadfromtable/App.vue b/grid/loadfromtable/App.vue
new file mode 100644
index 00000000..9fd6e38e
--- /dev/null
+++ b/grid/loadfromtable/App.vue
@@ -0,0 +1,231 @@
+<template>
+    <div>
+        <table ref="myTable" cellSpacing='0' cellPadding='2'>
+            <thead>
+                <tr>
+                    <th>First Name</th>
+                    <th>Last Name</th>
+                    <th>Product</th>
+                    <th>Available</th>
+                    <th>Ship Date</th>
+                    <th>Quantity</th>
+                    <th>Price</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Nancy</td>
+                    <td>Vileid</td>
+                    <td>Espresso con Panna</td>
+                    <td>true</td>
+                    <td>5/20/2012</td>
+                    <td>9</td>
+                    <td>$3.25</td>
+                </tr>
+                <tr>
+                    <td>Elio</td>
+                    <td>Nagase</td>
+                    <td>Espresso con Panna</td>
+                    <td>true</td>
+                    <td>9/26/2012</td>
+                    <td>6</td>
+                    <td>$3.25</td>
+                </tr>
+                <tr>
+                    <td>Cheryl</td>
+                    <td>Nagase</td>
+                    <td>Doubleshot Espresso</td>
+                    <td>false</td>
+                    <td>4/19/2012</td>
+                    <td>9</td>
+                    <td>$3.30</td>
+                </tr>
+                <tr>
+                    <td>Regina</td>
+                    <td>Devling</td>
+                    <td>Caramel Latte</td>
+                    <td>true</td>
+                    <td>2/26/2012</td>
+                    <td>11</td>
+                    <td>$3.80</td>
+                </tr>
+                <tr>
+                    <td>Michael</td>
+                    <td>Winkler</td>
+                    <td>Doubleshot Espresso</td>
+                    <td>false</td>
+                    <td>7/16/2012</td>
+                    <td>4</td>
+                    <td>$3.30</td>
+                </tr>
+                <tr>
+                    <td>Mayumi</td>
+                    <td>Burke</td>
+                    <td>Caffe Americano</td>
+                    <td>false</td>
+                    <td>9/7/2012</td>
+                    <td>1</td>
+                    <td>$2.50</td>
+                </tr>
+                <tr>
+                    <td>Andrew</td>
+                    <td>Nagase</td>
+                    <td>Caffe Espresso</td>
+                    <td>true</td>
+                    <td>4/15/2012</td>
+                    <td>3</td>
+                    <td>$3.00</td>
+                </tr>
+                <tr>
+                    <td>Ian</td>
+                    <td>Burke</td>
+                    <td>Green Tea</td>
+                    <td>false</td>
+                    <td>11/16/2012</td>
+                    <td>5</td>
+                    <td>$1.50</td>
+                </tr>
+                <tr>
+                    <td>Yoshi</td>
+                    <td>Petersen</td>
+                    <td>White Chocolate Mocha</td>
+                    <td>false</td>
+                    <td>7/26/2012</td>
+                    <td>2</td>
+                    <td>$3.60</td>
+                </tr>
+                <tr>
+                    <td>Lars</td>
+                    <td>Bjorn</td>
+                    <td>Peppermint Mocha Twist</td>
+                    <td>false</td>
+                    <td>7/17/2012</td>
+                    <td>11</td>
+                    <td>$4.00</td>
+                </tr>
+                <tr>
+                    <td>Guylene</td>
+                    <td>Devling</td>
+                    <td>Caramel Latte</td>
+                    <td>true</td>
+                    <td>8/9/2012</td>
+                    <td>6</td>
+                    <td>$3.80</td>
+                </tr>
+                <tr>
+                    <td>Michael</td>
+                    <td>Burke</td>
+                    <td>Caffe Americano</td>
+                    <td>false</td>
+                    <td>9/10/2012</td>
+                    <td>11</td>
+                    <td>$2.50</td>
+                </tr>
+                <tr>
+                    <td>Petra</td>
+                    <td>Vileid</td>
+                    <td>White Chocolate Mocha</td>
+                    <td>false</td>
+                    <td>8/21/2012</td>
+                    <td>7</td>
+                    <td>$3.60</td>
+                </tr>
+                <tr>
+                    <td>Lars</td>
+                    <td>Nodier</td>
+                    <td>White Chocolate Mocha</td>
+                    <td>false</td>
+                    <td>7/16/2012</td>
+                    <td>8</td>
+                    <td>$3.60</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <div style="margin-top: 10px"></div>
+        <JqxButton @click="loadBtn()" :width="200">Load Vue Grid from Table</JqxButton>
+
+        <div style="margin-top: 10px"></div>
+        <JqxGrid ref="myGrid" :autoCreate="false"></JqxGrid>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxButton
+        },
+        methods: {
+            generateData: function() {
+                let table = this.$refs.myTable;
+                let columns = table.children[0].getElementsByTagName('th');
+                let rows = table.children[1].getElementsByTagName('tr');
+
+                let data = [];
+
+                for (let i = 0; i < rows.length; i++) {
+                    let row = rows[i];
+                    let datarow = {};
+                    for (let j = 0; j < columns.length; j++) {
+                        // Get column's title.
+                        let columnName = columns[j].innerHTML;
+                        // Get cell.
+                        let cell = rows[i].children[j].innerHTML;
+                        datarow[columnName] = cell;
+                    }
+                    data[data.length] = datarow;
+                }
+
+                return data;
+            },
+            loadBtn: function () {
+                let source =
+                    {
+                        localdata: this.generateData(),
+                        datatype: 'array',
+                        datafields:
+                            [
+                                { name: 'First Name', type: 'string' },
+                                { name: 'Last Name', type: 'string' },
+                                { name: 'Product', type: 'string' },
+                                { name: 'Available', type: 'string' },
+                                { name: 'Ship Date', type: 'date', format: 'MM/dd/yyyy' },
+                                { name: 'Quantity', type: 'number' },
+                                { name: 'Price', type: 'number' }
+                            ]
+                    };
+
+                let dataAdapter = new jqx.dataAdapter(source);
+
+                let settings = {
+                    width: 850,
+                    source: dataAdapter,
+                    columnsresize: true,
+                    autoheight: true,
+                    sortable: true,
+                    columns: [
+                        { text: 'First Name', dataField: 'First Name', align: 'center', width: 130 },
+                        { text: 'Last Name', dataField: 'Last Name', align: 'center', width: 130 },
+                        { text: 'Product', dataField: 'Product', align: 'center', width: 170 },
+                        { text: 'Available', dataField: 'Available', columntype: 'checkbox', align: 'center', width: 90 },
+                        { text: 'Ship Date', dataField: 'Ship Date', align: 'center', cellsformat: 'd', width: 100 },
+                        { text: 'Quantity', dataField: 'Quantity', align: 'center', cellsalign: 'right', width: 100 },
+                        { text: 'Price', dataField: 'Price', align: 'right', cellsalign: 'right', cellsformat: "c2" }
+                    ]
+                }
+
+                this.$refs.myGrid.createComponent(settings);
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button{
+        width: fit-content
+    }
+</style>
\ No newline at end of file
diff --git a/grid/loadfromtable/main.js b/grid/loadfromtable/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/loadfromtable/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/loadfromtable/package.json b/grid/loadfromtable/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/loadfromtable/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/localization/App.vue b/grid/localization/App.vue
new file mode 100644
index 00000000..ae63dfed
--- /dev/null
+++ b/grid/localization/App.vue
@@ -0,0 +1,50 @@
+<template>
+    <JqxGrid
+             :width="getWidth" :source="dataAdapter" :columns="columns"
+             :pageable="true" :showfilterrow="true" :filterable="true"
+             :autoheight="true" :editable="true" :selectionmode="'singlecell'"
+             :localization="localization">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', columntype: 'textbox', filtertype: 'textbox', datafield: 'name', width: 180 },
+                    { text: 'Produkt', filtertype: 'textbox', datafield: 'productname', width: 220 },
+                    { text: 'Datum', datafield: 'date', columntype: 'datetimeinput', filtertype: 'date', width: 210, cellsalign: 'right', cellsformat: 'd' },
+                    { text: 'Qt.', datafield: 'quantity', columntype: 'numberinput', filtertype: 'textbox', cellsalign: 'right', width: 60 },
+                    { text: 'Preis', datafield: 'price', columntype: 'numberinput', filtertype: 'textbox', cellsformat: 'c2', cellsalign: 'right' }
+                ],
+                localization: getLocalization('de')
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(250, false),
+                datafields:
+                    [
+                        { name: 'name', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/localization/main.js b/grid/localization/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/localization/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/localization/package.json b/grid/localization/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/localization/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/localizedaddnewrow/App.vue b/grid/localizedaddnewrow/App.vue
new file mode 100644
index 00000000..b9139d09
--- /dev/null
+++ b/grid/localizedaddnewrow/App.vue
@@ -0,0 +1,62 @@
+<template>
+    <JqxGrid
+             :width="getWidth" :source="dataAdapter" :columns="columns"
+             :filterable="true" :showeverpresentrow="true" :editable="true"
+             :everpresentrowposition="'top'" :localization="localization"
+             :selectionmode="'singlecell'">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215,
+                        validateEverPresentRowWidgetValue: (displayField, value, rowData) => {
+                            if (value.length < 5) {
+                                return { message: 'Entered value should be more than 5 characters', result: false };
+                            }
+                            return true;
+                        }
+                    },
+                    { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220 },
+                    { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd' },
+                    { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
+                ],
+                localization: {
+                    addrowstring: 'Apply',
+                    udpaterowstring: 'Update',
+                    deleterowstring: 'Delete',
+                    resetrowstring: 'Clear',
+                    everpresentrowplaceholder: 'Type: '
+                }
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(10, false),
+                datafields:
+                    [
+                        { name: 'name', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/localizedaddnewrow/main.js b/grid/localizedaddnewrow/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/localizedaddnewrow/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/localizedaddnewrow/package.json b/grid/localizedaddnewrow/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/localizedaddnewrow/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/manycolumns/App.vue b/grid/manycolumns/App.vue
new file mode 100644
index 00000000..6b242f13
--- /dev/null
+++ b/grid/manycolumns/App.vue
@@ -0,0 +1,47 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: this.columns
+            }
+        },
+        beforeCreate: function () {
+            let data = [];
+            let datafields = [];
+            this.columns = [];
+
+            for(let i = 0; i < 200; i++) {
+                let row = {};
+                for (let j = 0; j < 200; j++) {
+                    row['Name' + j] = 'Cell ' + (1 + i) + '.' + (1 + j);
+                    if (i == 0) {
+                        this.columns.push({ datafield: 'Name' + j, text: 'Column ' + (1 + j), width: 100 });
+                        datafields.push({ name: 'Name' + j, type: 'string' });
+                    }
+                }
+                data[i] = row;
+            }          
+
+            this.source = {
+                localdata: data,
+                datatype: 'array',
+                datafields: datafields
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/manycolumns/main.js b/grid/manycolumns/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/manycolumns/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/manycolumns/package.json b/grid/manycolumns/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/manycolumns/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/masterdetails/App.vue b/grid/masterdetails/App.vue
new file mode 100644
index 00000000..3e726402
--- /dev/null
+++ b/grid/masterdetails/App.vue
@@ -0,0 +1,117 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+        <h3>Customers</h3>
+
+        <JqxGrid ref="customersGrid" @rowselect="customersGridOnRowSelect($event)"
+                 :width="getWidth" :height="250" :source="dataAdapter"
+                 :keyboardnavigation="false" :columns="columns">
+        </JqxGrid>
+
+        <h3>Orders by Customer</h3>
+
+        <JqxGrid ref="ordersGrid"
+                 :width="getWidth" :height="250"
+                 :keyboardnavigation="false" :columns="columns2">
+        </JqxGrid>
+
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
+                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
+                    { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
+                    { text: 'City', datafield: 'City', width: 120 },
+                    { text: 'Country', datafield: 'Country' }
+                ],
+                columns2: [
+                    { text: 'OrderID', datafield: 'OrderID', width: 100 },
+                    { text: 'OrderDate', datafield: 'OrderDate', cellsformat: 'd', width: 150 },
+                    { text: 'Shipped Date', datafield: 'ShippedDate', cellsformat: 'd', width: 150 },
+                    { text: 'Ship Name', datafield: 'ShipName' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datafields: [
+                    { name: 'CustomerID' },
+                    { name: 'CompanyName' },
+                    { name: 'ContactName' },
+                    { name: 'ContactTitle' },
+                    { name: 'Address' },
+                    { name: 'City' },
+                    { name: 'Country' }
+                ],
+                localdata: [
+                    { 'CustomerID': 'AAA', 'CompanyName': 'Alfreds Futterkiste', 'ContactName': 'Maria Anders', 'ContactTitle': 'Sales Representative', 'City': 'Berlin', 'Country': 'Germany' },
+                    { 'CustomerID': 'BBB', 'CompanyName': 'Trujillo Emparedados', 'ContactName': 'Gerry Trujillo', 'ContactTitle': 'Owner', 'City': 'Paris', 'Country': 'France' },
+                    { 'CustomerID': 'CCC', 'CompanyName': 'Moreno Taquera', 'ContactName': 'Antonio Moreno', 'ContactTitle': 'Manager', 'City': 'Mxico D.F.', 'Country': 'Mexico' }
+                ]
+            };
+
+            this.dataFields2 = [
+                { name: 'CustomerID' },
+                { name: 'OrderID' },
+                { name: 'OrderDate', type: 'date' },
+                { name: 'ShippedDate', type: 'date' },
+                { name: 'ShipName' },
+                { name: 'ShipCountry' }
+            ];
+
+            const source2 = {
+                datafields: this.dataFields2,
+                localdata: [
+                    { 'OrderID': 10248, 'CustomerID': 'AAA', 'OrderDate': '1996-07-04 00:00:00', 'ShippedDate': '1996-07-16 00:00:00', 'ShipName': 'Vins et alcools Chevalier' },
+                    { 'OrderID': 10249, 'CustomerID': 'AAA', 'OrderDate': '1996-07-05 00:00:00', 'ShippedDate': '1996-07-17 00:00:00', 'ShipName': 'Toms Spezialitten' },
+                    { 'OrderID': 10250, 'CustomerID': 'AAA', 'OrderDate': '1996-07-06 00:00:00', 'ShippedDate': '1996-07-18 00:00:00', 'ShipName': 'Hanari Carnes' },
+                    { 'OrderID': 10251, 'CustomerID': 'BBB', 'OrderDate': '1996-07-07 00:00:00', 'ShippedDate': '1996-07-19 00:00:00', 'ShipName': 'Lady Of Seas' },
+                    { 'OrderID': 10252, 'CustomerID': 'BBB', 'OrderDate': '1996-07-08 00:00:00', 'ShippedDate': '1996-07-20 00:00:00', 'ShipName': 'Queen Victoria' },
+                    { 'OrderID': 10253, 'CustomerID': 'BBB', 'OrderDate': '1996-07-09 00:00:00', 'ShippedDate': '1996-07-21 00:00:00', 'ShipName': 'Poseidon' },
+                    { 'OrderID': 10254, 'CustomerID': 'CCC', 'OrderDate': '1996-07-10 00:00:00', 'ShippedDate': '1996-07-22 00:00:00', 'ShipName': 'Wreckno' },
+                    { 'OrderID': 10255, 'CustomerID': 'CCC', 'OrderDate': '1996-07-11 00:00:00', 'ShippedDate': '1996-07-23 00:00:00', 'ShipName': 'Flash' },
+                    { 'OrderID': 10256, 'CustomerID': 'CCC', 'OrderDate': '1996-07-12 00:00:00', 'ShippedDate': '1996-07-24 00:00:00', 'ShipName': 'Titan' }
+                ]
+            }
+
+            this.dataAdapter2 = new jqx.dataAdapter(source2, { autoBind: true });
+        },
+        methods: {
+            customersGridOnRowSelect: function(event) {
+                let customerID = event.args.row.CustomerID;
+                let records = new Array();
+                let dataAdapter = this.dataAdapter2;
+                let length = dataAdapter.records.length;
+
+                for (let i = 0; i < length; i++) {
+                    let record = dataAdapter.records[i];
+                    if (record.CustomerID == customerID) {
+                        records[records.length] = record;
+                    }
+                }
+                let dataSource = {
+                    datafields: this.dataFields2,
+                    localdata: records
+                }
+
+                let adapter = new jqx.dataAdapter(dataSource);
+
+                this.$refs.ordersGrid.source = adapter;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/masterdetails/main.js b/grid/masterdetails/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/masterdetails/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/masterdetails/package.json b/grid/masterdetails/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/masterdetails/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/nestedgrids/App.vue b/grid/nestedgrids/App.vue
new file mode 100644
index 00000000..30453408
--- /dev/null
+++ b/grid/nestedgrids/App.vue
@@ -0,0 +1,133 @@
+<template>
+    <JqxGrid ref="myGrid"
+             :width="getWidth" :height="365" :source="employeesAdapter" :columns="columns"
+             :rowdetails="true" :rowsheight="35" :initrowdetails="initRowDetails"
+             :ready="ready" :rowdetailstemplate="rowdetailstemplate">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                employeesAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Photo', width: 50, cellsrenderer: this.photoRenderer },
+                    { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: this.renderer },
+                    { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: this.renderer },
+                    { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: this.renderer },
+                    { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: this.renderer },
+                    { text: 'City', datafield: 'City', width: 170, cellsrenderer: this.renderer }
+                ],
+                rowdetailstemplate: {
+                    rowdetails: '<div id="nestedGrid" style="margin: 10px;"></div>', rowdetailsheight: 220, rowdetailshidden: true
+                }
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datafields: [
+                    { name: 'FirstName' },
+                    { name: 'LastName' },
+                    { name: 'Title' },
+                    { name: 'Address' },
+                    { name: 'City' }
+                ],
+                root: 'Employees',
+                record: 'Employee',
+                id: 'EmployeeID',
+                datatype: 'xml',
+                url: '../sampledata/employees.xml'
+            };
+
+            const ordersSource = {
+                    datafields: [
+                        { name: 'EmployeeID', type: 'string' },
+                        { name: 'ShipName', type: 'string' },
+                        { name: 'ShipAddress', type: 'string' },
+                        { name: 'ShipCity', type: 'string' },
+                        { name: 'ShipCountry', type: 'string' },
+                        { name: 'ShippedDate', type: 'date' }
+                    ],
+                    root: 'Orders',
+                    record: 'Order',
+                    datatype: 'xml',
+                    url: '../sampledata/orderdetails.xml'
+                }
+
+            this.ordersDataAdapter = new jqx.dataAdapter(ordersSource, { autoBind: true });
+            this.nestedGrids = [];
+        },
+        methods: {
+            initRowDetails: function (index, parentElement, gridElement, record) {
+                let id = record.uid.toString();
+                let nestedGridContainer = parentElement.children[0];
+                this.nestedGrids[index] = nestedGridContainer;
+                let filtergroup = new jqx.filter();
+                let filter_or_operator = 1;
+                let filtervalue = id;
+                let filtercondition = 'equal';
+                let filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
+                // fill the orders depending on the id.
+                let orders = this.ordersDataAdapter.records;
+                let ordersbyid = [];
+                for (let i = 0; i < orders.length; i++) {
+                    let result = filter.evaluate(orders[i]['EmployeeID']);
+                    if (result)
+                        ordersbyid.push(orders[i]);
+                }
+                let ordersSource = {
+                    datafields: [
+                        { name: 'EmployeeID', type: 'string' },
+                        { name: 'ShipName', type: 'string' },
+                        { name: 'ShipAddress', type: 'string' },
+                        { name: 'ShipCity', type: 'string' },
+                        { name: 'ShipCountry', type: 'string' },
+                        { name: 'ShippedDate', type: 'date' }
+                    ],
+                    id: 'OrderID',
+                    localdata: ordersbyid
+                }
+                let nestedGridAdapter = new jqx.dataAdapter(ordersSource);
+                if (nestedGridContainer != null) {
+
+                    let settings = {
+                        width: 780,
+                        height: 200,
+                        source: nestedGridAdapter,
+                        columns: [
+                            { text: 'Ship Name', datafield: 'ShipName', width: 200 },
+                            { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
+                            { text: 'Ship City', datafield: 'ShipCity', width: 150 },
+                            { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
+                            { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
+                        ]
+                    };
+
+                    jqwidgets.createInstance(`#${nestedGridContainer.id}`, 'jqxGrid', settings);
+                }
+            },
+            photoRenderer: function (row, column, value) {
+                let name = this.$refs.myGrid.getrowdata(row).FirstName;
+                let imgurl = '../../../images/' + name.toLowerCase() + '.png';
+                let img = '<div style="background: white;"><img style="margin: 2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>';
+                return img;
+            },
+            renderer: function(row, column, value) {
+                return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
+            },
+            ready: function() {
+                this.$refs.myGrid.showrowdetails(1);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/nestedgrids/main.js b/grid/nestedgrids/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/nestedgrids/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/nestedgrids/package.json b/grid/nestedgrids/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/nestedgrids/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/pagermodes/App.vue b/grid/pagermodes/App.vue
new file mode 100644
index 00000000..1d33b558
--- /dev/null
+++ b/grid/pagermodes/App.vue
@@ -0,0 +1,74 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :pageable="true" :sortable="true" :columnsresize="true"
+                 :autoheight="true" :pagermode="'simple'" :selectionmode="'multiplerowsextended'">
+        </JqxGrid>
+        <div style="margin-top: 30px">
+            <div style="float: left">
+                Pager Settings:
+                <JqxDropDownList @select="myListOnSelect($event)"
+                                 :width="150" :height="25" :selectedIndex="1"
+                                 :autoDropDownHeight="true" :source="['Default', 'Simple']">
+                </JqxDropDownList>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Ship Name', datafield: 'ShipName', width: 250 },
+                    { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
+                    { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
+                    { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
+                    { text: 'Ship City', datafield: 'ShipCity', width: 100 },
+                    { text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
+                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:OrderID',
+                url: '../sampledata/orders.xml'
+            };
+        },
+        methods: {
+            myListOnSelect: function(event) {
+                if (event.args.index === 0) {
+                    this.$refs.myGrid.pagermode = 'default';
+                }
+                else {
+                    this.$refs.myGrid.pagermode = 'simple';
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/pagermodes/main.js b/grid/pagermodes/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/pagermodes/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/pagermodes/package.json b/grid/pagermodes/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/pagermodes/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/paging/App.vue b/grid/paging/App.vue
new file mode 100644
index 00000000..79d87828
--- /dev/null
+++ b/grid/paging/App.vue
@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid" @pagechanged="onPageChanged($event)" @pagesizechanged="onPageSizeChanged($event)"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :pageable="true" :sortable="true" :columnsresize="true"
+                 :autoheight="true" :selectionmode="'multiplerowsextended'">
+        </JqxGrid>
+
+        <div ref="eventsLog" style="display: none; margin-top: 30px;">
+            <div style="float: left;">
+                Event Log:
+
+                <JqxPanel ref="myPanel" :width="300" :height="300"></JqxPanel>
+            </div>
+            <div style="float: left;">
+                Paging Details:
+                <div ref="pagingInfo"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Ship Name', datafield: 'ShipName', width: 250 },
+                    { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
+                    { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
+                    { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
+                    { text: 'Ship City', datafield: 'ShipCity', width: 100 },
+                    { text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
+                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:OrderID',
+                url: '../sampledata/orders.xml'
+            };
+        },
+        methods: {
+            onPageChanged: function(event) {
+                this.$refs.eventsLog.style.display = 'block';
+                let loggedElements = document.getElementsByClassName('logged');
+                if (loggedElements.length >= 5) {
+                    this.$refs.myPanel.clearcontent();
+                }
+                let args = event.args;
+                let eventData = 'pagechanged <div>Page:' + args.pagenum + ', Page Size: ' + args.pagesize + '</div>';
+                this.$refs.myPanel.prepend('<div class="logged" style="margin-top: 5px;">' + eventData + '</div>');
+                // get page information.
+                let paginginformation = this.$refs.myGrid.getpaginginformation();
+                this.$refs.pagingInfo.innerHTML = '<div style="margin-top: 5px;">Page:' + paginginformation.pagenum + ', Page Size: ' + paginginformation.pagesize + ', Pages Count: ' + paginginformation.pagescount + '</div>';
+            },
+            onPageSizeChanged: function (event) {
+                this.$refs.eventsLog.style.display = 'block';
+                this.$refs.myPanel.clearcontent();
+                let args = event.args;
+                let eventData = 'pagesizechanged <div>Page:' + args.pagenum + ', Page Size: ' + args.pagesize + ', Old Page Size: ' + args.oldpagesize + '</div>';
+                this.$refs.myPanel.prepend('<div style="margin-top: 5px">' + eventData + '</div>');
+                // get page information.
+                let paginginformation = this.$refs.myGrid.getpaginginformation();
+                this.$refs.pagingInfo.innerHTML = '<div style="margin-top: 5px;">Page:' + paginginformation.pagenum + ', Page Size: ' + paginginformation.pagesize + ', Pages Count: ' + paginginformation.pagescount + '</div>';
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-panel{
+        border: none;
+    }
+</style>
\ No newline at end of file
diff --git a/grid/paging/main.js b/grid/paging/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/paging/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/paging/package.json b/grid/paging/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/paging/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/percentagewidthforcolumns/App.vue b/grid/percentagewidthforcolumns/App.vue
new file mode 100644
index 00000000..136bb0cd
--- /dev/null
+++ b/grid/percentagewidthforcolumns/App.vue
@@ -0,0 +1,46 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+        <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns">
+        </JqxGrid>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', datafield: 'name', width: '30%' },
+                    { text: 'Beverage Type', datafield: 'type', width: '25%' },
+                    { text: 'Calories', datafield: 'calories', width: '15%' },
+                    { text: 'Total Fat', datafield: 'totalfat', width: '15%' },
+                    { text: 'Protein', datafield: 'protein', width: '15%' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'name', type: 'string' },
+                    { name: 'type', type: 'string' },
+                    { name: 'calories', type: 'int' },
+                    { name: 'totalfat', type: 'string' },
+                    { name: 'protein', type: 'string' },
+                ],
+                id: 'id',
+                url: '../sampledata/beverages.txt'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/percentagewidthforcolumns/main.js b/grid/percentagewidthforcolumns/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/percentagewidthforcolumns/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/percentagewidthforcolumns/package.json b/grid/percentagewidthforcolumns/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/percentagewidthforcolumns/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/pinnedfrozencolumns/App.vue b/grid/pinnedfrozencolumns/App.vue
new file mode 100644
index 00000000..a20c7054
--- /dev/null
+++ b/grid/pinnedfrozencolumns/App.vue
@@ -0,0 +1,52 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+        <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :sortable="true" :pageable="true" :autoheight="true">
+        </JqxGrid>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Product Name', datafield: 'ProductName', width: 250, pinned: true },
+                    { text: 'Category', datafield: 'CategoryID', width: 120, cellsalign: 'right' },
+                    { text: 'Quantity Per Unit', datafield: 'QuantityPerUnit', width: 200, cellsalign: 'right' },
+                    { text: 'Unit Price', datafield: 'UnitPrice', width: 120, cellsformat: 'c2', cellsalign: 'right' },
+                    { text: 'Units On Order', datafield: 'UnitsOnOrder', width: 120, cellsalign: 'right' },
+                    { text: 'Reorder Level', datafield: 'ReorderLevel', width: 120, cellsalign: 'right' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ProductName' },
+                    { name: 'QuantityPerUnit' },
+                    { name: 'UnitPrice', type: 'float' },
+                    { name: 'UnitsInStock', type: 'float' },
+                    { name: 'UnitsOnOrder', type: 'float' },
+                    { name: 'ReorderLevel', type: 'float' },
+                    { name: 'CategoryID', type: 'int' }
+                ],
+                root: 'Products',
+                record: 'Product',
+                id: 'ProductID',
+                url: '../sampledata/products.xml'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/pinnedfrozencolumns/main.js b/grid/pinnedfrozencolumns/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/pinnedfrozencolumns/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/pinnedfrozencolumns/package.json b/grid/pinnedfrozencolumns/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/pinnedfrozencolumns/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/popupediting/App.vue b/grid/popupediting/App.vue
new file mode 100644
index 00000000..e7ce75d7
--- /dev/null
+++ b/grid/popupediting/App.vue
@@ -0,0 +1,162 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid" class="grid"
+                 :width="getWidth" :source="dataAdapter" :pageable="true"
+                 :autoheight="true" :columns="columns">
+        </JqxGrid>
+
+        <JqxWindow ref="myWindow" :width="250" :height="230" :resizable="false" :isModal="false" :autoOpen="false">
+            <div>Edit</div>
+            <div style="overflow: hidden;">
+                <table>
+                    <tr>
+                        <td align="right">First Name:</td>
+                        <td align="left">
+
+                            <JqxInput ref="firstname" :width="150" :height="23"></JqxInput>
+
+                        </td>
+                    </tr>
+                    <tr>
+                        <td align="right">Last Name:</td>
+                        <td align="left">
+
+                            <JqxInput ref="lastname" :width="150" :height="23"></JqxInput>
+
+                        </td>
+                    </tr>
+                    <tr>
+                        <td align="right">Product:</td>
+                        <td align="left">
+
+                            <JqxInput ref="product" :width="150" :height="23"></JqxInput>
+
+                        </td>
+                    </tr>
+                    <tr>
+                        <td align="right">Quantity:</td>
+                        <td align="left">
+
+                            <JqxNumberInput ref="quantity"
+                                            :width="150" :height="23" :decimalDigits="0"
+                                            :min="0" :spinButtons="true" :spinMode="'simple'">
+                            </JqxNumberInput>
+
+                        </td>
+                    </tr>
+                    <tr>
+                        <td align="right">Price:</td>
+                        <td align="left">
+
+                            <JqxNumberInput ref="price"
+                                            :width="150" :height="23" :symbol="'$'"
+                                            :min="0" :spinButtons="true" :spinMode="'simple'">
+                            </JqxNumberInput>
+
+                        </td>
+                    </tr>
+                    <tr style="text-align: center;">
+                        <td style="padding-top: 10px;">
+                            <JqxButton @click="saveBtn()">
+                                Save
+                            </JqxButton>
+                        </td>
+                        <td style="padding-top: 10px;">
+                            <JqxButton @click="cancelBtn()">
+                                Cancel
+                            </JqxButton>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </JqxWindow>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxWindow from "jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+    import JqxNumberInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxWindow,
+            JqxInput,
+            JqxNumberInput,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', datafield: 'firstname', width: 200 },
+                    { text: 'Last Name', datafield: 'lastname', width: 200 },
+                    { text: 'Product', datafield: 'productname', width: 190 },
+                    { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
+                    { text: 'Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
+                    {
+                        text: 'Edit', datafield: 'Edit', columntype: 'button',
+                        cellsrenderer: () => {
+                            return 'Edit';
+                        },
+                        buttonclick: (row) => {
+                            //get the data and append in to the inputs
+                            this.editrow = row;
+                            let dataRecord = this.$refs.myGrid.getrowdata(this.editrow);
+                            this.$refs.firstname.val(dataRecord.firstname);
+                            this.$refs.lastname.val(dataRecord.lastname);
+                            this.$refs.product.val(dataRecord.productname);
+                            this.$refs.quantity.decimal = dataRecord.quantity;
+                            this.$refs.price.decimal = dataRecord.price;
+                            // show the popup window.
+                            this.$refs.myWindow.position = { x: 68, y: 368 };
+                            this.$refs.myWindow.open();
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(200, false),
+                datatype: 'array',
+                datafields: [
+                    { name: 'firstname', type: 'string' },
+                    { name: 'lastname', type: 'string' },
+                    { name: 'productname', type: 'string' },
+                    { name: 'quantity', type: 'number' },
+                    { name: 'price', type: 'number' }
+                ]
+            };
+
+            this.editrow = -1;
+        },
+        methods: {
+            saveBtn: function () {
+                if (this.editrow >= 0) {
+                    let row =
+                        {
+                            firstname: this.$refs.firstname.val(),
+                            lastname: this.$refs.lastname.val(),
+                            productname: this.$refs.product.val(),
+                            quantity: parseInt(this.$refs.quantity.decimal),
+                            price: parseFloat(this.$refs.price.decimal)
+                        };
+                    let rowID = this.$refs.myGrid.getrowid(this.editrow);
+                    this.$refs.myGrid.updaterow(rowID, row);
+                    this.$refs.myWindow.hide();
+                }
+            },
+            cancelBtn: function () {
+                this.$refs.myWindow.hide();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/popupediting/main.js b/grid/popupediting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/popupediting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/popupediting/package.json b/grid/popupediting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/popupediting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/positioning/App.vue b/grid/positioning/App.vue
new file mode 100644
index 00000000..27c24789
--- /dev/null
+++ b/grid/positioning/App.vue
@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :filterable="true" :showeverpresentrow="true" :editable="true"
+                 :showfilterrow="true" :everpresentrowposition="'top'" 
+                 :selectionmode="'multiplecellsadvanced'">
+        </JqxGrid>
+        <br />
+        <JqxRadioButton @checked="topBtnOnChecked()" :checked="true">Top Position</JqxRadioButton>
+        <JqxRadioButton @checked="topAboveFilterRowBtnOnChecked()">Top Position Above Filter Row</JqxRadioButton>
+        <JqxRadioButton @checked="bottomBtnOnChecked()">Bottom Position</JqxRadioButton>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxRadioButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 },
+                    { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220 },
+                    { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd' },
+                    { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(20, false),
+                datafields:
+                    [
+                        { name: 'name', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        },
+        methods: {
+            topBtnOnChecked: function() {
+                this.$refs.myGrid.everpresentrowposition = 'top';
+            },
+            topAboveFilterRowBtnOnChecked: function () {
+                this.$refs.myGrid.everpresentrowposition = 'topAboveFilterRow';
+            },
+            bottomBtnOnChecked: function() {
+                this.$refs.myGrid.everpresentrowposition = 'bottom';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/positioning/main.js b/grid/positioning/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/positioning/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/positioning/package.json b/grid/positioning/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/positioning/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/refreshdata/App.vue b/grid/refreshdata/App.vue
new file mode 100644
index 00000000..229e69fb
--- /dev/null
+++ b/grid/refreshdata/App.vue
@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :height="300" :source="dataAdapter" :columns="columns">
+        </JqxGrid>
+
+        <div style="margin-top: 10px">
+            <JqxButton @click="refreshBtnOnClick()">Refresh Data</JqxButton>
+            <JqxButton @click="clearBtnOnClick()">Clear</JqxButton>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', dataField: 'firstname', width: 130 },
+                    { text: 'Last Name', dataField: 'lastname', width: 130 },
+                    { text: 'Product', dataField: 'productname', width: 180 },
+                    { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
+                    { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(500, false),
+                datafields:
+                    [
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'total', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        },
+        methods: {
+            refreshBtnOnClick: function() {
+                this.source.localdata = generatedata(500, false);
+                // passing 'cells' to the 'updatebounddata' method will refresh only the cells values when the new rows count is equal to the previous rows count.
+                this.$refs.myGrid.updatebounddata('cells');
+            },
+            clearBtnOnClick: function () {
+                this.$refs.myGrid.clear();
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button{
+        width: fit-content;
+        display: inline;
+        margin-right: 5px;
+    }
+</style>
\ No newline at end of file
diff --git a/grid/refreshdata/main.js b/grid/refreshdata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/refreshdata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/refreshdata/package.json b/grid/refreshdata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/refreshdata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/righttoleftlayout/App.vue b/grid/righttoleftlayout/App.vue
new file mode 100644
index 00000000..5be1e14f
--- /dev/null
+++ b/grid/righttoleftlayout/App.vue
@@ -0,0 +1,48 @@
+<template>
+    <JqxGrid :width="getWidth" :height="450" :source="dataAdapter" :columns="columns" :rtl="true">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Ship Name', datafield: 'ShipName', width: 250, align: 'right', cellsalign: 'right' },
+                    { text: 'Shipped Date', datafield: 'ShippedDate', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'yyyy-MM-dd' },
+                    { text: 'Freight', datafield: 'Freight', width: 80, align: 'right', cellsformat: 'F2', cellsalign: 'right' },
+                    { text: 'Ship Address', datafield: 'ShipAddress', align: 'right', width: 350, cellsalign: 'right' },
+                    { text: 'Ship City', datafield: 'ShipCity', width: 100, align: 'right', cellsalign: 'right' },
+                    { text: 'Ship Country', datafield: 'ShipCountry', align: 'right', cellsalign: 'right' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
+                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:OrderID',
+                url: '../sampledata/orders.xml'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/righttoleftlayout/main.js b/grid/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/righttoleftlayout/package.json b/grid/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/rowdetails/App.vue b/grid/rowdetails/App.vue
new file mode 100644
index 00000000..9f9f03bc
--- /dev/null
+++ b/grid/rowdetails/App.vue
@@ -0,0 +1,169 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :height="250" :source="dataAdapter" :columns="columns"
+                 :rowdetails="true" :initrowdetails="initrowdetails"
+                 :rowdetailstemplate="rowdetailstemplate" :ready="ready">
+        </JqxGrid>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxTabs from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxTabs
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', datafield: 'firstname', width: 200 },
+                    { text: 'Last Name', datafield: 'lastname', width: 200 },
+                    { text: 'Title', datafield: 'title', width: 180 },
+                    { text: 'City', datafield: 'city', width: 100 },
+                    { text: 'Country', datafield: 'country' }
+                ],
+                rowdetailstemplate: {
+                    rowdetails: '<div style="margin: 10px;"><ul style="margin-left: 30px;"><li class="title"></li><li>Notes</li></ul><div class="information"></div><div class="notes"></div></div>',
+                    rowdetailsheight: 200
+                }
+            }
+        },
+        beforeCreate: function () {
+            const generateData = () => {
+                let data = new Array();
+                let firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne'];
+                let lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth'];
+                let titles = ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager', 'Sales Representative', 'Sales Representative', 'Inside Sales Coordinator', 'Sales Representative'];
+                let titleofcourtesy = ['Ms.', 'Dr.', 'Ms.', 'Mrs.', 'Mr.', 'Mr.', 'Mr.', 'Ms.', 'Ms.'];
+                let birthdate = ['08-Dec-48', '19-Feb-52', '30-Aug-63', '19-Sep-37', '04-Mar-55', '02-Jul-63', '29-May-60', '09-Jan-58', '27-Jan-66'];
+                let hiredate = ['01-May-92', '14-Aug-92', '01-Apr-92', '03-May-93', '17-Oct-93', '17-Oct-93', '02-Jan-94', '05-Mar-94', '15-Nov-94'];
+                let address = ['507 - 20th Ave. E. Apt. 2A', '908 W. Capital Way', '722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House', 'Miner Rd.', 'Edgeham Hollow', 'Winchester Way', '4726 - 11th Ave. N.E.', '7 Houndstooth Rd.'];
+                let city = ['Seattle', 'Tacoma', 'Kirkland', 'Redmond', 'London', 'London', 'London', 'Seattle', 'London'];
+                let postalcode = ['98122', '98401', '98033', '98052', 'SW1 8JR', 'EC2 7JR', 'RG1 9SP', '98105', 'WG2 7LT'];
+                let country = ['USA', 'USA', 'USA', 'USA', 'UK', 'UK', 'UK', 'USA', 'UK'];
+                let homephone = ['(206) 555-9857', '(206) 555-9482', '(206) 555-3412', '(206) 555-8122', '(71) 555-4848', '(71) 555-7773', '(71) 555-5598', '(206) 555-1189', '(71) 555-4444'];
+                let notes = ['Education includes a BA in psychology from Colorado State University in 1970.  She also completed `The Art of the Cold Call.`  Nancy is a member of Toastmasters International.',
+                    'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
+                    'Janet has a BS degree in chemistry from Boston College (1984).  She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
+                    'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.',
+                    'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London.  He was promoted to sales manager in March 1993.  Mr. Buchanan has completed the courses `Successful Telemarketing` and `International Sales Management.`  He is fluent in French.',
+                    'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986).  He has also taken the courses `Multi-Cultural Selling` and `Time Management for the Sales Professional.`  He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
+                    'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company.  After completing a course entitled `Selling in Europe,` he was transferred to the London office in March 1993.',
+                    'Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.',
+                    'Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.'];
+                let k = 0;
+                for (let i = 0; i < firstNames.length; i++) {
+                    let datarecord = {};
+                    datarecord['firstname'] = firstNames[k];
+                    datarecord['lastname'] = lastNames[k];
+                    datarecord['title'] = titles[k];
+                    datarecord['titleofcourtesy'] = titleofcourtesy[k];
+                    datarecord['birthdate'] = birthdate[k];
+                    datarecord['hiredate'] = hiredate[k];
+                    datarecord['address'] = address[k];
+                    datarecord['city'] = city[k];
+                    datarecord['postalcode'] = postalcode[k];
+                    datarecord['country'] = country[k];
+                    datarecord['homephone'] = homephone[k];
+                    datarecord['notes'] = notes[k];
+                    data[i] = datarecord;
+                    k++;
+                }
+                return data;
+            };
+
+            this.source = {
+                localdata: generateData(),
+                datatype: 'array'
+            };
+        },
+        methods: {
+            initrowdetails: function (index, parentElement, gridElement, datarecord) {
+                let tabsdiv = parentElement.children[0];
+                let information = tabsdiv.children[1];
+                let notes = tabsdiv.children[2];
+                let title = tabsdiv.children[0].children[0];
+
+                if (tabsdiv != null) {
+                    title.innerHTML = datarecord.firstname;
+
+                    let container = document.createElement('div');
+                    container.style.margin = '5px';
+                    information.appendChild(container);
+
+                    let photocolumn = document.createElement('div');
+                    let leftcolumn = document.createElement('div');
+                    let rightcolumn = document.createElement('div');
+
+                    photocolumn.style.cssText = 'float: left; width: 15%';
+                    leftcolumn.style.cssText = 'float: left; width: 45%';
+                    rightcolumn.style.cssText = 'float: left; width: 40%';
+
+                    container.appendChild(photocolumn);
+                    container.appendChild(leftcolumn);
+                    container.appendChild(rightcolumn);
+
+                    let image = document.createElement('div');
+                    image.style.marginTop = '10px';
+
+                    let photo = document.createElement('div');
+                    photo.style.margin = '10px';
+                    photo.className = 'jqx-rc-all';
+                    photo.innerHTML = '<b>Photo:</b>';
+
+                    let img = document.createElement('img');
+                    img.height = 60;
+                    img.style.marginLeft = '10px';
+                    img.src = '../../../images/' + datarecord.firstname.toLowerCase() + '.png';
+
+                    image.appendChild(photo);
+                    image.appendChild(img);
+                    photocolumn.appendChild(image);
+
+                    let firstname = '<div style="margin: 10px;"><b>First Name:</b> ' + datarecord.firstname + '</div>';
+                    let lastname = '<div style="margin: 10px;"><b>Last Name:</b> ' + datarecord.lastname + '</div>';
+                    title = '<div style="margin: 10px;"><b>Title:</b> ' + datarecord.title + '</div>';
+                    let address = '<div style="margin: 10px;"><b>Address:</b> ' + datarecord.address + '</div>';
+
+                    leftcolumn.insertAdjacentHTML('beforeend', firstname);
+                    leftcolumn.insertAdjacentHTML('beforeend', lastname);
+                    leftcolumn.insertAdjacentHTML('beforeend', title);
+                    leftcolumn.insertAdjacentHTML('beforeend', address);
+
+                    let postalcode = '<div style="margin: 10px;"><b>Postal Code:</b> ' + datarecord.postalcode + '</div>';
+                    let city = '<div style="margin: 10px;"><b>City:</b> ' + datarecord.city + '</div>';
+                    let phone = '<div style="margin: 10px;"><b>Phone:</b> ' + datarecord.homephone + '</div>';
+                    let hiredate = '<div style="margin: 10px;"><b>Hire Date:</b> ' + datarecord.hiredate + '</div>';
+
+                    rightcolumn.insertAdjacentHTML('beforeend', postalcode);
+                    rightcolumn.insertAdjacentHTML('beforeend', city);
+                    rightcolumn.insertAdjacentHTML('beforeend', phone);
+                    rightcolumn.insertAdjacentHTML('beforeend', hiredate);
+
+                    let notesContainer = document.createElement('div');
+                    notesContainer.style.cssText = 'white-space: normal; margin: 5px;';
+                    notesContainer.innerHTML = '<span>' + datarecord.notes + '</span>';
+
+                    notes.appendChild(notesContainer);
+
+                    tabsdiv.className = 'angularTabs';
+
+                    jqwidgets.createInstance('.angularTabs', 'jqxTabs', { width: 780, height: 170 })
+                }
+            },
+            ready: function() {
+                this.$refs.myGrid.showrowdetails(0);
+                this.$refs.myGrid.showrowdetails(1);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/rowdetails/main.js b/grid/rowdetails/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/rowdetails/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/rowdetails/package.json b/grid/rowdetails/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/rowdetails/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/roweditwitheverpresentrow/App.vue b/grid/roweditwitheverpresentrow/App.vue
new file mode 100644
index 00000000..a63bc7b0
--- /dev/null
+++ b/grid/roweditwitheverpresentrow/App.vue
@@ -0,0 +1,45 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+             :filterable="true" :showeverpresentrow="true"
+             :everpresentrowactions="'update reset'" :autoheight="true">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 },
+                    { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220 },
+                    { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd' },
+                    { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(10, false),
+                datafields:
+                    [
+                        { name: 'name', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/roweditwitheverpresentrow/main.js b/grid/roweditwitheverpresentrow/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/roweditwitheverpresentrow/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/roweditwitheverpresentrow/package.json b/grid/roweditwitheverpresentrow/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/roweditwitheverpresentrow/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/rownumbercolumn/App.vue b/grid/rownumbercolumn/App.vue
new file mode 100644
index 00000000..b5a29682
--- /dev/null
+++ b/grid/rownumbercolumn/App.vue
@@ -0,0 +1,54 @@
+<template>
+    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+             :columnsresize="true">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: '#', sortable: false, filterable: false, editable: false,
+                        groupable: false, draggable: false, resizable: false,
+                        datafield: '', columntype: 'number', width: 50,
+                        cellsrenderer: (row, column, value) => {
+                            return '<div style="margin: 4px;">' + (value + 1) + '</div>';
+                        }
+                    },
+                    { text: 'Name', datafield: 'firstname', width: 120 },
+                    { text: 'Last Name', datafield: 'lastname', width: 120 },
+                    { text: 'Product', datafield: 'productname', width: 180 },
+                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
+                    { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(200),
+                datatype: 'array',
+                datafields: [
+                    { name: 'firstname', type: 'string' },
+                    { name: 'lastname', type: 'string' },
+                    { name: 'productname', type: 'string' },
+                    { name: 'quantity', type: 'number' },
+                    { name: 'price', type: 'number' },
+                    { name: 'total', type: 'number' }
+                ]
+            };
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/rownumbercolumn/main.js b/grid/rownumbercolumn/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/rownumbercolumn/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/rownumbercolumn/package.json b/grid/rownumbercolumn/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/rownumbercolumn/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/rowselection/App.vue b/grid/rowselection/App.vue
new file mode 100644
index 00000000..06b925de
--- /dev/null
+++ b/grid/rowselection/App.vue
@@ -0,0 +1,169 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+
+        <JqxGrid ref="myGrid" @rowselect="myGridOnRowSelect($event)" @rowunselect="myGridOnRowUnselect($event)"
+                 :width="getWidth" :height="350" :source="dataAdapter" :columns="columns">
+        </JqxGrid>
+
+        <div style="margin-top: 20px">
+            <div style="float: left">
+                <div>
+
+                    <JqxInput ref="myInput1" style="float: left; margin-right: 5px"
+                              :width="50" :height="20" :value="100">
+                    </JqxInput>
+
+                    <JqxButton style="float: left" @click="scrollToBtnOnClick()">Scroll to Row</JqxButton>
+
+                </div>
+                <div style="clear: both"></div>
+                <div style="margin-top: 10px;">
+
+                    <JqxInput ref="myInput2" style="float: left" :width="50" :value="0"></JqxInput>
+
+                    <JqxButton ref="mySelectRowBtn" style="float: left; margin-left: 5px" @click="selectRowBtnOnClick()">Select Row</JqxButton>
+
+                    <JqxButton style="float: left; margin-left: 5px" @click="clearSelectionBtnOnClick()">Clear Selection</JqxButton>
+
+                </div>
+                <div style="clear: both"></div>
+
+                <div style="margin-top: 10px;">
+                    <JqxCheckBox :checked="true" @change="enableHoverOnChange($event)">Enable Hover</JqxCheckBox>
+                </div>
+
+                <div style="margin-top: 10px">
+                    <span>Selection Mode:</span>
+
+                    <JqxDropDownList style="margin-top: 5px" @select="enableSelectionOnSelect($event)"
+                                     :width="120" :height="25" :selectedIndex="1" :dropDownWidth="200"
+                                     :autoDropDownHeight="true" :source="dropDownSource">
+                    </JqxDropDownList>
+
+                    <div style="margin-top: 10px; font-size: 12px; font-family: Verdana">
+                        Selection Modes:
+                        <ul>
+                            <li>'none' - disables the selection. Selection is possible only through the API.</li>
+                            <li>'singlerow' - full row selection. Each click changes the selected row.</li>
+                            <li>'multiplerows' - each click selects a new row. Click on a selected row unselects it.</li>
+                            <li>'multiplerowsextended' - users can select multiple rows with drag and drop or<br /> by clicking on rows while holding Ctrl or Shift.</li>
+                        </ul>
+                    </div>
+
+                </div>
+            </div>
+            <div style="clear: both; font-size: 12px; font-family: Verdana;">
+                <span>Selection Log:</span>
+                <div style="margin-top: 10px">
+                    <span>Selected Row Index:</span>
+                    <span ref="selectedRowIndex"></span>
+                    <br />
+                    <span>Unselected Row Index:</span>
+                    <span ref="unselectedRowIndex"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxInput,
+            JqxButton,
+            JqxCheckBox,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', datafield: 'firstname', width: 200 },
+                    { text: 'Last Name', datafield: 'lastname', width: 200 },
+                    { text: 'Product', datafield: 'productname', width: 180 },
+                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
+                ],
+                dropDownSource: ['none', 'single row', 'multiple rows', 'multiple rows extended', 'multiple rows advanced']
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(200, false),
+                datafields:
+                    [
+                        { name: 'id', type: 'number' },
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'total', type: 'number' }
+                    ],
+                datatype: 'array'
+            };
+        },
+        mounted: function () {
+            this.$refs.myGrid.selectrow(2);
+        },
+        methods: {
+            scrollToBtnOnClick: function() {
+                let index = parseInt(this.$refs.myInput1.val());
+                if (!isNaN(index)) {
+                    this.$refs.myGrid.ensurerowvisible(index);
+                }
+            },
+            selectRowBtnOnClick: function() {
+                let index = parseInt(this.$refs.myInput2.val());
+                if (!isNaN(index)) {
+                    this.$refs.myGrid.selectrow(index);
+                }
+            },
+            clearSelectionBtnOnClick: function() {
+                this.$refs.myGrid.clearselection();
+            },
+            enableSelectionOnSelect: function(event) {
+                let index = event.args.index;
+                this.$refs.mySelectRowBtn.disabled = false;
+                switch (index) {
+                    case 0:
+                        this.$refs.myGrid.selectionmode = 'none';
+                        this.$refs.mySelectRowBtn.disabled = true;
+                        break;
+                    case 1:
+                        this.$refs.myGrid.selectionmode = 'singlerow';
+                        break;
+                    case 2:
+                        this.$refs.myGrid.selectionmode = 'multiplerows';
+                        break;
+                    case 3:
+                        this.$refs.myGrid.selectionmode = 'multiplerowsextended';
+                        break;
+                    case 4:
+                        this.$refs.myGrid.selectionmode = 'multiplerowsadvanced';
+                        break;
+                }
+            },
+            enableHoverOnChange: function(event) {
+                this.$refs.myGrid.enablehover = event.args.checked;
+            },
+            myGridOnRowSelect: function(event) {
+                this.$refs.selectedRowIndex.innerHTML = event.args.rowindex;
+            },
+            myGridOnRowUnselect: function(event) {
+                this.$refs.unselectedRowIndex.innerHTML = event.args.rowindex;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/rowselection/main.js b/grid/rowselection/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/rowselection/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/rowselection/package.json b/grid/rowselection/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/rowselection/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/showhidecolumns/App.vue b/grid/showhidecolumns/App.vue
new file mode 100644
index 00000000..1bc1ee76
--- /dev/null
+++ b/grid/showhidecolumns/App.vue
@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <JqxListBox style="float: left" @checkChange="myListBoxOnCheckChange($event)"
+                    :width="200" :height="200" :source="listBoxSource" :checkboxes="true">
+        </JqxListBox>
+
+        <JqxGrid ref="myGrid" style="float: left; margin-left: 20px"
+                 :width="600" :source="dataAdapter" :columns="columns" :columnsresize="true">
+        </JqxGrid>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxListBox,
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', datafield: 'name', width: 100, hidden: true },
+                    { text: 'Beverage Type', datafield: 'type' },
+                    { text: 'Calories', datafield: 'calories' },
+                    { text: 'Total Fat', datafield: 'totalfat' },
+                    { text: 'Protein', datafield: 'protein' }
+                ],
+                listBoxSource: [
+                    { label: 'Name', value: 'name', checked: false },
+                    { label: 'Beverage Type', value: 'type', checked: true },
+                    { label: 'Calories', value: 'calories', checked: true },
+                    { label: 'Total Fat', value: 'totalfat', checked: true },
+                    { label: 'Protein', value: 'protein', checked: true }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'name' },
+                    { name: 'type' },
+                    { name: 'calories', type: 'int' },
+                    { name: 'totalfat' },
+                    { name: 'protein' }
+                ],
+                id: 'id',
+                url: '../sampledata/beverages.txt'
+            };
+        },
+        methods: {
+            myListBoxOnCheckChange: function(event) {
+                this.$refs.myGrid.beginupdate();
+                if (event.args.checked) {
+                    this.$refs.myGrid.showcolumn(event.args.value);
+                }
+                else {
+                    this.$refs.myGrid.hidecolumn(event.args.value);
+                }
+                this.$refs.myGrid.endupdate();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/showhidecolumns/main.js b/grid/showhidecolumns/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/showhidecolumns/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/showhidecolumns/package.json b/grid/showhidecolumns/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/showhidecolumns/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/sorting/App.vue b/grid/sorting/App.vue
new file mode 100644
index 00000000..03b01546
--- /dev/null
+++ b/grid/sorting/App.vue
@@ -0,0 +1,101 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+
+        <JqxGrid ref="myGrid" @sort="myGridOnSort($event)"
+                 :width="850" :height="450" :source="dataAdapter" :columns="columns"
+                 :sortable="true" :altrows="true" :filterable="true"
+                 :selectionmode="'multiplecellsadvanced'">
+        </JqxGrid>
+
+        <div style="margin-top: 30px">
+            <div style="float: left; margin-right: 10px">
+
+                <JqxButton @click="removeSortBtnOnClick()" :height="20">Remove Sort</JqxButton>
+
+                <div style="margin-top: 10px"></div>
+
+                <JqxCheckBox @change="sortBackGroundBtn($event)" :height="25" :checked="true">Sort Background</JqxCheckBox>
+
+            </div>
+
+            <div style="margin-left: 100px; float: left">
+                Event Log:
+
+                <JqxPanel ref="myPanel" :width="300" :height="80"></JqxPanel>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxButton,
+            JqxCheckBox,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Ship Name', datafield: 'ShipName', width: 250 },
+                    { text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd' },
+                    { text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right' },
+                    { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
+                    { text: 'Ship City', datafield: 'ShipCity', width: 100 },
+                    { text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
+                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: { name: 'OrderID', map: 'm\\:properties>d\\:OrderID' },
+                url: '../sampledata/orders.xml',
+                sortcolumn: 'ShipName',
+                sortdirection: 'asc'
+            };
+        },
+        methods: {
+            myGridOnSort: function(event) {
+                this.$refs.myPanel.clearcontent();
+                let sortinformation = event.args.sortinformation;
+                let sortdirection = sortinformation.sortdirection.ascending ? 'ascending' : 'descending';
+                if (!sortinformation.sortdirection.ascending && !sortinformation.sortdirection.descending) {
+                    sortdirection = 'null';
+                }
+                let eventData = 'Triggered "sort" event <div>Column:' + sortinformation.sortcolumn + ', Direction: ' + sortdirection + '</div>';
+                this.$refs.myPanel.prepend('<div style="margin-top: 5px;">' + eventData + '</div>');
+            },
+            removeSortBtnOnClick: function () {
+                this.$refs.myGrid.removesort();
+            },
+            sortBackGroundBtn: function(event) {
+                this.$refs.myGrid.showsortcolumnbackground = event.args.checked;
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-panel {
+        border: none
+    }
+</style>
\ No newline at end of file
diff --git a/grid/sorting/main.js b/grid/sorting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/sorting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/sorting/package.json b/grid/sorting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/sorting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/spreadsheet/App.vue b/grid/spreadsheet/App.vue
new file mode 100644
index 00000000..249f6847
--- /dev/null
+++ b/grid/spreadsheet/App.vue
@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :columnsresize="true" :editable="true" :selectionmode="'multiplecellsadvanced'">
+        </JqxGrid>
+        <div style="margin-top: 20px; float: left">
+            <JqxButton @click="myBtnOnClick()">Export to Excel</JqxButton>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: this.columns
+            }
+        },
+        beforeCreate: function () {
+            this.columns = [];
+            let datafields = [];
+          
+            const numberrenderer = (row, column, value) => {
+                return '<div style="text-align: center; margin-top: 5px;">' + (1 + value) + '</div>';
+            };
+
+            generateData = () => {
+                for(let i = 0; i < 26; i++) {
+                    let text = String.fromCharCode(65 + i);
+                    if (i == 0) {
+                        let cssclass = 'jqx-widget-header';
+                        this.columns[this.columns.length] = { pinned: true, exportable: false, text: '', columntype: 'number', cellclassname: cssclass, cellsrenderer: numberrenderer };
+                    }
+                    datafields[datafields.length] = { name: text };
+                    this.columns[this.columns.length] = { text: text, datafield: text, width: 60, align: 'center' };
+                }
+            };
+            generateData();
+
+            this.source = {
+                unboundmode: true,
+                totalrecords: 100,
+                datafields: datafields
+            };
+        },
+        methods: {
+            myBtnOnClick: function () {
+                this.$refs.myGrid.exportdata('xls', 'jqxGrid', false);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/spreadsheet/main.js b/grid/spreadsheet/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/spreadsheet/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/spreadsheet/package.json b/grid/spreadsheet/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/spreadsheet/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/statemaintenance/App.vue b/grid/statemaintenance/App.vue
new file mode 100644
index 00000000..e3c01216
--- /dev/null
+++ b/grid/statemaintenance/App.vue
@@ -0,0 +1,80 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :pageable="true" :sortable="true" :altrows="true" :filterable="true"
+                 :columnsreorder="true" :autoloadstate="true" :autosavestate="true"
+                 :autoheight="true" :editable="true" :columnsresize="true"
+                 :showfilterrow="true" :selectionmode="'multiplerowsextended'">
+        </JqxGrid>
+
+        <div style="margin-top: 30px; float: left">
+
+            <JqxButton @click="saveStatebtn()">Save State</JqxButton>
+
+            <JqxButton @click="loadStateBtn()">Load State</JqxButton>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Ship Name', filtercondition: 'starts_with', datafield: 'ShipName', width: 250 },
+                    { text: 'Ship City', datafield: 'ShipCity', width: 200 },
+                    { text: 'Ship Country', datafield: 'ShipCountry' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:OrderID',
+                url: '../sampledata/orders.xml',
+            };
+
+            this.state = null;
+        },
+        methods: {
+            saveStatebtn: function () {
+                this.state = this.$refs.myGrid.savestate();
+            },
+            loadStateBtn: function() {
+                if (this.state) {
+                    this.$refs.myGrid.loadstate(this.state);
+                }
+                else {
+                    this.$refs.myGrid.loadstate({});
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button{
+        display: inline-block;
+        margin-right: 5px;
+    }
+</style>
\ No newline at end of file
diff --git a/grid/statemaintenance/main.js b/grid/statemaintenance/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/statemaintenance/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/statemaintenance/package.json b/grid/statemaintenance/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/statemaintenance/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/statusbar/App.vue b/grid/statusbar/App.vue
new file mode 100644
index 00000000..1d2dd6fb
--- /dev/null
+++ b/grid/statusbar/App.vue
@@ -0,0 +1,225 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :showstatusbar="true"
+                 :renderstatusbar="createButtonsContainers" :columns="columns">
+        </JqxGrid>
+
+        <JqxWindow ref="myWindow" :width="210" :height="180" :autoOpen="false" :resizable="false">
+            <div>Find Record</div>
+            <div style="overflow: hidden">
+                <div>Find what:</div>
+                <div style="margin-top: 5px">
+
+                    <JqxInput ref="myInput" :width="194" :height="23"></JqxInput>
+
+                </div>
+                <div style="margin-top: 7px; clear: both">Look in:</div>
+                <div style="margin-top: 5px">
+
+                    <JqxDropDownList ref="myDropDownList"
+                                     :width="200" :height="23" :selectedIndex="0"
+                                     :source="dropDownSource" :autoDropDownHeight="true">
+                    </JqxDropDownList>
+
+                </div>
+                <div>
+
+                    <JqxButton style="margin-top: 15px; margin-left: 50px; float: left"
+                               @click="findBtnOnClick()" :width="70">
+                        Find
+                    </JqxButton>
+
+                    <JqxButton style="margin-left: 5px; margin-top: 15px; float: left"
+                               @click="clearBtnOnClick()" :width="70">
+                        Clear
+                    </JqxButton>
+
+                </div>
+            </div>
+        </JqxWindow>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxWindow from "jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxWindow,
+            JqxInput,
+            JqxDropDownList,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: this.getAdapter(),
+                columns: [
+                    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 120 },
+                    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 120 },
+                    { text: 'Product', datafield: 'productname', width: 170 },
+                    { text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125 },
+                    { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2' },
+                    { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
+                ],
+                dropDownSource: ['First Name', 'Last Name', 'Product', 'Quantity', 'Price']
+            }
+        },
+        mounted: function () {
+            this.createButtons();
+        },
+        methods: {
+            getAdapter: function() {
+                let source =
+                    {
+                        localdata: generatedata(15),
+                        datatype: 'array',
+                        datafields:
+                            [
+                                { name: 'firstname', type: 'string' },
+                                { name: 'lastname', type: 'string' },
+                                { name: 'productname', type: 'string' },
+                                { name: 'quantity', type: 'number' },
+                                { name: 'price', type: 'number' },
+                                { name: 'available', type: 'bool' }
+                            ],
+                        updaterow: (rowid, rowdata, commit) => {
+                            // synchronize with the server - send update command
+                            // call commit with parameter true if the synchronization with the server is successful 
+                            // and with parameter false if the synchronization failed.
+                            commit(true);
+                        }
+                    };
+
+                let dataAdapter = new jqx.dataAdapter(source);
+
+                return dataAdapter;
+            },
+            createButtonsContainers: function (statusbar) {
+                let buttonsContainer = document.createElement('div');
+                buttonsContainer.style.cssText = 'overflow: hidden; position: relative; margin: 5px;';
+
+                let addButtonContainer = document.createElement('div');
+                let deleteButtonContainer = document.createElement('div');
+                let reloadButtonContainer = document.createElement('div');
+                let searchButtonContainer = document.createElement('div');
+
+                addButtonContainer.id = 'addButton';
+                deleteButtonContainer.id = 'deleteButton';
+                reloadButtonContainer.id = 'reloadButton';
+                searchButtonContainer.id = 'searchButton';
+
+                addButtonContainer.style.cssText = 'float: left; margin-left: 5px;';
+                deleteButtonContainer.style.cssText = 'float: left; margin-left: 5px;';
+                reloadButtonContainer.style.cssText = 'float: left; margin-left: 5px;';
+                searchButtonContainer.style.cssText = 'float: left; margin-left: 5px;';
+
+                buttonsContainer.appendChild(addButtonContainer);
+                buttonsContainer.appendChild(deleteButtonContainer);
+                buttonsContainer.appendChild(reloadButtonContainer);
+                buttonsContainer.appendChild(searchButtonContainer);
+
+                statusbar[0].appendChild(buttonsContainer);
+            },
+            createButtons: function() {
+                let addButtonOptions = {
+                    width: 80, height: 25, value: 'Add',
+                    imgSrc: '../../../images/add.png',
+                    imgPosition: 'center', textPosition: 'center',
+                    textImageRelation: 'imageBeforeText'
+                }
+                let addButton = jqwidgets.createInstance('#addButton', 'jqxButton', addButtonOptions);
+
+                let deleteButtonOptions = {
+                    width: 80, height: 25, value: 'Delete',
+                    imgSrc: '../../../images/close.png',
+                    imgPosition: 'center', textPosition: 'center',
+                    textImageRelation: 'imageBeforeText'
+                }
+                let deleteButton = jqwidgets.createInstance('#deleteButton', 'jqxButton', deleteButtonOptions);
+
+                let reloadButtonOptions = {
+                    width: 80, height: 25, value: 'Reload',
+                    imgSrc: '../../../images/refresh.png',
+                    imgPosition: 'center', textPosition: 'center',
+                    textImageRelation: 'imageBeforeText'
+                }
+                let reloadButton = jqwidgets.createInstance('#reloadButton', 'jqxButton', reloadButtonOptions);
+
+                let searchButtonOptions = {
+                    width: 80, height: 25, value: 'Find',
+                    imgSrc: '../../../images/search.png',
+                    imgPosition: 'center', textPosition: 'center',
+                    textImageRelation: 'imageBeforeText'
+                }
+                let searchButton = jqwidgets.createInstance('#searchButton', 'jqxButton', searchButtonOptions);
+
+                // add new row.
+                addButton.addEventHandler('click', (event) => {
+                    let datarow = generatedata(1);
+                    this.$refs.myGrid.addrow(null, datarow[0]);
+                });
+                // delete selected row.
+                deleteButton.addEventHandler('click', (event) => {
+                    let selectedrowindex = this.$refs.myGrid.getselectedrowindex();
+                    let rowscount = this.$refs.myGrid.getdatainformation().rowscount;
+                    let id = this.$refs.myGrid.getrowid(selectedrowindex);
+                    this.$refs.myGrid.deleterow(id);
+                });
+                // reload grid data.
+                reloadButton.addEventHandler('click', (event) => {
+                    this.$refs.myGrid.source = this.getAdapter();
+                });
+                // search for a record.
+                searchButton.addEventHandler('click', (event) => {
+                    this.$refs.myWindow.open();
+                    this.$refs.myWindow.move(60, 60);
+                });
+            },
+            findBtnOnClick: function() {
+                this.$refs.myGrid.clearfilters();
+                let searchColumnIndex = this.$refs.myDropDownList.selectedIndex;
+                let datafield = '';
+                switch (searchColumnIndex) {
+                    case 0:
+                        datafield = 'firstname';
+                        break;
+                    case 1:
+                        datafield = 'lastname';
+                        break;
+                    case 2:
+                        datafield = 'productname';
+                        break;
+                    case 3:
+                        datafield = 'quantity';
+                        break;
+                    case 4:
+                        datafield = 'price';
+                        break;
+                }
+                let searchText = this.$refs.myInput.val();
+                let filtergroup = new jqx.filter();
+                let filter_or_operator = 1;
+                let filtervalue = searchText;
+                let filtercondition = 'contains';
+                let filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
+                filtergroup.addfilter(filter_or_operator, filter);
+                this.$refs.myGrid.addfilter(datafield, filtergroup);
+                // apply the filters.
+                this.$refs.myGrid.applyfilters();
+            },
+            clearBtnOnClick: function() {
+                this.$refs.myGrid.clearfilters();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/statusbar/main.js b/grid/statusbar/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/statusbar/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/statusbar/package.json b/grid/statusbar/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/statusbar/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/textalignment/App.vue b/grid/textalignment/App.vue
new file mode 100644
index 00000000..7b660938
--- /dev/null
+++ b/grid/textalignment/App.vue
@@ -0,0 +1,86 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :columns="columns" :selectionmode="'multiplecellsadvanced'">
+        </JqxGrid>
+
+        <div>
+
+            <h3>Alignment</h3>
+
+            <JqxRadioButton style="float: left" @checked="leftBtnOnChecked()">Left</JqxRadioButton>
+
+            <JqxRadioButton style="float: left" @checked="centerBtnOnChecked()" :checked="true">Center</JqxRadioButton>
+
+            <JqxRadioButton style="float: left" @checked="rightBtnOnChecked()">Right</JqxRadioButton>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxRadioButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', datafield: 'firstname', width: 200, cellsalign: 'center', align: 'center' },
+                    { text: 'Last Name', datafield: 'lastname', width: 200, cellsalign: 'center', align: 'center' },
+                    { text: 'Product', datafield: 'productname', width: 180, cellsalign: 'center', align: 'center' },
+                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'center', align: 'center' },
+                    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'center', align: 'center', cellsformat: 'c2' },
+                    { text: 'Total', datafield: 'total', cellsalign: 'center', align: 'center', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(200, false),
+                datafields:
+                    [
+                        { name: 'id', type: 'number' },
+                        { name: 'firstname', type: 'string' },
+                        { name: 'lastname', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'quantity', type: 'number' },
+                        { name: 'price', type: 'number' },
+                        { name: 'total', type: 'number' }
+                    ],
+                datatype: 'array'
+            }
+        },
+        methods: {
+            setAlignment(align) {
+                this.$refs.myGrid.beginupdate();
+                for (let index = 0; index < this.columns.length; index++) {
+                    this.$refs.myGrid.setcolumnproperty(this.columns[index].datafield, 'align', align);
+                    this.$refs.myGrid.setcolumnproperty(this.columns[index].datafield, 'cellsalign', align);
+                }
+                this.$refs.myGrid.endupdate();
+            },
+            leftBtnOnChecked: function() {
+                this.setAlignment('left');
+            },
+            centerBtnOnChecked: function() {
+                this.setAlignment('center');
+            },
+            rightBtnOnChecked: function() {
+                this.setAlignment('right');
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/textalignment/main.js b/grid/textalignment/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/textalignment/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/textalignment/package.json b/grid/textalignment/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/textalignment/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/togglesubrows/App.vue b/grid/togglesubrows/App.vue
new file mode 100644
index 00000000..c1eb1e32
--- /dev/null
+++ b/grid/togglesubrows/App.vue
@@ -0,0 +1,129 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid"
+                 @groupexpand="myGridOnGroupExpand($event)" @groupcollapse="myGridOnGroupCollapse($event)"
+                 :width="850" :source="dataAdapter" :columns="columns"
+                 :groupable="true" :groups="['Country','City']">
+        </JqxGrid>
+
+        <div style="margin-top: 30px">
+            <div style="float: left; margin-left: 20px">
+
+                <JqxButton @click="expandBtnOnClick()" :width="125" :height="20">Expand Group</JqxButton>
+                <br />
+
+                <div style="margin-top: 10px; margin-bottom: 10px"></div>
+                <JqxButton @click="collapseBtnOnClick()" :width="125" :height="20">Collapse Group</JqxButton>
+                <br />
+
+                <div style="margin-top: 10px;">
+                    <span>Group:</span>
+
+                    <JqxInput ref="myInput" style="margin-left: 10px; margin-top: 10px" :width="20" :value="'0.0'"></JqxInput>
+
+                </div>
+
+            </div>
+            <div style="float: left; margin-left: 20px">
+
+                <JqxButton @click="expandAllBtnOnClick()" :width="125" :height="20">Expand All</JqxButton>
+                <br />
+
+                <div style="margin-top: 10px; margin-bottom: 10px"></div>
+                <JqxButton @click="collapseAllBtnOnClick()" :width="125" :height="20">Collapse All</JqxButton>
+                <br />
+
+            </div>
+            <div style="float: left; margin-left: 20px">
+                <div style="font-weight: bold">
+                    <span>Event Log:</span>
+                </div>
+                <div style="margin-top: 10px">
+                    <span>Expanded Group:</span>
+                    <span ref="expandedGroupLog"></span>
+                </div>
+                <div style="margin-top: 10px">
+                    <span>Collapsed Group:</span>
+                    <span ref="collapsedGroupLog"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxButton,
+            JqxInput
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
+                    { text: 'City', datafield: 'City', width: 120 },
+                    { text: 'Country', datafield: 'Country' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName', type: 'string' },
+                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName', type: 'string' },
+                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle', type: 'string' },
+                    { name: 'City', map: 'm\\:properties>d\\:City', type: 'string' },
+                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode', type: 'string' },
+                    { name: 'Country', map: 'm\\:properties>d\\:Country', type: 'string' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:CustomerID',
+                url: '../sampledata/customers.xml'
+            }
+        },
+        methods: {
+            expandBtnOnClick: function() {
+                let groupnum = this.$refs.myInput.val();
+                if (!isNaN(groupnum)) {
+                    this.$refs.myGrid.expandgroup(groupnum);
+                }
+            },
+            collapseBtnOnClick: function() {
+                let groupnum = this.$refs.myInput.val();
+                if (!isNaN(groupnum)) {
+                    this.$refs.myGrid.collapsegroup(groupnum);
+                }
+            },
+            expandAllBtnOnClick: function() {
+                this.$refs.myGrid.expandallgroups();
+            },
+            collapseAllBtnOnClick: function() {
+                this.$refs.myGrid.collapseallgroups();
+            },
+            myGridOnGroupExpand: function(event) {
+                let args = event.args;
+                this.$refs.expandedGroupLog.innerHTML = 'Group: ' + args.group + ', Level: ' + args.level;
+            },
+            myGridOnGroupCollapse: function(event) {
+                let args = event.args;
+                this.$refs.collapsedGroupLog.innerHTML = 'Group: ' + args.group + ', Level: ' + args.level
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button{
+        display: inline-block;
+        margin-right: 0px;
+    }
+</style>
\ No newline at end of file
diff --git a/grid/togglesubrows/main.js b/grid/togglesubrows/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/togglesubrows/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/togglesubrows/package.json b/grid/togglesubrows/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/togglesubrows/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/toolbar/App.vue b/grid/toolbar/App.vue
new file mode 100644
index 00000000..20c6c91e
--- /dev/null
+++ b/grid/toolbar/App.vue
@@ -0,0 +1,225 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :showtoolbar="true"
+                 :rendertoolbar="createButtonsContainers" :columns="columns">
+        </JqxGrid>
+
+        <JqxWindow ref="myWindow" :width="210" :height="180" :autoOpen="false" :resizable="false">
+            <div>Find Record</div>
+            <div style="overflow: hidden">
+                <div>Find what:</div>
+                <div style="margin-top: 5px">
+
+                    <JqxInput ref="myInput" :width="194" :height="23"></JqxInput>
+
+                </div>
+                <div style="margin-top: 7px; clear: both">Look in:</div>
+                <div style="margin-top: 5px">
+
+                    <JqxDropDownList ref="myDropDownList"
+                                     :width="200" :height="23" :selectedIndex="0"
+                                     :source="dropDownSource" :autoDropDownHeight="true">
+                    </JqxDropDownList>
+
+                </div>
+                <div>
+
+                    <JqxButton style="margin-top: 15px; margin-left: 50px; float: left"
+                               @click="findBtnOnClick()" :width="70">
+                        Find
+                    </JqxButton>
+
+                    <JqxButton style="margin-left: 5px; margin-top: 15px; float: left"
+                               @click="clearBtnOnClick()" :width="70">
+                        Clear
+                    </JqxButton>
+
+                </div>
+            </div>
+        </JqxWindow>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxWindow from "jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxWindow,
+            JqxInput,
+            JqxDropDownList,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: this.getAdapter(),
+                columns: [
+                    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 120 },
+                    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 120 },
+                    { text: 'Product', datafield: 'productname', width: 170 },
+                    { text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125 },
+                    { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2' },
+                    { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
+                ],
+                dropDownSource: ['First Name', 'Last Name', 'Product', 'Quantity', 'Price']
+            }
+        },
+        mounted: function () {
+            this.createButtons();
+        },
+        methods: {
+            getAdapter: function () {
+                let source =
+                    {
+                        localdata: generatedata(15),
+                        datatype: 'array',
+                        datafields:
+                            [
+                                { name: 'firstname', type: 'string' },
+                                { name: 'lastname', type: 'string' },
+                                { name: 'productname', type: 'string' },
+                                { name: 'quantity', type: 'number' },
+                                { name: 'price', type: 'number' },
+                                { name: 'available', type: 'bool' }
+                            ],
+                        updaterow: (rowid, rowdata, commit) => {
+                            // synchronize with the server - send update command
+                            // call commit with parameter true if the synchronization with the server is successful
+                            // and with parameter false if the synchronization failed.
+                            commit(true);
+                        }
+                    };
+
+                let dataAdapter = new jqx.dataAdapter(source);
+
+                return dataAdapter;
+            },
+            createButtonsContainers: function (statusbar) {
+                let buttonsContainer = document.createElement('div');
+                buttonsContainer.style.cssText = 'overflow: hidden; position: relative; margin: 5px;';
+
+                let addButtonContainer = document.createElement('div');
+                let deleteButtonContainer = document.createElement('div');
+                let reloadButtonContainer = document.createElement('div');
+                let searchButtonContainer = document.createElement('div');
+
+                addButtonContainer.id = 'addButton';
+                deleteButtonContainer.id = 'deleteButton';
+                reloadButtonContainer.id = 'reloadButton';
+                searchButtonContainer.id = 'searchButton';
+
+                addButtonContainer.style.cssText = 'float: left; margin-left: 5px;';
+                deleteButtonContainer.style.cssText = 'float: left; margin-left: 5px;';
+                reloadButtonContainer.style.cssText = 'float: left; margin-left: 5px;';
+                searchButtonContainer.style.cssText = 'float: left; margin-left: 5px;';
+
+                buttonsContainer.appendChild(addButtonContainer);
+                buttonsContainer.appendChild(deleteButtonContainer);
+                buttonsContainer.appendChild(reloadButtonContainer);
+                buttonsContainer.appendChild(searchButtonContainer);
+
+                statusbar[0].appendChild(buttonsContainer);
+            },
+            createButtons: function () {
+                let addButtonOptions = {
+                    width: 80, height: 25, value: 'Add',
+                    imgSrc: '../../../images/add.png',
+                    imgPosition: 'center', textPosition: 'center',
+                    textImageRelation: 'imageBeforeText'
+                }
+                let addButton = jqwidgets.createInstance('#addButton', 'jqxButton', addButtonOptions);
+
+                let deleteButtonOptions = {
+                    width: 80, height: 25, value: 'Delete',
+                    imgSrc: '../../../images/close.png',
+                    imgPosition: 'center', textPosition: 'center',
+                    textImageRelation: 'imageBeforeText'
+                }
+                let deleteButton = jqwidgets.createInstance('#deleteButton', 'jqxButton', deleteButtonOptions);
+
+                let reloadButtonOptions = {
+                    width: 80, height: 25, value: 'Reload',
+                    imgSrc: '../../../images/refresh.png',
+                    imgPosition: 'center', textPosition: 'center',
+                    textImageRelation: 'imageBeforeText'
+                }
+                let reloadButton = jqwidgets.createInstance('#reloadButton', 'jqxButton', reloadButtonOptions);
+
+                let searchButtonOptions = {
+                    width: 80, height: 25, value: 'Find',
+                    imgSrc: '../../../images/search.png',
+                    imgPosition: 'center', textPosition: 'center',
+                    textImageRelation: 'imageBeforeText'
+                }
+                let searchButton = jqwidgets.createInstance('#searchButton', 'jqxButton', searchButtonOptions);
+
+                // add new row.
+                addButton.addEventHandler('click', (event) => {
+                    let datarow = generatedata(1);
+                    this.$refs.myGrid.addrow(null, datarow[0]);
+                });
+                // delete selected row.
+                deleteButton.addEventHandler('click', (event) => {
+                    let selectedrowindex = this.$refs.myGrid.getselectedrowindex();
+                    let rowscount = this.$refs.myGrid.getdatainformation().rowscount;
+                    let id = this.$refs.myGrid.getrowid(selectedrowindex);
+                    this.$refs.myGrid.deleterow(id);
+                });
+                // reload grid data.
+                reloadButton.addEventHandler('click', (event) => {
+                    this.$refs.myGrid.source = this.getAdapter();
+                });
+                // search for a record.
+                searchButton.addEventHandler('click', (event) => {
+                    this.$refs.myWindow.open();
+                    this.$refs.myWindow.move(60, 60);
+                });
+            },
+            findBtnOnClick: function () {
+                this.$refs.myGrid.clearfilters();
+                let searchColumnIndex = this.$refs.myDropDownList.selectedIndex;
+                let datafield = '';
+                switch (searchColumnIndex) {
+                    case 0:
+                        datafield = 'firstname';
+                        break;
+                    case 1:
+                        datafield = 'lastname';
+                        break;
+                    case 2:
+                        datafield = 'productname';
+                        break;
+                    case 3:
+                        datafield = 'quantity';
+                        break;
+                    case 4:
+                        datafield = 'price';
+                        break;
+                }
+                let searchText = this.$refs.myInput.val();
+                let filtergroup = new jqx.filter();
+                let filter_or_operator = 1;
+                let filtervalue = searchText;
+                let filtercondition = 'contains';
+                let filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
+                filtergroup.addfilter(filter_or_operator, filter);
+                this.$refs.myGrid.addfilter(datafield, filtergroup);
+                // apply the filters.
+                this.$refs.myGrid.applyfilters();
+            },
+            clearBtnOnClick: function () {
+                this.$refs.myGrid.clearfilters();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/toolbar/main.js b/grid/toolbar/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/toolbar/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/toolbar/package.json b/grid/toolbar/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/toolbar/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/updatingactionsatruntime/App.vue b/grid/updatingactionsatruntime/App.vue
new file mode 100644
index 00000000..50557397
--- /dev/null
+++ b/grid/updatingactionsatruntime/App.vue
@@ -0,0 +1,72 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :filterable="true" :showeverpresentrow="true" :editable="true"
+                 :everpresentrowposition="'top'" :selectionmode="'multiplecellsadvanced'">
+        </JqxGrid>
+
+        <br />
+
+        <JqxRadioButton @checked="topBtnOnChecked()" :checked="true">Add New Row to Top</JqxRadioButton>
+
+        <JqxRadioButton @checked="bottomBtnOnChecked()">Add New Row to Bottom</JqxRadioButton>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxRadioButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215,
+                        initEverPresentRowWidget: (datafield, htmlElement) => {
+                            let input = htmlElement.find('input');
+                            input.attr('readonly', true);
+                            input.attr('disabled', true);
+                            htmlElement.addClass('jqx-fill-state-disabled');
+                        }
+                    },
+                    { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220 },
+                    { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd' },
+                    { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(10, false),
+                datafields:
+                    [
+                        { name: 'name', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' }
+                    ],
+                datatype: 'array'
+            }
+        },
+        methods: {
+            topBtnOnChecked: function() {
+                this.$refs.myGrid.everpresentrowactions = 'add reset';
+            },
+            bottomBtnOnChecked: function () {
+                this.$refs.myGrid.everpresentrowactions = 'addBottom reset';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/updatingactionsatruntime/main.js b/grid/updatingactionsatruntime/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/updatingactionsatruntime/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/updatingactionsatruntime/package.json b/grid/updatingactionsatruntime/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/updatingactionsatruntime/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/validation/App.vue b/grid/validation/App.vue
new file mode 100644
index 00000000..d5931f2f
--- /dev/null
+++ b/grid/validation/App.vue
@@ -0,0 +1,101 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :filterable="true" :showeverpresentrow="true" :editable="true"
+                 :everpresentrowposition="'top'" :selectionmode="'multiplecellsadvanced'">
+        </JqxGrid>
+
+        <br />
+
+        <JqxRadioButton @checked="topBtnOnChecked()" :checked="true">Add New Row to Top</JqxRadioButton>
+
+        <JqxRadioButton @checked="bottomBtnOnChecked()">Add New Row to Bottom</JqxRadioButton>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxRadioButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215,
+                        validateEverPresentRowWidgetValue: this.validateFunc
+                    },
+                    {
+                        text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220,
+                        validateEverPresentRowWidgetValue: this.validateFunc
+                    },
+                    {
+                        text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd',
+                        validateEverPresentRowWidgetValue: this.validateFunc
+                    },
+                    {
+                        text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right',
+                        validateEverPresentRowWidgetValue: this.validateFunc
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                localdata: generatedata(10, false),
+                datafields:
+                    [
+                        { name: 'name', type: 'string' },
+                        { name: 'productname', type: 'string' },
+                        { name: 'available', type: 'bool' },
+                        { name: 'date', type: 'date' },
+                        { name: 'quantity', type: 'number' }
+                    ],
+                datatype: 'array'
+            }
+        },
+        methods: {
+            validateFunc: function(datafield, value) {
+                switch (datafield) {
+                    case 'name':
+                        if (value.length < 5) {
+                            return { message: 'Entered value should be more than 5 characters', result: false };
+                        }
+                        return true;
+                    case 'productname':
+                        if (value.length == 0) {
+                            return { message: 'Entered field should be more than 0 characters', result: false };
+                        }
+                        return true;
+                    case 'quantity':
+                        if (value < 0) {
+                            return { message: 'Entered quantity should be positive number', result: false };
+                        }
+                        return true;
+                    case 'date':
+                        if ((new Date(value).toString()) == 'Invalid Date') {
+                            return { message: 'Entered date should be valid', result: false };
+                        }
+                        return true;
+                }
+                return true;
+            },
+            topBtnOnChecked: function() {
+                this.$refs.myGrid.everpresentrowactions = 'add reset';
+            },
+            bottomBtnOnChecked: function() {
+                this.$refs.myGrid.everpresentrowactions = 'addBottom reset';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/validation/main.js b/grid/validation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/validation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/validation/package.json b/grid/validation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/validation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/virtualpaging/App.vue b/grid/virtualpaging/App.vue
new file mode 100644
index 00000000..ac15598d
--- /dev/null
+++ b/grid/virtualpaging/App.vue
@@ -0,0 +1,89 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+
+        <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :autoheight="true" :virtualmode="true" :pageable="true"
+                 :rendergridrows="rendergridrows">
+        </JqxGrid>
+
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Id', datafield: 'id', width: 50 },
+                    { text: 'First Name', datafield: 'firstname', width: 120 },
+                    { text: 'Last Name', datafield: 'lastname', width: 120 },
+                    { text: 'Product', datafield: 'productname', width: 180 },
+                    { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'right' },
+                    { text: 'Unit Price', datafield: 'price', width: 100, cellsalign: 'right', cellsformat: 'c2' },
+                    { text: 'Total', datafield: 'total', cellsrenderer: this.totalcolumnrenderer, cellsalign: 'right' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'array',
+                localdata: {},
+                totalrecords: 1000000
+            }
+
+            this.firstNames = [
+                'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
+            ];
+
+            this.lastNames = [
+                'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
+            ];
+
+            this.productNames = [
+                'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
+            ];
+
+            this.priceValues = [
+                '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
+            ];
+        },
+        methods: {
+            generateData: function(startindex, endindex) {
+                let data = {};
+                for (let i = startindex; i < endindex; i++) {
+                    let row = {};
+                    let productindex = Math.floor(Math.random() * this.productNames.length);
+                    let price = parseFloat(this.priceValues[productindex]);
+                    let quantity = 1 + Math.round(Math.random() * 10);
+                    row['id'] = i;
+                    row['firstname'] = this.firstNames[Math.floor(Math.random() * this.firstNames.length)];
+                    row['lastname'] = this.lastNames[Math.floor(Math.random() * this.lastNames.length)];
+                    row['productname'] = this.productNames[productindex];
+                    row['price'] = price;
+                    row['quantity'] = quantity;
+                    row['total'] = price * quantity;
+                    data[i] = row;
+                }
+                return data;
+            },
+            rendergridrows: function (params) {
+                let data = this.generateData(params.startindex, params.endindex);
+                return data;
+            },
+            totalcolumnrenderer: function (row, column, cellvalue) {
+                let newCellValue = jqx.dataFormat.formatnumber(cellvalue, 'c2');
+                return '<span style="margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;">' + newCellValue + '</span>';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/virtualpaging/main.js b/grid/virtualpaging/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/virtualpaging/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/virtualpaging/package.json b/grid/virtualpaging/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/virtualpaging/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/virtualscrolling/App.vue b/grid/virtualscrolling/App.vue
new file mode 100644
index 00000000..1ca7824a
--- /dev/null
+++ b/grid/virtualscrolling/App.vue
@@ -0,0 +1,84 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left">
+
+        <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :virtualmode="true" :rendergridrows="rendergridrows">
+        </JqxGrid>
+
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Id', datafield: 'id', width: 100 },
+                    { text: 'First Name', datafield: 'firstname', width: 120 },
+                    { text: 'Last Name', datafield: 'lastname', width: 120 },
+                    { text: 'Product', datafield: 'productname', width: 180 },
+                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
+                    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
+                    { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'array',
+                localdata: {},
+                totalrecords: 1000000
+            }
+
+            this.firstNames = [
+                'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
+            ];
+
+            this.lastNames = [
+                'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
+            ];
+
+            this.productNames = [
+                'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
+            ];
+
+            this.priceValues = [
+                '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
+            ];
+        },
+        methods: {
+            generateData: function(startindex, endindex) {
+                let data = {};
+                for (let i = startindex; i < endindex; i++) {
+                    let row = {};
+                    let productindex = Math.floor(Math.random() * this.productNames.length);
+                    let price = parseFloat(this.priceValues[productindex]);
+                    let quantity = 1 + Math.round(Math.random() * 10);
+                    row['id'] = i;
+                    row['firstname'] = this.firstNames[Math.floor(Math.random() * this.firstNames.length)];
+                    row['lastname'] = this.lastNames[Math.floor(Math.random() * this.lastNames.length)];
+                    row['productname'] = this.productNames[productindex];
+                    row['price'] = price;
+                    row['quantity'] = quantity;
+                    row['total'] = price * quantity;
+                    data[i] = row;
+                }
+                return data;
+            },
+            rendergridrows: function (params) {
+                let data = this.generateData(params.startindex, params.endindex);
+                return data;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/virtualscrolling/main.js b/grid/virtualscrolling/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/virtualscrolling/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/virtualscrolling/package.json b/grid/virtualscrolling/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/virtualscrolling/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/grid/widgetcolumn/App.vue b/grid/widgetcolumn/App.vue
new file mode 100644
index 00000000..67e94e37
--- /dev/null
+++ b/grid/widgetcolumn/App.vue
@@ -0,0 +1,114 @@
+<template>
+    <JqxGrid :width="600" :source="dataAdapter" :columns="columns" :rowsheight="90">
+    </JqxGrid>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('grid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'Picture', datafield: 'firstname', width: 100,
+                        createwidget: (row, column, value, htmlElement) => {
+
+                            const container = document.createElement('div');
+                            const id = `myButton${this.counter}`;
+                            container.id = id;
+                            container.style.border = 'none';
+                            htmlElement.appendChild(container);
+
+                            const imgurl = '../../../images/' + value.toLowerCase() + '.png';
+
+                            const options = {
+                                width: '100%', height: 90, template: 'success',
+                                imgSrc: imgurl, imgWidth: 40, imgHeight: 50, value: value,
+                                imgPosition: 'center', textPosition: 'center', textImageRelation: 'imageAboveText'
+                            };
+
+                            const myButton = jqwidgets.createInstance(`#${id}`, 'jqxButton', options);
+
+                            myButton.addEventHandler('click', function () {
+                                const currentButtonValue = this.children[1].innerHTML;
+                                alert(currentButtonValue);
+                            });
+
+                            this.counter++;
+                        },
+                        initwidget: (row, column, value, htmlElement) => {
+                            const imgurl = '../../../images/' + value.toLowerCase() + '.png';
+                            (htmlElement.children[1].children[0]).src = imgurl;
+                            htmlElement.children[1].children[1].innerHTML = value;
+                        }
+                    },
+                    { text: 'Name', datafield: 'name', width: 200 },
+                    { text: 'Title', datafield: 'title', width: 200 },
+                    { text: 'Country', datafield: 'country' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const generateData = (startindex, endindex) => {
+                let data = new Array();
+                let firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne'];
+                let lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth'];
+                let titles = ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager', 'Sales Representative', 'Sales Representative', 'Inside Sales Coordinator', 'Sales Representative'];
+                let titleofcourtesy = ['Ms.', 'Dr.', 'Ms.', 'Mrs.', 'Mr.', 'Mr.', 'Mr.', 'Ms.', 'Ms.'];
+                let birthdate = ['08-Dec-48', '19-Feb-52', '30-Aug-63', '19-Sep-37', '04-Mar-55', '02-Jul-63', '29-May-60', '09-Jan-58', '27-Jan-66'];
+                let hiredate = ['01-May-92', '14-Aug-92', '01-Apr-92', '03-May-93', '17-Oct-93', '17-Oct-93', '02-Jan-94', '05-Mar-94', '15-Nov-94'];
+                let address = ['507 - 20th Ave. E. Apt. 2A', '908 W. Capital Way', '722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House', 'Miner Rd.', 'Edgeham Hollow', 'Winchester Way', '4726 - 11th Ave. N.E.', '7 Houndstooth Rd.'];
+                let city = ['Seattle', 'Tacoma', 'Kirkland', 'Redmond', 'London', 'London', 'London', 'Seattle', 'London'];
+                let postalcode = ['98122', '98401', '98033', '98052', 'SW1 8JR', 'EC2 7JR', 'RG1 9SP', '98105', 'WG2 7LT'];
+                let country = ['USA', 'USA', 'USA', 'USA', 'UK', 'UK', 'UK', 'USA', 'UK'];
+                let homephone = ['(206) 555-9857', '(206) 555-9482', '(206) 555-3412', '(206) 555-8122', '(71) 555-4848', '(71) 555-7773', '(71) 555-5598', '(206) 555-1189', '(71) 555-4444'];
+                let notes = ['Education includes a BA in psychology from Colorado State University in 1970.  She also completed `The Art of the Cold Call.`  Nancy is a member of Toastmasters International.',
+                    'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
+                    'Janet has a BS degree in chemistry from Boston College (1984).  She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
+                    'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.',
+                    'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London.  He was promoted to sales manager in March 1993.  Mr. Buchanan has completed the courses `Successful Telemarketing` and `International Sales Management.`  He is fluent in French.',
+                    'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986).  He has also taken the courses `Multi-Cultural Selling` and `Time Management for the Sales Professional.`  He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
+                    'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company.  After completing a course entitled `Selling in Europe,` he was transferred to the London office in March 1993.',
+                    'Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.',
+                    'Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.'];
+                let k = 0;
+                for (let i = 0; i < firstNames.length; i++) {
+                    let row = {};
+                    row['name'] = firstNames[k] + ' ' + lastNames[k];
+                    row['firstname'] = firstNames[k];
+                    row['lastname'] = lastNames[k];
+                    row['title'] = titles[k];
+                    row['titleofcourtesy'] = titleofcourtesy[k];
+                    row['birthdate'] = birthdate[k];
+                    row['hiredate'] = hiredate[k];
+                    row['address'] = address[k];
+                    row['city'] = city[k];
+                    row['postalcode'] = postalcode[k];
+                    row['country'] = country[k];
+                    row['homephone'] = homephone[k];
+                    row['notes'] = notes[k];
+                    data[i] = row;
+                    k++;
+                }
+
+                return data;
+            };
+
+            this.source = {
+                localdata: generateData(),
+                datatype: 'array'
+            }
+
+            this.counter = 1;
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/grid/widgetcolumn/main.js b/grid/widgetcolumn/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/grid/widgetcolumn/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/grid/widgetcolumn/package.json b/grid/widgetcolumn/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/grid/widgetcolumn/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/input/autocomplete/App.vue b/input/autocomplete/App.vue
new file mode 100644
index 00000000..c8d8b4b3
--- /dev/null
+++ b/input/autocomplete/App.vue
@@ -0,0 +1,62 @@
+<template>
+    <JqxInput :width="200" :height="25" :source="source"
+              :minLength="1" :placeHolder="'Enter a City'">
+    </JqxInput>
+</template>
+
+<script>
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+
+    export default {
+        components: {
+            JqxInput
+        },
+        data: function () {
+            return {
+                source: (query, response) => {
+                    let dataAdapter = new jqx.dataAdapter
+                        (
+                        {
+                            datatype: 'jsonp',
+                            datafields:
+                                [
+                                    { name: 'countryName' }, { name: 'name' },
+                                    { name: 'population', type: 'float' },
+                                    { name: 'continentCode' },
+                                    { name: 'adminName1' }
+                                ],
+                            url: 'http://api.geonames.org/searchJSON',
+                            data:
+                                {
+                                    featureClass: 'P',
+                                    style: 'full',
+                                    maxRows: 12,
+                                    username: 'jqwidgets'
+                                }
+                        },
+                        {
+                            autoBind: true,
+                            formatData: (data) => {
+                                data.name_startsWith = query;
+                                return data;
+                            },
+                            loadComplete: (data) => {
+                                if (data.geonames.length > 0) {
+                                    response($.map(data.geonames, (item) => {
+                                        return {
+                                            label: item.name + (item.adminName1 ? ', ' + item.adminName1 : '') + ', ' + item.countryName,
+                                            value: item.name
+                                        }
+                                    }));
+                                }
+                            }
+                        }
+                        );
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/input/autocomplete/main.js b/input/autocomplete/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/input/autocomplete/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/input/autocomplete/package.json b/input/autocomplete/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/input/autocomplete/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/input/bindingtojsondata/App.vue b/input/bindingtojsondata/App.vue
new file mode 100644
index 00000000..5679f1c1
--- /dev/null
+++ b/input/bindingtojsondata/App.vue
@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <JqxInput ref="myInput" @select="myInputOnSelect($event)"
+                  :width="200" :height="25" :source="dataAdapter"
+                  :placeHolder="'Contact Name:'" :valueMember="'CompanyName'"
+                  :displayMember="'ContactName'">
+        </JqxInput>
+
+        <br />
+
+        <label style="font-family: Verdana; font-size: 10px">ex: Ana</label>
+
+        <div ref="selectionLog" style="font-family: Verdana; font-size: 13px"></div>
+    </div>
+</template>
+
+<script>
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+
+    export default {
+        components: {
+            JqxInput
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'CompanyName' },
+                    { name: 'ContactName' }
+                ],
+                url: '../sampledata/customers.txt'
+            }
+        },
+        methods: {
+            myInputOnSelect: function(event) {
+                if (event.args) {
+                    let item = event.args.item;
+                    if (item) {
+                        let valueElement = document.createElement('div');
+                        valueElement.innerHTML = 'Value: ' + item.value;
+
+                        let labelElement = document.createElement('div');
+                        labelElement.innerHTML = 'Label: ' + item.label;
+
+                        let selectionLog = this.$refs.selectionLog;
+                        selectionLog.innerHTML = '';
+
+                        selectionLog.appendChild(labelElement);
+                        selectionLog.appendChild(valueElement);
+
+                        setTimeout(_ => this.$refs.myInput.val(item.label));
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/input/bindingtojsondata/main.js b/input/bindingtojsondata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/input/bindingtojsondata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/input/bindingtojsondata/package.json b/input/bindingtojsondata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/input/bindingtojsondata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/input/defaultfunctionality/App.vue b/input/defaultfunctionality/App.vue
new file mode 100644
index 00000000..d8710ed8
--- /dev/null
+++ b/input/defaultfunctionality/App.vue
@@ -0,0 +1,23 @@
+<template>
+    <JqxInput :width="200" :height="25" :source="countries"
+              :minLength="1" :placeHolder="'Enter a Country'">
+    </JqxInput>
+</template>
+
+<script>
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+
+    export default {
+        components: {
+            JqxInput
+        },
+        data: function () {
+            return {
+                countries: ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/input/defaultfunctionality/main.js b/input/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/input/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/input/defaultfunctionality/package.json b/input/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/input/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/input/fluidsize/App.vue b/input/fluidsize/App.vue
new file mode 100644
index 00000000..9a38849f
--- /dev/null
+++ b/input/fluidsize/App.vue
@@ -0,0 +1,23 @@
+<template>
+    <JqxInput :width="'30%'" :height="35" :source="countries"
+              :placeHolder="'Enter a Country'">
+    </JqxInput>
+</template>
+
+<script>
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+
+    export default {
+        components: {
+            JqxInput
+        },
+        data: function () {
+            return {
+                countries: ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/input/fluidsize/main.js b/input/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/input/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/input/fluidsize/package.json b/input/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/input/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/input/inputgroup/App.vue b/input/inputgroup/App.vue
new file mode 100644
index 00000000..3e7c6b63
--- /dev/null
+++ b/input/inputgroup/App.vue
@@ -0,0 +1,40 @@
+<template>
+    <div>
+        <JqxInput ref="myInput" style="float: left"
+                  :width="250" :height="23" :source="countries"
+                  :minLength="1" :placeHolder="'Enter a Country:'">
+        </JqxInput>
+
+        <div style="float: left">
+            <JqxButton @click="myBtnOnClick()"
+                       :width="28" :height="25" :imgSrc="'../images/search_lg.png'">
+            </JqxButton>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxInput,
+            JqxButton
+        },
+        data: function () {
+            return {
+                countries: ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"]
+            }
+        },
+        methods: {
+            myBtnOnClick: function() {
+                let value = this.$refs.myInput.val();
+                alert('Searching for: ' + value);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/input/inputgroup/main.js b/input/inputgroup/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/input/inputgroup/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/input/inputgroup/package.json b/input/inputgroup/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/input/inputgroup/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/input/multiplevalues/App.vue b/input/multiplevalues/App.vue
new file mode 100644
index 00000000..c1863255
--- /dev/null
+++ b/input/multiplevalues/App.vue
@@ -0,0 +1,45 @@
+<template>
+    <JqxInput ref="myInput" 
+              :width="250" :height="25" :source="source"
+              :minLength="1" :placeHolder="'Enter a Country:'" :renderer="renderer">
+    </JqxInput>
+</template>
+
+<script>
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+
+    export default {
+        components: {
+            JqxInput
+        },
+        data: function () {
+            return {
+                source: (query, response) => {
+                    let item = query.split(/,\s*/).pop();
+                    // update the search query.
+                    this.$refs.myInput.query = item;
+                    response(this.countries);
+                }
+            }
+        },
+        beforeCreate: function () {
+            this.countries = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"];
+        },
+        methods: {
+            renderer: (itemValue, inputValue) => {
+                let terms = inputValue.split(/,\s*/);
+                // remove the current input
+                terms.pop();
+                // add the selected item
+                terms.push(itemValue);
+                // add placeholder to get the comma-and-space at the end
+                terms.push('');
+                let value = terms.join(', ');
+                return value;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/input/multiplevalues/main.js b/input/multiplevalues/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/input/multiplevalues/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/input/multiplevalues/package.json b/input/multiplevalues/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/input/multiplevalues/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/input/righttoleftlayout/App.vue b/input/righttoleftlayout/App.vue
new file mode 100644
index 00000000..04e5ca45
--- /dev/null
+++ b/input/righttoleftlayout/App.vue
@@ -0,0 +1,23 @@
+<template>
+    <JqxInput :width="200" :height="25" :source="countries" :rtl="true"
+              :minLength="1" :placeHolder="'Enter a Country'">
+    </JqxInput>
+</template>
+
+<script>
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+
+    export default {
+        components: {
+            JqxInput
+        },
+        data: function () {
+            return {
+                countries: ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/input/righttoleftlayout/main.js b/input/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/input/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/input/righttoleftlayout/package.json b/input/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/input/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/input/twowaydatabinding/App.vue b/input/twowaydatabinding/App.vue
new file mode 100644
index 00000000..d72829f7
--- /dev/null
+++ b/input/twowaydatabinding/App.vue
@@ -0,0 +1,23 @@
+<template>
+    <div>
+        <div>The value is: {{ country }}</div><br />
+
+        <JqxInput v-model="country" :width="200" :height="25" :source="countries" />
+    </div>
+</template>
+
+<script>
+    import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
+
+    export default {
+        components: {
+            JqxInput
+        },
+        data: function () {
+            return {
+                country: '',
+                countries: ['Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Antarctica', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', 'Botswana', 'Brazil', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burma', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Central African Republic', 'Chad', 'Chile', 'China', 'Colombia', 'Comoros', 'Congo, Democratic Republic', 'Congo, Republic of the', 'Costa Rica', 'Cote d`Ivoire', 'Croatia', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic', 'East Timor', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Fiji', 'Finland', 'France', 'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Greece', 'Greenland', 'Grenada', 'Guatemala', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jordan', 'Kazakhstan', 'Kenya', 'Kiribati', 'Korea, North', 'Korea, South', 'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macedonia', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Mauritania', 'Mauritius', 'Mexico', 'Micronesia', 'Moldova', 'Mongolia', 'Morocco', 'Monaco', 'Mozambique', 'Namibia', 'Nauru', 'Nepal', 'Netherlands', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Norway', 'Oman', 'Pakistan', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Poland', 'Portugal', 'Qatar', 'Romania', 'Russia', 'Rwanda', 'Samoa', 'San Marino', ' Sao Tome', 'Saudi Arabia', 'Senegal', 'Serbia and Montenegro', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'Spain', 'Sri Lanka', 'Sudan', 'Suriname', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', 'Togo', 'Tonga', 'Trinidad and Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'Uruguay', 'Uzbekistan', 'Vanuatu', 'Venezuela', 'Vietnam', 'Yemen', 'Zambia', 'Zimbabwe']
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/input/twowaydatabinding/main.js b/input/twowaydatabinding/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/input/twowaydatabinding/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/input/twowaydatabinding/package.json b/input/twowaydatabinding/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/input/twowaydatabinding/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/kanban/addremoveupdateitems/App.vue b/kanban/addremoveupdateitems/App.vue
new file mode 100644
index 00000000..63d1ffed
--- /dev/null
+++ b/kanban/addremoveupdateitems/App.vue
@@ -0,0 +1,109 @@
+<template>
+    <div>
+        <JqxKanban ref="myKanban"
+                   :width="getWidth" :height="500" :source="dataAdapter"
+                   :columns="columns" :resources="resourcesAdapterFunc()">
+        </JqxKanban>
+
+        <br />
+
+        <JqxButton @click="addItemBtnOnClick()">Add Item</JqxButton>
+        <JqxButton ref="myRemoveItemBtn" @click="removeItemBtnOnClick()">Remove Item</JqxButton>
+        <JqxButton ref="myUpdateItemBtn" @click="updateItemBtnOnClick()">Update Item</JqxButton>
+
+    </div>
+</template>
+
+<script>
+    import JqxKanban from "jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxKanban,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('kanban'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Backlog', dataField: 'new', maxItems: 5 },
+                    { text: 'In Progress', dataField: 'work', maxItems: 5 },
+                    { text: 'Done', dataField: 'done', maxItems: 5, collapseDirection: 'right' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const fields = [
+                { name: 'id', type: 'string' },
+                { name: 'status', map: 'state', type: 'string' },
+                { name: 'text', map: 'label', type: 'string' },
+                { name: 'tags', type: 'string' },
+                { name: 'color', map: 'hex', type: 'string' },
+                { name: 'resourceId', type: 'number' }
+            ];
+
+            this.source = {
+                localData: [
+                    { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
+                    { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
+                    { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
+                    { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
+                    { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue, login', hex: '#6bbd49' }
+                ],
+                dataType: 'array',
+                dataFields: fields
+            }
+
+            this.newItemsCount = 0;
+        },
+        methods: {
+            resourcesAdapterFunc: function () {
+                let resourcesSource =
+                    {
+                        localData: [
+                            { id: 0, name: 'No name', image: '../../../images/common.png', common: true },
+                            { id: 1, name: 'Andrew Fuller', image: '../../../images/andrew.png' },
+                            { id: 2, name: 'Janet Leverling', image: '../../../images/janet.png' },
+                            { id: 3, name: 'Steven Buchanan', image: '../../../images/steven.png' },
+                            { id: 4, name: 'Nancy Davolio', image: '../../../images/nancy.png' },
+                            { id: 5, name: 'Michael Buchanan', image: '../../../images/Michael.png' },
+                            { id: 6, name: 'Margaret Buchanan', image: '../../../images/margaret.png' },
+                            { id: 7, name: 'Robert Buchanan', image: '../../../images/robert.png' },
+                            { id: 8, name: 'Laura Buchanan', image: '../../../images/Laura.png' },
+                            { id: 9, name: 'Laura Buchanan', image: '../../../images/Anne.png' }
+                        ],
+                        dataType: 'array',
+                        dataFields: [
+                            { name: 'id', type: 'number' },
+                            { name: 'name', type: 'string' },
+                            { name: 'image', type: 'string' },
+                            { name: 'common', type: 'boolean' }
+                        ]
+                    };
+                let resourcesDataAdapter = new jqx.dataAdapter(resourcesSource);
+                return resourcesDataAdapter;
+            },
+            addItemBtnOnClick: function() {
+                this.$refs.myKanban.addItem({ status: 'new', text: 'Task' + this.newItemsCount, tags: 'task' + this.newItemsCount, color: '#5dc3f0' });
+                this.newItemsCount++;
+            },
+            removeItemBtnOnClick: function () {
+                this.$refs.myKanban.removeItem('1645');
+                this.$refs.myRemoveItemBtn.disabled = true;
+            },
+            updateItemBtnOnClick: function () {
+                this.$refs.myKanban.updateItem('1161', { status: 'new', text: 'Task', tags: 'task', color: '#5dc3f0', resourceId: 3 });
+                this.$refs.myUpdateItemBtn.disabled = true;
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button{
+        display: inline-block;
+        margin-right: 5px;
+    }
+</style>
\ No newline at end of file
diff --git a/kanban/addremoveupdateitems/main.js b/kanban/addremoveupdateitems/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/kanban/addremoveupdateitems/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/kanban/addremoveupdateitems/package.json b/kanban/addremoveupdateitems/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/kanban/addremoveupdateitems/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/kanban/defaultfunctionality/App.vue b/kanban/defaultfunctionality/App.vue
new file mode 100644
index 00000000..2533c1d8
--- /dev/null
+++ b/kanban/defaultfunctionality/App.vue
@@ -0,0 +1,157 @@
+<template>
+    <JqxSplitter :width="700" :height="600" :panels="mainSplitterPanels">
+        <div id="kanban1">
+            <JqxKanban ref="myKanbanOne"
+                       :width="'100%'" :height="'100%'" :source="dataAdapter"
+                       :columns="kanbanOneColumns" :connectWith="'#kanban2, #kanban3'"
+                       :resources="resourcesAdapterFunc()">
+            </JqxKanban>
+        </div>
+        <div>
+            <JqxSplitter :width="'100%'" :height="'100%'"
+                         :orientation="'horizontal'" :panels="rightSplitterPanels">
+                <div id="kanban2">
+                    <JqxKanban ref="myKanbanTwo"
+                               :width="'100%'" :height="'100%'" :source="dataAdapter2"
+                               :columns="kanbanTwoColumns" :connectWith="'#kanban1, #kanban3'"
+                               :resources="resourcesAdapterFunc()">
+                    </JqxKanban>
+                </div>
+                <div id="kanban3">
+                    <JqxKanban ref="myKanbanThree"
+                               :width="'100%'" :height="'100%'" :source="dataAdapter3"
+                               :columns="kanbanThreeColumns" :connectWith="'#kanban2, #kanban1'"
+                               :resources="resourcesAdapterFunc()">
+                    </JqxKanban>
+                </div>
+            </JqxSplitter>
+        </div>
+    </JqxSplitter>
+</template>
+<script>
+    import JqxKanban from "jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue";
+    import JqxSplitter from "jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue";
+
+    export default {
+        components: {
+            JqxKanban,
+            JqxSplitter
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                dataAdapter2: new jqx.dataAdapter(this.source2),
+                dataAdapter3: new jqx.dataAdapter(this.source3),
+                kanbanOneColumns: [{ text: 'Backlog', dataField: 'new', maxItems: 10 }],
+                kanbanTwoColumns: [{ text: 'Ready', dataField: 'ready', maxItems: 10 }],
+                kanbanThreeColumns: [
+                    { text: 'Backlog', dataField: 'new', maxItems: 5 },
+                    { text: 'In Progress', dataField: 'work', maxItems: 5 },
+                    { text: 'Done', dataField: 'done', maxItems: 5 }
+                ],
+                mainSplitterPanels: [{ size: 250, min: 100 }, { min: 250 }],
+                rightSplitterPanels: [{ min: 200, size: 350, collapsible: false }, { min: 200 }]
+            }
+        },
+        beforeCreate: function () {
+            const fields = [
+                { name: 'status', map: 'state', type: 'string' },
+                { name: 'text', map: 'label', type: 'string' },
+                { name: 'tags', type: 'string' },
+                { name: 'color', map: 'hex', type: 'string' },
+                { name: 'resourceId', type: 'number' }
+            ];
+
+            this.source = {
+                localData:
+                    [
+                        { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
+                        { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
+                        { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
+                        { state: 'new', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
+                        { state: 'new', label: 'Login 404 issue', tags: 'issue, login', hex: '#6bbd49' }
+                    ],
+                dataType: 'array',
+                dataFields: fields
+            };
+
+            this.source2 = {
+                localData:
+                    [
+                        { state: 'ready', label: 'Logout issue', tags: 'logout, issue', hex: '#5dc3f0', resourceId: 7 },
+                        { state: 'ready', label: 'Remember password issue', tags: 'password, issue', hex: '#6bbd49', resourceId: 8 },
+                        { state: 'ready', label: 'Cart calculation issue', tags: 'cart, calculation', hex: '#f19b60', resourceId: 9 },
+                        { state: 'ready', label: 'Remove topic issue', tags: 'topic, issue', hex: '#6bbd49' }
+                    ],
+                dataType: 'array',
+                dataFields: fields
+            };
+
+            this.source3 = {
+                localData:
+                    [
+                        { state: 'done', label: 'Delete orders', tags: 'orders, combine', hex: '#f19b60', resourceId: 4 },
+                        { state: 'work', label: 'Add New Address', tags: 'address', hex: '#6bbd49', resourceId: 5 },
+                        { state: 'new', label: 'Rename items', tags: 'rename', hex: '#5dc3f0', resourceId: 6 },
+                        { state: 'work', label: 'Update cart', tags: 'cart, update', hex: '#6bbd49' }
+                    ],
+                dataType: 'array',
+                dataFields: fields
+            };
+        },
+        methods: {
+            resourcesAdapterFunc: function () {
+                let resourcesSource =
+                    {
+                        localData: [
+                            { id: 0, name: 'No name', image: '../../../images/common.png', common: true },
+                            { id: 1, name: 'Andrew Fuller', image: '../../../images/andrew.png' },
+                            { id: 2, name: 'Janet Leverling', image: '../../../images/janet.png' },
+                            { id: 3, name: 'Steven Buchanan', image: '../../../images/steven.png' },
+                            { id: 4, name: 'Nancy Davolio', image: '../../../images/nancy.png' },
+                            { id: 5, name: 'Michael Buchanan', image: '../../../images/Michael.png' },
+                            { id: 6, name: 'Margaret Buchanan', image: '../../../images/margaret.png' },
+                            { id: 7, name: 'Robert Buchanan', image: '../../../images/robert.png' },
+                            { id: 8, name: 'Laura Buchanan', image: '../../../images/Laura.png' },
+                            { id: 9, name: 'Laura Buchanan', image: '../../../images/Anne.png' }
+                        ],
+                        dataType: 'array',
+                        dataFields: [
+                            { name: 'id', type: 'number' },
+                            { name: 'name', type: 'string' },
+                            { name: 'image', type: 'string' },
+                            { name: 'common', type: 'boolean' }
+                        ]
+                    };
+                let resourcesDataAdapter = new jqx.dataAdapter(resourcesSource);
+                return resourcesDataAdapter;
+            },
+            kanbanOneColumnRenderer: function (element, collapsedElement, column) {
+                if (element[0]) {
+                    let headerStatus = element[0].getElementsByClassName('jqx-kanban-column-header-status')[0];
+                    let columnItems = this.$refs.myKanbanOne.getColumnItems(column.dataField).length;
+                    headerStatus.innerHTML = ' (' + columnItems + '/' + column.maxItems + ')';
+                }
+            },
+            kanbanTwoColumnRenderer: function (element, collapsedElement, column) {
+                if (element[0]) {
+                    let headerStatus = element[0].getElementsByClassName('jqx-kanban-column-header-status')[0];
+                    let columnItems = this.$refs.myKanbanTwo.getColumnItems(column.dataField).length;
+                    headerStatus.innerHTML = ' (' + columnItems + '/' + column.maxItems + ')';
+                }
+            },
+            kanbanThreeColumnRenderer: function (element, collapsedElement, column) {
+                if (element[0]) {
+                    let columnItems = this.myKanbanThree.getColumnItems(column.dataField).length;
+                    let headerStatus = element[0].getElementsByClassName('jqx-kanban-column-header-status')[0];
+                    headerStatus.innerHTML = ' (' + columnItems + '/' + column.maxItems + ')';
+                    let collapsedHeaderStatus = collapsedElement[0].getElementsByClassName('jqx-kanban-column-header-status')[0];
+                    collapsedHeaderStatus.innerHTML = ' (' + columnItems + '/' + column.maxItems + ')';
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/kanban/defaultfunctionality/main.js b/kanban/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/kanban/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/kanban/defaultfunctionality/package.json b/kanban/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/kanban/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/kanban/disablecollapse/App.vue b/kanban/disablecollapse/App.vue
new file mode 100644
index 00000000..db4f5ad2
--- /dev/null
+++ b/kanban/disablecollapse/App.vue
@@ -0,0 +1,91 @@
+<template>
+    <JqxKanban ref="myKanban"
+               :width="getWidth" :source="dataAdapter" :columns="columns"
+               :resources="resourcesAdapterFunc()" :columnRenderer="columnRenderer">
+    </JqxKanban>
+</template>
+<script>
+    import JqxKanban from "jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue";
+
+    export default {
+        components: {
+            JqxKanban,
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('kanban'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Backlog', dataField: 'new', maxItems: 4 },
+                    { text: 'In Progress', dataField: 'work', maxItems: 2 },
+                    { text: 'Done', dataField: 'done', collapsible: false, maxItems: 5 }
+                ]      
+            }
+        },
+        beforeCreate: function () {
+            const fields = [
+                { name: 'id', type: 'string' },
+                { name: 'status', map: 'state', type: 'string' },
+                { name: 'text', map: 'label', type: 'string' },
+                { name: 'tags', type: 'string' },
+                { name: 'color', map: 'hex', type: 'string' },
+                { name: 'resourceId', type: 'number' }
+            ];
+
+            this.source = {
+                localData:
+                    [
+                        { id: '1161', state: 'new', label: 'Make a new Dashboard', tags: 'dashboard', hex: '#36c7d0', resourceId: 3 },
+                        { id: '1645', state: 'work', label: 'Prepare new release', tags: 'release', hex: '#ff7878', resourceId: 1 },
+                        { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#96c443', resourceId: 3 },
+                        { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#ff7878', resourceId: 4 },
+                        { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue, login', hex: '#96c443' }
+                    ],
+                dataType: 'array',
+                dataFields: fields
+            };
+        },
+        methods: {
+            resourcesAdapterFunc: function () {
+                let resourcesSource =
+                    {
+                        localData: [
+                            { id: 0, name: 'No name', image: '../../../images/common.png', common: true },
+                            { id: 1, name: 'Andrew Fuller', image: '../../../images/andrew.png' },
+                            { id: 2, name: 'Janet Leverling', image: '../../../images/janet.png' },
+                            { id: 3, name: 'Steven Buchanan', image: '../../../images/steven.png' },
+                            { id: 4, name: 'Nancy Davolio', image: '../../../images/nancy.png' },
+                            { id: 5, name: 'Michael Buchanan', image: '../../../images/Michael.png' },
+                            { id: 6, name: 'Margaret Buchanan', image: '../../../images/margaret.png' },
+                            { id: 7, name: 'Robert Buchanan', image: '../../../images/robert.png' },
+                            { id: 8, name: 'Laura Buchanan', image: '../../../images/Laura.png' },
+                            { id: 9, name: 'Laura Buchanan', image: '../../../images/Anne.png' }
+                        ],
+                        dataType: 'array',
+                        dataFields: [
+                            { name: 'id', type: 'number' },
+                            { name: 'name', type: 'string' },
+                            { name: 'image', type: 'string' },
+                            { name: 'common', type: 'boolean' }
+                        ]
+                    };
+                let resourcesDataAdapter = new jqx.dataAdapter(resourcesSource);
+                return resourcesDataAdapter;
+            },
+            columnRenderer: function(element, collapsedElement, column) {
+                if (element[0]) {
+                    let elementHeaderStatus = element[0].getElementsByClassName('jqx-kanban-column-header-status')[0];
+                    let collapsedElementHeaderStatus = collapsedElement[0].getElementsByClassName('jqx-kanban-column-header-status')[0];
+
+                    let columnItems = this.$refs.myKanban.getColumnItems(column.dataField).length;
+
+                    elementHeaderStatus.innerHTML = ' (' + columnItems + '/' + column.maxItems + ')';
+                    collapsedElementHeaderStatus.innerHTML = ' (' + columnItems + '/' + column.maxItems + ')';
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/kanban/disablecollapse/main.js b/kanban/disablecollapse/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/kanban/disablecollapse/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/kanban/disablecollapse/package.json b/kanban/disablecollapse/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/kanban/disablecollapse/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/kanban/headertemplate/App.vue b/kanban/headertemplate/App.vue
new file mode 100644
index 00000000..d0f5f2f5
--- /dev/null
+++ b/kanban/headertemplate/App.vue
@@ -0,0 +1,199 @@
+<template>
+    <JqxKanban ref="myKanban"
+               @itemAttrClicked="myKanbanOnItemAttrClicked($event)" @columnAttrClicked="myKanbanonColumnAttrClicked($event)"
+               :width="getWidth" :height="600" :template="template" :source="dataAdapter" :columns="columns"
+               :resources="resourcesAdapterFunc()" :columnRenderer="columnRenderer"
+               :itemRenderer="itemRenderer">
+    </JqxKanban>
+</template>
+<script>
+    import JqxKanban from "jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue";
+
+    export default {
+        components: {
+            JqxKanban,
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('kanban'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Backlog', iconClassName: this.getIconClassName(), dataField: 'new', maxItems: 4 },
+                    { text: 'In Progress', iconClassName: this.getIconClassName(), dataField: 'work', maxItems: 2 },
+                    { text: 'Done', iconClassName: this.getIconClassName(), dataField: 'done', maxItems: 5 }
+                ],
+                template: '<div class="jqx-kanban-item" id="">'
+                    + '<div class="jqx-kanban-item-color-status"></div>'
+                    + '<div style="display: none;" class="jqx-kanban-item-avatar"></div>'
+                    + '<div class="jqx-icon jqx-icon-close jqx-kanban-item-template-content jqx-kanban-template-icon"></div>'
+                    + '<div class="jqx-kanban-item-text"></div>'
+                    + '<div style="display: none;" class="jqx-kanban-item-footer"></div>'
+                    + '</div>'
+            }
+        },
+        beforeCreate: function () {
+            this.theme;
+
+            const fields = [
+                { name: 'id', type: 'string' },
+                { name: 'status', map: 'state', type: 'string' },
+                { name: 'text', map: 'label', type: 'string' },
+                { name: 'tags', type: 'string' },
+                { name: 'color', map: 'hex', type: 'string' },
+                { name: 'resourceId', type: 'number' }
+            ];
+
+            this.source = {
+                localData: [
+                    { id: '1161', state: 'new', label: 'Make a new Dashboard', tags: 'dashboard', hex: '#36c7d0', resourceId: 3 },
+                    { id: '1645', state: 'work', label: 'Prepare new release', tags: 'release', hex: '#ff7878', resourceId: 1 },
+                    { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#96c443', resourceId: 3 },
+                    { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#ff7878', resourceId: 4 },
+                    { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue, login', hex: '#96c443' }
+                ],
+                dataType: 'array',
+                dataFields: fields
+            };
+
+            this.itemIndex = 0;
+        },
+        methods: {
+            resourcesAdapterFunc: function () {
+                let resourcesSource =
+                    {
+                        localData: [
+                            { id: 0, name: 'No name', image: '../../../images/common.png', common: true },
+                            { id: 1, name: 'Andrew Fuller', image: '../../../images/andrew.png' },
+                            { id: 2, name: 'Janet Leverling', image: '../../../images/janet.png' },
+                            { id: 3, name: 'Steven Buchanan', image: '../../../images/steven.png' },
+                            { id: 4, name: 'Nancy Davolio', image: '../../../images/nancy.png' },
+                            { id: 5, name: 'Michael Buchanan', image: '../../../images/Michael.png' },
+                            { id: 6, name: 'Margaret Buchanan', image: '../../../images/margaret.png' },
+                            { id: 7, name: 'Robert Buchanan', image: '../../../images/robert.png' },
+                            { id: 8, name: 'Laura Buchanan', image: '../../../images/Laura.png' },
+                            { id: 9, name: 'Laura Buchanan', image: '../../../images/Anne.png' }
+                        ],
+                        dataType: 'array',
+                        dataFields: [
+                            { name: 'id', type: 'number' },
+                            { name: 'name', type: 'string' },
+                            { name: 'image', type: 'string' },
+                            { name: 'common', type: 'boolean' }
+                        ]
+                    };
+                let resourcesDataAdapter = new jqx.dataAdapter(resourcesSource);
+                return resourcesDataAdapter;
+            },
+            getIconClassName: function () {
+                switch (this.theme) {
+                    case 'darkblue':
+                    case 'black':
+                    case 'shinyblack':
+                    case 'ui-le-frog':
+                    case 'metrodark':
+                    case 'orange':
+                    case 'darkblue':
+                    case 'highcontrast':
+                    case 'ui-sunny':
+                    case 'ui-darkness':
+                        return 'jqx-icon-plus-alt-white ';
+                }
+                return 'jqx-icon-plus-alt';
+            },
+            columnRenderer: function(element, collapsedElement, column) {
+                if (element[0]) {
+                    let elementHeaderStatus = element[0].getElementsByClassName('jqx-kanban-column-header-status')[0];
+                    let collapsedElementHeaderStatus = collapsedElement[0].getElementsByClassName('jqx-kanban-column-header-status')[0];
+
+                    let columnItems = this.$refs.myKanban.getColumnItems(column.dataField).length;
+
+                    elementHeaderStatus.innerHTML = ' (' + columnItems + '/' + column.maxItems + ')';
+                    collapsedElementHeaderStatus.innerHTML = ' (' + columnItems + '/' + column.maxItems + ')';
+                }
+            },
+            itemRenderer: function (element, item, resource) {
+                element[0].getElementsByClassName('jqx-kanban-item-color-status')[0].innerHTML = '<span style="line-height: 23px; margin-left: 5px;">' + resource.name + '</span>';
+                element[0].getElementsByClassName('jqx-kanban-item-text')[0].style.background = item.color;
+            },
+            myKanbanOnItemAttrClicked: function(event) {
+                let args = event.args;
+                if (args.attribute == 'template') {
+                    this.$refs.myKanban.removeItem(args.item.id);
+                }
+            },
+            myKanbanonColumnAttrClicked: function(event) {
+                let args = event.args;
+                if (args.attribute == 'button') {
+                    args.cancelToggle = true;
+                    if (!args.column.collapsed) {
+                        let colors = ['#f19b60', '#5dc3f0', '#6bbd49', '#dddddd'];
+                        this.$refs.myKanban.addItem({
+                            status: args.column.dataField,
+                            text: '<input placeholder="(No Title)" style="width: 96%; margin-top:2px; border-radius: 3px;' +
+                                'border-color: #ddd; line-height:20px; height: 20px;" class="jqx-input" id="newItem' + this.itemIndex + '" value= "" />',
+                            tags: 'new task',
+                            color: colors[Math.floor(Math.random() * 4)],
+                            resourceId: Math.floor(Math.random() * 4)
+                        });
+
+                        let id = `newItem${this.itemIndex}`;
+                        let myInput = document.getElementById(id);
+
+                        if (myInput !== null && myInput !== undefined) {
+                            myInput.addEventListener('mousedown', (event) => {
+                                event.stopPropagation();
+                            });
+
+                            myInput.addEventListener('mouseup', (event) => {
+                                event.stopPropagation();
+                            });
+
+                            myInput.addEventListener('keydown', (event) => {
+                                if (event.keyCode == 13) {
+                                    let valueElement = `<span>${event.target.value}</span>`;
+                                    event.target.insertAdjacentHTML('beforebegin', valueElement);
+                                    event.target.remove();
+                                }
+                            });
+
+                            myInput.focus();
+                        }
+                        this.itemIndex++;
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-kanban-item-color-status {
+        width: 100%;
+        height: 25px;
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+        position: relative;
+        margin-top: 0px;
+        top: 0px;
+    }
+
+    .jqx-kanban-item {
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+
+    .jqx-kanban-item-text {
+        padding-top: 6px;
+        padding-bottom: 6px;
+    }
+
+    .jqx-kanban-item-avatar {
+        top: 9px;
+    }
+
+    .jqx-kanban-template-icon {
+        position: absolute;
+        right: 3px;
+        top: 12px;
+    }
+</style>
diff --git a/kanban/headertemplate/main.js b/kanban/headertemplate/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/kanban/headertemplate/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/kanban/headertemplate/package.json b/kanban/headertemplate/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/kanban/headertemplate/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/kanban/itemtemplate/App.vue b/kanban/itemtemplate/App.vue
new file mode 100644
index 00000000..b7894c93
--- /dev/null
+++ b/kanban/itemtemplate/App.vue
@@ -0,0 +1,184 @@
+<template>
+    <JqxKanban ref="myKanban"
+               @itemAttrClicked="myKanbanOnItemAttrClicked($event)" @columnAttrClicked="myKanbanonColumnAttrClicked($event)"
+               :width="getWidth" :height="600" :template="template" :source="dataAdapter" :columns="columns"
+               :resources="resourcesAdapterFunc()" :itemRenderer="itemRenderer">
+    </JqxKanban>
+</template>
+<script>
+    import JqxKanban from "jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue";
+
+    export default {
+        components: {
+            JqxKanban,
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('kanban'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: "Backlog", iconClassName: this.getIconClassName(), dataField: "new" },
+                    { text: "In Progress", iconClassName: this.getIconClassName(), dataField: "work" },
+                    { text: "Done", iconClassName: this.getIconClassName(), dataField: "done" }
+                ],
+                template: '<div class="jqx-kanban-item" id="">'
+                    + '<div class="jqx-kanban-item-color-status"></div>'
+                    + '<div style="display: none;" class="jqx-kanban-item-avatar"></div>'
+                    + '<div class="jqx-icon jqx-icon-close jqx-kanban-item-template-content jqx-kanban-template-icon"></div>'
+                    + '<div class="jqx-kanban-item-text"></div>'
+                    + '<div style="display: none;" class="jqx-kanban-item-footer"></div>'
+                    + '</div>'
+            }
+        },
+        beforeCreate: function () {
+            this.theme;
+
+            const fields = [
+                { name: 'id', type: 'string' },
+                { name: 'status', map: 'state', type: 'string' },
+                { name: 'text', map: 'label', type: 'string' },
+                { name: 'tags', type: 'string' },
+                { name: 'color', map: 'hex', type: 'string' },
+                { name: 'resourceId', type: 'number' }
+            ];
+
+            this.source = {
+                localData: [
+                    { id: '1161', state: 'new', label: 'Make a new Dashboard', tags: 'dashboard', hex: '#36c7d0', resourceId: 3 },
+                    { id: '1645', state: 'work', label: 'Prepare new release', tags: 'release', hex: '#ff7878', resourceId: 1 },
+                    { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#96c443', resourceId: 3 },
+                    { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#ff7878', resourceId: 4 },
+                    { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue, login', hex: '#96c443' }
+                ],
+                dataType: 'array',
+                dataFields: fields
+            };
+
+            this.itemIndex = 0;
+        },
+        methods: {
+            resourcesAdapterFunc: function () {
+                let resourcesSource =
+                    {
+                        localData: [
+                            { id: 0, name: 'No name', image: '../../../images/common.png', common: true },
+                            { id: 1, name: 'Andrew Fuller', image: '../../../images/andrew.png' },
+                            { id: 2, name: 'Janet Leverling', image: '../../../images/janet.png' },
+                            { id: 3, name: 'Steven Buchanan', image: '../../../images/steven.png' },
+                            { id: 4, name: 'Nancy Davolio', image: '../../../images/nancy.png' },
+                            { id: 5, name: 'Michael Buchanan', image: '../../../images/Michael.png' },
+                            { id: 6, name: 'Margaret Buchanan', image: '../../../images/margaret.png' },
+                            { id: 7, name: 'Robert Buchanan', image: '../../../images/robert.png' },
+                            { id: 8, name: 'Laura Buchanan', image: '../../../images/Laura.png' },
+                            { id: 9, name: 'Laura Buchanan', image: '../../../images/Anne.png' }
+                        ],
+                        dataType: 'array',
+                        dataFields: [
+                            { name: 'id', type: 'number' },
+                            { name: 'name', type: 'string' },
+                            { name: 'image', type: 'string' },
+                            { name: 'common', type: 'boolean' }
+                        ]
+                    };
+                let resourcesDataAdapter = new jqx.dataAdapter(resourcesSource);
+                return resourcesDataAdapter;
+            },
+            getIconClassName: function () {
+                switch (this.theme) {
+                    case 'darkblue':
+                    case 'black':
+                    case 'shinyblack':
+                    case 'ui-le-frog':
+                    case 'metrodark':
+                    case 'orange':
+                    case 'darkblue':
+                    case 'highcontrast':
+                    case 'ui-sunny':
+                    case 'ui-darkness':
+                        return 'jqx-icon-plus-alt-white ';
+                }
+                return 'jqx-icon-plus-alt';
+            },
+            itemRenderer: function (element, item, resource) {
+                element[0].getElementsByClassName('jqx-kanban-item-color-status')[0].innerHTML = '<span style="line-height: 23px; margin-left: 5px;">' + resource.name + '</span>';
+            },
+            myKanbanOnItemAttrClicked: function(event) {
+                let args = event.args;
+                if (args.attribute == 'template') {
+                    this.$refs.myKanban.removeItem(args.item.id);
+                }
+            },
+            myKanbanonColumnAttrClicked: function(event) {
+                let args = event.args;
+                if (args.attribute == 'button') {
+                    args.cancelToggle = true;
+                    if (!args.column.collapsed) {
+                        let colors = ['#f19b60', '#5dc3f0', '#6bbd49', '#dddddd'];
+                        this.$refs.myKanban.addItem({
+                            status: args.column.dataField,
+                            text: '<input placeholder="(No Title)" style="width: 96%; margin-top:2px; border-radius: 3px;' +
+                                'border-color: #ddd; line-height:20px; height: 20px;" class="jqx-input" id="newItem' + this.itemIndex + '" value= "" />',
+                            tags: 'new task',
+                            color: colors[Math.floor(Math.random() * 4)],
+                            resourceId: Math.floor(Math.random() * 4)
+                        });
+
+                        let id = `newItem${this.itemIndex}`;
+                        let myInput = document.getElementById(id);
+
+                        if (myInput !== null && myInput !== undefined) {
+                            myInput.addEventListener('mousedown', (event) => {
+                                event.stopPropagation();
+                            });
+
+                            myInput.addEventListener('mouseup', (event) => {
+                                event.stopPropagation();
+                            });
+
+                            myInput.addEventListener('keydown', (event) => {
+                                if (event.keyCode == 13) {
+                                    let valueElement = `<span>${event.target.value}</span>`;
+                                    event.target.insertAdjacentHTML('beforebegin', valueElement);
+                                    event.target.remove();
+                                }
+                            });
+
+                            myInput.focus();
+                        }
+                        this.itemIndex++;
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-kanban-item-color-status {
+        width: 100%;
+        height: 25px;
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+        position: relative;
+        margin-top: 0px;
+        top: 0px;
+    }
+
+    .jqx-kanban-item {
+        padding-top: 0px;
+    }
+
+    .jqx-kanban-item-text {
+        padding-top: 6px;
+    }
+
+    .jqx-kanban-item-avatar {
+        top: 9px;
+    }
+
+    .jqx-kanban-template-icon {
+        position: absolute;
+        right: 3px;
+        top: 12px;
+    }
+</style>
diff --git a/kanban/itemtemplate/main.js b/kanban/itemtemplate/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/kanban/itemtemplate/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/kanban/itemtemplate/package.json b/kanban/itemtemplate/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/kanban/itemtemplate/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/kanban/kanbanediting/App.vue b/kanban/kanbanediting/App.vue
new file mode 100644
index 00000000..94d2da2c
--- /dev/null
+++ b/kanban/kanbanediting/App.vue
@@ -0,0 +1,227 @@
+<template>
+    <JqxKanban ref="myKanban"
+               @itemAttrClicked="myKanbanOnItemAttrClicked($event)" @columnAttrClicked="myKanbanonColumnAttrClicked($event)"
+               :width="getWidth" :height="600" :template="template" :source="dataAdapter" :columns="columns"
+               :resources="resourcesAdapterFunc()" :itemRenderer="itemRenderer">
+    </JqxKanban>
+</template>
+<script>
+    import JqxKanban from "jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue";
+    import JqxTextArea from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue";
+
+    export default {
+        components: {
+            JqxKanban,
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('kanban'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: "Backlog", iconClassName: this.getIconClassName(), dataField: "new", maxItems: 6 },
+                    { text: "In Progress", iconClassName: this.getIconClassName(), dataField: "work", maxItems: 6 },
+                    { text: "Done", iconClassName: this.getIconClassName(), dataField: "done", maxItems: 6 }
+                ],
+                template: '<div class="jqx-kanban-item" id="">'
+                    + '<div class="jqx-kanban-item-color-status"></div>'
+                    + '<div style="display: none;" class="jqx-kanban-item-avatar"></div>'
+                    + '<div class="jqx-icon jqx-icon-close jqx-kanban-item-template-content jqx-kanban-template-icon"></div>'
+                    + '<div class="jqx-kanban-item-text"></div>'
+                    + '<div style="display: none;" class="jqx-kanban-item-footer"></div>'
+                    + '</div>'
+            }
+        },
+        beforeCreate: function () {
+            this.theme;
+
+            const fields = [
+                { name: 'id', type: 'string' },
+                { name: 'status', map: 'state', type: 'string' },
+                { name: 'text', map: 'label', type: 'string' },
+                { name: 'tags', type: 'string' },
+                { name: 'color', map: 'hex', type: 'string' },
+                { name: 'resourceId', type: 'number' }
+            ];
+
+            this.source = {
+                localData: [
+                    { id: '1161', state: 'new', label: 'Make a new Dashboard', tags: 'dashboard', hex: '#36c7d0', resourceId: 3 },
+                    { id: '1645', state: 'work', label: 'Prepare new release', tags: 'release', hex: '#ff7878', resourceId: 1 },
+                    { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#96c443', resourceId: 3 },
+                    { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#ff7878', resourceId: 4 },
+                    { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue, login', hex: '#96c443' }
+                ],
+                dataType: 'array',
+                dataFields: fields
+            };
+
+            this.itemIndex = 0;
+        },
+        methods: {
+            resourcesAdapterFunc: function () {
+                let resourcesSource =
+                    {
+                        localData: [
+                            { id: 0, name: 'No name', image: '../../../images/common.png', common: true },
+                            { id: 1, name: 'Andrew Fuller', image: '../../../images/andrew.png' },
+                            { id: 2, name: 'Janet Leverling', image: '../../../images/janet.png' },
+                            { id: 3, name: 'Steven Buchanan', image: '../../../images/steven.png' },
+                            { id: 4, name: 'Nancy Davolio', image: '../../../images/nancy.png' },
+                            { id: 5, name: 'Michael Buchanan', image: '../../../images/Michael.png' },
+                            { id: 6, name: 'Margaret Buchanan', image: '../../../images/margaret.png' },
+                            { id: 7, name: 'Robert Buchanan', image: '../../../images/robert.png' },
+                            { id: 8, name: 'Laura Buchanan', image: '../../../images/Laura.png' },
+                            { id: 9, name: 'Laura Buchanan', image: '../../../images/Anne.png' }
+                        ],
+                        dataType: 'array',
+                        dataFields: [
+                            { name: 'id', type: 'number' },
+                            { name: 'name', type: 'string' },
+                            { name: 'image', type: 'string' },
+                            { name: 'common', type: 'boolean' }
+                        ]
+                    };
+                let resourcesDataAdapter = new jqx.dataAdapter(resourcesSource);
+                return resourcesDataAdapter;
+            },
+            getIconClassName: function () {
+                switch (this.theme) {
+                    case 'darkblue':
+                    case 'black':
+                    case 'shinyblack':
+                    case 'ui-le-frog':
+                    case 'metrodark':
+                    case 'orange':
+                    case 'darkblue':
+                    case 'highcontrast':
+                    case 'ui-sunny':
+                    case 'ui-darkness':
+                        return 'jqx-icon-plus-alt-white ';
+                }
+                return 'jqx-icon-plus-alt';
+            },
+            itemRenderer: function (element, item, resource) {
+                element[0].getElementsByClassName('jqx-kanban-item-color-status')[0].innerHTML = '<span style="line-height: 23px; margin-left: 5px;">' + resource.name + '</span>';
+
+                let container = element[0].getElementsByClassName('jqx-kanban-item-text')[0];
+
+                element[0].addEventListener('dblclick', (event) => {
+                    let domToNull = document.getElementsByClassName('jqx-kanban-item-text');
+
+                    for (let i = 0; i < domToNull.length; i++) {
+                        if (domToNull[i].children.length !== 0) {
+                            let textArea = domToNull[i].getElementsByTagName('textarea')[0];
+                            if (textArea)
+                                domToNull[i].innerHTML = textArea.value;
+                        }
+                    }
+
+                    let currentText = container.innerHTML;
+                    container.innerHTML = '';
+
+                    let widgetContainer = document.createElement('div');
+                    let id = `textArea${this.itemIndex}`;
+                    widgetContainer.id = id;
+                    widgetContainer.style.border = 'none';
+
+                    container.appendChild(widgetContainer);
+
+                    let myTextArea = jqwidgets.createInstance(`#${id}`, 'jqxTextArea', { width: '100%', height: 35 })
+
+                    myTextArea.val(currentText);
+
+                    widgetContainer.addEventListener('keydown', (event) => {
+                        if (event.keyCode == 13) {
+                            if (myTextArea) {
+                                container.innerHTML = myTextArea.val();
+                            }
+                        }
+                    }, true);
+
+                    myTextArea.focus();
+                    this.itemIndex++;
+                });
+            },
+            myKanbanOnItemAttrClicked: function(event) {
+                let args = event.args;
+                if (args.attribute == 'template') {
+                    this.$refs.myKanban.removeItem(args.item.id);
+                }
+            },
+            myKanbanonColumnAttrClicked: function(event) {
+                let args = event.args;
+                if (args.attribute == 'button') {
+                    args.cancelToggle = true;
+                    if (!args.column.collapsed) {
+                        let colors = ['#f19b60', '#5dc3f0', '#6bbd49', '#dddddd'];
+                        this.$refs.myKanban.addItem({
+                            status: args.column.dataField,
+                            text: '<input placeholder="(No Title)" style="width: 96%; margin-top:2px; border-radius: 3px;' +
+                                'border-color: #ddd; line-height:20px; height: 20px;" class="jqx-input" id="newItem' + this.itemIndex + '" value= "" />',
+                            tags: 'new task',
+                            color: colors[Math.floor(Math.random() * 4)],
+                            resourceId: Math.floor(Math.random() * 4)
+                        });
+
+                        let id = `newItem${this.itemIndex}`;
+                        let myInput = document.getElementById(id);
+
+                        if (myInput !== null && myInput !== undefined) {
+                            myInput.addEventListener('mousedown', (event) => {
+                                event.stopPropagation();
+                            });
+
+                            myInput.addEventListener('mouseup', (event) => {
+                                event.stopPropagation();
+                            });
+
+                            myInput.addEventListener('keydown', (event) => {
+                                if (event.keyCode == 13) {
+                                    let valueElement = `<span>${event.target.value}</span>`;
+                                    event.target.insertAdjacentHTML('beforebegin', valueElement);
+                                    event.target.remove();
+                                }
+                            });
+
+                            myInput.focus();
+                        }
+                        this.itemIndex++;
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-kanban-item-color-status {
+        width: 100%;
+        height: 25px;
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+        position: relative;
+        margin-top: 0px;
+        overflow: hidden;
+        top: 0px;
+    }
+
+    .jqx-kanban-item {
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+
+    .jqx-kanban-item-text {
+        padding-top: 6px;
+        padding-bottom: 6px;
+    }
+
+    .jqx-kanban-item-avatar {
+        top: 9px;
+    }
+
+    .jqx-kanban-template-icon {
+        position: absolute;
+        right: 3px;
+        top: 12px;
+    }
+</style>
diff --git a/kanban/kanbanediting/main.js b/kanban/kanbanediting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/kanban/kanbanediting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/kanban/kanbanediting/package.json b/kanban/kanbanediting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/kanban/kanbanediting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/kanban/kanbanevents/App.vue b/kanban/kanbanevents/App.vue
new file mode 100644
index 00000000..2ee1aa42
--- /dev/null
+++ b/kanban/kanbanevents/App.vue
@@ -0,0 +1,137 @@
+<template>
+    <div>
+        <JqxKanban @itemMoved="myKanbanOnItemMoved($event)"
+                   @columnCollapsed="myKanbanOnColumnCollapsed($event)"
+                   @columnExpanded="myKanbanOnColumnExpanded($event)"
+                   @itemAttrClicked="myKanbanOnItemAttrClicked($event)"
+                   @columnAttrClicked="myKanbanOnColumnAttrClicked($event)"
+                   :width="getWidth" :source="dataAdapter" :columns="columns"
+                   :resources="resourcesAdapterFunc()">
+        </JqxKanban>
+        <div ref="myLog"></div>
+    </div>
+</template>
+<script>
+    import JqxKanban from "jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue";
+
+    export default {
+        components: {
+            JqxKanban,
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('kanban'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Backlog', dataField: 'new' },
+                    { text: 'In Progress', dataField: 'work' },
+                    { text: 'Done', dataField: 'done' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.log = [];
+
+            const fields = [
+                { name: 'id', type: 'string' },
+                { name: 'status', map: 'state', type: 'string' },
+                { name: 'text', map: 'label', type: 'string' },
+                { name: 'tags', type: 'string' },
+                { name: 'color', map: 'hex', type: 'string' },
+                { name: 'resourceId', type: 'number' }
+            ];
+
+            this.source = {
+                localData: [
+                    { id: '1161', state: 'new', label: 'Make a new Dashboard', tags: 'dashboard', hex: '#36c7d0', resourceId: 3 },
+                    { id: '1645', state: 'work', label: 'Prepare new release', tags: 'release', hex: '#ff7878', resourceId: 1 },
+                    { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#96c443', resourceId: 3 },
+                    { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#ff7878', resourceId: 4 },
+                    { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue, login', hex: '#96c443' }
+                ],
+                dataType: 'array',
+                dataFields: fields
+            };
+        },
+        methods: {
+            resourcesAdapterFunc: function () {
+                let resourcesSource =
+                    {
+                        localData: [
+                            { id: 0, name: 'No name', image: '../../../images/common.png', common: true },
+                            { id: 1, name: 'Andrew Fuller', image: '../../../images/andrew.png' },
+                            { id: 2, name: 'Janet Leverling', image: '../../../images/janet.png' },
+                            { id: 3, name: 'Steven Buchanan', image: '../../../images/steven.png' },
+                            { id: 4, name: 'Nancy Davolio', image: '../../../images/nancy.png' },
+                            { id: 5, name: 'Michael Buchanan', image: '../../../images/Michael.png' },
+                            { id: 6, name: 'Margaret Buchanan', image: '../../../images/margaret.png' },
+                            { id: 7, name: 'Robert Buchanan', image: '../../../images/robert.png' },
+                            { id: 8, name: 'Laura Buchanan', image: '../../../images/Laura.png' },
+                            { id: 9, name: 'Laura Buchanan', image: '../../../images/Anne.png' }
+                        ],
+                        dataType: 'array',
+                        dataFields: [
+                            { name: 'id', type: 'number' },
+                            { name: 'name', type: 'string' },
+                            { name: 'image', type: 'string' },
+                            { name: 'common', type: 'boolean' }
+                        ]
+                    };
+                let resourcesDataAdapter = new jqx.dataAdapter(resourcesSource);
+                return resourcesDataAdapter;
+            },
+            updateLog: function() {
+                let count = 0;
+                let str = '';
+                for (let i = this.log.length - 1; i >= 0; i--) {
+                    str += this.log[i] + '<br/>';
+                    count++;
+                    if (count > 10)
+                        break;
+                }
+                this.$refs.myLog.innerHTML = str;
+            },
+            myKanbanOnItemMoved: function(event) {
+                let args = event.args;
+                let itemId = args.itemId;
+                let oldParentId = args.oldParentId;
+                let newParentId = args.newParentId;
+                let itemData = args.itemData;
+                let oldColumn = args.oldColumn;
+                let newColumn = args.newColumn;
+                this.log.push('itemMoved is raised');
+                this.updateLog();
+            },
+            myKanbanOnColumnCollapsed: function(event) {
+                let args = event.args;
+                let column = args.column;
+                this.log.push('columnCollapsed is raised');
+                this.updateLog();
+            },
+            myKanbanOnColumnExpanded: function(event) {
+                let args = event.args;
+                let column = args.column;
+                this.log.push('columnExpanded is raised');
+                this.updateLog();
+            },
+            myKanbanOnItemAttrClicked: function(event) {
+                let args = event.args;
+                let itemId = args.itemId;
+                let attribute = args.attribute; // template, colorStatus, content, keyword, text, avatar
+                this.log.push('itemAttrClicked is raised');
+                this.updateLog();
+            },
+            myKanbanOnColumnAttrClicked: function(event) {
+                let args = event.args;
+                let column = args.column;
+                let cancelToggle = args.cancelToggle; // false by default. Set to true to cancel toggling dynamically.
+                let attribute = args.attribute; // title, button
+                this.log.push('columnAttrClicked is raised');
+                this.updateLog();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/kanban/kanbanevents/main.js b/kanban/kanbanevents/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/kanban/kanbanevents/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/kanban/kanbanevents/package.json b/kanban/kanbanevents/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/kanban/kanbanevents/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/kanban/kanbanfluidsize/App.vue b/kanban/kanbanfluidsize/App.vue
new file mode 100644
index 00000000..7b394c8f
--- /dev/null
+++ b/kanban/kanbanfluidsize/App.vue
@@ -0,0 +1,86 @@
+<template>
+    <JqxKanban :width="'100%'" :height="'100%'"
+               :source="dataAdapter" :columns="columns"
+               :resources="resourcesAdapterFunc()">
+    </JqxKanban>
+</template>
+<script>
+    import JqxKanban from "jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue";
+
+    export default {
+        components: {
+            JqxKanban
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('kanban'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Backlog', dataField: 'new' },
+                    { text: 'In Progress', dataField: 'work' },
+                    { text: 'Done', dataField: 'done' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const fields = [
+                { name: 'id', type: 'string' },
+                { name: 'status', map: 'state', type: 'string' },
+                { name: 'text', map: 'label', type: 'string' },
+                { name: 'tags', type: 'string' },
+                { name: 'color', map: 'hex', type: 'string' },
+                { name: 'resourceId', type: 'number' }
+            ];
+
+            this.source = {
+                localData: [
+                    { id: '1161', state: 'new', label: 'Make a new Dashboard', tags: 'dashboard', hex: '#36c7d0', resourceId: 3 },
+                    { id: '1645', state: 'work', label: 'Prepare new release', tags: 'release', hex: '#ff7878', resourceId: 1 },
+                    { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#96c443', resourceId: 3 },
+                    { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#ff7878', resourceId: 4 },
+                    { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue, login', hex: '#96c443' }
+                ],
+                dataType: 'array',
+                dataFields: fields
+            };
+        },
+        methods: {
+            resourcesAdapterFunc: function () {
+                let resourcesSource =
+                    {
+                        localData: [
+                            { id: 0, name: 'No name', image: '../../../images/common.png', common: true },
+                            { id: 1, name: 'Andrew Fuller', image: '../../../images/andrew.png' },
+                            { id: 2, name: 'Janet Leverling', image: '../../../images/janet.png' },
+                            { id: 3, name: 'Steven Buchanan', image: '../../../images/steven.png' },
+                            { id: 4, name: 'Nancy Davolio', image: '../../../images/nancy.png' },
+                            { id: 5, name: 'Michael Buchanan', image: '../../../images/Michael.png' },
+                            { id: 6, name: 'Margaret Buchanan', image: '../../../images/margaret.png' },
+                            { id: 7, name: 'Robert Buchanan', image: '../../../images/robert.png' },
+                            { id: 8, name: 'Laura Buchanan', image: '../../../images/Laura.png' },
+                            { id: 9, name: 'Laura Buchanan', image: '../../../images/Anne.png' }
+                        ],
+                        dataType: 'array',
+                        dataFields: [
+                            { name: 'id', type: 'number' },
+                            { name: 'name', type: 'string' },
+                            { name: 'image', type: 'string' },
+                            { name: 'common', type: 'boolean' }
+                        ]
+                    };
+                let resourcesDataAdapter = new jqx.dataAdapter(resourcesSource);
+                return resourcesDataAdapter;
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        padding: 0;
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+</style>
diff --git a/kanban/kanbanfluidsize/main.js b/kanban/kanbanfluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/kanban/kanbanfluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/kanban/kanbanfluidsize/package.json b/kanban/kanbanfluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/kanban/kanbanfluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/kanban/multiplekanbans/App.vue b/kanban/multiplekanbans/App.vue
new file mode 100644
index 00000000..38d9d3d4
--- /dev/null
+++ b/kanban/multiplekanbans/App.vue
@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <div id="outerBox1">
+            <h2>Team 1</h2>
+            <div id="kanbanBox1">
+
+                <JqxKanban :width="400" :height="400" :columns="kanbanColumns" :resources="staff"
+                           :source="kanbanSourceConnected1" :connectWith="'#kanbanBox2'">
+                </JqxKanban>
+
+            </div>
+        </div>
+
+        <div id="outerBox2">
+            <h2>Team 2</h2>
+            <div id="kanbanBox2">
+
+                <JqxKanban :width="400" :height="400" :columns="kanbanColumns" :resources="staff"
+                           :source="kanbanSourceConnected2" :connectWith="'#kanbanBox1'">
+                </JqxKanban>
+
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import JqxKanban from "jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue";
+
+    export default {
+        components: {
+            JqxKanban
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('kanban'),
+                staff: [
+                    { id: 0, name: 'No name', image: '../../../images/common.png', common: true },
+                    { id: 1, name: 'Andrew Fuller', image: '../../../images/andrew.png' },
+                    { id: 2, name: 'Janet Leverling', image: '../../../images/janet.png' },
+                    { id: 3, name: 'Steven Buchanan', image: '../../../images/steven.png' }
+                ],
+                kanbanColumns: [
+                    { text: 'Backlog', dataField: 'new', access: 'none', maxItems: 5 },
+                    { text: 'In Progress', dataField: 'work', access: 'none', maxItems: 5 },
+                    { text: 'Done', dataField: 'done', access: 'none', maxItems: 5, collapseDirection: 'right' }
+                ],
+                kanbanSourceConnected1: [
+                    { id: 3, status: 'done', text: 'Combine Orders', tags: 'orders, combine', color: '#5dc3f0', resourceId: 3 },
+                    { id: 4, status: 'work', text: 'Change Billing Address', tags: 'billing', color: '#6bbd49', resourceId: 1 },
+                    { id: 5, status: 'new', text: 'One item added to the cart', tags: 'cart', color: '#5dc3f0', resourceId: 3 },
+                    { id: 6, status: 'work', text: 'Login 404 issue', tags: 'issue, login', color: '#6bbd49' }
+                ],
+                kanbanSourceConnected2: [
+                    { id: 0, status: 'new', text: 'State opened does not contain items', tags: 'state, open', color: '#5dc3f0', resourceId: 1 },
+                    { id: 1, status: 'done', text: 'Patch #2043', tags: 'patch', color: '#6bbd49', personId: 2 },
+                    { id: 2, status: 'work', text: 'Change payment method', tags: 'payment', color: '#6bbd49', resourceId: 2 }
+                ]
+            }
+        }
+    }
+</script>
+
+<style>
+    #kanbanBox1 {
+        width: 400px;
+        height: 400px;
+        float: left;
+        padding: 2px;
+    }
+
+    #kanbanBox2 {
+        width: 400px;
+        height: 400px;
+        float: left;
+        padding: 2px;
+    }
+
+    #outerBox1 {
+        float: left;
+        padding: 5px;
+        margin: 2px;
+        background-color: #6bbd49;
+        color: #fff;
+    }
+
+    #outerBox2 {
+        color: #fff;
+        float: left;
+        padding: 5px;
+        margin: 2px;
+        background-color: #5dc3f0;
+    }
+</style>
diff --git a/kanban/multiplekanbans/main.js b/kanban/multiplekanbans/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/kanban/multiplekanbans/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/kanban/multiplekanbans/package.json b/kanban/multiplekanbans/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/kanban/multiplekanbans/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/kanban/righttoleftlayout/App.vue b/kanban/righttoleftlayout/App.vue
new file mode 100644
index 00000000..02977a04
--- /dev/null
+++ b/kanban/righttoleftlayout/App.vue
@@ -0,0 +1,79 @@
+<template>
+    <JqxKanban :width="getWidth" :source="dataAdapter" :columns="columns"
+               :resources="resourcesAdapterFunc()" :rtl="true">
+    </JqxKanban>
+</template>
+<script>
+    import JqxKanban from "jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue";
+
+    export default {
+        components: {
+            JqxKanban,
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('kanban'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Backlog', dataField: 'new' },
+                    { text: 'In Progress', dataField: 'work' },
+                    { text: 'Done', dataField: 'done' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const fields = [
+                { name: 'id', type: 'string' },
+                { name: 'status', map: 'state', type: 'string' },
+                { name: 'text', map: 'label', type: 'string' },
+                { name: 'tags', type: 'string' },
+                { name: 'color', map: 'hex', type: 'string' },
+                { name: 'resourceId', type: 'number' }
+            ];
+
+            this.source = {
+                localData:
+                    [
+                        { id: '1161', state: 'new', label: 'Make a new Dashboard', tags: 'dashboard', hex: '#36c7d0', resourceId: 3 },
+                        { id: '1645', state: 'work', label: 'Prepare new release', tags: 'release', hex: '#ff7878', resourceId: 1 },
+                        { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#96c443', resourceId: 3 },
+                        { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#ff7878', resourceId: 4 },
+                        { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue, login', hex: '#96c443' }
+                    ],
+                dataType: 'array',
+                dataFields: fields
+            };
+        },
+        methods: {
+            resourcesAdapterFunc: function () {
+                let resourcesSource =
+                    {
+                        localData: [
+                            { id: 0, name: 'No name', image: '../../../images/common.png', common: true },
+                            { id: 1, name: 'Andrew Fuller', image: '../../../images/andrew.png' },
+                            { id: 2, name: 'Janet Leverling', image: '../../../images/janet.png' },
+                            { id: 3, name: 'Steven Buchanan', image: '../../../images/steven.png' },
+                            { id: 4, name: 'Nancy Davolio', image: '../../../images/nancy.png' },
+                            { id: 5, name: 'Michael Buchanan', image: '../../../images/Michael.png' },
+                            { id: 6, name: 'Margaret Buchanan', image: '../../../images/margaret.png' },
+                            { id: 7, name: 'Robert Buchanan', image: '../../../images/robert.png' },
+                            { id: 8, name: 'Laura Buchanan', image: '../../../images/Laura.png' },
+                            { id: 9, name: 'Laura Buchanan', image: '../../../images/Anne.png' }
+                        ],
+                        dataType: 'array',
+                        dataFields: [
+                            { name: 'id', type: 'number' },
+                            { name: 'name', type: 'string' },
+                            { name: 'image', type: 'string' },
+                            { name: 'common', type: 'boolean' }
+                        ]
+                    };
+                let resourcesDataAdapter = new jqx.dataAdapter(resourcesSource);
+                return resourcesDataAdapter;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/kanban/righttoleftlayout/main.js b/kanban/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/kanban/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/kanban/righttoleftlayout/package.json b/kanban/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/kanban/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/knob/circlepointer/App.vue b/knob/circlepointer/App.vue
new file mode 100644
index 00000000..1c115c24
--- /dev/null
+++ b/knob/circlepointer/App.vue
@@ -0,0 +1,46 @@
+<template>
+    <JqxKnob :value="60" :min="0" :max="100" :startAngle="120"
+             :endAngle="480" :snapToStep="true" :rotation="'clockwise'"
+             :marks="marks" :labels="labels" :progressBar="progressBar" :pointer="pointer">
+    </JqxKnob>
+</template>
+<script>
+    import JqxKnob from "jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue";
+
+    export default {
+        components: {
+            JqxKnob,
+        },
+        data: function () {
+            return {
+                marks: {
+                    colorRemaining: { color: '#373636', border: '#373636' },
+                    colorProgress: { color: '#373636', border: '#373636' },
+                    type: 'line',
+                    offset: '71%',
+                    thickness: 1,
+                    size: '6%',
+                    majorSize: '9%',
+                    majorInterval: 10,
+                    minorInterval: 2
+                },
+                labels: {
+                    offset: '88%',
+                    step: 10,
+                    visible: true
+                },
+                progressBar: {
+                    size: '70%',
+                    offset: '0%',
+                    background: {
+                        stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] }
+                    }
+                },
+                pointer: {
+                    type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
+                    size: '10%', offset: '50%'
+                }
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/knob/circlepointer/main.js b/knob/circlepointer/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/knob/circlepointer/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/knob/circlepointer/package.json b/knob/circlepointer/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/knob/circlepointer/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/knob/defaultfunctionality/App.vue b/knob/defaultfunctionality/App.vue
new file mode 100644
index 00000000..70fea5bb
--- /dev/null
+++ b/knob/defaultfunctionality/App.vue
@@ -0,0 +1,114 @@
+<template>
+    <div id="container">
+
+        <JqxKnob ref="myKnob" @change="onChange($event)"
+                 :value="60" :min="0" :max="100" :startAngle="120"
+                 :endAngle="420" :snapToStep="true" :rotation="'clockwise'"
+                 :marks="marks" :labels="labels" :progressBar="progressBar" :pointer="pointer">
+        </JqxKnob>
+
+        <div id="inputField">
+
+            <JqxNumberInput ref="myNumberInput"
+                            @mousedown="onMouseDown($event)" @keyup="onKeyup()" @valueChanged="onValueChanged()"
+                            :width="60" :height="40" :decimal="60" :min="0" :max="100"
+                            :textAlign="'center'" :decimalDigits="1" :inputMode="'simple'">
+            </JqxNumberInput>
+
+        </div>
+    </div>
+</template>
+<script>
+    import JqxKnob from "jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue";
+    import JqxNumberInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue";
+
+    export default {
+        components: {
+            JqxKnob,
+            JqxNumberInput
+        },
+        data: function () {
+            return {
+                style: {
+                    stroke: '#dfe3e9', strokeWidth: 3,
+                    fill: {
+                        color: '#fefefe', gradientType: "linear",
+                        gradientStops: [[0, 1], [50, 0.9], [100, 1]]
+                    }
+                },
+                marks: {
+                    colorRemaining: { color: 'grey', border: 'grey' },
+                    colorProgress: { color: '#00a4e1', border: '#00a4e1' },
+                    type: 'line',
+                    offset: '71%',
+                    thickness: 3,
+                    size: '6%',
+                    majorSize: '9%',
+                    majorInterval: 10,
+                    minorInterval: 2
+                },
+                labels: {
+                    offset: '88%',
+                    step: 10,
+                    visible: true
+                },
+                progressBar: {
+                    style: { fill: '#00a4e1', stroke: 'grey' },
+                    size: '9%',
+                    offset: '60%',
+                    background: { fill: 'grey', stroke: 'grey' }
+                },
+                pointer: {
+                    type: 'circle',
+                    style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
+                    size: '10%',
+                    offset: '50%'
+                }
+            }
+        },
+        mounted: function () {
+            this.$refs.myKnob.style = this.style;
+        },
+        methods: {
+            onChange: function (event) {
+                if (event.args.changeSource == 'propertyChange' || event.args.changeSource == 'val') { return; }
+                this.$refs.myNumberInput.val(event.args.value);
+            },
+            onMouseDown: function (event) {
+                event.stopPropagation();
+            },
+            onKeyup: function () {
+                let val = this.$refs.myNumberInput.val();
+                this.$refs.myKnob.val(val);
+            },
+            onValueChanged: function () {
+                let val = this.$refs.myNumberInput.val();
+                this.$refs.myKnob.val(val);
+            }
+        }
+    }
+</script>
+
+<style>
+    #container {
+        position: relative;
+    }
+
+    .jqx-numberinput {
+        left: 170px;
+        top: 323px;
+        position: absolute;
+        background: transparent !important;
+        border: none !important;
+    }
+
+    text.jqx-knob-label {
+        font-size: 20px;
+    }
+
+    .jqx-numberinput > input {
+        background: transparent !important;
+        font-size: 20px !important;
+        color: grey !important;
+    }
+</style>
diff --git a/knob/defaultfunctionality/main.js b/knob/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/knob/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/knob/defaultfunctionality/package.json b/knob/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/knob/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/knob/fluidsize/App.vue b/knob/fluidsize/App.vue
new file mode 100644
index 00000000..220849dd
--- /dev/null
+++ b/knob/fluidsize/App.vue
@@ -0,0 +1,69 @@
+<template>
+    <JqxKnob ref="myKnob" 
+        :width="'75%'" :height="'75%'" :value="60" :min="0" :max="100" :startAngle="120"
+        :endAngle="480" :snapToStep="true" :rotation="'clockwise'"
+        :marks="marks" :labels="labels" :progressBar="progressBar" :pointer="pointer">
+    </JqxKnob>
+</template>
+<script>
+    import JqxKnob from "jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue";
+
+    export default {
+        components: {
+            JqxKnob
+        },
+        data: function () {
+            return {
+                style: {
+                    stroke: '#dfe3e9', strokeWidth: 3,
+                    fill: {
+                        color: '#fefefe', gradientType: "linear",
+                        gradientStops: [[0, 1], [50, 0.9], [100, 1]]
+                    }
+                },
+                marks: {
+                    colorRemaining: { color: 'grey', border: 'grey' },
+                    colorProgress: { color: '#00a4e1', border: '#00a4e1' },
+                    type: 'line',
+                    offset: '71%',
+                    thickness: 3,
+                    size: '6%',
+                    majorSize: '9%',
+                    majorInterval: 10,
+                    minorInterval: 2
+                },
+                labels: {
+                    offset: '88%',
+                    step: 10,
+                    visible: true
+                },
+                progressBar: {
+                    style: { fill: '#00a4e1', stroke: 'grey' },
+                    size: '9%',
+                    offset: '60%',
+                    background: { fill: 'grey', stroke: 'grey' }
+                },
+                pointer: {
+                    type: 'arrow',
+                    style: { fill: '#00a4e1', stroke: 'grey' },
+                    size: '59%',
+                    offset: '49%',
+                    thickness: 20
+                }
+            }
+        },
+        mounted: function () {
+            this.$refs.myKnob.style = this.style;
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+    }
+</style>
diff --git a/knob/fluidsize/main.js b/knob/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/knob/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/knob/fluidsize/package.json b/knob/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/knob/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/knob/infiniteknob/App.vue b/knob/infiniteknob/App.vue
new file mode 100644
index 00000000..eda5d3c8
--- /dev/null
+++ b/knob/infiniteknob/App.vue
@@ -0,0 +1,103 @@
+<template>
+    <JqxKnob ref="myKnob" @change="myKnobOnChange($event)"
+             :value="60" :min="0" :max="100" :startAngle="150"
+             :endAngle="510" :snapToStep="true" :rotation="'clockwise'" :styleProperty="style"
+             :marks="marks" :labels="labels" :progressBar="progressBar" :pointer="pointer"
+             :spinner="spinner" :dial="dial">
+    </JqxKnob>
+
+</template>
+<script>
+    import JqxKnob from "jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue";
+
+    export default {
+        components: {
+            JqxKnob
+        },
+        data: function () {
+            return {
+                style: {
+                    stroke: '#dfe3e9',
+                    strokeWidth: 3,
+                    fill: {
+                        color: '#fefefe', gradientType: 'linear',
+                        gradientStops: [[0, 1], [50, 0.9], [100, 1]]
+                    }
+                },
+                marks: {
+                    colorRemaining: '#333',
+                    colorProgress: '#333',
+                    type: 'line',
+                    offset: '71%',
+                    thickness: 1,
+                    size: '6%',
+                    majorSize: '9%',
+                    majorInterval: 10,
+                    minorInterval: 2
+                },
+                labels: {
+                    offset: '88%',
+                    step: 10
+                },
+                progressBar: {
+                    style: { fill: { color: '#00a644', gradientType: 'linear', gradientStops: [[0, 1], [50, 0.9], [100, 1]] }, stroke: '#00a644' },
+                    background: { fill: { color: '#ff8b1e', gradientType: 'linear', gradientStops: [[0, 1], [50, 0.9], [100, 1]] }, stroke: '#ff8b1e' },
+                    size: '9%',
+                    offset: '60%'
+                },
+                pointer: {
+                    type: 'circle',
+                    style: { fill: '#ef6100', stroke: '#ef6100' },
+                    size: '5%',
+                    offset: '38%',
+                    thickness: 20
+                },
+                spinner: {
+                    style: { fill: { color: '#00a4e1', gradientType: 'linear', gradientStops: [[0, 1], [50, 0.9], [100, 1]] }, stroke: '#00a4e1' },
+                    innerRadius: '45%', // specifies the inner Radius of the dial
+                    outerRadius: '60%', // specifies the outer Radius of the dial
+                    marks: {
+                        colorRemaining: '#fff',
+                        colorProgress: '#fff',
+                        type: 'line',
+                        offset: '46%',
+                        thickness: 2,
+                        size: '14%',
+                        majorSize: '14%',
+                        majorInterval: 10,
+                        minorInterval: 10
+                    }
+                },
+                dial: {
+                    style: { fill: { color: '#dfe3e9', gradientType: 'linearHorizontal', gradientStops: [[0, 0.9], [50, 1], [100, 1]] }, stroke: '#dfe3e9' },
+                    innerRadius: '0%', // specifies the inner Radius of the dial
+                    outerRadius: '45%'
+                }
+            }
+        },
+        beforeCreate: function () {
+            this.lastValue;
+            this.newValue = 0;
+            this.min = 0;
+            this.max = 100;
+        },
+        methods: {
+            myKnobOnChange: function(event) {
+                this.lastValue = this.newValue;
+                this.newValue = event.args.value;
+                if (this.newValue >= this.min && this.newValue <= this.min + 10 && this.lastValue <= this.max && this.lastValue >= this.max - 10) {
+                    this.min = this.max;
+                    this.max += 100;
+                    this.$refs.myKnob.setOptions({ value: this.max, max: this.max, min: this.min });
+                } else if (this.newValue >= this.max - 10 && this.newValue <= this.max && this.lastValue >= this.min && this.lastValue <= this.min + 10) {
+                    this.max = this.min;
+                    this.min -= 100;
+                    this.$refs.myKnob.setOptions({ value: this.min, min: this.min, max: this.max });
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/knob/infiniteknob/main.js b/knob/infiniteknob/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/knob/infiniteknob/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/knob/infiniteknob/package.json b/knob/infiniteknob/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/knob/infiniteknob/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/knob/knobprogressranges/App.vue b/knob/knobprogressranges/App.vue
new file mode 100644
index 00000000..e8251a25
--- /dev/null
+++ b/knob/knobprogressranges/App.vue
@@ -0,0 +1,102 @@
+<template>
+    <JqxKnob ref="myKnob" 
+             :value="0" :min="0" :max="100" :step="20" :startAngle="150"
+             :endAngle="480" :snapToStep="true" :rotation="'clockwise'"
+             :marks="marks" :labels="labels" :progressBar="progressBar" :pointer="pointer"
+             :spinner="spinner" :dial="dial" :dragStartAngle="120" :dragEndAngle="420">
+    </JqxKnob>
+
+</template>
+<script>
+    import JqxKnob from "jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue";
+
+    export default {
+        components: {
+            JqxKnob
+        },
+        data: function () {
+            return {
+                style: {
+                    stroke: '#dfe3e9',
+                    strokeWidth: 3,
+                    fill: { color: '#fefefe', gradientType: 'linear', gradientStops: [[0, 1], [50, 0.9], [100, 1]] }
+                },
+                marks: {
+                    colorRemaining: '#333',
+                    colorProgress: '#16a15d',
+                    type: 'circle',
+                    offset: '68%',
+                    drawAboveProgressBar: true,
+                    thickness: 1,
+                    size: '2%',
+                    majorSize: '2%',
+                    majorInterval: 20,
+                    minorInterval: 20
+                },
+                labels: {
+                    step: 20,
+                    offset: '80%',
+                    formatFunction: (label) => {
+                        if (label == 0)
+                            return 'Low';
+                        if (label == 20)
+                            return 'Defrost';
+                        if (label == 40)
+                            return 'M.Low';
+                        if (label == 60)
+                            return 'Med';
+                        if (label == 80)
+                            return 'M.High';
+                        if (label == 100)
+                            return 'High';
+                    }
+                },
+                progressBar: {
+                    background: { fill: '#eeeeee' },
+                    style: { fill: '#16a15d', opacity: 0.4 },
+                    ranges:
+                        [
+                            { startValue: 0, endValue: 20, fill: '#12b24e' },
+                            { startValue: 20, endValue: 40, fill: '#2ec544' },
+                            { startValue: 40, endValue: 60, fill: '#ffff3b' },
+                            { startValue: 60, endValue: 80, fill: '#f4a620' },
+                            { startValue: 80, endValue: 100, fill: '#f2121c' }
+                        ],
+                    size: '7%',
+                    offset: '56%'
+                },
+                pointer: {
+                    type: 'arrow',
+                    style: { fill: '#666' },
+                    size: '63%',
+                    offset: '0%',
+                    thickness: 7
+                },
+                spinner: {
+                    style: {
+                        fill: '#666'
+                    },
+                    innerRadius: '0%',
+                    outerRadius: '3%',
+                    startAngle: 0,
+                    endAngle: 360
+                },
+                dial: {
+                    style: {
+                        fill: '#eee'
+                    },
+                    innerRadius: '68%',
+                    outerRadius: '92%',
+                    startAngle: 0,
+                    endAngle: 360
+                }
+            }
+        },
+        mounted: function () {
+            this.$refs.myKnob.style = this.style;
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/knob/knobprogressranges/main.js b/knob/knobprogressranges/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/knob/knobprogressranges/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/knob/knobprogressranges/package.json b/knob/knobprogressranges/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/knob/knobprogressranges/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/knob/knobrotation/App.vue b/knob/knobrotation/App.vue
new file mode 100644
index 00000000..bb1a91cb
--- /dev/null
+++ b/knob/knobrotation/App.vue
@@ -0,0 +1,89 @@
+<template>
+    <JqxKnob :value="60" :min="0" :max="100" :startAngle="120"
+             :endAngle="480" :snapToStep="true" :rotation="'counterclockwise'"
+             :marks="marks" :labels="labels" :progressBar="progressBar" :pointer="pointer"
+             :spinner="spinner" :dial="dial" :dragStartAngle="120" :dragEndAngle="420">
+    </JqxKnob>
+
+</template>
+<script>
+    import JqxKnob from "jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue";
+
+    export default {
+        components: {
+            JqxKnob
+        },
+        data: function () {
+            return {
+                marks: {
+                    colorRemaining: '#fff',
+                    colorProgress: '#fff',
+                    type: 'line',
+                    offset: '75%',
+                    thickness: 2,
+                    size: '15%',
+                    majorSize: '15%',
+                    drawAboveProgressBar: true,
+                    majorInterval: 10,
+                    minorInterval: 2
+                },
+                labels: {
+                    offset: '50%',
+                    rotate: true,
+                    step: 10
+                },
+                progressBar: {
+                    size: '15%',
+                    offset: '75%',
+                    style: {
+                        stroke: '#a2da39', strokeWidth: 1, fill: '#a2da39'
+                    },
+                    background: {
+                        stroke: '#d1d2d4', strokeWidth: 1, fill: '#d1d2d4'
+                    }
+                },
+                pointer: {
+                    type: 'arrow',
+                    style: { fill: '#a2da39' },
+                    size: '55%',
+                    thickness: 5,
+                    offset: '0%'
+                },
+                spinner: {
+                    size: '70%',
+                    innerRadius: '60%', // specifies the inner Radius of the dial
+                    outerRadius: '65%', // specifies the outer Radius of the dial
+                    marks: {
+                        colorRemaining: '#d5d3d4',
+                        colorProgress: '#d5d3d4',
+                        type: 'line',
+                        offset: '60%',
+                        thickness: 1,
+                        size: '5%',
+                        majorSize: '5%',
+                        majorInterval: 10,
+                        minorInterval: 2
+                    },
+                    style: {
+                        stroke: '#d5d3d4', strokeWidth: 1, fill: { color: '#dfe3e9', gradientType: 'linear', gradientStops: [[0, 0.5], [50, 0.5], [100, 0.5]] }
+                    }
+                },
+                dial: {
+                    innerRadius: '0%', // specifies the inner Radius of the dial
+                    outerRadius: '65%', // specifies the outer Radius of the dial
+                    style: {
+                        stroke: '#ff0000', strokeWidth: 1, fill: { color: '#66707e', gradientType: 'linear', gradientStops: [[0, 1], [50, 0.4], [100, 1]] }
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-knob-label {
+        fill: #a2da39;
+        font-size: 14px;
+        font-weight: bold;
+    }
+</style>
diff --git a/knob/knobrotation/main.js b/knob/knobrotation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/knob/knobrotation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/knob/knobrotation/package.json b/knob/knobrotation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/knob/knobrotation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/knob/knobwithcustomshape/App.vue b/knob/knobwithcustomshape/App.vue
new file mode 100644
index 00000000..0359ec8e
--- /dev/null
+++ b/knob/knobwithcustomshape/App.vue
@@ -0,0 +1,80 @@
+<template>
+    <JqxKnob :value="-100" :min="-100" :max="100" :step="'0.5'" :startAngle="120"
+             :endAngle="480" :snapToStep="true" :rotation="'clockwise'"
+             :marks="marks" :labels="labels" :progressBar="progressBar" :pointer="pointer"
+             :spinner="spinner" :dial="dial" :dragStartAngle="120" :dragEndAngle="420">
+    </JqxKnob>
+
+</template>
+<script>
+    import JqxKnob from "jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue";
+
+    export default {
+        components: {
+            JqxKnob
+        },
+        data: function () {
+            return {
+                marks: {
+                    colorRemaining: '#333',
+                    colorProgress: '#17a25d',
+                    offset: '75%',
+                    thickness: 2,
+                    size: '1%',
+                    majorSize: '1%',
+                    majorInterval: 10,
+                    minorInterval: 5
+                },
+                labels: {
+                    offset: '88%',
+                    step: 20,
+                    visible: true,
+                    formatFunction: (label) => {
+                        if (label == 0)
+                            return 'Off';
+                        if (label == -100)
+                            return 'Min';
+                        if (label == 100)
+                            return 'Max';
+                        return label;
+                    }
+                },
+                progressBar: {
+                    size: '70%',
+                    offset: '0%'
+                },
+                pointer: {
+                    type: 'arrow',
+                    thickness: 25,
+                    style: { fill: '#ff6126', stroke: '#333' },
+                    size: '60%',
+                    offset: '50%'
+                },
+                spinner: {
+                    style: { fill: '#17a25d', stroke: '#17a25d' },
+                    innerRadius: '65%', // specifies the inner Radius of the dial
+                    outerRadius: '70%', // specifies the outer Radius of the dial
+                    marks: {
+                        colorRemaining: '#fff',
+                        colorProgress: '#fff',
+                        offset: '68%',
+                        thickness: 4,
+                        type: 'circle',
+                        size: '5%',
+                        majorSize: '5%',
+                        majorInterval: 20,
+                        minorInterval: 20
+                    }
+                },
+                dial: {
+                    style: { fill: '#17a25d', stroke: '#17a25d' },
+                    innerRadius: '0%', // specifies the inner Radius of the dial
+                    outerRadius: '50%' // specifies the outer Radius of the dial
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/knob/knobwithcustomshape/main.js b/knob/knobwithcustomshape/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/knob/knobwithcustomshape/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/knob/knobwithcustomshape/package.json b/knob/knobwithcustomshape/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/knob/knobwithcustomshape/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/knob/knobwithinput/App.vue b/knob/knobwithinput/App.vue
new file mode 100644
index 00000000..02289e56
--- /dev/null
+++ b/knob/knobwithinput/App.vue
@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <JqxKnob ref="myKnob" @change="myKnobOnChange($event)"
+                 :width="400" :height="400"
+                 :value="30" :min="0" :max="100" :rotation="'clockwise'"
+                 :styleProperty="{ fill: '#fff' }" :progressBar="progressBar" :pointer="pointer"
+                 :dial="dial" :startAngle="270" :endAngle="630">
+        </JqxKnob>
+
+        <JqxInput ref="myInput" @change="myInputOnChange()" :value="30"></JqxInput>
+    </div>
+</template>
+<script>
+    import JqxKnob from "jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+
+    export default {
+        components: {
+            JqxKnob,
+            JqxInput
+        },
+        data: function () {
+            return {
+                progressBar: {
+                    style: { fill: '#00a644' },
+                    background: { fill: '#eeeeee' },
+                    size: '30%',
+                    offset: '70%'
+                },
+                pointer: {
+                    type: 'line',
+                    style: { fill: '#00a644' },
+                    size: '30%',
+                    offset: '70%',
+                    thickness: 20
+                },
+                dial: {
+                    style: {
+                        fill: '#fff'
+                    },
+                    innerRadius: '68%',
+                    outerRadius: '92%',
+                    startAngle: 0,
+                    endAngle: 360
+                }
+            }
+        },
+        methods: {
+            myKnobOnChange: function(event) {
+                if (event.target.nodeName === 'INPUT')
+                    return;
+                this.$refs.myInput.val(event.args.value);
+            },
+            myInputOnChange: function () {
+                this.$refs.myKnob.val(this.$refs.myInput.val());
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-input {
+        width: 110px;
+        height: 70px;
+        position: absolute;
+        vertical-align: middle;
+        border: 0px;
+        font-weight: bold;
+        font-variant: normal;
+        font-stretch: normal;
+        font-size: 48px !important;
+        font-family: Arial !important;
+        text-align: center;
+        color: #00a644 !important;
+        padding: 0px !important;
+        background: none !important;
+        margin-top: -35px !important;
+        margin-left: -55px !important;
+        left: 210px;
+        top: 230px;
+        border: none !important;
+        box-shadow: none !important;
+    }
+</style>
diff --git a/knob/knobwithinput/main.js b/knob/knobwithinput/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/knob/knobwithinput/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/knob/knobwithinput/package.json b/knob/knobwithinput/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/knob/knobwithinput/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/knob/linepointer/App.vue b/knob/linepointer/App.vue
new file mode 100644
index 00000000..28b183ab
--- /dev/null
+++ b/knob/linepointer/App.vue
@@ -0,0 +1,65 @@
+<template>
+    <JqxKnob ref="myKnob" 
+             :value="60" :min="0" :max="100" :startAngle="120"
+             :endAngle="420" :rotation="'clockwise'" :labels="labels" 
+             :marks="marks" :progressBar="progressBar" :pointer="pointer">
+    </JqxKnob>
+</template>
+<script>
+    import JqxKnob from "jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue";
+
+    export default {
+        components: {
+            JqxKnob
+        },
+        data: function () {
+            return {
+                style: {
+                    stroke: '#dfe3e9',
+                    strokeWidth: 3,
+                    fill: { color: '#fefefe', gradientType: 'linear', gradientStops: [[0, 1], [50, 0.9], [100, 1]] }
+                },
+                marks: {
+                    colorRemaining: '#333',
+                    colorProgress: '#2db2e4',
+                    type: 'circle',
+                    offset: '75%',
+                    thickness: 2,
+                    size: '2%',
+                    majorSize: '2%',
+                    majorInterval: 10,
+                    minorInterval: 2
+                },
+                labels: {
+                    offset: '88%',
+                    step: 5,
+                    visible: true,
+                    formatFunction: (label) => {
+                        if (label == 0)
+                            return 'Min';
+                        if (label == 100)
+                            return 'Max';
+                        return label;
+                    }
+                },
+                progressBar: {
+                    size: '70%',
+                    offset: '0%'
+                },
+                pointer: {
+                    type: 'line',
+                    thickness: 4,
+                    style: { fill: '#00a4e1', stroke: '#00a4e1' },
+                    size: '70%',
+                    offset: '0%'
+                }
+            }
+        },
+        mounted: function () {
+            this.$refs.myKnob.style = this.style;
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/knob/linepointer/main.js b/knob/linepointer/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/knob/linepointer/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/knob/linepointer/package.json b/knob/linepointer/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/knob/linepointer/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/knob/multiplearrowpointes/App.vue b/knob/multiplearrowpointes/App.vue
new file mode 100644
index 00000000..a64c808e
--- /dev/null
+++ b/knob/multiplearrowpointes/App.vue
@@ -0,0 +1,78 @@
+<template>
+    <JqxKnob :value="[40, 80]" :min="0" :max="100" :startAngle="120"
+             :endAngle="480" :rotation="'clockwise'" :snapToStep="true" :labels="labels"
+             :marks="marks" :progressBar="progressBar" :pointer="pointer" :spinner="spinner"
+             :dragStartAngle="120" :dragEndAngle="420">
+    </JqxKnob>
+</template>
+<script>
+    import JqxKnob from "jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue";
+
+    export default {
+        components: {
+            JqxKnob
+        },
+        data: function () {
+            return {
+                marks: {
+                    colorRemaining: { color: '#373636', border: '#373636' },
+                    colorProgress: { color: '#373636', border: '#373636' },
+                    type: 'line',
+                    offset: '71%',
+                    thickness: 1,
+                    size: '6%',
+                    majorSize: '9%',
+                    majorInterval: 10,
+                    minorInterval: 2
+                },
+                labels: {
+                    offset: '88%',
+                    step: 10,
+                    visible: true,
+                    formatFunction: (label) => {
+                        if (label == 0)
+                            return 'Min';
+                        if (label == 100)
+                            return 'Max';
+                        return label;
+                    }
+                },
+                progressBar: {
+                    size: '20%',
+                    offset: '50%',
+                    innerRadius: '50%',
+                    outerRadius: '70%',
+                    style: [
+                        { stroke: '#285a83', strokeWidth: 1, fill: { color: '#285a83', gradientType: 'linear', gradientStops: [[0, 1], [50, 0.5], [100, 1]] } },
+                        { stroke: '#285a83', strokeWidth: 1, fill: { color: '#285a83', gradientType: 'linear', gradientStops: [[0, 1], [50, 0.5], [100, 1]] } }
+                    ],
+                    background: {
+                        stroke: '#ff6126', strokeWidth: 1, fill: { color: '#ff6126', gradientType: 'linear', gradientStops: [[0, 1], [50, 0.5], [100, 1]] }
+                    }
+                },
+                pointer: [
+                    {
+                        type: 'arrow', style: { fill: '#ff6126', stroke: '#ff6126' },
+                        size: '50%', offset: '30%', thickness: 30,
+                    },
+                    {
+                        type: 'arrow', style: { fill: '#ff6126', stroke: '#ff6126' },
+                        size: '50%', offset: '30%', thickness: 30
+                    }
+                ],
+                spinner: {
+                    size: '20%',
+                    offset: '30%',
+                    innerRadius: '0%',
+                    outerRadius: '30%',
+                    style: {
+                        stroke: '#285a83', strokeWidth: 1, fill: { color: '#285a83', gradientType: 'linear', gradientStops: [[0, 1], [50, 0.5], [100, 1]] }
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/knob/multiplearrowpointes/main.js b/knob/multiplearrowpointes/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/knob/multiplearrowpointes/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/knob/multiplearrowpointes/package.json b/knob/multiplearrowpointes/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/knob/multiplearrowpointes/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/knob/multiplecirclepointers/App.vue b/knob/multiplecirclepointers/App.vue
new file mode 100644
index 00000000..2233cac6
--- /dev/null
+++ b/knob/multiplecirclepointers/App.vue
@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <JqxKnob @change="myKnobOnChange($event)"
+                 :value="[60, 80]" :min="0" :max="100" :startAngle="150"
+                 :endAngle="510" :rotation="'clockwise'" :snapToStep="true"
+                 :styleProperty="{ fill: '#ebeced' }" :labels="labels" :changing="changing"
+                 :marks="marks" :progressBar="progressBar" :pointer="pointer" :spinner="spinner">
+        </JqxKnob>
+
+        <br /><br />
+
+        <div ref="myLog"></div>
+    </div>
+</template>
+<script>
+    import JqxKnob from "jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue";
+
+    export default {
+        components: {
+            JqxKnob
+        },
+        data: function () {
+            return {
+                marks: {
+                    colorRemaining: '#333',
+                    colorProgress: '#66707e',
+                    style: 'line',
+                    offset: '71%',
+                    thickness: 1,
+                    size: '6%',
+                    majorSize: '9%',
+                    majorInterval: 10,
+                    minorInterval: 2
+                },
+                labels: {
+                    offset: '88%',
+                    step: 10
+                },
+                progressBar: {
+                    style: [{ fill: '#66707e', stroke: '#66707e', strokeWidth: 0 },
+                    { fill: '#66707e', stroke: '#66707e', strokeWidth: 0 }],
+                    size: '9%',
+                    offset: '58%',
+                    background: { fill: '#a2da39', stroke: '#a2da39', strokeWidth: 0 }
+                },
+                pointer: [
+                    { type: 'circle', style: { fill: '#a2da39', stroke: '#a2da39' }, size: '5%', offset: '38%', thickness: 20 },
+                    { type: 'circle', style: { fill: '#a2da39', stroke: '#a2da39' }, size: '5%', offset: '38%', thickness: 20 }
+                ],
+                spinner: {
+                    style: { fill: '#66707e', stroke: '#66707e' },
+                    innerRadius: '0%', // specifies the inner Radius of the dial
+                    outerRadius: '58%', // specifies the outer Radius of the dial
+                    marks: {
+                        colorRemaining: '#a2da39',
+                        colorProgress: '#a2da39',
+                        type: 'circle',
+                        offset: '55%',
+                        thickness: 3,
+                        size: '1%',
+                        majorSize: '1%',
+                        majorInterval: 10,
+                        minorInterval: 10
+                    }
+                }
+            }
+        },
+        methods: {
+            changing: function (oldValues, newValues) {
+                let range = newValues[1] - newValues[0];
+                if (range < 10)
+                    return false;
+                if (range > 90)
+                    return false;
+            },
+            myKnobOnChange: function(event) {
+                this.$refs.myLog.innerHTML = 'Values: ' + event.args.value;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/knob/multiplecirclepointers/main.js b/knob/multiplecirclepointers/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/knob/multiplecirclepointers/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/knob/multiplecirclepointers/package.json b/knob/multiplecirclepointers/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/knob/multiplecirclepointers/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/knob/multipleknobs/App.vue b/knob/multipleknobs/App.vue
new file mode 100644
index 00000000..e69b821b
--- /dev/null
+++ b/knob/multipleknobs/App.vue
@@ -0,0 +1,217 @@
+<template>
+    <div>
+        <JqxKnob ref="myKnobOne" style="position: relative" @change="myKnobOneOnChange($event)"
+                 :value="60" :min="0" :max="100" :startAngle="180"
+                 :endAngle="540" :rotation="'clockwise'" :snapToStep="true"
+                 :styleProperty="{ fill: '#FFFFFF' }" :marks="marks" :progressBar="progressBar"
+                 :pointer="pointer" :pointerGrabAction="'progressBar'">
+        </JqxKnob>
+    </div>
+</template>
+<script>
+    import JqxKnob from "jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue";
+
+    export default {
+        components: {
+            JqxKnob
+        },
+        data: function () {
+            return {
+                marks: {
+                    drawAboveProgressBar: true,
+                    colorRemaining: 'white',
+                    colorProgress: 'white',
+                    style: 'line',
+                    offset: '78%',
+                    thickness: 3,
+                    size: '18%',
+                    minorInterval: 5
+                },
+                progressBar: {
+                    style: { fill: '#407ec3', stroke: '#407ec3' },
+                    size: '18%',
+                    offset: '78%',
+                    background: { fill: '#cfd0d4', stroke: '#cfd0d4' }
+                },
+                pointer: {
+                    type: 'line',
+                    visible: false,
+                    style: { fill: '#407ec3' },
+                    size: '18%',
+                    offset: '78%',
+                    thickness: 0
+                },
+                spinner: {
+                    style: { fill: '#66707e', stroke: '#66707e' },
+                    innerRadius: '0%', // specifies the inner Radius of the dial
+                    outerRadius: '58%', // specifies the outer Radius of the dial
+                    marks: {
+                        colorRemaining: '#a2da39',
+                        colorProgress: '#a2da39',
+                        type: 'circle',
+                        offset: '55%',
+                        thickness: 3,
+                        size: '1%',
+                        majorSize: '1%',
+                        majorInterval: 10,
+                        minorInterval: 10
+                    }
+                }
+            }
+        },
+        mounted: function () {
+            // Create Second and Third Knobs
+            let knobOneContainer = this.$refs.myKnobOne.$parent.$el;
+
+            let knobTwoContainer = document.createElement('div');
+            let knobThreeContainer = document.createElement('div');
+            knobTwoContainer.id = 'myKnobTwo';
+            knobThreeContainer.id = 'myKnobThree';
+
+            knobOneContainer.appendChild(knobTwoContainer);
+
+            let knobTwoOptions =
+                {
+                    value: 60,
+                    min: 0,
+                    max: 100,
+                    startAngle: 190,
+                    width: 300,
+                    height: 300,
+                    endAngle: 350,
+                    snapToStep: true,
+                    pointerGrabAction: 'progressBar',
+                    rotation: 'clockwise',
+                    style: { fill: 'transparent' },
+                    progressBar: {
+                        style: { fill: '#ef6100', stroke: '#ef6100' },
+                        size: '18%',
+                        offset: '78%',
+                        background: { fill: '#cfd0d4', stroke: '#cfd0d4' }
+                    },
+                    pointer: { type: 'line', visible: false, style: { fill: '#33AADD' }, size: '18%', offset: '78%', thickness: 0 }
+                };
+            let myKnobTwo = jqwidgets.createInstance('#myKnobTwo', 'jqxKnob', knobTwoOptions);
+
+            knobTwoContainer.appendChild(knobThreeContainer);
+
+
+            let knobThreeOptions =
+                {
+                    value: 60,
+                    min: 0,
+                    max: 100,
+                    startAngle: 10,
+                    width: 300,
+                    height: 300,
+                    endAngle: 170,
+                    snapToStep: true,
+                    pointerGrabAction: 'progressBar',
+                    rotation: 'clockwise',
+                    style: { fill: 'transparent' },
+                    progressBar: {
+                        style: { fill: '#18a25e', stroke: '#18a25e' },
+                        size: '18%',
+                        offset: '78%',
+                        background: { fill: '#cfd0d4', stroke: '#cfd0d4' }
+                    },
+                    pointer: { type: 'line', visible: false, style: { fill: '#00a4e1' }, size: '18%', offset: '78%', thickness: 0 }
+                };
+            let myKnobThree = jqwidgets.createInstance('#myKnobThree', 'jqxKnob', knobThreeOptions);
+
+            knobTwoContainer.style.cssText = 'position: absolute !important; top: 90px; left: 60px;';
+            knobThreeContainer.style.cssText = 'position: absolute !important; top: 0px; left: 0px;';
+
+            myKnobTwo.addEventHandler('change', (event) => {
+                if (event.target !== event.currentTarget) {
+                    return;
+                }
+                let inputDiv = document.getElementsByClassName('inputField2')[0];
+                inputDiv.children[1].innerHTML = event.args.value;
+            });
+
+            myKnobThree.addEventHandler('change', (event) => {
+                if (event.target !== event.currentTarget) {
+                    return;
+                }
+                let inputDiv = document.getElementsByClassName('inputField3')[0];
+                inputDiv.children[0].innerHTML = event.args.value;
+            });
+            // End Creating Second and Third Knobs
+
+            const startValue1 = 60;
+            const startValue2 = 60;
+            const startValue3 = 60;
+            // Create Input Div's
+            let inputDiv = document.createElement('div');
+            inputDiv.className = 'inputField1';
+            inputDiv.innerHTML = '<span style="font-size: 14px; width: 33%; display:inline-block; color: #407ec3">All</span><span style="width:33%; display:inline-block;">' + startValue1 + '</span><span style="width:33%; font-size: 14px; color: #00a4e1; display:inline-block;">Calls</span>'
+            knobOneContainer.appendChild(inputDiv);
+
+            let inputDiv2 = document.createElement('div');
+            inputDiv2.className = 'inputField2';
+            inputDiv2.innerHTML = '<div style="font-size: 14px; color: #ef6100">Resolved Issues</div><div>' + startValue2 + '</div>';
+            knobTwoContainer.appendChild(inputDiv2);
+
+            let inputDiv3 = document.createElement('div');
+            inputDiv3.className = 'inputField3';
+            inputDiv3.innerHTML = '<div>' + startValue3 + '</div><div style="font-size: 14px; color: #18a25e">Pending Issues</div>';
+            knobThreeContainer.appendChild(inputDiv3);
+        // End Creating Input Div's
+        },
+        methods: {
+            myKnobOneOnChange: function(event) {
+                if (event.target !== event.currentTarget) {
+                    return;
+                }
+                let inputDiv = document.getElementsByClassName('inputField1')[0];
+                inputDiv.children[1].innerHTML = event.args.value;
+            }
+        }
+    }
+</script>
+
+<style>
+    #myKnobTwo {
+        top: 75px !important;
+    }
+
+    .inputField1 {
+        left: 110px;
+        top: -220px;
+        width: 180px;
+        height: 40px;
+        color: black;
+        font-size: 30px;
+        position: relative;
+        background: transparent;
+        text-align: center;
+        border: none;
+    }
+
+    .inputField2 {
+        left: 60px;
+        top: 60px;
+        width: 180px;
+        height: 80px;
+        color: black;
+        font-size: 20px;
+        position: absolute;
+        background: transparent;
+        text-align: center;
+        border: none;
+    }
+
+    .inputField3 {
+        left: 60px;
+        top: 190px;
+        width: 180px;
+        height: 40px;
+        color: black;
+        font-size: 20px;
+        position: absolute;
+        background: transparent;
+        text-align: center;
+        border: none;
+    }
+</style>
diff --git a/knob/multipleknobs/main.js b/knob/multipleknobs/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/knob/multipleknobs/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/knob/multipleknobs/package.json b/knob/multipleknobs/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/knob/multipleknobs/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/knob/radialgradient/App.vue b/knob/radialgradient/App.vue
new file mode 100644
index 00000000..3c59cb27
--- /dev/null
+++ b/knob/radialgradient/App.vue
@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <JqxKnob ref="myKnob" style="position: relative" @change="myKnobOnChange($event)"
+                 :width="400" :height="400"
+                 :value="10" :min="0" :max="100" :startAngle="90"
+                 :endAngle="450" :rotation="'clockwise'" :snapToStep="true"
+                 :styleProperty="{ fill: 'transparent' }" :progressBar="progressBar"
+                 :pointer="pointer" :pointerGrabAction="'progressBar'">
+        </JqxKnob>
+
+        <JqxNumberInput ref="myNumberInput" @change="myNumberInputOnChange($event)"
+                        :width="180" :height="75" :decimal="0" :min="0" :max="100"
+                        :decimalDigits="1" :textAlign="'center'" :symbol="'%'"
+                        :symbolPosition="'right'" :inputMode="'simple'" :value="10">
+        </JqxNumberInput>
+    </div>
+</template>
+<script>
+    import JqxKnob from "jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue";
+    import JqxNumberInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue";
+
+    export default {
+        components: {
+            JqxKnob,
+            JqxNumberInput
+        },
+        data: function () {
+            return {
+                progressBar: {
+                    style: { fill: { color: '#00a4e1', gradientType: 'radial', gradientStops: [[0, 0.5], [100, 1]] } },
+                    size: '50%',
+                    offset: '50%',
+                    background: { fill: { color: '#FFFFFF', gradientType: 'linear', gradientStops: [[0, 0.5], [100, 1]] } }
+                },
+                pointer: {
+                    type: 'line',
+                    style: { fill: '#00a4e1' },
+                    size: '50%',
+                    offset: '50%',
+                    thickness: 0
+                }
+            }
+        },
+        methods: {
+            myKnobOnChange: function (event) {
+                this.$refs.myNumberInput.val(event.args.value);
+            },
+            myNumberInputOnChange: function (event) {
+                this.$refs.myKnob.val(event.args.value);
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-numberinput {
+        left: 120px;
+        top: 185px;
+        position: absolute;
+        background: transparent !important;
+        border: none !important;
+    }
+
+        .jqx-numberinput > input {
+            font-size: 45px !important;
+        }
+</style>
diff --git a/knob/radialgradient/main.js b/knob/radialgradient/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/knob/radialgradient/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/knob/radialgradient/package.json b/knob/radialgradient/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/knob/radialgradient/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/knob/semiknob/App.vue b/knob/semiknob/App.vue
new file mode 100644
index 00000000..58f4fd0a
--- /dev/null
+++ b/knob/semiknob/App.vue
@@ -0,0 +1,61 @@
+<template>
+    <JqxKnob :value="-100" :min="-100" :max="100" :startAngle="200"
+             :endAngle="340" :rotation="'clockwise'" :snapToStep="true"
+             :marks="marks" :labels="labels" :spinner="spinner" :progressBar="progressBar" 
+             :pointer="pointer" :step="'0.5'" :dragStartAngle="120" :dragEndAngle="420">
+    </JqxKnob>
+
+</template>
+<script>
+    import JqxKnob from "jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue";
+
+    export default {
+        components: {
+            JqxKnob
+        },
+        data: function () {
+            return {
+                marks: {
+                    colorRemaining: "#333",
+                    colorProgress: "#17a25d",
+                    offset: '75%',
+                    thickness: 2,
+                    size: '1%',
+                    majorSize: '1%',
+                    majorInterval: 10,
+                    minorInterval: 5
+                },
+                labels: {
+                    offset: '88%',
+                    step: 20,
+                    visible: true,
+                    formatFunction: (label) => {
+                        if (label == 0)
+                            return "Off";
+                        if (label == -100)
+                            return "Min";
+                        if (label == 100)
+                            return "Max";
+                        return label;
+                    }
+                },
+                progressBar: {
+                    size: '70%',
+                    offset: '0%'
+                },
+                pointer: {
+                    type: 'line',
+                    thickness: 4,
+                    style: { fill: "#ff6126", stroke: "#333" },
+                    size: '70%',
+                    offset: '0%'
+                },
+                spinner: {
+                    style: { fill: '#17a25d', stroke: '#17a25d' },
+                    innerRadius: '35%', // specifies the inner Radius of the dial
+                    outerRadius: '70%' // specifies the outer Radius of the dial
+                }
+            }
+        }
+    }
+</script>
diff --git a/knob/semiknob/main.js b/knob/semiknob/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/knob/semiknob/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/knob/semiknob/package.json b/knob/semiknob/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/knob/semiknob/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/layout/dashboard/App.vue b/layout/dashboard/App.vue
new file mode 100644
index 00000000..f85f99d2
--- /dev/null
+++ b/layout/dashboard/App.vue
@@ -0,0 +1,341 @@
+<template>
+    <JqxLayout :width="getWidth" :height="600" :layout="layout" :contextMenu="true">
+        <div data-container="TeamsPanel">
+            <div id="teamsDataTable" class="no-border"></div>
+        </div>
+        <div data-container="ProjectsPanel">
+            <div id="projectsListBox" class="no-border"></div>
+        </div>
+        <div data-container="ProjectsTimelinePanel">
+            <div id="projectsTimelineDiv" style="margin: 5px 0 0 5px;"></div>
+        </div>
+        <div data-container="ContactsPanel">
+            <table id="contactsTable" style="margin: 20px;"></table>
+        </div>
+        <div data-container="StaffPanel">
+            <div id="staffDiv" class="no-border" style="margin-left: 5px; margin: 20px;"></div>
+        </div>
+        <div data-container="ProjectHistoryPanel">
+            <div id="projectHistoryChart" style="border: none; width: 99.9%; height: 100%;"></div>
+        </div>
+    </JqxLayout>
+
+</template>
+<script>
+    import JqxLayout from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue";
+    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+
+    export default {
+        components: {
+            JqxLayout
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('layout'),
+                layout: [{
+                    type: 'layoutGroup',
+                    orientation: 'horizontal',
+                    items: [{
+                        type: 'layoutGroup',
+                        orientation: 'vertical',
+                        allowPin: false,
+                        width: 300,
+                        items: [{
+                            type: 'tabbedGroup',
+                            height: 300,
+                            pinnedHeight: 30,
+                            items: [{
+                                type: 'layoutPanel',
+                                title: 'Teams',
+                                contentContainer: 'TeamsPanel',
+                                initContent: () => {
+                                    this.initTeamDataTable();
+                                }
+                            }]
+                        }, {
+                            type: 'tabbedGroup',
+                            height: 300,
+                            allowClose: true,
+                            allowPin: false,
+                            pinnedHeight: 30,
+                            items: [{
+                                type: 'layoutPanel',
+                                title: 'Team Projects',
+                                contentContainer: 'ProjectsPanel',
+                                initContent: () => {
+                                    this.initProjectsListBox();
+                                }
+                            }, {
+                                type: 'layoutPanel',
+                                title: 'Projects Timeline',
+                                contentContainer: 'ProjectsTimelinePanel',
+                                initContent: () => {
+                                    let projectsTimelineDiv = document.getElementById('projectsTimelineDiv');
+                                    if (this.team === 'Sales') {
+                                        projectsTimelineDiv.innerHTML = this.teamSalesProjectsTimeline;
+                                    } else {
+                                        projectsTimelineDiv.innerHTML = this.teamSupportProjectsTimeline;
+                                    }
+                                }
+                            }]
+                        }]
+                    }, {
+                        type: 'layoutGroup',
+                        orientation: 'vertical',
+                        allowPin: false,
+                        width: 500,
+                        pinnedWidth: 80,
+                        items: [{
+                            type: 'tabbedGroup',
+                            height: 200,
+                            pinnedHeight: 30,
+                            items: [{
+                                type: 'layoutPanel',
+                                title: 'Contacts',
+                                contentContainer: 'ContactsPanel',
+                                initContent: () => {
+                                    document.getElementById('contactsTable').innerHTML = this.teamSalesContacts;
+                                }
+                            }, {
+                                type: 'layoutPanel',
+                                title: 'Staff',
+                                contentContainer: 'StaffPanel',
+                                initContent: () => {
+                                    let staffDiv = document.getElementById('staffDiv');
+                                    if (this.team === 'Sales') {
+                                        staffDiv.innerHTML = this.teamSalesStaff;
+                                    } else {
+                                        staffDiv.innerHTML = this.teamSupportStaff;
+                                    }
+                                }
+                            }]
+                        }, {
+                            type: 'tabbedGroup',
+                            allowPin: false,
+                            height: 400,
+                            pinnedHeight: 30,
+                            items: [{
+                                type: 'layoutPanel',
+                                title: 'Project History',
+                                contentContainer: 'ProjectHistoryPanel',
+                                initContent: () => {
+                                    this.initProjectHistoryChart();
+                                }
+                            }]
+                        }]
+                    }]
+                }]
+            }
+        },
+        beforeCreate: function () {
+            this.teamSalesContacts = '<tr><td style="width: 100px;"><img src="../../../images/janet.png" /></td><td style=""><strong>Team lead:</strong> Petra Wilson<br /><strong>Phone: </strong>555-313-899<br /><strong>Email: </strong>petraw@company.com</td></tr>';
+            this.teamSalesStaff = '<strong>Petra Wilson</strong> Team lead, Phone: 555-313-899<br /><strong>Jenny Oswald</strong> Marketing consultant, Phone: 555-313-333<br /><strong>Peter Tennant</strong> Accountant, Phone: 555-313-161';
+            this.teamSalesProjects = ['2015 marketing research', 'Advertisement revenue increase'];
+            this.teamSalesProjectsTimeline = '<strong>January - December</strong><br />&nbsp;2015 marketing research<br /><br /><strong>February - June</strong><br />&nbsp;Advertisement revenue increase';
+
+            this.teamSupportContacts = '<tr><td style="width: 100px;"><img src="../../../images/steven.png" /></td><td style=""><strong>Team lead:</strong> Michael Nagase<br /><strong>Phone: </strong>555-313-643<br /><strong>Email: </strong>nagase@company.com</td></tr>';
+            this.teamSupportStaff = '<strong>Michael Nagase</strong> Team lead, Phone: 555-313-643<br /><strong>Sam Forrester</strong> Chief support officer, Phone: 555-313-644<br /><strong>Dean Milhouse</strong> Support officer, Phone: 555-313-188';
+            this.teamSupportProjects = ['Governmental support task', 'Conference preparation', 'HelloCompany support task'];
+            this.teamSupportProjectsTimeline = '<strong>September - December</strong><br />&nbsp;Governmental support task<br /><br /><strong>July - August</strong><br />&nbsp;Conference preparation<br /><br /><strong>January - December</strong><br />&nbsp;HelloCompany support task';
+
+            this.project1Data = [{ Month: 'January', Resources: 50, Issues: 2 }, { Month: 'February', Resources: 90, Issues: 7 }, { Month: 'March', Resources: 93, Issues: 15 }, { Month: 'April', Resources: 70, Issues: 36 }, { Month: 'May', Resources: 70, Issues: 20 }, { Month: 'June', Resources: 70, Issues: 20 }, { Month: 'July', Resources: 68, Issues: 16 }, { Month: 'August', Resources: 69, Issues: 9 }, { Month: 'September', Resources: 33, Issues: 2 }, { Month: 'October', Resources: 50, Issues: 0 }, { Month: 'November', Resources: 13, Issues: 0 }, { Month: 'December', Resources: 20, Issues: 0 }];
+            this.project2Data = [{ Month: 'January', Resources: null, Issues: null }, { Month: 'February', Resources: 90, Issues: 38 }, { Month: 'March', Resources: 100, Issues: 45 }, { Month: 'April', Resources: 80, Issues: 13 }, { Month: 'May', Resources: 27, Issues: 11 }, { Month: 'June', Resources: 20, Issues: 7 }, { Month: 'July', Resources: null, Issues: null }, { Month: 'August', Resources: null, Issues: null }, { Month: 'September', Resources: null, Issues: null }, { Month: 'October', Resources: null, Issues: null }, { Month: 'November', Resources: null, Issues: null }, { Month: 'December', Resources: null, Issues: null }];
+            this.project3Data = [{ Month: 'January', Resources: null, Issues: null }, { Month: 'February', Resources: null, Issues: null }, { Month: 'March', Resources: null, Issues: null }, { Month: 'April', Resources: null, Issues: null }, { Month: 'May', Resources: null, Issues: null }, { Month: 'June', Resources: null, Issues: null }, { Month: 'July', Resources: null, Issues: null }, { Month: 'August', Resources: null, Issues: null }, { Month: 'September', Resources: 10, Issues: 1 }, { Month: 'October', Resources: 80, Issues: 15 }, { Month: 'November', Resources: 99, Issues: 30 }, { Month: 'December', Resources: 20, Issues: 0 }];
+            this.project4Data = [{ Month: 'January', Resources: null, Issues: null }, { Month: 'February', Resources: null, Issues: null }, { Month: 'March', Resources: null, Issues: null }, { Month: 'April', Resources: null, Issues: null }, { Month: 'May', Resources: null, Issues: null }, { Month: 'June', Resources: null, Issues: null }, { Month: 'July', Resources: 70, Issues: 3 }, { Month: 'August', Resources: 11, Issues: 5 }, { Month: 'September', Resources: null, Issues: null }, { Month: 'October', Resources: null, Issues: null }, { Month: 'November', Resources: null, Issues: null }, { Month: 'December', Resources: null, Issues: null }];
+            this.project5Data = [{ Month: 'January', Resources: 20, Issues: 0 }, { Month: 'February', Resources: 20, Issues: 2 }, { Month: 'March', Resources: 33, Issues: 12 }, { Month: 'April', Resources: 42, Issues: 16 }, { Month: 'May', Resources: 80, Issues: 24 }, { Month: 'June', Resources: 78, Issues: 28 }, { Month: 'July', Resources: 68, Issues: 16 }, { Month: 'August', Resources: 10, Issues: 2 }, { Month: 'September', Resources: 47, Issues: 12 }, { Month: 'October', Resources: 50, Issues: 10 }, { Month: 'November', Resources: 8, Issues: 1 }, { Month: 'December', Resources: 15, Issues: 3 }];
+        },
+        methods: {
+            initTeamDataTable: function () {
+                const teamData =
+                    [{
+                        team: 'Sales Team',
+                        lead: 'Petra Wilson'
+                    }, {
+                        team: 'Support Team',
+                        lead: 'Michael Nagase'
+                    }];
+
+                const source =
+                    {
+                        dataType: "json",
+                        dataFields: [{
+                            name: 'team',
+                            type: 'string'
+                        }, {
+                            name: 'lead',
+                            type: 'string'
+                        }],
+                        localdata: teamData
+                    };
+
+                const dataAdapter = new jqx.dataAdapter(source);
+
+                const teamTableOptions =
+                    {
+                        width: '100%',
+                        height: '100%',
+                        source: dataAdapter,
+                        ready: function () {
+                            setTimeout(_ => teamsDataTable.selectRow(0));
+                        },
+                        columns: [{
+                            text: 'Team',
+                            dataField: 'team',
+                            width: 120
+                        }, {
+                            text: 'Lead',
+                            dataField: 'lead'
+                        }]
+                    };
+                const teamsDataTable = jqwidgets.createInstance('#teamsDataTable', 'jqxDataTable', teamTableOptions);
+
+                teamsDataTable.addEventHandler('rowSelect', (event) => {
+                    let boundIndex = event.args.boundIndex,
+                        contacts, staff, projects, projectsTimeline, projectsHistory;
+                    if (boundIndex === 0) {
+                        this.team = 'Sales';
+                        contacts = this.teamSalesContacts;
+                        staff = this.teamSalesStaff;
+                        projects = this.teamSalesProjects;
+                        projectsTimeline = this.teamSalesProjectsTimeline;
+                        projectsHistory = this.project1Data;
+                    } else {
+                        this.team = 'Support';
+                        contacts = this.teamSupportContacts;
+                        staff = this.teamSupportStaff;
+                        projects = this.teamSupportProjects;
+                        projectsTimeline = this.teamSupportProjectsTimeline;
+                        projectsHistory = this.project3Data;
+                    }
+
+                    const contactsTable = document.getElementById('contactsTable');
+                    const staffDiv = document.getElementById('staffDiv');
+                    const projectsListBox = document.getElementById('projectsListBox');
+                    const projectsTimelineDiv = document.getElementById('projectsTimelineDiv');
+                    const projectHistoryChart = document.getElementById('projectHistoryChart');
+
+                    if (contactsTable) {
+                        contactsTable.innerHTML = contacts;
+                    }
+                    if (staffDiv) {
+                        staffDiv.innerHTML = staff;
+                    }
+                    if (projectsListBox) {
+                        const projectsListBox = jqwidgets.createInstance('#projectsListBox', 'jqxListBox', { source: projects });
+                        projectsListBox.selectIndex(0);
+                    }
+                    if (projectsTimelineDiv) {
+                        projectsTimelineDiv.innerHTML = projectsTimeline;
+                    }
+                    if (projectHistoryChart) {
+                        jqwidgets.createInstance('#projectHistoryChart', 'jqxChart', { source: projectsHistory });
+                    }
+                });
+            },
+            initProjectsListBox: function () {
+                const projectsListBoxOptions = {
+                    selectedIndex: 0,
+                    source: this.teamSalesProjects,
+                    width: '100%',
+                    height: '100%'
+                };
+                const projectsListBox = jqwidgets.createInstance('#projectsListBox', 'jqxListBox', projectsListBoxOptions);
+
+                const projectHistoryChart = document.getElementById('projectHistoryChart');
+
+                projectsListBox.addEventHandler('select', (event) => {
+                    if (projectHistoryChart) {
+                        let args = event.args;
+                        if (args) {
+                            let label = args.item.label;
+                            switch (label) {
+                                case '2015 marketing research':
+                                    jqwidgets.createInstance('#projectHistoryChart', 'jqxChart', { source: this.project1Data });
+                                    break;
+                                case 'Advertisement revenue increase':
+                                    jqwidgets.createInstance('#projectHistoryChart', 'jqxChart', { source: this.project2Data });
+                                    break;
+                                case 'Governmental support task':
+                                    jqwidgets.createInstance('#projectHistoryChart', 'jqxChart', { source: this.project3Data });
+                                    break;
+                                case 'Conference preparation':
+                                    jqwidgets.createInstance('#projectHistoryChart', 'jqxChart', { source: this.project4Data });
+                                    break;
+                                case 'HelloCompany support task':
+                                    jqwidgets.createInstance('#projectHistoryChart', 'jqxChart', { source: this.project5Data });
+                                    break;
+                            }
+                        }
+                    }
+                });
+            },
+            initProjectHistoryChart: function() {
+                const settings =
+                    {
+                        title: 'Project History',
+                        description: 'Overview of project resources and solved issues',
+                        showBorderLine: false,
+                        titlePadding: {
+                            left: 90,
+                            top: 0,
+                            right: 0,
+                            bottom: 10
+                        },
+                        source: this.project1Data,
+                        xAxis: {
+                            dataField: 'Month',
+                            gridLines: {
+                                visible: false
+                            }
+                        },
+                        valueAxis: {
+                            minValue: 0,
+                            maxValue: 100,
+                            unitInterval: 10,
+                            description: 'Resources (in relative units)'
+                        },
+                        colorScheme: 'scheme05',
+                        seriesGroups: [{
+                            type: 'column',
+                            columnsGapPercent: 30,
+                            seriesGapPercent: 0,
+
+                            series: [{
+                                dataField: 'Resources',
+                                displayText: 'Resources spent'
+                            }]
+                        }, {
+                            type: 'line',
+                            columnsGapPercent: 30,
+                            seriesGapPercent: 0,
+
+                            series: [{
+                                dataField: 'Issues',
+                                displayText: 'Issues'
+                            }]
+                        }]
+                    };
+
+                jqwidgets.createInstance('#projectHistoryChart', 'jqxChart', settings);
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-layout-group-auto-hide-content-vertical {
+        width: 200px;
+    }
+
+    .no-border {
+        border-left-width: 0;
+        border-right-width: 0;
+    }
+
+    .jqx-ribbon-content-section {
+        overflow: hidden;
+    }
+
+</style>
diff --git a/layout/dashboard/main.js b/layout/dashboard/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/layout/dashboard/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/layout/dashboard/package.json b/layout/dashboard/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/layout/dashboard/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/layout/defaultfunctionality/App.vue b/layout/defaultfunctionality/App.vue
new file mode 100644
index 00000000..9c60a0ce
--- /dev/null
+++ b/layout/defaultfunctionality/App.vue
@@ -0,0 +1,161 @@
+<template>
+    <JqxLayout :width="getWidth" :height="600" :layout="layout">
+        <!--The panel content divs can have a flat structure-->
+        <!--autoHideGroup-->
+        <div data-container="ToolboxPanel">
+            List of tools
+        </div>
+        <div data-container="HelpPanel">
+            Help topics
+        </div>
+        <!--documentGroup-->
+        <div data-container="Document1Panel">
+            Document 1 content
+        </div>
+        <div data-container="Document2Panel">
+            Document 2 content
+        </div>
+        <!--bottom tabbedGroup-->
+        <div data-container="ErrorListPanel">
+            List of errors
+        </div>
+        <div data-container="OutputPanel">
+            Output
+        </div>
+        <!--right tabbedGroup-->
+        <div data-container="SolutionExplorerPanel">
+            <div id="treeContainer" style="border: none;"></div>
+        </div>
+        <div data-container="PropertiesPanel">
+            List of properties
+        </div>
+    </JqxLayout>
+
+</template>
+<script>
+    import JqxLayout from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue";
+    import JqxTree from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue";
+
+    export default {
+        components: {
+            JqxLayout
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('layout'),
+                layout: [{
+                    type: 'layoutGroup',
+                    orientation: 'horizontal',
+                    items: [{
+                        type: 'autoHideGroup',
+                        alignment: 'left',
+                        width: 80,
+                        unpinnedWidth: 200,
+                        items: [{
+                            type: 'layoutPanel',
+                            title: 'Toolbox',
+                            contentContainer: 'ToolboxPanel'
+                        }, {
+                            type: 'layoutPanel',
+                            title: 'Help',
+                            contentContainer: 'HelpPanel'
+                        }]
+                    }, {
+                        type: 'layoutGroup',
+                        orientation: 'vertical',
+                        width: 500,
+                        items: [{
+                            type: 'documentGroup',
+                            height: 400,
+                            minHeight: 200,
+                            items: [{
+                                type: 'documentPanel',
+                                title: 'Document 1',
+                                contentContainer: 'Document1Panel'
+                            }, {
+                                type: 'documentPanel',
+                                title: 'Document 2',
+                                contentContainer: 'Document2Panel'
+                            }]
+                        }, {
+                            type: 'tabbedGroup',
+                            height: 200,
+                            pinnedHeight: 30,
+                            items: [{
+                                type: 'layoutPanel',
+                                title: 'Error List',
+                                contentContainer: 'ErrorListPanel'
+                            }, {
+                                type: 'layoutPanel',
+                                title: 'Output',
+                                contentContainer: 'OutputPanel',
+                                selected: true
+                            }]
+                        }]
+                    }, {
+                        type: 'tabbedGroup',
+                        width: 220,
+                        minWidth: 200,
+                        items: [{
+                            type: 'layoutPanel',
+                            title: 'Solution Explorer',
+                            contentContainer: 'SolutionExplorerPanel',
+                            initContent: () => {
+                                jqwidgets.createInstance('#treeContainer', 'jqxTree', { source: this.source, height: '99%', width: '100%' })
+                            }
+                        },
+                        {
+                            type: 'layoutPanel',
+                            title: 'Properties',
+                            contentContainer: 'PropertiesPanel'
+                        }]
+                    }]
+                }]
+            }
+        },
+        beforeCreate: function () {
+            this.source = [{
+                icon: '../../../images/earth.png',
+                label: 'Project',
+                expanded: true,
+                items: [{
+                    icon: '../../../images/folder.png',
+                    label: 'css',
+                    expanded: true,
+                    items: [{
+                        icon: '../../../images/nav1.png',
+                        label: 'jqx.base.css'
+                    }, {
+                        icon: '../../../images/nav1.png',
+                        label: 'jqx.energyblue.css'
+                    }, {
+                        icon: '../../../images/nav1.png',
+                        label: 'jqx.orange.css'
+                    }]
+                }, {
+                    icon: '../../../images/folder.png',
+                    label: 'scripts',
+                    items: [{
+                        icon: '../../../images/nav1.png',
+                        label: 'jqxcore.js'
+                    }, {
+                        icon: '../../../images/nav1.png',
+                        label: 'jqxdata.js'
+                    }, {
+                        icon: '../../../images/nav1.png',
+                        label: 'jqxgrid.js'
+                    }]
+                }, {
+                    icon: '../../../images/nav1.png',
+                    label: 'index.htm'
+                }]
+            }];
+        }
+    }
+</script>
+
+<style>
+    .jqx-layout-group-auto-hide-content-vertical {
+        width: 200px;
+    }
+</style>
diff --git a/layout/defaultfunctionality/main.js b/layout/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/layout/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/layout/defaultfunctionality/package.json b/layout/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/layout/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/layout/fluidsize/App.vue b/layout/fluidsize/App.vue
new file mode 100644
index 00000000..6b290b01
--- /dev/null
+++ b/layout/fluidsize/App.vue
@@ -0,0 +1,90 @@
+<template>
+    <JqxLayout :width="'100%'" :height="'90%'" :layout="layout">
+        <div data-container="Document1Panel">Document 1 content</div>
+        <div data-container="Document2Panel">Document 2 content</div>
+
+        <div data-container="ErrorListPanel">List of errors</div>
+        <div data-container="OutputPanel">Output</div>
+
+        <div data-container="SolutionExplorerPanel">Solution structure</div>
+        <div data-container="PropertiesPanel">List of properties</div>
+    </JqxLayout>
+
+</template>
+<script>
+    import JqxLayout from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue";
+
+    export default {
+        components: {
+            JqxLayout
+        },
+        data: function () {
+            return {
+                layout: [{
+                    type: 'layoutGroup',
+                    orientation: 'horizontal',
+                    items: [{
+                        type: 'layoutGroup',
+                        orientation: 'vertical',
+                        width: '60%',
+                        items: [{
+                            type: 'documentGroup',
+                            height: '50%',
+                            minHeight: '25%',
+                            items: [{
+                                type: 'documentPanel',
+                                title: 'Document 1',
+                                contentContainer: 'Document1Panel'
+                            }, {
+                                type: 'documentPanel',
+                                title: 'Document 2',
+                                contentContainer: 'Document2Panel'
+                            }]
+                        }, {
+                            type: 'tabbedGroup',
+                            height: '50%',
+                            pinnedHeight: '10%',
+                            items: [{
+                                type: 'layoutPanel',
+                                title: 'Error List',
+                                contentContainer: 'ErrorListPanel'
+                            }, {
+                                type: 'layoutPanel',
+                                title: 'Output',
+                                contentContainer: 'OutputPanel',
+                                selected: true
+                            }]
+                        }]
+                    }, {
+                        type: 'tabbedGroup',
+                        width: '40%',
+                        items: [{
+                            type: 'layoutPanel',
+                            title: 'Solution Explorer',
+                            contentContainer: 'SolutionExplorerPanel'
+                        }, {
+                            type: 'layoutPanel',
+                            title: 'Properties',
+                            contentContainer: 'PropertiesPanel'
+                        }]
+                    }]
+                }]
+            }
+        }
+    }
+</script>
+
+<style>
+    body, html {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        padding: 3px;
+        box-sizing: border-box;
+        margin: 0;
+    }
+
+    .jqx-layout-group-auto-hide-content-vertical {
+        width: 200px;
+    }
+</style>
diff --git a/layout/fluidsize/main.js b/layout/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/layout/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/layout/fluidsize/package.json b/layout/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/layout/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/layout/integrationwithotherwidgets/App.vue b/layout/integrationwithotherwidgets/App.vue
new file mode 100644
index 00000000..71bc2505
--- /dev/null
+++ b/layout/integrationwithotherwidgets/App.vue
@@ -0,0 +1,254 @@
+<template>
+    <JqxLayout :width="getWidth" :height="600" :layout="layout" :contextMenu="true">
+        <div data-container="ToolboxPanel">List of tools</div>
+        <div data-container="HelpPanel">Help topics</div>
+
+        <div data-container="Document1Panel">
+            <div style="padding: 5px">
+                <div id="Document1TextArea" style="margin: 5px"></div>
+            </div>
+        </div>
+        <div data-container="Document2Panel">
+            <div style="padding: 5px">
+                <div id="Document2TextArea" style="margin: 5px"></div>
+            </div>
+        </div>
+
+        <div data-container="ErrorListPanel">List of errors</div>
+        <div data-container="PerformancePanel">
+            <div id="cpuUsage" style="width: 99%; height: 100px"></div>
+        </div>
+
+        <div data-container="SolutionExplorerPanel">
+            <div id="solutionExplorerTree" style="border: none"></div>
+        </div>
+        <div data-container="PropertiesPanel">List of properties</div>
+    </JqxLayout>
+
+</template>
+<script>
+    import JqxLayout from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue";
+    import JqxTextArea from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue";
+    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";
+    import JqxTree from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue";
+
+    export default {
+        components: {
+            JqxLayout
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('layout'),
+                layout: [{
+                    type: 'layoutGroup',
+                    orientation: 'horizontal',
+                    items: [{
+                        type: 'autoHideGroup',
+                        alignment: 'left',
+                        width: 80,
+                        unpinnedWidth: 200,
+                        items: [{
+                            type: 'layoutPanel',
+                            title: 'Toolbox',
+                            contentContainer: 'ToolboxPanel'
+                        }, {
+                            type: 'layoutPanel',
+                            title: 'Help',
+                            contentContainer: 'HelpPanel'
+                        }]
+                    }, {
+                        type: 'layoutGroup',
+                        orientation: 'vertical',
+                        width: 500,
+                        items: [{
+                            type: 'documentGroup',
+                            height: 400,
+                            minHeight: 200,
+                            items: [{
+                                type: 'documentPanel',
+                                title: 'index.htm',
+                                contentContainer: 'Document1Panel',
+                                initContent: () => {
+                                    let textArea = jqwidgets.createInstance('#Document1TextArea', 'jqxTextArea', { width: '100%', height: 400 });
+                                    textArea.val('<!DOCTYPE html>\n<html>\n\t<head>\n\t<title>Page Title</title>\n\t        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>\n\t<body>\n\t\t<h1>This is a Heading</h1>\n\t\t<p>This is a paragraph.</p>\n\t</body>\n</html>');
+                                }
+                            }, {
+                                type: 'documentPanel',
+                                title: 'New Document',
+                                contentContainer: 'Document2Panel',
+                                initContent: () => {
+                                    jqwidgets.createInstance('#Document2TextArea', 'jqxTextArea', { width: '100%', height: 400, placeHolder: 'Blank document' });
+                                }
+                            }]
+                        }, {
+                            type: 'tabbedGroup',
+                            height: 200,
+                            minHeight: 200,
+                            pinnedHeight: 30,
+                            items: [{
+                                type: 'layoutPanel',
+                                title: 'Error List',
+                                contentContainer: 'ErrorListPanel'
+                            }, {
+                                type: 'layoutPanel',
+                                title: 'Performance',
+                                contentContainer: 'PerformancePanel',
+                                selected: true,
+                                initContent: () => {
+                                    let data = [1, 5, 12, 5, 33, 38, 40, 42, 18, 18, 70, 76, 75, 99, 100, 88, 64, 13, 19, 15];
+                                    let padding = {
+                                        left: 0,
+                                        top: 10,
+                                        right: 0,
+                                        bottom: 0
+                                    }
+                                    let titlePadding = {
+                                        left: 0,
+                                        top: 0,
+                                        right: 0,
+                                        bottom: 0
+                                    }
+                                    let xAxis = {
+                                        visible: false,
+                                        valuesOnTicks: false
+                                    }
+                                    let seriesGroups = [{
+                                        type: 'line',
+                                        columnsGapPercent: 0,
+                                        columnsMaxWidth: 2,
+                                        valueAxis: {
+                                            minValue: 0,
+                                            visible: false
+                                        },
+                                        series: [{
+                                            linesUnselectMode: 'click',
+                                            colorFunction: (value, itemIndex, serie, group) => {
+                                                if (value <= 33) {
+                                                    return '#32CD32';
+                                                } else if (value <= 66) {
+                                                    return '#FFD700';
+                                                } else {
+                                                    return '#AA4643';
+                                                }
+                                            }
+                                        }]
+                                    }];
+                                    let options =
+                                        {
+                                            title: 'CPU Usage',
+                                            description: '',
+                                            showLegend: false,
+                                            enableAnimations: false,
+                                            showBorderLine: false,
+                                            showToolTips: false,
+                                            backgroundColor: 'transparent',
+                                            padding: {
+                                                left: 0,
+                                                top: 10,
+                                                right: 0,
+                                                bottom: 0
+                                            },
+                                            titlePadding: {
+                                                left: 0,
+                                                top: 0,
+                                                right: 0,
+                                                bottom: 0
+                                            },
+                                            source: data,
+                                            xAxis: {
+                                                visible: false,
+                                                valuesOnTicks: false
+                                            },
+                                            colorScheme: 'scheme01',
+                                            seriesGroups: [{
+                                                type: 'line',
+                                                columnsGapPercent: 0,
+                                                columnsMaxWidth: 2,
+                                                valueAxis: {
+                                                    minValue: 0,
+                                                    visible: false
+                                                },
+                                                series: [{
+                                                    linesUnselectMode: 'click',
+                                                    colorFunction: (value, itemIndex, serie, group) => {
+                                                        if (value <= 33) {
+                                                            return '#32CD32';
+                                                        } else if (value <= 66) {
+                                                            return '#FFD700';
+                                                        } else {
+                                                            return '#AA4643';
+                                                        }
+                                                    }
+                                                }]
+                                            }]
+                                        };
+                                    jqwidgets.createInstance('#cpuUsage', 'jqxChart', options);
+                                }
+                            }]
+                        }]
+                    }, {
+                        type: 'tabbedGroup',
+                        width: 220,
+                        minWidth: 200,
+                        items: [{
+                            type: 'layoutPanel',
+                            title: 'Solution Explorer',
+                            contentContainer: 'SolutionExplorerPanel',
+                            initContent: () => {
+                                // initialize a jqxTree inside the Solution Explorer Panel
+                                let source = [{
+                                    icon: '../../../images/earth.png',
+                                    label: 'Project',
+                                    expanded: true,
+                                    items: [{
+                                        icon: '../../../images/folder.png',
+                                        label: 'css',
+                                        expanded: true,
+                                        items: [{
+                                            icon: '../../../images/nav1.png',
+                                            label: 'jqx.base.css'
+                                        }, {
+                                            icon: '../../../images/nav1.png',
+                                            label: 'jqx.energyblue.css'
+                                        }, {
+                                            icon: '../../../images/nav1.png',
+                                            label: 'jqx.orange.css'
+                                        }]
+                                    }, {
+                                        icon: '../../../images/folder.png',
+                                        label: 'scripts',
+                                        items: [{
+                                            icon: '../../../images/nav1.png',
+                                            label: 'jqxcore.js'
+                                        }, {
+                                            icon: '../../../images/nav1.png',
+                                            label: 'jqxdata.js'
+                                        }, {
+                                            icon: '../../../images/nav1.png',
+                                            label: 'jqxgrid.js'
+                                        }]
+                                    }, {
+                                        icon: '../../../images/nav1.png',
+                                        label: 'index.htm'
+                                    }]
+                                }];
+                                jqwidgets.createInstance('#solutionExplorerTree', 'jqxTree', { width: '100%', height: '99%', source: source });
+                            }
+                        }, {
+                            type: 'layoutPanel',
+                            title: 'Properties',
+                            contentContainer: 'PropertiesPanel'
+                        }]
+                    }]
+                }]
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-layout-group-auto-hide-content-vertical {
+        width: 200px;
+    }
+
+</style>
diff --git a/layout/integrationwithotherwidgets/main.js b/layout/integrationwithotherwidgets/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/layout/integrationwithotherwidgets/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/layout/integrationwithotherwidgets/package.json b/layout/integrationwithotherwidgets/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/layout/integrationwithotherwidgets/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/layout/righttoleftlayout/App.vue b/layout/righttoleftlayout/App.vue
new file mode 100644
index 00000000..1964f928
--- /dev/null
+++ b/layout/righttoleftlayout/App.vue
@@ -0,0 +1,165 @@
+<template>
+    <JqxLayout :width="getWidth" :height="600" :layout="layout" :rtl="true">
+        <!--The panel content divs can have a flat structure-->
+        <!--autoHideGroup-->
+        <div data-container="ToolboxPanel">
+            List of tools
+        </div>
+        <div data-container="HelpPanel">
+            Help topics
+        </div>
+        <!--documentGroup-->
+        <div data-container="Document1Panel">
+            Document 1 content
+        </div>
+        <div data-container="Document2Panel">
+            Document 2 content
+        </div>
+        <!--bottom tabbedGroup-->
+        <div data-container="ErrorListPanel">
+            List of errors
+        </div>
+        <div data-container="OutputPanel">
+            Output
+        </div>
+        <!--right tabbedGroup-->
+        <div data-container="SolutionExplorerPanel">
+            <div id="treeContainer" style="border: none;"></div>
+        </div>
+        <div data-container="PropertiesPanel">
+            List of properties
+        </div>
+    </JqxLayout>
+
+</template>
+<script>
+    import JqxLayout from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue";
+    import JqxTree from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue";
+
+    export default {
+        components: {
+            JqxLayout
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('layout'),
+                layout: [{
+                    type: 'layoutGroup',
+                    orientation: 'horizontal',
+                    items: [{
+                        type: 'autoHideGroup',
+                        alignment: 'left',
+                        width: 80,
+                        unpinnedWidth: 200,
+                        items: [{
+                            type: 'layoutPanel',
+                            title: 'Toolbox',
+                            contentContainer: 'ToolboxPanel'
+                        }, {
+                            type: 'layoutPanel',
+                            title: 'Help',
+                            contentContainer: 'HelpPanel'
+                        }]
+                    }, {
+                        type: 'layoutGroup',
+                        orientation: 'vertical',
+                        width: 500,
+                        items: [{
+                            type: 'documentGroup',
+                            height: 400,
+                            minHeight: 200,
+                            items: [{
+                                type: 'documentPanel',
+                                title: 'Document 1',
+                                contentContainer: 'Document1Panel'
+                            }, {
+                                type: 'documentPanel',
+                                title: 'Document 2',
+                                contentContainer: 'Document2Panel'
+                            }]
+                        }, {
+                            type: 'tabbedGroup',
+                            height: 200,
+                            pinnedHeight: 30,
+                            items: [{
+                                type: 'layoutPanel',
+                                title: 'Error List',
+                                contentContainer: 'ErrorListPanel'
+                            }, {
+                                type: 'layoutPanel',
+                                title: 'Output',
+                                contentContainer: 'OutputPanel',
+                                selected: true
+                            }]
+                        }]
+                    }, {
+                        type: 'tabbedGroup',
+                        width: 220,
+                        minWidth: 200,
+                        items: [{
+                            type: 'layoutPanel',
+                            title: 'Solution Explorer',
+                            contentContainer: 'SolutionExplorerPanel',
+                            initContent: () => {
+                                jqwidgets.createInstance('#treeContainer', 'jqxTree', { source: this.source, height: '99%', width: '100%', rtl: true })
+                            }
+                        },
+                        {
+                            type: 'layoutPanel',
+                            title: 'Properties',
+                            contentContainer: 'PropertiesPanel'
+                        }]
+                    }]
+                }]
+            }
+        },
+        beforeCreate: function () {
+            this.source = [{
+                icon: '../../../images/earth.png',
+                label: 'Project',
+                expanded: true,
+                items: [{
+                    icon: '../../../images/folder.png',
+                    label: 'css',
+                    expanded: true,
+                    items: [{
+                        icon: '../../../images/nav1.png',
+                        label: 'jqx.base.css'
+                    }, {
+                        icon: '../../../images/nav1.png',
+                        label: 'jqx.energyblue.css'
+                    }, {
+                        icon: '../../../images/nav1.png',
+                        label: 'jqx.orange.css'
+                    }]
+                }, {
+                    icon: '../../../images/folder.png',
+                    label: 'scripts',
+                    items: [{
+                        icon: '../../../images/nav1.png',
+                        label: 'jqxcore.js'
+                    }, {
+                        icon: '../../../images/nav1.png',
+                        label: 'jqxdata.js'
+                    }, {
+                        icon: '../../../images/nav1.png',
+                        label: 'jqxgrid.js'
+                    }]
+                }, {
+                    icon: '../../../images/nav1.png',
+                    label: 'index.htm'
+                }]
+            }];
+        }
+    }
+</script>
+
+<style>
+    .jqx-layout-group-auto-hide-content-vertical {
+        width: 200px;
+    }
+
+    .jqx-ribbon-content-section {
+        text-align: right;
+    }
+</style>
diff --git a/layout/righttoleftlayout/main.js b/layout/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/layout/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/layout/righttoleftlayout/package.json b/layout/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/layout/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/layout/saveloadlayout/App.vue b/layout/saveloadlayout/App.vue
new file mode 100644
index 00000000..055c5696
--- /dev/null
+++ b/layout/saveloadlayout/App.vue
@@ -0,0 +1,190 @@
+<template>
+    <div>
+        <JqxLayout ref="myLayout" :width="getWidth" :height="600" :layout="layout">
+            <!--The panel content divs can have a flat structure-->
+            <!--autoHideGroup-->
+            <div data-container="ToolboxPanel">
+                List of tools
+            </div>
+            <div data-container="HelpPanel">
+                Help topics
+            </div>
+            <!--documentGroup-->
+            <div data-container="Document1Panel">
+                Document 1 content
+            </div>
+            <div data-container="Document2Panel">
+                Document 2 content
+            </div>
+            <!--bottom tabbedGroup-->
+            <div data-container="ErrorListPanel">
+                List of errors
+            </div>
+            <div data-container="OutputPanel">
+                Output
+            </div>
+            <!--right tabbedGroup-->
+            <div data-container="SolutionExplorerPanel">
+                <div id="treeContainer" style="border: none;"></div>
+            </div>
+            <div data-container="PropertiesPanel">
+                List of properties
+            </div>
+        </JqxLayout>
+
+        <div style="margin-top: 25px">
+
+            <JqxButton @click="saveLayoutBtnOnClick()">Save Layout</JqxButton>
+
+            <JqxButton ref="myLoadLayoutBtn" @click="loadLayoutBtnOnClick()" :disabled="true">Load Layout</JqxButton>
+
+        </div>
+    </div>
+</template>
+<script>
+    import JqxLayout from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxTree from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue";
+
+    export default {
+        components: {
+            JqxLayout,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('layout'),
+                layout: [{
+                    type: 'layoutGroup',
+                    orientation: 'horizontal',
+                    items: [{
+                        type: 'autoHideGroup',
+                        alignment: 'left',
+                        width: 80,
+                        unpinnedWidth: 200,
+                        items: [{
+                            type: 'layoutPanel',
+                            title: 'Toolbox',
+                            contentContainer: 'ToolboxPanel'
+                        }, {
+                            type: 'layoutPanel',
+                            title: 'Help',
+                            contentContainer: 'HelpPanel'
+                        }]
+                    }, {
+                        type: 'layoutGroup',
+                        orientation: 'vertical',
+                        width: 500,
+                        items: [{
+                            type: 'documentGroup',
+                            height: 400,
+                            minHeight: 200,
+                            items: [{
+                                type: 'documentPanel',
+                                title: 'Document 1',
+                                contentContainer: 'Document1Panel'
+                            }, {
+                                type: 'documentPanel',
+                                title: 'Document 2',
+                                contentContainer: 'Document2Panel'
+                            }]
+                        }, {
+                            type: 'tabbedGroup',
+                            height: 200,
+                            pinnedHeight: 30,
+                            items: [{
+                                type: 'layoutPanel',
+                                title: 'Error List',
+                                contentContainer: 'ErrorListPanel'
+                            }, {
+                                type: 'layoutPanel',
+                                title: 'Output',
+                                contentContainer: 'OutputPanel',
+                                selected: true
+                            }]
+                        }]
+                    }, {
+                        type: 'tabbedGroup',
+                        width: 220,
+                        minWidth: 200,
+                        items: [{
+                            type: 'layoutPanel',
+                            title: 'Solution Explorer',
+                            contentContainer: 'SolutionExplorerPanel',
+                            initContent: () => {
+                                jqwidgets.createInstance('#treeContainer', 'jqxTree', { source: this.source, height: '99%', width: '100%' })
+                            }
+                        },
+                        {
+                            type: 'layoutPanel',
+                            title: 'Properties',
+                            contentContainer: 'PropertiesPanel'
+                        }]
+                    }]
+                }]
+            }
+        },
+        beforeCreate: function () {
+            this.source = [{
+                icon: '../../../images/earth.png',
+                label: 'Project',
+                expanded: true,
+                items: [{
+                    icon: '../../../images/folder.png',
+                    label: 'css',
+                    expanded: true,
+                    items: [{
+                        icon: '../../../images/nav1.png',
+                        label: 'jqx.base.css'
+                    }, {
+                        icon: '../../../images/nav1.png',
+                        label: 'jqx.energyblue.css'
+                    }, {
+                        icon: '../../../images/nav1.png',
+                        label: 'jqx.orange.css'
+                    }]
+                }, {
+                    icon: '../../../images/folder.png',
+                    label: 'scripts',
+                    items: [{
+                        icon: '../../../images/nav1.png',
+                        label: 'jqxcore.js'
+                    }, {
+                        icon: '../../../images/nav1.png',
+                        label: 'jqxdata.js'
+                    }, {
+                        icon: '../../../images/nav1.png',
+                        label: 'jqxgrid.js'
+                    }]
+                }, {
+                    icon: '../../../images/nav1.png',
+                    label: 'index.htm'
+                }]
+            }];
+
+            this.savedLayout;
+        },
+        methods: {
+            saveLayoutBtnOnClick: function() {
+                this.savedLayout = this.$refs.myLayout.saveLayout();
+                this.$refs.myLoadLayoutBtn.disabled = false;
+            },
+            loadLayoutBtnOnClick: function () {
+                this.$refs.myLayout.loadLayout(this.savedLayout);
+                this.$refs.myLoadLayoutBtn.disabled = true;
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-layout-group-auto-hide-content-vertical {
+        width: 200px;
+    }
+
+    .jqx-button {
+        width: fit-content;
+        display: inline;
+        margin-right: 5px;
+    }
+</style>
diff --git a/layout/saveloadlayout/main.js b/layout/saveloadlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/layout/saveloadlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/layout/saveloadlayout/package.json b/layout/saveloadlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/layout/saveloadlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/linkbutton/defaultfunctionality/App.vue b/linkbutton/defaultfunctionality/App.vue
new file mode 100644
index 00000000..8844e04f
--- /dev/null
+++ b/linkbutton/defaultfunctionality/App.vue
@@ -0,0 +1,16 @@
+<template>
+    <JqxLinkButton :target="'_blank'" :href="'http://www.jqwidgets.com'" :width="120" :height="30">Link Button</JqxLinkButton>
+
+    <!-- Both above and below ways of defining "target" and "href" works. -->
+    <!--<JqxLinkButton target="_blank" href="http://www.jqwidgets.com">Link Button</JqxLinkButton>-->
+</template>
+
+<script>
+    import JqxLinkButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlinkbutton.vue";
+
+    export default {
+        components: {
+            JqxLinkButton
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/linkbutton/defaultfunctionality/main.js b/linkbutton/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/linkbutton/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/linkbutton/defaultfunctionality/package.json b/linkbutton/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/linkbutton/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/bindingtoarray/App.vue b/listbox/bindingtoarray/App.vue
new file mode 100644
index 00000000..420c141e
--- /dev/null
+++ b/listbox/bindingtoarray/App.vue
@@ -0,0 +1,162 @@
+<template>
+    <div>
+        <JqxListBox @select="select($event)"
+                    :source="source"
+                    :height="300"
+                    :width="300">
+        </JqxListBox>
+
+        <div style="font-size: 13px; font-family: Verdana;" ref="selectionlog">
+        </div>
+    </div>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxListBox
+        },
+        data: function () {
+            return {
+                source: [{
+                    label: "Peppermint Hot Chocolate",
+                    value: "Chocolate Beverage",
+                    group: "Hot Chocolate"
+                }, {
+                    label: "Salted Caramel Hot Chocolate",
+                    value: "Chocolate Beverage",
+                    group: "Hot Chocolate"
+                }, {
+                    label: "White Hot Chocolate",
+                    value: "Chocolate Beverage",
+                    group: "Hot Chocolate"
+                }, {
+                    label: "Caffe Americano",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "Caffe Latte",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "Caffe Mocha",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "Cappuccino",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "Caramel Brulee Latte",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "Caramel Macchiato",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "Peppermint Hot Chocolate",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "Cinnamon Dolce Latte",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "Eggnog Latte",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "Espresso",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "Espresso Con Panna",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "Espresso Macchiato",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "Flavored Latte",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "Gingerbread Latte",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "White Chocolate Mocha",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "Skinny Peppermint Mocha",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "Skinny Flavored Latte",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "Pumpkin Spice Latte",
+                    value: "Espresso Beverage",
+                    group: "Espresso"
+                }, {
+                    label: "Caffe Vanilla Frappuccino",
+                    value: "Frappuccino Blended Beverage",
+                    group: "Frappuccino"
+                }, {
+                    label: "Caffe Vanilla Frappuccino Light",
+                    value: "Frappuccino Blended Beverage",
+                    group: "Frappuccino"
+                }, {
+                    label: "Caramel Brulee Frappuccino",
+                    value: "Frappuccino Blended Beverage",
+                    group: "Frappuccino"
+                }, {
+                    label: "Caramel Brulee Frappuccino Light",
+                    value: "Frappuccino Blended Beverage",
+                    group: "Frappuccino"
+                }, {
+                    label: "Eggnog Frappuccino",
+                    value: "Frappuccino Blended Beverage",
+                    group: "Frappuccino"
+                }, {
+                    label: "Mocha Frappuccino",
+                    value: "Frappuccino Blended Beverage",
+                    group: "Frappuccino"
+                }, {
+                    label: "Tazo Green Tea Creme Frappuccino",
+                    value: "Frappuccino Blended Beverage",
+                    group: "Frappuccino"
+                }]
+            }
+        },
+        methods: {
+            select: function (event) {
+                if (event.args) {
+                    let item = event.args.item;
+                    if (item) {
+                        let valueElement = document.createElement('div');
+                        let labelElement = document.createElement('div');
+
+                        valueElement.innerHTML = 'Value: ' + item.value;
+                        labelElement.innerHTML = 'Label: ' + item.label;
+
+                        let selectionLog = this.$refs.selectionlog;
+
+                        selectionLog.innerHTML = '';
+
+                        selectionLog.appendChild(labelElement);
+                        selectionLog.appendChild(valueElement);
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/listbox/bindingtoarray/main.js b/listbox/bindingtoarray/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/bindingtoarray/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/bindingtoarray/package.json b/listbox/bindingtoarray/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/bindingtoarray/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/bindingtojsondata/App.vue b/listbox/bindingtojsondata/App.vue
new file mode 100644
index 00000000..846000f5
--- /dev/null
+++ b/listbox/bindingtojsondata/App.vue
@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <JqxListBox @select="select($event)"
+                    :source="dataAdapter"
+                    :displayMember="'ContactName'"
+                    :valueMember="'CompanyName'"
+                    :height="200"
+                    :width="250">
+        </JqxListBox>
+
+        <div style="font-size: 13px; font-family: Verdana;" ref="selectionlog">
+        </div>
+    </div>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxListBox
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'CompanyName' },
+                    { name: 'ContactName' }
+                ],
+                id: 'id',
+                url: '../sampledata/customers.txt'
+            }
+        },
+        methods: {
+            select: function (event) {
+                if (event.args) {
+                    let item = event.args.item;
+                    if (item) {
+                        let valueElement = document.createElement('div');
+                        let labelElement = document.createElement('div');
+
+                        valueElement.innerHTML = 'Value: ' + item.value;
+                        labelElement.innerHTML = 'Label: ' + item.label;
+
+                        let selectionLog = this.$refs.selectionlog;
+
+                        selectionLog.innerHTML = '';
+
+                        selectionLog.appendChild(labelElement);
+                        selectionLog.appendChild(valueElement);
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/listbox/bindingtojsondata/main.js b/listbox/bindingtojsondata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/bindingtojsondata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/bindingtojsondata/package.json b/listbox/bindingtojsondata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/bindingtojsondata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/bindingtoxml/App.vue b/listbox/bindingtoxml/App.vue
new file mode 100644
index 00000000..ce11db6f
--- /dev/null
+++ b/listbox/bindingtoxml/App.vue
@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <JqxListBox @select="select($event)"
+                    :source="dataAdapter"
+                    :displayMember="'ContactName'"
+                    :valueMember="'CompanyName'"
+                    :height="200"
+                    :width="250">
+        </JqxListBox>
+
+        <div style="font-size: 13px; font-family: Verdana;" ref="selectionlog">
+        </div>
+    </div>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxListBox
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, { async: false })
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: "xml",
+                datafields: [
+                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
+                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' },
+                ],
+                root: "entry",
+                record: "content",
+                id: 'm\\:properties>d\\:CustomerID',
+                url: '../sampledata/customers.xml'
+            }
+        },
+        methods: {
+            select: function (event) {
+                if (event.args) {
+                    let item = event.args.item;
+                    if (item) {
+                        let valueElement = document.createElement('div');
+                        let labelElement = document.createElement('div');
+
+                        valueElement.innerHTML = 'Value: ' + item.value;
+                        labelElement.innerHTML = 'Label: ' + item.label;
+
+                        let selectionLog = this.$refs.selectionlog;
+
+                        selectionLog.innerHTML = '';
+
+                        selectionLog.appendChild(labelElement);
+                        selectionLog.appendChild(valueElement);
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/listbox/bindingtoxml/main.js b/listbox/bindingtoxml/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/bindingtoxml/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/bindingtoxml/package.json b/listbox/bindingtoxml/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/bindingtoxml/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/categories/App.vue b/listbox/categories/App.vue
new file mode 100644
index 00000000..5947b818
--- /dev/null
+++ b/listbox/categories/App.vue
@@ -0,0 +1,39 @@
+<template>
+        <JqxListBox :source="source"
+                    :height="300"
+                    :width="350">
+        </JqxListBox>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxListBox
+        },
+        data: function () {
+            return {
+                source: [
+                    // Business & Investing
+                    { html: "<div><div>Title: Do the Work</div><div>Author: Steven Pressfield</div></div>", title: "Do the Work", group: "Business & Investing" },
+                    { html: "<div><div>Title: Think and Grow Rich</div><div>Author: Napoleon Hill</div></div>", title: "Think and Grow Rich", group: "Business & Investing" },
+                    { html: "<div><div>Title: The Toyota Way to Continuous...</div><div>Author: Jeffrey K. Liker</div></div>", title: "The Toyota Way to Continuous...", group: "Business & Investing" },
+                    { html: "<div><div>Title: Redesigning Leadership </div><div>Author: John Maeda</div></div>", title: "Redesigning Leadership ", group: "Business & Investing" },
+                    // Computer & Internet Books
+                    { html: "<div><div>Title: MacBook Pro Portable Genius</div><div>Author: Brad Miser</div></div>", title: "MacBook Pro Portable Genius", group: "Computer & Internet Books" },
+                    { html: "<div><div>Title: Social Media Metrics Secrets</div><div>Author: John Lovett</div></div>", title: "Social Media Metrics Secrets", group: "Computer & Internet Books" },
+                    { html: "<div><div>Title: iPad 2: The Missing Manual</div><div>Author: J D Biersdorfer J.D</div></div>", title: "iPad 2: The Missing Manual", group: "Computer & Internet Books" },
+                    // History
+                    { html: "<div><div>Lincoln and His Admirals</div><div>Author:Craig L. Symonds</div></div>", title: "Lincoln and His Admirals", group: "History" },
+                    { html: "<div><div>The Dogs of War: 1861</div><div>Author:Emory M. Thomas</div></div>", title: "The Dogs of War: 1861", group: "History" },
+                    { html: "<div><div>Cleopatra: A Life</div><div>Author:Stacy Schiff</div></div>", title: "Cleopatra: A Life", group: "History" },
+                    { html: "<div><div>Mother Teresa: A Biography</div><div>Author:Meg Greene</div></div>", title: "Mother Teresa: A Biography", group: "History" },
+                    { html: "<div><div>The Federalist Papers</div><div>Author:John Jay</div></div>", title: "The Federalist Papers", group: "History" },
+                ]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/listbox/categories/main.js b/listbox/categories/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/categories/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/categories/package.json b/listbox/categories/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/categories/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/checkboxes/App.vue b/listbox/checkboxes/App.vue
new file mode 100644
index 00000000..4ab4ddeb
--- /dev/null
+++ b/listbox/checkboxes/App.vue
@@ -0,0 +1,90 @@
+<template>
+    <div>
+        <JqxListBox ref="myListBox"
+                    @checkChange="checkChange($event)"
+                    :source="source"
+                    :checkboxes="true"
+                    :width="200"
+                    :height="250">
+        </JqxListBox>
+
+        <div style="font-size: 13px; font-family: Verdana; margin-top: 20px;" ref="events"></div>
+        <div style="font-size: 13px; font-family: Verdana; margin-top: 10px;" ref="checkedItems"></div>
+    </div>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxListBox
+        },
+        data: function () {
+            return {
+                source: [
+                    "Affogato",
+                    "Americano",
+                    "Bicerin",
+                    "Breve",
+                    "Café Bombón",
+                    "Café au lait",
+                    "Caffé Corretto",
+                    "Café Crema",
+                    "Caffé Latte",
+                    "Caffé macchiato",
+                    "Café mélange",
+                    "Coffee milk",
+                    "Cafe mocha",
+                    "Cappuccino",
+                    "Carajillo",
+                    "Cortado",
+                    "Cuban espresso",
+                    "Espresso",
+                    "Eiskaffee",
+                    "The Flat White",
+                    "Frappuccino",
+                    "Galao",
+                    "Greek frappé coffee",
+                    "Iced Coffee",
+                    "Indian filter coffee",
+                    "Instant coffee",
+                    "Irish coffee",
+                    "Liqueur coffee"
+                ]
+            }
+        },
+        mounted: function() {
+            this.$refs.myListBox.checkIndex(0);
+            this.$refs.myListBox.checkIndex(1);
+            this.$refs.myListBox.checkIndex(2);
+            this.$refs.myListBox.checkIndex(5);
+        },
+        methods: {
+            checkChange: function(event) {
+                let eventsContainer = this.$refs.events;
+                let checkedItemsContainer = this.$refs.checkedItems;
+
+                if (event.args.checked) {
+                    eventsContainer.innerHTML = 'Checked: ' + event.args.label;
+                }
+                else {
+                    eventsContainer.innerHTML = 'Unchecked: ' + event.args.label;
+                }
+
+                let items = this.$refs.myListBox.getCheckedItems();
+                let checkedItems = '';
+                for (let i = 0; i < items.length; i++) {
+                    if (i < items.length - 1) {
+                        checkedItems += items[i].label + ', ';
+                    }
+                    else checkedItems += items[i].label;
+                }
+
+                checkedItemsContainer.innerHTML = checkedItems;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/listbox/checkboxes/main.js b/listbox/checkboxes/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/checkboxes/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/checkboxes/package.json b/listbox/checkboxes/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/checkboxes/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/customrendering/App.vue b/listbox/customrendering/App.vue
new file mode 100644
index 00000000..600a4e2e
--- /dev/null
+++ b/listbox/customrendering/App.vue
@@ -0,0 +1,155 @@
+<template>
+    <JqxSplitter ref="splitter"
+                 :panels="[{ size: '40%'}]"
+                 :height="600"
+                 :width="600">
+        <div style="overflow: hidden;">
+            <JqxListBox ref="listbox"
+                        @select="select($event)"
+                        :selectedIndex="0"
+                        :source="dataAdapter"
+                        :displayMember="'firstname'"
+                        :valueMember="'notes'"
+                        :renderer="renderer"
+                        :itemHeight="70"
+                        :width="'100%'"
+                        :height="'100%'">
+            </JqxListBox>
+        </div>
+        <div style="overflow: hidden;" ref="contentPanel">
+        </div>
+    </JqxSplitter>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+    import JqxSplitter from "jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue";
+
+    export default {
+        components: {
+            JqxListBox,
+            JqxSplitter
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+
+            this.getData = () => {
+                let data = new Array();
+                let firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne'];
+                let lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth'];
+                let titles = ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager', 'Sales Representative', 'Sales Representative', 'Inside Sales Coordinator', 'Sales Representative'];
+                let titleofcourtesy = ['Ms.', 'Dr.', 'Ms.', 'Mrs.', 'Mr.', 'Mr.', 'Mr.', 'Ms.', 'Ms.'];
+                let birthdate = ['08-Dec-48', '19-Feb-52', '30-Aug-63', '19-Sep-37', '04-Mar-55', '02-Jul-63', '29-May-60', '09-Jan-58', '27-Jan-66'];
+                let hiredate = ['01-May-92', '14-Aug-92', '01-Apr-92', '03-May-93', '17-Oct-93', '17-Oct-93', '02-Jan-94', '05-Mar-94', '15-Nov-94'];
+                let address = ['507 - 20th Ave. E. Apt. 2A', '908 W. Capital Way', '722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House', 'Miner Rd.', 'Edgeham Hollow', 'Winchester Way', '4726 - 11th Ave. N.E.', '7 Houndstooth Rd.'];
+                let city = ['Seattle', 'Tacoma', 'Kirkland', 'Redmond', 'London', 'London', 'London', 'Seattle', 'London'];
+                let postalcode = ['98122', '98401', '98033', '98052', 'SW1 8JR', 'EC2 7JR', 'RG1 9SP', '98105', 'WG2 7LT'];
+                let country = ['USA', 'USA', 'USA', 'USA', 'UK', 'UK', 'UK', 'USA', 'UK'];
+                let homephone = ['(206) 555-9857', '(206) 555-9482', '(206) 555-3412', '(206) 555-8122', '(71) 555-4848', '(71) 555-7773', '(71) 555-5598', '(206) 555-1189', '(71) 555-4444'];
+                let notes = ['Education includes a BA in psychology from Colorado State University in 1970.  She also completed "The Art of the Cold Call."  Nancy is a member of Toastmasters International.',
+                    'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
+                    'Janet has a BS degree in chemistry from Boston College (1984).  She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
+                    'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.',
+                    'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London.  He was promoted to sales manager in March 1993.  Mr. Buchanan has completed the courses "Successful Telemarketing" and "International Sales Management."  He is fluent in French.',
+                    'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986).  He has also taken the courses "Multi-Cultural Selling" and "Time Management for the Sales Professional."  He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
+                    'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company.  After completing a course entitled "Selling in Europe", he was transferred to the London office in March 1993.',
+                    'Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.',
+                    'Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.'];
+                let k = 0;
+                for (let i = 0; i < firstNames.length; i++) {
+                    let row = {};
+                    row['firstname'] = firstNames[k];
+                    row['lastname'] = lastNames[k];
+                    row['title'] = titles[k];
+                    row['titleofcourtesy'] = titleofcourtesy[k];
+                    row['birthdate'] = birthdate[k];
+                    row['hiredate'] = hiredate[k];
+                    row['address'] = address[k];
+                    row['city'] = city[k];
+                    row['postalcode'] = postalcode[k];
+                    row['country'] = country[k];
+                    row['homephone'] = homephone[k];
+                    row['notes'] = notes[k];
+                    data[i] = row;
+                    k++;
+                }
+
+                return data;
+            };
+
+            this.source = {
+                localdata: this.getData(),
+                datatype: "array"
+            }
+        },
+        mounted: function() {
+            this.updatePanel(0);
+            this.$refs.listbox.ensureVisible(0);
+        },
+        methods: {       
+            
+            updatePanel: function(index) {
+                let container = document.createElement('div');
+                container.style.margin = '5px';
+
+                let leftColumn = document.createElement('div');
+                leftColumn.style.cssText = 'float: left; width: 45%';
+
+                let rightColumn = document.createElement('div');
+                rightColumn.style.cssText = 'float: left; width: 40%';
+
+                container.appendChild(leftColumn);
+                container.appendChild(rightColumn);
+
+                let datarecord = this.getData()[index];
+
+                let firstname = '<div style="margin: 10px;"><b>First Name:</b> ' + datarecord.firstname + '</div>';
+                let lastname = '<div style="margin: 10px;"><b>Last Name:</b> ' + datarecord.lastname + '</div>';
+                let title = '<div style="margin: 10px;"><b>Title:</b> ' + datarecord.title + '</div>';
+                let address = '<div style="margin: 10px;"><b>Address:</b> ' + datarecord.address + '</div>';
+
+                leftColumn.innerHTML += firstname;
+                leftColumn.innerHTML += lastname;
+                leftColumn.innerHTML += title;
+                leftColumn.innerHTML += address;
+
+                let postalcode = '<div style="margin: 10px;"><b>Postal Code:</b> ' + datarecord.postalcode + '</div>';
+                let city = '<div style="margin: 10px;"><b>City:</b> ' + datarecord.city + '</div>';
+                let phone = '<div style="margin: 10px;"><b>Phone:</b> ' + datarecord.homephone + '</div>';
+                let hiredate = '<div style="margin: 10px;"><b>Hire Date:</b> ' + datarecord.hiredate + '</div>';
+
+                rightColumn.innerHTML += postalcode;
+                rightColumn.innerHTML += city;
+                rightColumn.innerHTML += phone;
+                rightColumn.innerHTML += hiredate;
+
+                let listBoxItemValue = this.$refs.listbox.getItem(index).value;
+                let education = '<div style="clear: both; margin: 10px;"><div><b>Education</b></div><div>' + listBoxItemValue + '</div></div>';
+                container.innerHTML += education;
+                this.$refs.contentPanel.innerHTML = container.innerHTML;
+            },
+            renderer: function (index, label, value) {
+                let datarecord = this.getData()[index];
+                let imgurl = '../../../images/' + label.toLowerCase() + '.png';
+                let img = '<img height="50" width="40" src="' + imgurl + '"/>';
+                let table = '<table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + datarecord.firstname + ' ' + datarecord.lastname + '</td></tr><tr><td>' + datarecord.title + '</td></tr></table>';
+                return table;
+            },
+            select: function (event) {
+                this.updatePanel(event.args.index);
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+</style>
diff --git a/listbox/customrendering/main.js b/listbox/customrendering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/customrendering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/customrendering/package.json b/listbox/customrendering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/customrendering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/defaultfunctionality/App.vue b/listbox/defaultfunctionality/App.vue
new file mode 100644
index 00000000..130fdc7d
--- /dev/null
+++ b/listbox/defaultfunctionality/App.vue
@@ -0,0 +1,54 @@
+<template>
+    <JqxListBox ref="listbox"
+                :selectedIndex="3"
+                :source="source"
+                :width="200"
+                :height="250">
+    </JqxListBox>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxListBox          
+        },
+        data: function () {
+            return {
+                source: [
+                    "Affogato",
+                    "Americano",
+                    "Bicerin",
+                    "Breve",
+                    "Café Bombón",
+                    "Café au lait",
+                    "Caffé Corretto",
+                    "Café Crema",
+                    "Caffé Latte",
+                    "Caffé macchiato",
+                    "Café mélange",
+                    "Coffee milk",
+                    "Cafe mocha",
+                    "Cappuccino",
+                    "Carajillo",
+                    "Cortado",
+                    "Cuban espresso",
+                    "Espresso",
+                    "Eiskaffee",
+                    "The Flat White",
+                    "Frappuccino",
+                    "Galao",
+                    "Greek frappé coffee",
+                    "Iced Coffee",
+                    "Indian filter coffee",
+                    "Instant coffee",
+                    "Irish coffee",
+                    "Liqueur coffee"
+                ]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/listbox/defaultfunctionality/main.js b/listbox/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/defaultfunctionality/package.json b/listbox/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/dragdrop/App.vue b/listbox/dragdrop/App.vue
new file mode 100644
index 00000000..57f5d30e
--- /dev/null
+++ b/listbox/dragdrop/App.vue
@@ -0,0 +1,161 @@
+<template>
+    <div>
+        <JqxListBox style="float: left;" ref="listBoxA"
+                    @dragStart="dragStartA($event)"
+                    @dragEnd="dragEndA($event)"
+                    :allowDrop="true"
+                    :allowDrag="true"
+                    :source="source1"
+                    :dragStart="dragStart"
+                    :renderer="renderer1"
+                    :width="200"
+                    :height="250">
+        </JqxListBox>
+
+        <JqxListBox style="margin-left: 20px; float: left;" ref="listBoxB"
+                    @dragStart="dragStartB($event)"
+                    @dragEnd="dragEndB($event)"
+                    :allowDrop="true"
+                    :allowDrag="true"
+                    :source="source2"
+                    :dragEnd="dragEnd"
+                    :renderer="renderer2"
+                    :width="200"
+                    :height="250">
+        </JqxListBox>
+        <div style="width: 200px; height: 200px; float: left; margin-left: 20px;">
+            <JqxTextArea ref="myTextArea" :width="200" :height="100"></JqxTextArea>
+        </div>
+        <div style="font-size: 13px; font-family: Verdana; padding-top: 20px; clear: both;">
+            <b>Events Log:</b>
+            <div ref="dragStartLog">
+            </div>
+            <div ref="dragEndLog">
+            </div>
+            <br />
+            <b>Note:</b>
+            <br />
+            Dragging of "Breve" is disabled.
+            <br />
+            Dropping of "Frappuccino" is disabled.
+        </div>
+    </div>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+    import JqxTextArea from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue";
+
+    export default {
+        components: {
+            JqxListBox,
+            JqxTextArea
+        },
+        data: function () {
+            return {
+                source1: [
+                    'Affogato',
+                    'Americano',
+                    'Bicerin',
+                    'Breve',
+                    'Café Bombón',
+                    'Café au lait',
+                    'Caffé Corretto',
+                    'Café Crema',
+                    'Caffé Latte',
+                    'Caffé macchiato',
+                    'Café mélange',
+                    'Coffee milk',
+                    'Cafe mocha'
+                ],
+                source2: [
+                    'Cappuccino',
+                    'Carajillo',
+                    'Cortado',
+                    'Cuban espresso',
+                    'Espresso',
+                    'Eiskaffee',
+                    'The Flat White',
+                    'Frappuccino',
+                    'Galao',
+                    'Greek frappé coffee',
+                    'Iced Coffee',
+                    'Indian filter coffee',
+                    'Instant coffee',
+                    'Irish coffee',
+                    'Liqueur coffee'
+                ]
+            }
+        },
+        methods: {
+
+            onDragStart: function(event) {
+                this.$refs.dragStartLog.innerHTML = 'Drag Start: ' + event.args.label;
+                this.$refs.dragEndLog.innerHTML = '';
+            },
+            onDragEnd: function (event) {
+                this.$refs.dragEndLog.innerHTML = 'Drag End';
+                if (event.args.label) {
+                    let ev = event.args.originalEvent;
+                    let x = ev.pageX;
+                    let y = ev.pageY;
+
+                    if (event.args.originalEvent && event.args.originalEvent.originalEvent && event.args.originalEvent.originalEvent.touches) {
+                        let touch = event.args.originalEvent.originalEvent.changedTouches[0];
+                        x = touch.pageX;
+                        y = touch.pageY;
+                    }
+                    let textareaElement = this.$refs.myTextArea.$el.parentElement;
+                    let width = textareaElement.offsetWidth;
+                    let height = textareaElement.offsetHeight;
+                    let right = parseInt(textareaElement.offsetLeft) + width;
+                    let bottom = parseInt(textareaElement.offsetTop) + height;
+
+                    if (x >= parseInt(textareaElement.offsetLeft) && x <= right) {
+                        if (y >= parseInt(textareaElement.offsetTop) && y <= bottom) {
+                            this.$refs.myTextArea.val(event.args.label);
+                        }
+                    }
+                }
+            },
+            dragStart: function (item) {
+                if (item.label == 'Breve') {
+                    return false;
+                }
+            },
+            dragEnd: function(dragItem, dropItem)  {
+                if (dragItem.label == 'Frappuccino')
+                    return false;
+            },
+            renderer1: function (index, label, value) {
+                if (label == 'Breve') {
+                    return '<span style="color: red;">' + label + '</span>';
+                }
+
+                return label;
+            },
+            renderer2: function (index, label, value) {
+                if (label == 'Frappuccino') {
+                    return '<span style="color: red">' + label + '</span>';
+                }
+
+                return label;
+            },
+            // Events
+            dragStartA: function(event) {
+                this.onDragStart(event);
+            },
+            dragStartB: function (event) {
+                this.onDragStart(event);
+            },
+            dragEndA: function (event) {
+                this.onDragEnd(event);
+            },
+            dragEndB: function (event) {
+                this.onDragEnd(event);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/listbox/dragdrop/main.js b/listbox/dragdrop/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/dragdrop/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/dragdrop/package.json b/listbox/dragdrop/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/dragdrop/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/events/App.vue b/listbox/events/App.vue
new file mode 100644
index 00000000..168a85bd
--- /dev/null
+++ b/listbox/events/App.vue
@@ -0,0 +1,93 @@
+<template>
+    <div style="float: left; width: 500px;">
+        <JqxListBox style="margin-left: 20px; margin-top: 10px; float: left;" 
+                    ref="myListBox"
+                    @select="select($event)"
+                    @unselect="unselect($event)"
+                    :source="source"
+                    :width="200"
+                    :height="250">
+        </JqxListBox>
+        <div style="margin-left: 20px; margin-top: 10px; float: left;">
+            <div>
+                <span>
+                    Events:
+                </span>
+                <JqxPanel ref="myPanel" :width="200" :height="250">
+                </JqxPanel>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxListBox,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                source: [
+                    "Affogato",
+                    "Americano",
+                    "Bicerin",
+                    "Breve",
+                    "Café Bombón",
+                    "Café au lait",
+                    "Caffé Corretto",
+                    "Café Crema",
+                    "Caffé Latte",
+                    "Caffé macchiato",
+                    "Café mélange",
+                    "Coffee milk",
+                    "Cafe mocha",
+                    "Cappuccino",
+                    "Carajillo",
+                    "Cortado",
+                    "Cuban espresso",
+                    "Espresso",
+                    "Eiskaffee",
+                    "The Flat White",
+                    "Frappuccino",
+                    "Galao",
+                    "Greek frappé coffee",
+                    "Iced Coffee",
+                    "Indian filter coffee",
+                    "Instant coffee",
+                    "Irish coffee",
+                    "Liqueur coffee"
+                ]
+            }
+        },
+        methods: {
+            select: function(event) {
+                let item = this.$refs.myListBox.getItem(event.args.index);
+                if (item != null) {
+                    this.$refs.myPanel.prepend('<div style="margin-top: 5px;">Selected: ' + item.label + '</div>');
+                }
+            },
+            unselect: function (event) {
+                let item = this.$refs.myListBox.getItem(event.args.index);
+                if (item != null) {
+                    this.$refs.myPanel.prepend('<div style="margin-top: 5px;">Unselected: ' + item.label + '</div>');
+                }
+            }           
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    .jqx-panel {
+        border: none;
+    }
+</style>
diff --git a/listbox/events/main.js b/listbox/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/events/package.json b/listbox/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/filtering/App.vue b/listbox/filtering/App.vue
new file mode 100644
index 00000000..00efb3c6
--- /dev/null
+++ b/listbox/filtering/App.vue
@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <JqxListBox ref="myListBox"
+                    :filterable="true"
+                    :selectedIndex="0"
+                    :source="shirts"
+                    :itemHeight="90"
+                    :renderer="renderer"
+                    :width="250"
+                    :height="300">
+        </JqxListBox>
+        <div style="margin-top: 10px;">
+            <JqxButton @click="click($event)" :width="120">
+                Clear Filter
+            </JqxButton>
+        </div>
+    </div>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxListBox,
+            JqxButton
+        },
+        data: function () {
+            return {
+                shirts: [
+                    '2 sided dodgers<br>bankrupt<br>t shirt ash',
+                    'black retro<br>rock band<br>guitar controller',
+                    'bright green<br>gettin lucky<br>in kentucky',
+                    'brown loading<br>bar computer geek',
+                    'cool story bro',
+                    'fear the beard', 'honey badger<br>don t care',
+                    'misfits sf<br>giants white',
+                    'scott pilgrim<br>red rock<br>band'
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.shirtFileNames =  [
+                '2-sided-dodgers-bankrupt-t-shirt-ash',
+                'black-retro-rock-band-guitar-controller',
+                'bright-green-gettin-lucky-in-kentucky',
+                'brown-loading-bar-computer-geek',
+                'cool-story-bro',
+                'fear-the-beard',
+                'honey-badger-don-t-care',
+                'misfits-sf-giants-white',
+                'scott-pilgrim-red-rock-band'
+            ]
+        },
+        methods: {
+            renderer: function (index, label, value) {
+                let datarecord = this.shirtFileNames[index];
+                let imgurl = '../../../images/t-shirts/' + datarecord.toLowerCase() + '.png';
+                let img = '<img height="70" width="70" src="' + imgurl + '"/>';
+                let table = '<table style="min-width: 130px;"><tr><td style="width: 80px;">' + img + '</td><td>' + label + '</td></tr></table>';
+
+                return table;
+            },
+            click: function (event) {
+                this.$refs.myListBox.clearFilter();
+            }       
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/listbox/filtering/main.js b/listbox/filtering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/filtering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/filtering/package.json b/listbox/filtering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/filtering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/fluidsize/App.vue b/listbox/fluidsize/App.vue
new file mode 100644
index 00000000..448d51ec
--- /dev/null
+++ b/listbox/fluidsize/App.vue
@@ -0,0 +1,30 @@
+<template>
+    <JqxListBox :source="countries"
+                :width="'100%'"
+                :height="'100%'">
+    </JqxListBox>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxListBox
+        },
+        data: function () {
+            return {
+                countries: ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Anguilla", "Antigua &amp; Barbuda", "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia &amp; Herzegovina", "Botswana", "Brazil", "British Virgin Islands", "Brunei", "Bulgaria", "Burkina Faso", "Burundi", "Cambodia", "Cameroon", "Cape Verde", "Cayman Islands", "Chad", "Chile", "China", "Colombia", "Congo", "Cook Islands", "Costa Rica", "Cote D Ivoire", "Croatia", "Cruise Ship", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Estonia", "Ethiopia", "Falkland Islands", "Faroe Islands", "Fiji", "Finland", "France", "French Polynesia", "French West Indies", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Gibraltar", "Greece", "Greenland", "Grenada", "Guam", "Guatemala", "Guernsey", "Guinea", "Guinea Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Isle of Man", "Israel", "Italy", "Jamaica", "Japan", "Jersey", "Jordan", "Kazakhstan", "Kenya", "Kuwait", "Kyrgyz Republic", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macau", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Mauritania", "Mauritius", "Mexico", "Moldova", "Monaco", "Mongolia", "Montenegro", "Montserrat", "Morocco", "Mozambique", "Namibia", "Nepal", "Netherlands", "Netherlands Antilles", "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Palestine", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Puerto Rico", "Qatar", "Reunion", "Romania", "Russia", "Rwanda", "Saint Pierre &amp; Miquelon", "Samoa", "San Marino", "Satellite", "Saudi Arabia", "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "South Africa", "South Korea", "Spain", "Sri Lanka", "St Kitts &amp; Nevis", "St Lucia", "St Vincent", "St. Lucia", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Timor L'Este", "Togo", "Tonga", "Trinidad &amp; Tobago", "Tunisia", "Turkey", "Turkmenistan", "Turks &amp; Caicos", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "Uruguay", "Uzbekistan", "Venezuela", "Vietnam", "Virgin Islands (US)", "Yemen", "Zambia", "Zimbabwe"]
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+    }
+</style>
diff --git a/listbox/fluidsize/main.js b/listbox/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/fluidsize/package.json b/listbox/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/itemsreorder/App.vue b/listbox/itemsreorder/App.vue
new file mode 100644
index 00000000..29f7106e
--- /dev/null
+++ b/listbox/itemsreorder/App.vue
@@ -0,0 +1,39 @@
+<template>
+    <JqxListBox :allowDrop="true"
+                :allowDrag="true"
+                :source="data"
+                :width="200"
+                :height="250">
+    </JqxListBox>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxListBox
+        },
+        data: function () {
+            return {
+                data:  [
+                    "Affogato",
+                    "Americano",
+                    "Bicerin",
+                    "Breve",
+                    "Café Bombón",
+                    "Café au lait",
+                    "Caffé Corretto",
+                    "Café Crema",
+                    "Caffé Latte",
+                    "Caffé macchiato",
+                    "Café mélange",
+                    "Coffee milk",
+                    "Cafe mocha"
+                ]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/listbox/itemsreorder/main.js b/listbox/itemsreorder/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/itemsreorder/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/itemsreorder/package.json b/listbox/itemsreorder/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/itemsreorder/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/keyboardnavigation/App.vue b/listbox/keyboardnavigation/App.vue
new file mode 100644
index 00000000..175ed09d
--- /dev/null
+++ b/listbox/keyboardnavigation/App.vue
@@ -0,0 +1,275 @@
+<template>
+    <div>
+        <JqxListBox ref="listBox"
+                    :multipleextended="true"
+                    :selectedIndex="3"
+                    :source="countries"
+                    :width="200"
+                    :height="250">
+        </JqxListBox>
+
+        <div style="font-family: Verdana; font-size: 12px; width: 400px; margin-left: 20px; float: left;">
+            <ul>
+                <li><b>Tab</b> - Like other widgets, the jqxListBox widget receives focus by tabbing into it. Once focus is received, users will be able to use the keyboard to change the jqxListBox's selection. A second tab will take the user out of the widget.</li>
+                <li><b>Shift+Tab</b> - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous focusable element in the tab order.</li>
+                <li><b>Up/Down</b> arrow keys - select previous or next item.</li>
+                <li><b>Page Up/Page Down</b> keys - navigate up or down with one page.</li>
+                <li><b>Home/End</b> keys - navigate to the first or last item.</li>
+                <li>Hold <b>SHIFT</b> and press Up or Down arrow keys to select multiple items.</li>
+                <li>Hold <b>SHIFT</b> or <b>Ctrl</b> and click with the mouse to select multiple items.</li>
+                <li>
+                    <b>Incremental Search</b> - start typing to select the matching item.
+                </li>
+                <li><b>First letter</b> - press a key to navigate to a matching item. Subsequent press on the same key will iterate over the matches.</li>
+            </ul>
+        </div>
+    </div>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxListBox
+        },
+        data: function () {
+            return {
+                countries: [
+                    { value: "AF", label: "Afghanistan" },
+                    { value: "AL", label: "Albania" },
+                    { value: "DZ", label: "Algeria" },
+                    { value: "AS", label: "American Samoa" },
+                    { value: "AD", label: "Andorra" },
+                    { value: "AO", label: "Angola" },
+                    { value: "AI", label: "Anguilla" },
+                    { value: "AQ", label: "Antarctica" },
+                    { value: "AG", label: "Antigua and Barbuda" },
+                    { value: "AR", label: "Argentina" },
+                    { value: "AM", label: "Armenia" },
+                    { value: "AW", label: "Aruba" },
+                    { value: "AU", label: "Australia" },
+                    { value: "AT", label: "Austria" },
+                    { value: "AZ", label: "Azerbaijan" },
+                    { value: "BS", label: "Bahamas" },
+                    { value: "BH", label: "Bahrain" },
+                    { value: "BD", label: "Bangladesh" },
+                    { value: "BB", label: "Barbados" },
+                    { value: "BY", label: "Belarus" },
+                    { value: "BE", label: "Belgium" },
+                    { value: "BZ", label: "Belize" },
+                    { value: "BJ", label: "Benin" },
+                    { value: "BM", label: "Bermuda" },
+                    { value: "BT", label: "Bhutan" },
+                    { value: "BO", label: "Bolivia" },
+                    { value: "BA", label: "Bosnia and Herzegovina" },
+                    { value: "BW", label: "Botswana" },
+                    { value: "BV", label: "Bouvet Island" },
+                    { value: "BR", label: "Brazil" },
+                    { value: "BN", label: "Brunei" },
+                    { value: "BG", label: "Bulgaria" },
+                    { value: "BF", label: "Burkina Faso" },
+                    { value: "BI", label: "Burundi" },
+                    { value: "KH", label: "Cambodia" },
+                    { value: "CM", label: "Cameroon" },
+                    { value: "CA", label: "Canada" },
+                    { value: "CV", label: "Cape Verde" },
+                    { value: "KY", label: "Cayman Islands" },
+                    { value: "CF", label: "Central African Republic" },
+                    { value: "TD", label: "Chad" },
+                    { value: "CL", label: "Chile" },
+                    { value: "CN", label: "China" },
+                    { value: "CX", label: "Christmas Island" },
+                    { value: "CC", label: "Cocos (Keeling) Islands" },
+                    { value: "CO", label: "Columbia" },
+                    { value: "KM", label: "Comoros" },
+                    { value: "CG", label: "Congo" },
+                    { value: "CK", label: "Cook Islands" },
+                    { value: "CR", label: "Costa Rica" },
+                    { value: "CI", label: "Cote D'Ivorie" },
+                    { value: "HR", label: "Croatia (Hrvatska)" },
+                    { value: "CU", label: "Cuba" },
+                    { value: "CY", label: "Cyprus" },
+                    { value: "CZ", label: "Czech Republic" },
+                    { value: "DK", label: "Denmark" },
+                    { value: "DJ", label: "Djibouti" },
+                    { value: "DM", label: "Dominica" },
+                    { value: "DO", label: "Dominican Republic" },
+                    { value: "TP", label: "East Timor" },
+                    { value: "EC", label: "Ecuador" },
+                    { value: "EG", label: "Egypt" },
+                    { value: "SV", label: "El Salvador" },
+                    { value: "GQ", label: "Equatorial Guinea" },
+                    { value: "ER", label: "Eritrea" },
+                    { value: "EE", label: "Estonia" },
+                    { value: "ET", label: "Ethiopia" },
+                    { value: "FO", label: "Faroe Islands" },
+                    { value: "FJ", label: "Fiji" },
+                    { value: "FI", label: "Finland" },
+                    { value: "FR", label: "France" },
+                    { value: "GF", label: "French Guinea" },
+                    { value: "PF", label: "French Polynesia" },
+                    { value: "GA", label: "Gabon" },
+                    { value: "GM", label: "Gambia" },
+                    { value: "GE", label: "Georgia" },
+                    { value: "DE", label: "Germany" },
+                    { value: "GH", label: "Ghana" },
+                    { value: "GI", label: "Gibraltar" },
+                    { value: "GR", label: "Greece" },
+                    { value: "GL", label: "Greenland" },
+                    { value: "GD", label: "Grenada" },
+                    { value: "GP", label: "Guadeloupe" },
+                    { value: "GU", label: "Guam" },
+                    { value: "GT", label: "Guatemala" },
+                    { value: "GN", label: "Guinea" },
+                    { value: "GW", label: "Guinea-Bissau" },
+                    { value: "GY", label: "Guyana" },
+                    { value: "HT", label: "Haiti" },
+                    { value: "HN", label: "Honduras" },
+                    { value: "HK", label: "Hong Kong" },
+                    { value: "HU", label: "Hungary" },
+                    { value: "IS", label: "Iceland" },
+                    { value: "IN", label: "India" },
+                    { value: "ID", label: "Indonesia" },
+                    { value: "IR", label: "Iran" },
+                    { value: "IQ", label: "Iraq" },
+                    { value: "IE", label: "Ireland" },
+                    { value: "IL", label: "Israel" },
+                    { value: "IT", label: "Italy" },
+                    { value: "JM", label: "Jamaica" },
+                    { value: "JP", label: "Japan" },
+                    { value: "JO", label: "Jordan" },
+                    { value: "KZ", label: "Kazakhstan" },
+                    { value: "KE", label: "Kenya" },
+                    { value: "KI", label: "Kiribati" },
+                    { value: "KW", label: "Kuwait" },
+                    { value: "KG", label: "Kyrgyzstan" },
+                    { value: "LA", label: "Laos" },
+                    { value: "LV", label: "Latvia" },
+                    { value: "LB", label: "Lebanon" },
+                    { value: "LS", label: "Lesotho" },
+                    { value: "LR", label: "Liberia" },
+                    { value: "LY", label: "Libya" },
+                    { value: "LI", label: "Liechtenstein" },
+                    { value: "LT", label: "Lithuania" },
+                    { value: "LU", label: "Luxembourg" },
+                    { value: "MO", label: "Macau" },
+                    { value: "MK", label: "Macedonia" },
+                    { value: "MG", label: "Madagascar" },
+                    { value: "MW", label: "Malawi" },
+                    { value: "MY", label: "Malaysia" },
+                    { value: "MV", label: "Maldives" },
+                    { value: "ML", label: "Mali" },
+                    { value: "MT", label: "Malta" },
+                    { value: "MH", label: "Marshall Islands" },
+                    { value: "MQ", label: "Martinique" },
+                    { value: "MR", label: "Mauritania" },
+                    { value: "MU", label: "Mauritius" },
+                    { value: "YT", label: "Mayotte" },
+                    { value: "MX", label: "Mexico" },
+                    { value: "FM", label: "Micronesia" },
+                    { value: "MD", label: "Moldova" },
+                    { value: "MC", label: "Monaco" },
+                    { value: "MN", label: "Mongolia" },
+                    { value: "MS", label: "Montserrat" },
+                    { value: "MA", label: "Morocco" },
+                    { value: "MZ", label: "Mozambique" },
+                    { value: "MM", label: "Myanmar (Burma)" },
+                    { value: "NA", label: "Namibia" },
+                    { value: "NR", label: "Nauru" },
+                    { value: "NP", label: "Nepal" },
+                    { value: "NL", label: "Netherlands" },
+                    { value: "AN", label: "Netherlands Antilles" },
+                    { value: "NC", label: "New Caledonia" },
+                    { value: "NZ", label: "New Zealand" },
+                    { value: "NI", label: "Nicaragua" },
+                    { value: "NE", label: "Niger" },
+                    { value: "NG", label: "Nigeria" },
+                    { value: "NU", label: "Niue" },
+                    { value: "NF", label: "Norfolk Island" },
+                    { value: "KP", label: "North Korea" },
+                    { value: "NO", label: "Norway" },
+                    { value: "OM", label: "Oman" },
+                    { value: "PK", label: "Pakistan" },
+                    { value: "PW", label: "Palau" },
+                    { value: "PA", label: "Panama" },
+                    { value: "PG", label: "Papua New Guinea" },
+                    { value: "PY", label: "Paraguay" },
+                    { value: "PE", label: "Peru" },
+                    { value: "PH", label: "Philippines" },
+                    { value: "PN", label: "Pitcairn" },
+                    { value: "PL", label: "Poland" },
+                    { value: "PT", label: "Portugal" },
+                    { value: "PR", label: "Puerto Rico" },
+                    { value: "QA", label: "Qatar" },
+                    { value: "RE", label: "Reunion" },
+                    { value: "RO", label: "Romania" },
+                    { value: "RU", label: "Russia" },
+                    { value: "RW", label: "Rwanda" },
+                    { value: "SH", label: "Saint Helena" },
+                    { value: "KN", label: "Saint Kitts and Nevis" },
+                    { value: "LC", label: "Saint Lucia" },
+                    { value: "SM", label: "San Marino" },
+                    { value: "SA", label: "Saudi Arabia" },
+                    { value: "SN", label: "Senegal" },
+                    { value: "SC", label: "Seychelles" },
+                    { value: "SL", label: "Sierra Leone" },
+                    { value: "SG", label: "Singapore" },
+                    { value: "SK", label: "Slovak Republic" },
+                    { value: "SI", label: "Slovenia" },
+                    { value: "SB", label: "Solomon Islands" },
+                    { value: "SO", label: "Somalia" },
+                    { value: "ZA", label: "South Africa" },
+                    { value: "GS", label: "South Georgia" },
+                    { value: "KR", label: "South Korea" },
+                    { value: "ES", label: "Spain" },
+                    { value: "LK", label: "Sri Lanka" },
+                    { value: "SD", label: "Sudan" },
+                    { value: "SR", label: "Suriname" },
+                    { value: "SZ", label: "Swaziland" },
+                    { value: "SE", label: "Sweden" },
+                    { value: "CH", label: "Switzerland" },
+                    { value: "SY", label: "Syria" },
+                    { value: "TW", label: "Taiwan" },
+                    { value: "TJ", label: "Tajikistan" },
+                    { value: "TZ", label: "Tanzania" },
+                    { value: "TH", label: "Thailand" },
+                    { value: "TG", label: "Togo" },
+                    { value: "TK", label: "Tokelau" },
+                    { value: "TO", label: "Tonga" },
+                    { value: "TT", label: "Trinidad and Tobago" },
+                    { value: "TN", label: "Tunisia" },
+                    { value: "TR", label: "Turkey" },
+                    { value: "TM", label: "Turkmenistan" },
+                    { value: "TC", label: "Turks and Caicos Islands" },
+                    { value: "TV", label: "Tuvalu" },
+                    { value: "UG", label: "Uganda" },
+                    { value: "UA", label: "Ukraine" },
+                    { value: "AE", label: "United Arab Emirates" },
+                    { value: "UK", label: "United Kingdom" },
+                    { value: "US", label: "United States" },
+                    { value: "UY", label: "Uruguay" },
+                    { value: "UZ", label: "Uzbekistan" },
+                    { value: "VU", label: "Vanuatu" },
+                    { value: "VA", label: "Vatican City (Holy See)" },
+                    { value: "VE", label: "Venezuela" },
+                    { value: "VN", label: "Vietnam" },
+                    { value: "VG", label: "Virgin Islands (British)" },
+                    { value: "VI", label: "Virgin Islands (US)" },
+                    { value: "WF", label: "Wallis and Futuna Islands" },
+                    { value: "EH", label: "Western Sahara" },
+                    { value: "WS", label: "Western Samoa" },
+                    { value: "YE", label: "Yemen" },
+                    { value: "YU", label: "Yugoslavia" },
+                    { value: "ZM", label: "Zambia" },
+                    { value: "ZW", label: "Zimbabwe" }
+                ]
+            }
+        },
+        mounted: function () {
+            this.$refs.listBox.focus();
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/listbox/keyboardnavigation/main.js b/listbox/keyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/keyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/keyboardnavigation/package.json b/listbox/keyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/keyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/loaddatafromselect/App.vue b/listbox/loaddatafromselect/App.vue
new file mode 100644
index 00000000..7cb0535d
--- /dev/null
+++ b/listbox/loaddatafromselect/App.vue
@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <div style="float: left;">
+            <JqxListBox ref="myListBox"
+                        @select="selectItem($event)"
+                        :width="200"
+                        :height="250">
+            </JqxListBox>
+        </div>
+
+        <div style="float: left;">
+            <select style="height: 250px; width: 200px; margin-left: 30px;" size="2" id="select" ref="select" @change="change($event)">
+                <option>Affogato</option>
+                <option>Americano</option>
+                <option>Bicerin</option>
+                <option>Breve</option>
+                <option>Café Bombón</option>
+                <option>Caffé Corretto</option>
+                <option>Café Crema</option>
+                <option>Caffé Latte</option>
+                <option>Caffé macchiato</option>
+                <option>Café mélange</option>
+                <option>Coffee milk</option>
+                <option>Cafe mocha</option>
+                <option>Cappuccino</option>
+                <option>Carajillo</option>
+                <option>Cuban espresso</option>
+                <option>Espresso</option>
+                <option selected="selected">The Flat White</option>
+                <option>Frappuccino</option>
+                <option>Galao</option>
+                <option>Greek frappé coffee</option>
+                <option>Iced Coffee</option>
+                <option>Indian filter coffee</option>
+                <option>Instant coffee</option>
+                <option>Irish coffee</option>
+                <option>Liqueur coffee</option>
+            </select>
+        </div>
+    </div>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxListBox
+        },      
+        beforeCreate: function () {
+            this.updating = false;
+        },
+        mounted: function () {
+            this.$refs.myListBox.loadFromSelect('select');
+        },
+        methods: {
+            change: function(event) {
+                this.updating = true;
+                let index = this.$refs.select.selectedIndex;
+                this.$refs.myListBox.selectIndex(index);
+                this.$refs.myListBox.ensureVisible(index);
+                this.updating = false;
+            },
+            selectItem: function (event) {
+                if (event.args && !this.updating) {
+                    // select the item in the 'select' tag.
+                    let index = event.args.item.index;
+                    this.$refs.select.selectedIndex = index;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/listbox/loaddatafromselect/main.js b/listbox/loaddatafromselect/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/loaddatafromselect/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/loaddatafromselect/package.json b/listbox/loaddatafromselect/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/loaddatafromselect/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/multipleselection/App.vue b/listbox/multipleselection/App.vue
new file mode 100644
index 00000000..3acb9608
--- /dev/null
+++ b/listbox/multipleselection/App.vue
@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <JqxListBox ref="myListBox"
+                    @change="change($event)"
+                    :source="source"
+                    :multiple="true"
+                    :width="200"
+                    :height="250">
+        </JqxListBox>
+
+        <div style="margin-top: 30px; font-size: 13px; font-family: Verdana;" ref="selectionLog"></div>
+    </div>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxListBox
+        },
+        data: function () {
+            return {
+                source: [
+                    "Affogato",
+                    "Americano",
+                    "Bicerin",
+                    "Breve",
+                    "Café Bombón",
+                    "Café au lait",
+                    "Caffé Corretto",
+                    "Café Crema",
+                    "Caffé Latte",
+                    "Caffé macchiato",
+                    "Café mélange",
+                    "Coffee milk",
+                    "Cafe mocha",
+                    "Cappuccino",
+                    "Carajillo",
+                    "Cortado",
+                    "Cuban espresso",
+                    "Espresso",
+                    "Eiskaffee",
+                    "The Flat White",
+                    "Frappuccino",
+                    "Galao",
+                    "Greek frappé coffee",
+                    "Iced Coffee",
+                    "Indian filter coffee",
+                    "Instant coffee",
+                    "Irish coffee",
+                    "Liqueur coffee"
+                ]
+            }
+        },
+        mounted: function () {
+            this.$refs.myListBox.selectIndex(2);
+            this.$refs.myListBox.selectIndex(5);
+            this.$refs.myListBox.selectIndex(7);
+        },
+        methods: {
+            displaySelectedItems: function() {
+                let items = this.$refs.myListBox.getSelectedItems();
+                let selection = 'Selected Items: ';
+                for (let i = 0; i < items.length; i++) {
+                    selection += items[i].label + (i < items.length - 1 ? ', ' : '');
+                }
+                this.$refs.selectionLog.innerHTML = selection;
+            },
+            change: function (event) {
+                this.displaySelectedItems();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/listbox/multipleselection/main.js b/listbox/multipleselection/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/multipleselection/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/multipleselection/package.json b/listbox/multipleselection/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/multipleselection/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/remotesearch/App.vue b/listbox/remotesearch/App.vue
new file mode 100644
index 00000000..3a80563d
--- /dev/null
+++ b/listbox/remotesearch/App.vue
@@ -0,0 +1,79 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left;">
+        <div>
+            <span style="float: left; margin-top: 5px; margin-right: 4px;">Search for a City: </span>
+            <input class="jqx-input" placeholder="Type a City name here" ref="searchField" @keyup="keyup($event)" type="text" style="height: 23px; float: left; width: 197px; margin-bottom: 10px;" />
+        </div>
+        <div style="clear: both;"></div>
+        <JqxListBox :source="dataAdapter"
+                    :displayMember="'name'"
+                    :valueMember="'countryName'"
+                    :renderer="renderer"
+                    :height="350"
+                    :width="320">
+        </JqxListBox>
+    </div>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxListBox
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, {
+                    formatData: (data) => {
+                        data.name_startsWith = this.$refs.searchField.value;
+                        return data;
+                    }
+                })
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: "jsonp",
+                datafields: [
+                    { name: 'countryName' },
+                    { name: 'name' },
+                    { name: 'population', type: 'float' },
+                    { name: 'continentCode' },
+                    { name: 'adminName1' }
+                ],
+                url: "http://api.geonames.org/searchJSON",
+                data: {
+                    featureClass: "P",
+                    style: "full",
+                    maxRows: 50,
+                    username: "jqwidgets"
+                }
+            };
+
+            this.me = { timer: null };
+        },
+        methods: {
+            renderer: function (index, label, value) {
+                let item = this.dataAdapter.records[index];
+                if (item != null) {
+                    let label = item.name + "(" + item.countryName + ", " + item.adminName1 + ")";
+                    return label;
+                }
+
+                return "";
+            },
+            keyup: function (event) {
+                if (this.me.timer) {
+                    clearTimeout(this.me.timer);
+                }
+
+                this.me.timer = setTimeout(_ => {
+                    this.dataAdapter.dataBind();
+                }, 300);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/listbox/remotesearch/main.js b/listbox/remotesearch/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/remotesearch/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/remotesearch/package.json b/listbox/remotesearch/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/remotesearch/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/righttoleftlayout/App.vue b/listbox/righttoleftlayout/App.vue
new file mode 100644
index 00000000..d903d03c
--- /dev/null
+++ b/listbox/righttoleftlayout/App.vue
@@ -0,0 +1,258 @@
+<template>
+    <JqxListBox ref="myListBox"
+                :rtl="true"
+                :source="countries"
+                :checkboxes="true"
+                :width="220"
+                :height="250">
+    </JqxListBox>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxListBox
+        },
+        data: function () {
+            return {
+                countries: [
+                    { value: "AF", label: "Afghanistan" },
+                    { value: "AL", label: "Albania" },
+                    { value: "DZ", label: "Algeria" },
+                    { value: "AS", label: "American Samoa" },
+                    { value: "AD", label: "Andorra" },
+                    { value: "AO", label: "Angola" },
+                    { value: "AI", label: "Anguilla" },
+                    { value: "AQ", label: "Antarctica" },
+                    { value: "AG", label: "Antigua and Barbuda" },
+                    { value: "AR", label: "Argentina" },
+                    { value: "AM", label: "Armenia" },
+                    { value: "AW", label: "Aruba" },
+                    { value: "AU", label: "Australia" },
+                    { value: "AT", label: "Austria" },
+                    { value: "AZ", label: "Azerbaijan" },
+                    { value: "BS", label: "Bahamas" },
+                    { value: "BH", label: "Bahrain" },
+                    { value: "BD", label: "Bangladesh" },
+                    { value: "BB", label: "Barbados" },
+                    { value: "BY", label: "Belarus" },
+                    { value: "BE", label: "Belgium" },
+                    { value: "BZ", label: "Belize" },
+                    { value: "BJ", label: "Benin" },
+                    { value: "BM", label: "Bermuda" },
+                    { value: "BT", label: "Bhutan" },
+                    { value: "BO", label: "Bolivia" },
+                    { value: "BA", label: "Bosnia and Herzegovina" },
+                    { value: "BW", label: "Botswana" },
+                    { value: "BV", label: "Bouvet Island" },
+                    { value: "BR", label: "Brazil" },
+                    { value: "BN", label: "Brunei" },
+                    { value: "BG", label: "Bulgaria" },
+                    { value: "BF", label: "Burkina Faso" },
+                    { value: "BI", label: "Burundi" },
+                    { value: "KH", label: "Cambodia" },
+                    { value: "CM", label: "Cameroon" },
+                    { value: "CA", label: "Canada" },
+                    { value: "CV", label: "Cape Verde" },
+                    { value: "KY", label: "Cayman Islands" },
+                    { value: "CF", label: "Central African Republic" },
+                    { value: "TD", label: "Chad" },
+                    { value: "CL", label: "Chile" },
+                    { value: "CN", label: "China" },
+                    { value: "CX", label: "Christmas Island" },
+                    { value: "CC", label: "Cocos (Keeling) Islands" },
+                    { value: "CO", label: "Columbia" },
+                    { value: "KM", label: "Comoros" },
+                    { value: "CG", label: "Congo" },
+                    { value: "CK", label: "Cook Islands" },
+                    { value: "CR", label: "Costa Rica" },
+                    { value: "CI", label: "Cote D'Ivorie" },
+                    { value: "HR", label: "Croatia (Hrvatska)" },
+                    { value: "CU", label: "Cuba" },
+                    { value: "CY", label: "Cyprus" },
+                    { value: "CZ", label: "Czech Republic" },
+                    { value: "DK", label: "Denmark" },
+                    { value: "DJ", label: "Djibouti" },
+                    { value: "DM", label: "Dominica" },
+                    { value: "DO", label: "Dominican Republic" },
+                    { value: "TP", label: "East Timor" },
+                    { value: "EC", label: "Ecuador" },
+                    { value: "EG", label: "Egypt" },
+                    { value: "SV", label: "El Salvador" },
+                    { value: "GQ", label: "Equatorial Guinea" },
+                    { value: "ER", label: "Eritrea" },
+                    { value: "EE", label: "Estonia" },
+                    { value: "ET", label: "Ethiopia" },
+                    { value: "FO", label: "Faroe Islands" },
+                    { value: "FJ", label: "Fiji" },
+                    { value: "FI", label: "Finland" },
+                    { value: "FR", label: "France" },
+                    { value: "GF", label: "French Guinea" },
+                    { value: "PF", label: "French Polynesia" },
+                    { value: "GA", label: "Gabon" },
+                    { value: "GM", label: "Gambia" },
+                    { value: "GE", label: "Georgia" },
+                    { value: "DE", label: "Germany" },
+                    { value: "GH", label: "Ghana" },
+                    { value: "GI", label: "Gibraltar" },
+                    { value: "GR", label: "Greece" },
+                    { value: "GL", label: "Greenland" },
+                    { value: "GD", label: "Grenada" },
+                    { value: "GP", label: "Guadeloupe" },
+                    { value: "GU", label: "Guam" },
+                    { value: "GT", label: "Guatemala" },
+                    { value: "GN", label: "Guinea" },
+                    { value: "GW", label: "Guinea-Bissau" },
+                    { value: "GY", label: "Guyana" },
+                    { value: "HT", label: "Haiti" },
+                    { value: "HN", label: "Honduras" },
+                    { value: "HK", label: "Hong Kong" },
+                    { value: "HU", label: "Hungary" },
+                    { value: "IS", label: "Iceland" },
+                    { value: "IN", label: "India" },
+                    { value: "ID", label: "Indonesia" },
+                    { value: "IR", label: "Iran" },
+                    { value: "IQ", label: "Iraq" },
+                    { value: "IE", label: "Ireland" },
+                    { value: "IL", label: "Israel" },
+                    { value: "IT", label: "Italy" },
+                    { value: "JM", label: "Jamaica" },
+                    { value: "JP", label: "Japan" },
+                    { value: "JO", label: "Jordan" },
+                    { value: "KZ", label: "Kazakhstan" },
+                    { value: "KE", label: "Kenya" },
+                    { value: "KI", label: "Kiribati" },
+                    { value: "KW", label: "Kuwait" },
+                    { value: "KG", label: "Kyrgyzstan" },
+                    { value: "LA", label: "Laos" },
+                    { value: "LV", label: "Latvia" },
+                    { value: "LB", label: "Lebanon" },
+                    { value: "LS", label: "Lesotho" },
+                    { value: "LR", label: "Liberia" },
+                    { value: "LY", label: "Libya" },
+                    { value: "LI", label: "Liechtenstein" },
+                    { value: "LT", label: "Lithuania" },
+                    { value: "LU", label: "Luxembourg" },
+                    { value: "MO", label: "Macau" },
+                    { value: "MK", label: "Macedonia" },
+                    { value: "MG", label: "Madagascar" },
+                    { value: "MW", label: "Malawi" },
+                    { value: "MY", label: "Malaysia" },
+                    { value: "MV", label: "Maldives" },
+                    { value: "ML", label: "Mali" },
+                    { value: "MT", label: "Malta" },
+                    { value: "MH", label: "Marshall Islands" },
+                    { value: "MQ", label: "Martinique" },
+                    { value: "MR", label: "Mauritania" },
+                    { value: "MU", label: "Mauritius" },
+                    { value: "YT", label: "Mayotte" },
+                    { value: "MX", label: "Mexico" },
+                    { value: "FM", label: "Micronesia" },
+                    { value: "MD", label: "Moldova" },
+                    { value: "MC", label: "Monaco" },
+                    { value: "MN", label: "Mongolia" },
+                    { value: "MS", label: "Montserrat" },
+                    { value: "MA", label: "Morocco" },
+                    { value: "MZ", label: "Mozambique" },
+                    { value: "MM", label: "Myanmar (Burma)" },
+                    { value: "NA", label: "Namibia" },
+                    { value: "NR", label: "Nauru" },
+                    { value: "NP", label: "Nepal" },
+                    { value: "NL", label: "Netherlands" },
+                    { value: "AN", label: "Netherlands Antilles" },
+                    { value: "NC", label: "New Caledonia" },
+                    { value: "NZ", label: "New Zealand" },
+                    { value: "NI", label: "Nicaragua" },
+                    { value: "NE", label: "Niger" },
+                    { value: "NG", label: "Nigeria" },
+                    { value: "NU", label: "Niue" },
+                    { value: "NF", label: "Norfolk Island" },
+                    { value: "KP", label: "North Korea" },
+                    { value: "NO", label: "Norway" },
+                    { value: "OM", label: "Oman" },
+                    { value: "PK", label: "Pakistan" },
+                    { value: "PW", label: "Palau" },
+                    { value: "PA", label: "Panama" },
+                    { value: "PG", label: "Papua New Guinea" },
+                    { value: "PY", label: "Paraguay" },
+                    { value: "PE", label: "Peru" },
+                    { value: "PH", label: "Philippines" },
+                    { value: "PN", label: "Pitcairn" },
+                    { value: "PL", label: "Poland" },
+                    { value: "PT", label: "Portugal" },
+                    { value: "PR", label: "Puerto Rico" },
+                    { value: "QA", label: "Qatar" },
+                    { value: "RE", label: "Reunion" },
+                    { value: "RO", label: "Romania" },
+                    { value: "RU", label: "Russia" },
+                    { value: "RW", label: "Rwanda" },
+                    { value: "SH", label: "Saint Helena" },
+                    { value: "KN", label: "Saint Kitts and Nevis" },
+                    { value: "LC", label: "Saint Lucia" },
+                    { value: "SM", label: "San Marino" },
+                    { value: "SA", label: "Saudi Arabia" },
+                    { value: "SN", label: "Senegal" },
+                    { value: "SC", label: "Seychelles" },
+                    { value: "SL", label: "Sierra Leone" },
+                    { value: "SG", label: "Singapore" },
+                    { value: "SK", label: "Slovak Republic" },
+                    { value: "SI", label: "Slovenia" },
+                    { value: "SB", label: "Solomon Islands" },
+                    { value: "SO", label: "Somalia" },
+                    { value: "ZA", label: "South Africa" },
+                    { value: "GS", label: "South Georgia" },
+                    { value: "KR", label: "South Korea" },
+                    { value: "ES", label: "Spain" },
+                    { value: "LK", label: "Sri Lanka" },
+                    { value: "SD", label: "Sudan" },
+                    { value: "SR", label: "Suriname" },
+                    { value: "SZ", label: "Swaziland" },
+                    { value: "SE", label: "Sweden" },
+                    { value: "CH", label: "Switzerland" },
+                    { value: "SY", label: "Syria" },
+                    { value: "TW", label: "Taiwan" },
+                    { value: "TJ", label: "Tajikistan" },
+                    { value: "TZ", label: "Tanzania" },
+                    { value: "TH", label: "Thailand" },
+                    { value: "TG", label: "Togo" },
+                    { value: "TK", label: "Tokelau" },
+                    { value: "TO", label: "Tonga" },
+                    { value: "TT", label: "Trinidad and Tobago" },
+                    { value: "TN", label: "Tunisia" },
+                    { value: "TR", label: "Turkey" },
+                    { value: "TM", label: "Turkmenistan" },
+                    { value: "TC", label: "Turks and Caicos Islands" },
+                    { value: "TV", label: "Tuvalu" },
+                    { value: "UG", label: "Uganda" },
+                    { value: "UA", label: "Ukraine" },
+                    { value: "AE", label: "United Arab Emirates" },
+                    { value: "UK", label: "United Kingdom" },
+                    { value: "US", label: "United States" },
+                    { value: "UY", label: "Uruguay" },
+                    { value: "UZ", label: "Uzbekistan" },
+                    { value: "VU", label: "Vanuatu" },
+                    { value: "VA", label: "Vatican City (Holy See)" },
+                    { value: "VE", label: "Venezuela" },
+                    { value: "VN", label: "Vietnam" },
+                    { value: "VG", label: "Virgin Islands (British)" },
+                    { value: "VI", label: "Virgin Islands (US)" },
+                    { value: "WF", label: "Wallis and Futuna Islands" },
+                    { value: "EH", label: "Western Sahara" },
+                    { value: "WS", label: "Western Samoa" },
+                    { value: "YE", label: "Yemen" },
+                    { value: "YU", label: "Yugoslavia" },
+                    { value: "ZM", label: "Zambia" },
+                    { value: "ZW", label: "Zimbabwe" }
+                ]
+            }
+        },
+        mounted: function () {
+            let item = this.$refs.myListBox.getItemByValue('US');
+            this.$refs.myListBox.selectItem(item);
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/listbox/righttoleftlayout/main.js b/listbox/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/righttoleftlayout/package.json b/listbox/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/selectionwithshiftctrl/App.vue b/listbox/selectionwithshiftctrl/App.vue
new file mode 100644
index 00000000..7ae59252
--- /dev/null
+++ b/listbox/selectionwithshiftctrl/App.vue
@@ -0,0 +1,76 @@
+<template>
+    <div>
+        <JqxListBox ref="myListBox"
+                    @change="change($event)"
+                    :source="source"
+                    :selectedIndex="1"
+                    :multipleextended="true"
+                    :width="200"
+                    :height="250">
+        </JqxListBox>
+
+        <div style="margin-top: 30px; font-size: 13px; font-family: Verdana;" ref="selectionLog"></div>
+    </div>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxListBox
+        },
+        data: function () {
+            return {
+                source: [
+                    "Affogato",
+                    "Americano",
+                    "Bicerin",
+                    "Breve",
+                    "Café Bombón",
+                    "Café au lait",
+                    "Caffé Corretto",
+                    "Café Crema",
+                    "Caffé Latte",
+                    "Caffé macchiato",
+                    "Café mélange",
+                    "Coffee milk",
+                    "Cafe mocha",
+                    "Cappuccino",
+                    "Carajillo",
+                    "Cortado",
+                    "Cuban espresso",
+                    "Espresso",
+                    "Eiskaffee",
+                    "The Flat White",
+                    "Frappuccino",
+                    "Galao",
+                    "Greek frappé coffee",
+                    "Iced Coffee",
+                    "Indian filter coffee",
+                    "Instant coffee",
+                    "Irish coffee",
+                    "Liqueur coffee"
+                ]
+            }
+        },
+        mounted: function () {
+            this.$refs.myListBox.focus();
+        },
+        methods: {
+            displaySelectedItems() {
+                let items = this.$refs.myListBox.getSelectedItems();
+                let selection = 'Selected Items: ';
+                for (let i = 0; i < items.length; i++) {
+                    selection += items[i].label + (i < items.length - 1 ? ', ' : '');
+                }
+                this.$refs.selectionLog.innerHTML = selection;
+            },
+            change(event) {
+                this.displaySelectedItems();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/listbox/selectionwithshiftctrl/main.js b/listbox/selectionwithshiftctrl/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/selectionwithshiftctrl/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/selectionwithshiftctrl/package.json b/listbox/selectionwithshiftctrl/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/selectionwithshiftctrl/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/textwithicons/App.vue b/listbox/textwithicons/App.vue
new file mode 100644
index 00000000..6a40ae89
--- /dev/null
+++ b/listbox/textwithicons/App.vue
@@ -0,0 +1,35 @@
+<template>
+    <JqxListBox :source="source"
+                :width="200"
+                :height="250">
+    </JqxListBox>
+</template>
+<script>
+    import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
+
+    export default {
+        components: {
+            JqxListBox
+        },
+        data: function () {
+            return {
+                source: [
+                    { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/numberinput.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxNumberInput</span></div>", title: 'jqxNumberInput' },
+                    { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/progressbar.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxProgressBar</span></div>", title: 'jqxProgressBar' },
+                    { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/calendar.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxCalendar</span></div>", title: 'jqxCalendar' },
+                    { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/button.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxButton</span></div>", title: 'jqxButton' },
+                    { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/dropdownlist.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxDropDownList</span></div>", title: 'jqxDropDownList' },
+                    { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/listbox.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxListBox</span></div>", title: 'jqxListBox' },
+                    { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/tooltip.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxTooltip</span></div>", title: 'jqxTooltip' },
+                    { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/scrollbar.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxScrollBar</span></div>", title: 'jqxScrollBar' },
+                    { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/datetimeinput.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxDateTimeInput</span></div>", title: 'jqxDateTimeInput' },
+                    { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/expander.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxExpander</span></div>", title: 'jqxExpander' },
+                    { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/menu.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxMenu</span></div>", title: 'jqxMenu' },
+                ]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/listbox/textwithicons/main.js b/listbox/textwithicons/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/textwithicons/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/textwithicons/package.json b/listbox/textwithicons/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/textwithicons/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listbox/twowaydatabinding/App.vue b/listbox/twowaydatabinding/App.vue
new file mode 100644
index 00000000..6123edb2
--- /dev/null
+++ b/listbox/twowaydatabinding/App.vue
@@ -0,0 +1,40 @@
+<template>
+    <div>
+        <div>The value is: {{ item }}</div><br />
+
+        <JqxListBox v-model="item" :width="200" :height="250" :source="source" :selectedIndex="0" />
+    </div>
+</template>
+
+<script>
+    import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
+
+    export default {
+        components: {
+            JqxListBox
+        },
+        data: function () {
+            return {
+                item: 'Affogato'
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+            [
+                'Affogato',
+                'Americano',
+                'Bicerin',
+                'Breve',
+                'Cafe Bombon',
+                'Cafe au lait',  
+                'Cafe mocha',
+                'Cappuccino',
+                'Carajillo',
+                'Iced Coffee',
+                'Instant coffee',
+                'Irish coffee',
+                'Liqueur coffee'
+            ];
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/listbox/twowaydatabinding/main.js b/listbox/twowaydatabinding/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listbox/twowaydatabinding/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listbox/twowaydatabinding/package.json b/listbox/twowaydatabinding/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listbox/twowaydatabinding/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listmenu/defaultfunctionality/App.vue b/listmenu/defaultfunctionality/App.vue
new file mode 100644
index 00000000..65b13caf
--- /dev/null
+++ b/listmenu/defaultfunctionality/App.vue
@@ -0,0 +1,904 @@
+<template>
+    <JqxListMenu :autoSeparators="true"
+                 :enableScrolling="false"
+                 :showHeader="true"
+                 :placeHolder="'Find contact...'"
+                 :width="600">
+        <ul data-role="listmenu">
+            <li>
+                <img src="../../../images/andrew.png" alt="" /><div>
+                    Andrew Fuller
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/andrew.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Andrew Fuller</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Sales Representative
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        "Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing
+                                        from the University of Dallas in 1981. He is fluent in French and Italian and reads
+                                        German. He joined the company as a sales representative, was promoted to sales manager
+                                        in January 1992 and to vice president of sales in March 1993. Andrew is a member
+                                        of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific
+                                        Rim Importers Association.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        19-Feb-52
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        14-Aug-92
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (206) 555-9482
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        908 W. Capital Way.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        98401
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        Tacoma
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        USA
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <img src="../../../images/anne.png" alt="" /><div>
+                    Anne Dodsworth
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/anne.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Anne Dodsworth</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Inside Sales Coordinator
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        Anne has a BA degree in English from St. Lawrence College. She is fluent in French
+                                        and German.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        27-Jan-66
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        15-Nov-94
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (71) 555-5598
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        7 Houndstooth Rd.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        WG2 7LT
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        London
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        UK
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <img src="../../../images/janet.png" alt="" /><div>
+                    Janet Leverling
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/janet.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Janet Leverling</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Sales Representative
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        Janet has a BS degree in chemistry from Boston College (1984). She has also completed
+                                        a certificate program in food retailing management. Janet was hired as a sales associate
+                                        in 1991 and promoted to sales representative in February 1992.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        27-Jan-69
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        15-Nov-94
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (71) 555-4444
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        Miner Rd.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        WG2 7LT
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        London
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        UK
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <img src="../../../images/laura.png" alt="" /><div>
+                    Laura Callahan
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/laura.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Laura Callahan</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Sales Representative
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        Laura received a BA in psychology from the University of Washington. She has also
+                                        completed a course in business French. She reads and writes French.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        27-Jan-66
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        15-Nov-94
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (71) 555-4444
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        7 Houndstooth Rd.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        WG2 7LT
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        London
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        UK
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <img src="../../../images/margaret.png" alt="" /><div>
+                    Margaret Peacock
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/margaret.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Margaret Peacock</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Vice President, Sales
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        Margaret holds a BA in English literature from Concordia College (1958) and an MA
+                                        from the American Institute of Culinary Arts (1966). She was assigned to the London
+                                        office temporarily from July through November 1992.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        19-Sep-37
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        17-Oct-93
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (206) 555-8122
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        4110 Old Redmond Rd.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        98052
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        Redmond
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        USA
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <img src="../../../images/michael.png" alt="" /><div>
+                    Michael Suyama
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/michael.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Michael Suyama</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Sales Representative
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        Michael is a graduate of Sussex University (MA, economics, 1983) and the University
+                                        of California at Los Angeles (MBA, marketing, 1986). He has also taken the courses
+                                        'Multi-Cultural Selling' and 'Time Management for the Sales Professional.' He is
+                                        fluent in Japanese and can read and write French, Portuguese, and Spanish.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        02-Jul-63
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        05-June-96
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (71) 555-4848
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        Coventry House
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        EC2 7JR
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        London
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        UK
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <img src="../../../images/nancy.png" alt="" /><div>
+                    Nancy Divolio
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/nancy.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Nancy Davolio</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Sales Representative
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        Education includes a BA in psychology from Colorado State University in 1970. She
+                                        also completed 'The Art of the Cold Call.' Nancy is a member of Toastmasters International.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        08-Dec-48
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        01-May-92
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (206) 555-9857
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        507 - 20th Ave. E. Apt. 2A
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        98122
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        Seattle
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        USA
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <img src="../../../images/robert.png" alt="" /><div>
+                    Robert King
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/robert.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Robert King</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Sales Representative
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        Robert King served in the Peace Corps and traveled extensively before completing
+                                        his degree in English at the University of Michigan in 1992, the year he joined
+                                        the company. After completing a course entitled 'Selling in Europe,' he was transferred
+                                        to the London office in March 1993.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        29-May-60
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        02-Jan-94
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (71) 555-5598
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        Winchester Way
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        RG1 9SP
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        London
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        UK
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <img src="../../../images/steven.png" alt="" /><div>
+                    Steven Buchanan
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/steven.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Steven Buchanan</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Sales Manager
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree
+                                        in 1976. Upon joining the company as a sales representative in 1992, he spent 6
+                                        months in an orientation program at the Seattle office and then returned to his
+                                        permanent post in London. He was promoted to sales manager in March 1993. Mr. Buchanan
+                                        has completed the courses 'Successful Telemarketing' and 'International Sales Management.'
+                                        He is fluent in French.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        04-Mar-55
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        02-May-94
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (71) 555-5598
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        908 W. Capital Way
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        98052
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        Redmond
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        USA
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </JqxListMenu>
+</template>
+<script>
+    import JqxListMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue";
+
+    export default {
+        components: {
+            JqxListMenu
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    .jqx-listmenu-item-label img {
+        width: 50px;
+        height: 55px;
+    }
+
+    .jqx-listmenu-item-label div:not(.jqx-widget-content) {
+        margin-top: -35px;
+        margin-left: 80px;
+    }
+
+    .jqx-listmenu-item {
+        background-color: white;
+        padding: 0px;
+        min-height: 57px;
+    }
+</style>
diff --git a/listmenu/defaultfunctionality/main.js b/listmenu/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listmenu/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listmenu/defaultfunctionality/package.json b/listmenu/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listmenu/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listmenu/fluidsize/App.vue b/listmenu/fluidsize/App.vue
new file mode 100644
index 00000000..8f549703
--- /dev/null
+++ b/listmenu/fluidsize/App.vue
@@ -0,0 +1,904 @@
+<template>
+    <JqxListMenu :autoSeparators="true"
+                 :enableScrolling="false"
+                 :showHeader="true"
+                 :placeHolder="'Find contact...'"
+                 :width="'60%'">
+        <ul data-role="listmenu">
+            <li>
+                <img src="../../../images/andrew.png" alt="" /><div>
+                    Andrew Fuller
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/andrew.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Andrew Fuller</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Sales Representative
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        "Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing
+                                        from the University of Dallas in 1981. He is fluent in French and Italian and reads
+                                        German. He joined the company as a sales representative, was promoted to sales manager
+                                        in January 1992 and to vice president of sales in March 1993. Andrew is a member
+                                        of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific
+                                        Rim Importers Association.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        19-Feb-52
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        14-Aug-92
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (206) 555-9482
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        908 W. Capital Way.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        98401
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        Tacoma
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        USA
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <img src="../../../images/anne.png" alt="" /><div>
+                    Anne Dodsworth
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/anne.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Anne Dodsworth</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Inside Sales Coordinator
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        Anne has a BA degree in English from St. Lawrence College. She is fluent in French
+                                        and German.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        27-Jan-66
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        15-Nov-94
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (71) 555-5598
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        7 Houndstooth Rd.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        WG2 7LT
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        London
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        UK
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <img src="../../../images/janet.png" alt="" /><div>
+                    Janet Leverling
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/janet.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Janet Leverling</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Sales Representative
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        Janet has a BS degree in chemistry from Boston College (1984). She has also completed
+                                        a certificate program in food retailing management. Janet was hired as a sales associate
+                                        in 1991 and promoted to sales representative in February 1992.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        27-Jan-69
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        15-Nov-94
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (71) 555-4444
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        Miner Rd.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        WG2 7LT
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        London
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        UK
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <img src="../../../images/laura.png" alt="" /><div>
+                    Laura Callahan
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/laura.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Laura Callahan</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Sales Representative
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        Laura received a BA in psychology from the University of Washington. She has also
+                                        completed a course in business French. She reads and writes French.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        27-Jan-66
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        15-Nov-94
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (71) 555-4444
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        7 Houndstooth Rd.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        WG2 7LT
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        London
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        UK
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <img src="../../../images/margaret.png" alt="" /><div>
+                    Margaret Peacock
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/margaret.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Margaret Peacock</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Vice President, Sales
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        Margaret holds a BA in English literature from Concordia College (1958) and an MA
+                                        from the American Institute of Culinary Arts (1966). She was assigned to the London
+                                        office temporarily from July through November 1992.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        19-Sep-37
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        17-Oct-93
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (206) 555-8122
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        4110 Old Redmond Rd.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        98052
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        Redmond
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        USA
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <img src="../../../images/michael.png" alt="" /><div>
+                    Michael Suyama
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/michael.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Michael Suyama</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Sales Representative
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        Michael is a graduate of Sussex University (MA, economics, 1983) and the University
+                                        of California at Los Angeles (MBA, marketing, 1986). He has also taken the courses
+                                        'Multi-Cultural Selling' and 'Time Management for the Sales Professional.' He is
+                                        fluent in Japanese and can read and write French, Portuguese, and Spanish.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        02-Jul-63
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        05-June-96
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (71) 555-4848
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        Coventry House
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        EC2 7JR
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        London
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        UK
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <img src="../../../images/nancy.png" alt="" /><div>
+                    Nancy Divolio
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/nancy.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Nancy Davolio</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Sales Representative
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        Education includes a BA in psychology from Colorado State University in 1970. She
+                                        also completed 'The Art of the Cold Call.' Nancy is a member of Toastmasters International.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        08-Dec-48
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        01-May-92
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (206) 555-9857
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        507 - 20th Ave. E. Apt. 2A
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        98122
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        Seattle
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        USA
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <img src="../../../images/robert.png" alt="" /><div>
+                    Robert King
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/robert.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Robert King</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Sales Representative
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        Robert King served in the Peace Corps and traveled extensively before completing
+                                        his degree in English at the University of Michigan in 1992, the year he joined
+                                        the company. After completing a course entitled 'Selling in Europe,' he was transferred
+                                        to the London office in March 1993.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        29-May-60
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        02-Jan-94
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (71) 555-5598
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        Winchester Way
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        RG1 9SP
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        London
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        UK
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <img src="../../../images/steven.png" alt="" /><div>
+                    Steven Buchanan
+                </div>
+                <ul data-role="listmenu">
+                    <li>
+                        <div style="padding: 5px;" data-role="content">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img width="50" height="50" src="../../../images/steven.png" alt="" />
+                                    </td>
+                                    <td>
+                                        <b>Steven Buchanan</b>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Title
+                                    </td>
+                                    <td>
+                                        Sales Manager
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Notes
+                                    </td>
+                                    <td>
+                                        Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree
+                                        in 1976. Upon joining the company as a sales representative in 1992, he spent 6
+                                        months in an orientation program at the Seattle office and then returned to his
+                                        permanent post in London. He was promoted to sales manager in March 1993. Mr. Buchanan
+                                        has completed the courses 'Successful Telemarketing' and 'International Sales Management.'
+                                        He is fluent in French.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Birth Date
+                                    </td>
+                                    <td>
+                                        04-Mar-55
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Hire Date
+                                    </td>
+                                    <td>
+                                        02-May-94
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Home Phone
+                                    </td>
+                                    <td>
+                                        (71) 555-5598
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Address
+                                    </td>
+                                    <td>
+                                        908 W. Capital Way
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Postal Code
+                                    </td>
+                                    <td>
+                                        98052
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        City
+                                    </td>
+                                    <td>
+                                        Redmond
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Country
+                                    </td>
+                                    <td>
+                                        USA
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </JqxListMenu>
+</template>
+<script>
+    import JqxListMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue";
+
+    export default {
+        components: {
+            JqxListMenu
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    .jqx-listmenu-item-label img {
+        width: 50px;
+        height: 55px;
+    }
+
+    .jqx-listmenu-item-label div:not(.jqx-widget-content) {
+        margin-top: -35px;
+        margin-left: 80px;
+    }
+
+    .jqx-listmenu-item {
+        background-color: white;
+        padding: 0px;
+        min-height: 57px;
+    }
+</style>
diff --git a/listmenu/fluidsize/main.js b/listmenu/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listmenu/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listmenu/fluidsize/package.json b/listmenu/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listmenu/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listmenu/nestedlists/App.vue b/listmenu/nestedlists/App.vue
new file mode 100644
index 00000000..06afd0c6
--- /dev/null
+++ b/listmenu/nestedlists/App.vue
@@ -0,0 +1,126 @@
+<template>
+    <JqxListMenu :enableScrolling="false"
+                 :showHeader="true"
+                 :showBackButton="true"
+                 :showFilter="false"
+                 :width="'50%'">
+        <ul data-role="listmenu">
+            <li>
+                OSI
+                <ul data-role="listmenu">
+                    <li>
+                        Application Layer
+                        <ol data-role="listmenu">
+                            <li>SIP</li>
+                            <li>DNS</li>
+                            <li>FTP</li>
+                            <li>RTP</li>
+                            <li>DHCP</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Presentation Layer
+                        <ol data-role="listmenu">
+                            <li>SSL</li>
+                            <li>TLS</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Session Layer
+                        <ol data-role="listmenu">
+                            <li>NetBIOS</li>
+                            <li>SPDY</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Transport Layer
+                        <ol data-role="listmenu">
+                            <li>TCP</li>
+                            <li>UDP</li>
+                            <li>SCTP</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Network Layer
+                        <ol data-role="listmenu">
+                            <li>IP</li>
+                            <li>ARP</li>
+                            <li>ICMP</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Data Link Layer
+                        <ol data-role="listmenu">
+                            <li>ATM</li>
+                            <li>SDLS</li>
+                            <li>LLC</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Physical Layer
+                        <ol data-role="listmenu">
+                            <li>EIA/TIA-232</li>
+                            <li>ITU-T V-Series</li>
+                            <li>DSL</li>
+                        </ol>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                TCP/IP
+                <ul data-role="listmenu">
+                    <li>
+                        Application layer
+                        <ol data-role="listmenu">
+                            <li>DHCP</li>
+                            <li>DNS</li>
+                            <li>FTP</li>
+                            <li>HTTP</li>
+                            <li>IMAP</li>
+                            <li>LDAP</li>
+                            <li>XMPP</li>
+                            <li>SSH</li>
+                            <li>RIP</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Transport layer
+                        <ol data-role="listmenu">
+                            <li>TCP</li>
+                            <li>UDP</li>
+                            <li>SCTP</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Internet layer
+                        <ol data-role="listmenu">
+                            <li>IP</li>
+                            <li>ICMP</li>
+                            <li>ECN</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Link layer
+                        <ol data-role="listmenu">
+                            <li>ARP</li>
+                            <li>NDP</li>
+                            <li>DSL</li>
+                        </ol>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </JqxListMenu>
+</template>
+<script>
+    import JqxListMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue";
+
+    export default {
+        components: {
+            JqxListMenu
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/listmenu/nestedlists/main.js b/listmenu/nestedlists/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listmenu/nestedlists/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listmenu/nestedlists/package.json b/listmenu/nestedlists/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listmenu/nestedlists/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/listmenu/righttoleftlayout/App.vue b/listmenu/righttoleftlayout/App.vue
new file mode 100644
index 00000000..e430027e
--- /dev/null
+++ b/listmenu/righttoleftlayout/App.vue
@@ -0,0 +1,127 @@
+<template>
+    <JqxListMenu :rtl="true"
+                 :enableScrolling="false"
+                 :showHeader="true"
+                 :showBackButton="true"
+                 :showFilter="false"
+                 :width="'50%'">
+        <ul data-role="listmenu">
+            <li>
+                OSI
+                <ul data-role="listmenu">
+                    <li>
+                        Application Layer
+                        <ol data-role="listmenu">
+                            <li>SIP</li>
+                            <li>DNS</li>
+                            <li>FTP</li>
+                            <li>RTP</li>
+                            <li>DHCP</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Presentation Layer
+                        <ol data-role="listmenu">
+                            <li>SSL</li>
+                            <li>TLS</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Session Layer
+                        <ol data-role="listmenu">
+                            <li>NetBIOS</li>
+                            <li>SPDY</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Transport Layer
+                        <ol data-role="listmenu">
+                            <li>TCP</li>
+                            <li>UDP</li>
+                            <li>SCTP</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Network Layer
+                        <ol data-role="listmenu">
+                            <li>IP</li>
+                            <li>ARP</li>
+                            <li>ICMP</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Data Link Layer
+                        <ol data-role="listmenu">
+                            <li>ATM</li>
+                            <li>SDLS</li>
+                            <li>LLC</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Physical Layer
+                        <ol data-role="listmenu">
+                            <li>EIA/TIA-232</li>
+                            <li>ITU-T V-Series</li>
+                            <li>DSL</li>
+                        </ol>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                TCP/IP
+                <ul data-role="listmenu">
+                    <li>
+                        Application layer
+                        <ol data-role="listmenu">
+                            <li>DHCP</li>
+                            <li>DNS</li>
+                            <li>FTP</li>
+                            <li>HTTP</li>
+                            <li>IMAP</li>
+                            <li>LDAP</li>
+                            <li>XMPP</li>
+                            <li>SSH</li>
+                            <li>RIP</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Transport layer
+                        <ol data-role="listmenu">
+                            <li>TCP</li>
+                            <li>UDP</li>
+                            <li>SCTP</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Internet layer
+                        <ol data-role="listmenu">
+                            <li>IP</li>
+                            <li>ICMP</li>
+                            <li>ECN</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Link layer
+                        <ol data-role="listmenu">
+                            <li>ARP</li>
+                            <li>NDP</li>
+                            <li>DSL</li>
+                        </ol>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </JqxListMenu>
+</template>
+<script>
+    import JqxListMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue";
+
+    export default {
+        components: {
+            JqxListMenu
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/listmenu/righttoleftlayout/main.js b/listmenu/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/listmenu/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/listmenu/righttoleftlayout/package.json b/listmenu/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/listmenu/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/loader/defaultfunctionality/App.vue b/loader/defaultfunctionality/App.vue
new file mode 100644
index 00000000..2787e7e1
--- /dev/null
+++ b/loader/defaultfunctionality/App.vue
@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <JqxLoader ref="jqxLoader"
+                   :imagePosition="'top'"
+                   :width="100"
+                   :height="60">
+        </JqxLoader>
+        <JqxButton @click="openLoaderClick($event)"
+                   :width="150">
+            Open Loader
+        </JqxButton>
+        <JqxButton @click="closeLoaderClick($event)"
+                   :width="100">
+            Close
+        </JqxButton>
+    </div>
+</template>
+<script>
+    import JqxLoader from "jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxLoader,
+            JqxButton
+        },
+        methods: {
+            openLoaderClick: function(event) {
+                this.$refs.jqxLoader.open();
+            },
+            closeLoaderClick: function (event) {
+                this.$refs.jqxLoader.close();
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        display: inline-block;
+        margin-right: 5px;
+    }
+</style>
diff --git a/loader/defaultfunctionality/main.js b/loader/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/loader/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/loader/defaultfunctionality/package.json b/loader/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/loader/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/loader/loaderwithjqxgrid/App.vue b/loader/loaderwithjqxgrid/App.vue
new file mode 100644
index 00000000..9015027c
--- /dev/null
+++ b/loader/loaderwithjqxgrid/App.vue
@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <JqxLoader ref="jqxLoader"
+                   :autoOpen="true"
+                   :imagePosition="'top'"
+                   :width="100"
+                   :height="60">
+        </JqxLoader>
+        <JqxGrid :source="dataAdapter"
+                 :columnsresize="true"
+                 :showdefaultloadelement="false"
+                 :autoshowloadelement="false"
+                 :columns="columns"
+                 :width="850"
+                 :height="400">
+        </JqxGrid>
+    </div>
+</template>
+<script>
+    import JqxLoader from "jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue";
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+
+    export default {
+        components: {
+            JqxLoader,
+            JqxGrid
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source, {
+                    downloadComplete: function (data, status, xhr) { },
+                    loadComplete: () => {
+                        this.$refs.jqxLoader.close();
+                    },
+                    loadError: (xhr, status, error) => { console.log(xhr, status, error); },
+                    formatData: (data) => {
+                        Object.assign(data, {
+                            featureClass: "P",
+                            style: "full",
+                            maxRows: 50,
+                            username: "jqwidgets"
+                        });
+                        return data;
+                    }
+                }),
+                columns: [
+                    { text: 'Country Name', datafield: 'countryName', width: 200 },
+                    { text: 'City', datafield: 'name', width: 170 },
+                    { text: 'Population', datafield: 'population', cellsformat: 'f', width: 170 },
+                    { text: 'Continent Code', datafield: 'continentCode', minwidth: 110 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: "jsonp",
+                datafields: [
+                    { name: 'countryName', type: 'string' },
+                    { name: 'name', type: 'string' },
+                    { name: 'population', type: 'float' },
+                    { name: 'continentCode', type: 'string' }
+                ],
+                url: "http://api.geonames.org/searchJSON"
+            }
+        }
+    }
+
+</script>
+
+<style>
+    .jqx-button {
+        display: inline-block;
+        margin-right: 5px;
+    }
+</style>
diff --git a/loader/loaderwithjqxgrid/main.js b/loader/loaderwithjqxgrid/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/loader/loaderwithjqxgrid/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/loader/loaderwithjqxgrid/package.json b/loader/loaderwithjqxgrid/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/loader/loaderwithjqxgrid/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/loader/righttoleftlayout/App.vue b/loader/righttoleftlayout/App.vue
new file mode 100644
index 00000000..1f9a36ce
--- /dev/null
+++ b/loader/righttoleftlayout/App.vue
@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <JqxLoader ref="jqxLoader"
+                   :rtl="true"
+                   :imagePosition="'top'"
+                   :width="100"
+                   :height="60">
+        </JqxLoader>
+        <JqxButton @click="openLoaderClick($event)"
+                   :width="150">
+            Open Loader
+        </JqxButton>
+        <JqxButton @click="closeLoaderClick($event)"
+                   :width="100">
+            Close
+        </JqxButton>
+    </div>
+</template>
+<script>
+    import JqxLoader from "jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxLoader,
+            JqxButton
+        },
+        methods: {
+            openLoaderClick: function (event) {
+                this.$refs.jqxLoader.open();
+            },
+            closeLoaderClick: function (event) {
+                this.$refs.jqxLoader.close();
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        display: inline-block;
+        margin-right: 5px;
+    }
+</style>
diff --git a/loader/righttoleftlayout/main.js b/loader/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/loader/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/loader/righttoleftlayout/package.json b/loader/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/loader/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/loader/showmodalloader/App.vue b/loader/showmodalloader/App.vue
new file mode 100644
index 00000000..fbbc9e7b
--- /dev/null
+++ b/loader/showmodalloader/App.vue
@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <JqxLoader ref="jqxLoader"
+                   :isModal="true"
+                   :imagePosition="'top'"
+                   :width="100"
+                   :height="60">
+        </JqxLoader>
+        <JqxButton @click="openLoaderClick($event)"
+                   :width="150">
+            Open Loader
+        </JqxButton>
+    </div>
+</template>
+<script>
+    import JqxLoader from "jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxLoader,
+            JqxButton
+        },
+        methods: {
+            openLoaderClick: function (event) {
+                this.$refs.jqxLoader.open();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/loader/showmodalloader/main.js b/loader/showmodalloader/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/loader/showmodalloader/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/loader/showmodalloader/package.json b/loader/showmodalloader/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/loader/showmodalloader/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/loader/showonlyicon/App.vue b/loader/showonlyicon/App.vue
new file mode 100644
index 00000000..94fc0c78
--- /dev/null
+++ b/loader/showonlyicon/App.vue
@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <JqxLoader ref="jqxLoader"
+                   :text="''"
+                   :width="100"
+                   :height="60">
+        </JqxLoader>
+        <JqxButton @click="openLoaderClick($event)"
+                   :width="150">
+            Open Loader
+        </JqxButton>
+        <JqxButton @click="closeLoaderClick($event)"
+                   :width="100">
+            Close
+        </JqxButton>
+    </div>
+</template>
+<script>
+    import JqxLoader from "jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxLoader,
+            JqxButton
+        },
+        methods: {
+            openLoaderClick: function (event) {
+                this.$refs.jqxLoader.open();
+            },
+            closeLoaderClick: function (event) {
+                this.$refs.jqxLoader.close();
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        display: inline-block;
+        margin-right: 5px;
+    }
+</style>
diff --git a/loader/showonlyicon/main.js b/loader/showonlyicon/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/loader/showonlyicon/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/loader/showonlyicon/package.json b/loader/showonlyicon/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/loader/showonlyicon/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/loader/showonlytext/App.vue b/loader/showonlytext/App.vue
new file mode 100644
index 00000000..b8fabd96
--- /dev/null
+++ b/loader/showonlytext/App.vue
@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <JqxLoader ref="jqxLoader"
+                   :html="'<div class=\'jqx-loader-text\'>Show only text in loader...</div>'"
+                   :width="100"
+                   :height="35">
+        </JqxLoader>
+        <JqxButton @click="openLoaderClick($event)"
+                   :width="150">
+            Open Loader
+        </JqxButton>
+        <JqxButton @click="closeLoaderClick($event)"
+                   :width="100">
+            Close
+        </JqxButton>
+    </div>
+</template>
+<script>
+    import JqxLoader from "jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxLoader,
+            JqxButton
+        },
+        methods: {
+            openLoaderClick: function (event) {
+                this.$refs.jqxLoader.open();
+            },
+            closeLoaderClick: function (event) {
+                this.$refs.jqxLoader.close();
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        display: inline-block;
+        margin-right: 5px;
+    }
+</style>
diff --git a/loader/showonlytext/main.js b/loader/showonlytext/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/loader/showonlytext/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/loader/showonlytext/package.json b/loader/showonlytext/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/loader/showonlytext/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/maskedinput/defaultfunctionality/App.vue b/maskedinput/defaultfunctionality/App.vue
new file mode 100644
index 00000000..c7e1fb31
--- /dev/null
+++ b/maskedinput/defaultfunctionality/App.vue
@@ -0,0 +1,76 @@
+<template>
+    <div>
+        <div id="jqxWidget" style="font-size: 13px; font-family: Verdana;">
+            <div style="margin-top: 10px;">
+                Numeric
+            </div>
+            <JqxMaskedInput ref="numericInput"
+                            :width="250"
+                            :height="25">
+            </JqxMaskedInput>
+            <div style='margin-top: 10px;'>
+                Zip Code
+            </div>
+            <JqxMaskedInput ref="zipCodeInput"
+                            :mask="'#####-####'"
+                            :width="250"
+                            :height="25">
+            </JqxMaskedInput>
+            <div style='margin-top: 10px;'>
+                SSN
+            </div>
+            <JqxMaskedInput ref="ssnInput"
+                            :mask="'###-##-####'"
+                            :width="250"
+                            :height="25">
+            </JqxMaskedInput>
+            <div style='margin-top: 10px;'>
+                Phone Number
+            </div>
+            <JqxMaskedInput ref="phoneInput"
+                            :mask="'(###)###-####'"
+                            :width="250"
+                            :height="25">
+            </JqxMaskedInput>
+            <div style='margin-top: 10px;'>
+                IP Address (ex: 255.255.255.255)
+            </div>
+            <JqxMaskedInput ref="regexInput"
+                            :mask="'[0-2][0-5][0-5].[0-2][0-5][0-5].[0-2][0-5][0-5].[0-2][0-5][0-5]'"
+                            :width="250"
+                            :height="25">
+            </JqxMaskedInput>
+            <div style='margin-top: 10px;'>
+                Disabled
+            </div>
+            <JqxMaskedInput ref="disabledInput"
+                            :disabled="true"
+                            :width="250"
+                            :height="25">
+            </JqxMaskedInput>
+        </div>
+        <br />
+        <JqxButton @click="clear()" :width="120">Clear Values</JqxButton>
+    </div>
+</template>
+<script>
+    import JqxMaskedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxMaskedInput,
+            JqxButton
+        },
+        methods: {
+            clear: function() {
+                this.$refs.numericInput.clear();
+                this.$refs.zipCodeInput.clear();
+                this.$refs.ssnInput.clear();
+                this.$refs.phoneInput.clear();
+                this.$refs.regexInput.clear();
+                this.$refs.disabledInput.clear();
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/maskedinput/defaultfunctionality/main.js b/maskedinput/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/maskedinput/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/maskedinput/defaultfunctionality/package.json b/maskedinput/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/maskedinput/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/maskedinput/events/App.vue b/maskedinput/events/App.vue
new file mode 100644
index 00000000..429136c4
--- /dev/null
+++ b/maskedinput/events/App.vue
@@ -0,0 +1,52 @@
+<template>
+    <div>
+        <div style="font-size: 13px; font-family: verdana; margin-top: 10px;">
+            Phone Number
+        </div>
+        <JqxMaskedInput style="margin-top: 3px;" ref="numericInput"
+                        @change="change($event)"
+                        :mask="'(###)###-####'"
+                        :width="250"
+                        :height="25">
+        </JqxMaskedInput>
+        <div style='margin-left: 0px; margin-top: 20px;'>
+            <div>
+                <span>
+                    Events:
+                </span>
+                <JqxPanel ref="events" :height="250" :width="300">
+                </JqxPanel>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import JqxMaskedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxMaskedInput,
+            JqxPanel
+        },
+        methods: {
+            change: function() {
+                let value = this.$refs.numericInput.val();
+                this.$refs.events.prepend('<div style="margin-top: 5px;">Value: ' + value + '</div>');
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    .jqx-panel {
+        border: none;
+    }
+</style>
diff --git a/maskedinput/events/main.js b/maskedinput/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/maskedinput/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/maskedinput/events/package.json b/maskedinput/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/maskedinput/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/maskedinput/fluidsize/App.vue b/maskedinput/fluidsize/App.vue
new file mode 100644
index 00000000..99c39232
--- /dev/null
+++ b/maskedinput/fluidsize/App.vue
@@ -0,0 +1,23 @@
+<template>
+    <div>
+        <div style="font-size: 13px; font-family: verdana; margin-top: 10px;">
+            Phone Number
+        </div>
+        <JqxMaskedInput :mask="'(###)###-####'"
+                        :width="'50%'"
+                        :height="35">
+        </JqxMaskedInput>
+    </div>
+</template>
+<script>
+    import JqxMaskedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue";
+
+    export default {
+        components: {
+            JqxMaskedInput
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/maskedinput/fluidsize/main.js b/maskedinput/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/maskedinput/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/maskedinput/fluidsize/package.json b/maskedinput/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/maskedinput/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/maskedinput/righttoleftlayout/App.vue b/maskedinput/righttoleftlayout/App.vue
new file mode 100644
index 00000000..3c67ad9e
--- /dev/null
+++ b/maskedinput/righttoleftlayout/App.vue
@@ -0,0 +1,47 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left;">
+        <div style='margin-top: 10px;'>
+            Numeric
+        </div>
+        <JqxMaskedInput :rtl="true"
+                        :width="250"
+                        :height="25">
+        </JqxMaskedInput>
+        <div style='margin-top: 10px;'>
+            Zip Code
+        </div>
+        <JqxMaskedInput :mask="'#####-####'"
+                        :rtl="true"
+                        :width="250"
+                        :height="25">
+        </JqxMaskedInput>
+        <div style='margin-top: 10px;'>
+            SSN
+        </div>
+        <JqxMaskedInput :mask="'###-##-####'"
+                        :rtl="true"
+                        :width="250"
+                        :height="25">
+        </JqxMaskedInput>
+        <div style='margin-top: 10px;'>
+            Date
+        </div>
+        <JqxMaskedInput :mask="'##/##/####'"
+                        :rtl="true"
+                        :width="250"
+                        :height="25">
+        </JqxMaskedInput>
+    </div>
+</template>
+<script>
+    import JqxMaskedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue";
+
+    export default {
+        components: {
+            JqxMaskedInput
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/maskedinput/righttoleftlayout/main.js b/maskedinput/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/maskedinput/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/maskedinput/righttoleftlayout/package.json b/maskedinput/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/maskedinput/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/maskedinput/twowaydatabinding/App.vue b/maskedinput/twowaydatabinding/App.vue
new file mode 100644
index 00000000..fb4623ef
--- /dev/null
+++ b/maskedinput/twowaydatabinding/App.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <div>The value is: {{ value }}</div><br />
+
+        <JqxMaskedInput v-model="value" :width="200" :height="25" :mask="'(###)###-####'" />
+    </div>
+</template>
+
+<script>
+    import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
+
+    export default {
+        components: {
+            JqxMaskedInput
+        },
+        data: function () {
+            return {
+                value: ''
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/maskedinput/twowaydatabinding/main.js b/maskedinput/twowaydatabinding/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/maskedinput/twowaydatabinding/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/maskedinput/twowaydatabinding/package.json b/maskedinput/twowaydatabinding/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/maskedinput/twowaydatabinding/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/menu/centermenuitems/App.vue b/menu/centermenuitems/App.vue
new file mode 100644
index 00000000..1ef3eb0f
--- /dev/null
+++ b/menu/centermenuitems/App.vue
@@ -0,0 +1,113 @@
+<template>
+    <JqxMenu ref="jqxMenu"
+             :width="'90%'"
+             :height="30">
+        <ul>
+            <li><a href="#">Home</a></li>
+            <li>
+                Solutions
+                <ul style='width: 250px;'>
+                    <li><a href="#Education">Education</a></li>
+                    <li><a href="#Financial">Financial services</a></li>
+                    <li><a href="#Government">Government</a></li>
+                    <li><a href="#Manufacturing">Manufacturing</a></li>
+                    <li type='separator'></li>
+                    <li>
+                        Software Solutions
+                        <ul style='width: 220px;'>
+                            <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
+                            <li><a href="#Mobile">Mobile</a></li>
+                            <li><a href="#RIA">Rich Internet applications</a></li>
+                            <li><a href="#TechnicalCommunication">Technical communication</a></li>
+                            <li><a href="#Training">Training and eLearning</a></li>
+                            <li><a href="#WebConferencing">Web conferencing</a></li>
+                        </ul>
+                    </li>
+                    <li><a href="#">All industries and solutions</a></li>
+                </ul>
+            </li>
+            <li>
+                Products
+                <ul>
+                    <li><a href="#PCProducts">PC products</a></li>
+                    <li><a href="#MobileProducts">Mobile products</a></li>
+                    <li><a href="#AllProducts">All products</a></li>
+                </ul>
+            </li>
+            <li>
+                Support
+                <ul style='width: 200px;'>
+                    <li><a href="#SupportHome">Support home</a></li>
+                    <li><a href="#CustomerService">Customer Service</a></li>
+                    <li><a href="#KB">Knowledge base</a></li>
+                    <li><a href="#Books">Books</a></li>
+                    <li><a href="#Training">Training and certification</a></li>
+                    <li><a href="#SupportPrograms">Support programs</a></li>
+                    <li><a href="#Forums">Forums</a></li>
+                    <li><a href="#Documentation">Documentation</a></li>
+                    <li><a href="#Updates">Updates</a></li>
+                </ul>
+            </li>
+            <li>
+                Communities
+                <ul style='width: 200px;'>
+                    <li><a href="#Designers">Designers</a></li>
+                    <li><a href="#Developers">Developers</a></li>
+                    <li><a href="#Educators">Educators and students</a></li>
+                    <li><a href="#Partners">Partners</a></li>
+                    <li type='separator'></li>
+                    <li>By resource</li>
+                </ul>
+            </li>
+            <li>
+                Company
+                <ul style='width: 180px;'>
+                    <li><a href="#About">About Us</a></li>
+                    <li><a href="#Press">Press</a></li>
+                    <li><a href="#Investor">Investor Relations</a></li>
+                    <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
+                    <li><a href="#Careers">Careers</a></li>
+                    <li><a href="#Showcase">Showcase</a></li>
+                    <li><a href="#Events">Events</a></li>
+                    <li><a href="#ContactUs">Contact Us</a></li>
+                    <li><a href="#Become an affiliate">Become an affiliate</a></li>
+                </ul>
+            </li>
+        </ul>
+    </JqxMenu>
+</template>
+<script>
+    import JqxMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue";
+
+    export default {
+        components: {
+            JqxMenu
+        },
+        mounted: function () {
+            window.addEventListener('resize', this.onResize);
+            this.centerItems();
+        },
+        methods: {
+            centerItems: function () {
+                let firstItem = this.$refs.jqxMenu.$el.firstElementChild.children[0];
+                let width = 0;
+                let borderOffset = 2;
+                let allLiElements = $(this.$refs.jqxMenu.$el.firstElementChild)[0].children;
+                for (let i = 0; i < allLiElements.length; i++) {
+                    let currentLi = allLiElements[i];
+                    width += currentLi.offsetWidth + borderOffset;
+                }
+                let menuWidth = this.$refs.jqxMenu.$el.firstElementChild.offsetWidth;
+                let calculatedOffset = (menuWidth / 2) - (width / 2);
+                firstItem.style.margin = '0 0 0 ' + (calculatedOffset).toString() + 'px';
+            },
+            onResize: function (event) {
+                let innerWidth = event.target.innerWidth;
+                this.centerItems();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/menu/centermenuitems/main.js b/menu/centermenuitems/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/menu/centermenuitems/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/menu/centermenuitems/package.json b/menu/centermenuitems/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/menu/centermenuitems/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/menu/columns/App.vue b/menu/columns/App.vue
new file mode 100644
index 00000000..d3f5e1cf
--- /dev/null
+++ b/menu/columns/App.vue
@@ -0,0 +1,123 @@
+<template>
+    <div style="height: 300px; margin-left: 20px;">
+        <JqxMenu :autoOpen="false"
+                 :autoCloseOnMouseLeave="false"
+                 :showTopLevelArrows="true"
+                 :width="650"
+                 :height="30">
+            <ul>
+                <li><a href="#Home">Home</a></li>
+                <li>
+                    Products
+                    <ul style="width: 450px;">
+                        <li style="list-style: none;" ignoretheme="true">
+                            <div>
+                                <div style="float: left; width: 50%;">
+                                    <div class="jqx-menuitem-header" style="color: inherit; margin-left: 5px; padding-bottom: 5px;">
+                                        <b>Processors</b>
+                                    </div>
+                                    <ul class="megamenu-ul">
+                                        <li><a href="#processors_02">2nd Gen Intel Core i7</a></li>
+                                        <li><a href="#processors_03">2nd Gen Intel Core i5</a></li>
+                                        <li><a href="#processors_04">2nd Gen Intel Core i3</a></li>
+                                        <li><a href="#processors_05">Intel Xeon E7 Family</a></li>
+                                        <li><a href="#processors_06">Intel Xeon 5000 Sequence</a></li>
+                                        <li><a href="#processors_07">Intel Xeon E3 Family</a></li>
+                                        <li><a href="#processors_08">Itanium</a></li>
+                                        <li><a href="#processors_09">Intel Atom</a></li>
+                                    </ul>
+                                    <div class="jqx-menuitem-header" style="margin-left: 5px; padding-bottom: 5px;">
+                                        <b>Personal Computers</b>
+                                    </div>
+                                    <ul class="megamenu-ul">
+                                        <li><a href="#PC_01">Desktops</a></li>
+                                        <li><a href="#PC_02">Laptops</a></li>
+                                    </ul>
+                                    <div class="jqx-menuitem-header" style="margin-left: 5px; padding-bottom: 5px;">
+                                        <b>Enterprise Systems</b>
+                                    </div>
+                                    <ul class="megamenu-ul">
+                                        <li><a href="#Servers_01">Servers</a></li>
+                                        <li><a href="#Servers_02">Workstations</a></li>
+                                    </ul>
+                                </div>
+                                <div style="float: left; width: 50%;">
+                                    <div class="jqx-menuitem-header" style="margin-left: 5px; padding-bottom: 5px;">
+                                        <b>Motherboards</b>
+                                    </div>
+                                    <ul class="megamenu-ul">
+                                        <li><a href="#IntelSeries_01">Intel Desktop Extreme Series</a></li>
+                                        <li><a href="#IntelSeries_02">Intel Desktop Media Series</a></li>
+                                        <li><a href="#IntelSeries_03">Intel Desktop Executive Series</a></li>
+                                        <li><a href="#IntelSeries_04">Intel Desktop Essential Series</a></li>
+                                        <li><a href="#IntelSeries_05">Intel Desktop Mature Series</a></li>
+                                        <li><a href="#IntelSeries_06">Intel Desktop Classic Series</a></li>
+                                        <li><a href="#IntelSeries_07">Server Motherboards</a></li>
+                                        <li><a href="#IntelSeries_08">Intel Innovation Series</a></li>
+                                    </ul>
+                                    <div class="jqx-menuitem-header" style="margin-left: 5px; padding-bottom: 5px;">
+                                        <b>Consumer Electronics</b>
+                                    </div>
+                                    <ul class="megamenu-ul">
+                                        <li><a href="#Netbooks">Netbooks</a></li>
+                                        <li><a href="#SmartTVs">Smart TVs</a></li>
+                                        <li><a href="#Tablets">Tablets</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Purchase
+                    <ul style="width: 170px;" class="megamenu-ul">
+                        <li ignoretheme="true"><a href="#RequestQuote">Request a Quote</a></li>
+                        <li ignoretheme="true"><a href="#ContactSales">Contact Sales</a></li>
+                        <li ignoretheme="true"><a href="#PurchaseOrders">Purchase Orders</a></li>
+                        <li ignoretheme="true"><a href="#Discounts">Volume Discounts</a></li>
+                        <li ignoretheme="true"><a href="#Support">Support</a></li>
+                        <li ignoretheme="true"><a href="#FAQ">FAQ</a></li>
+                        <li ignoretheme="true"><a class="buyonline" href="#Buy">Buy Online</a></li>
+                    </ul>
+                </li>
+                <li><a href="#Services">Services</a></li>
+                <li>
+                    About Us
+                    <ul style="width: 170px;" class="megamenu-ul">
+                        <li ignoretheme="true"><a href="#News">Company News</a></li>
+                        <li ignoretheme="true"><a href="#Events">Events</a></li>
+                        <li ignoretheme="true"><a href="#Contact">Contact Us</a></li>
+                        <li ignoretheme="true"><a href="#Mission">Our Mission</a></li>
+                    </ul>
+                </li>
+                <li style="list-style: none;" ignoretheme="true">
+                    <div style="float: left; height: 30px; margin-top: 1px; margin-left: 20px;">
+                        <input class="jqx-input jqx-widget-content" style="float: left; height: 22px; width: 130px;" />
+                    </div>
+                    <span class="jqx-menu-search" style="margin-top: 1px; margin-left: 3px; padding: 2px; float: left;">Search</span>
+                </li>
+            </ul>
+        </JqxMenu>
+        <br />
+    </div>
+</template>
+<script>
+    import JqxMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxLinkButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlinkbutton.vue";
+
+    export default {
+        components: {
+            JqxMenu,
+            JqxButton,
+            JqxLinkButton
+        },
+        mounted: function () {
+            jqwidgets.createInstance('.jqx-menu-search', 'jqxButton', { width: 60, height: 18 });
+            jqwidgets.createInstance('.buyonline', 'jqxLinkButton', { width: 150, height: 25 });
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/menu/columns/main.js b/menu/columns/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/menu/columns/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/menu/columns/package.json b/menu/columns/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/menu/columns/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/menu/contextmenu/App.vue b/menu/contextmenu/App.vue
new file mode 100644
index 00000000..1df39a4f
--- /dev/null
+++ b/menu/contextmenu/App.vue
@@ -0,0 +1,107 @@
+<template>
+    <div @contextmenu="contextmenuMenu($event)"
+         @mousedown="mousedown($event)"
+         style="vertical-align: middle; text-align: center; background: #eee; height: 400px; width: 400px;">
+        <JqxMenu ref="jqxMenu"
+                 :mode="'popup'"
+                 :autoOpenPopup="false"
+                 :width="120"
+                 :height="140">
+            <ul>
+                <li><a href="#">Home</a></li>
+                <li>
+                    About Us
+                    <ul>
+                        <li><a href="#">History</a></li>
+                        <li><a href="#">Our Vision</a></li>
+                        <li>
+                            <a href="#">The Team</a>
+                            <ul>
+                                <li><a href="#">Brigita</a></li>
+                                <li><a href="#">John</a></li>
+                                <li><a href="#">Michael</a></li>
+                                <li><a href="#">Peter</a></li>
+                                <li><a href="#">Sarah</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#">Clients</a></li>
+                        <li><a href="#">Testimonials</a></li>
+                        <li><a href="#">Press</a></li>
+                        <li><a href="#">FAQs</a></li>
+                    </ul>
+                </li>
+                <li>
+                    Services
+                    <ul>
+                        <li><a href="#">Product Development</a></li>
+                        <li><a href="#">Delivery</a></li>
+                        <li><a href="#">Shop Online</a></li>
+                        <li><a href="#">Support</a></li>
+                        <li><a href="#">Training &amp; Consulting</a></li>
+                    </ul>
+                </li>
+                <li>
+                    Products
+                    <ul>
+                        <li>
+                            <a href="#">New</a>
+                            <ul>
+                                <li><a href="#">Corporate Use</a></li>
+                                <li><a href="#">Private Use</a></li>
+                            </ul>
+                        </li>
+                        <li>
+                            <a href="#">Used</a>
+                            <ul>
+                                <li><a href="#">Corporate Use</a></li>
+                                <li><a href="#">Private Use</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#">Featured</a></li>
+                        <li><a href="#">Top Rated</a></li>
+                        <li><a href="#">Prices</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#">Contact Us</a>
+                    <ul>
+                        <li><a href="#">Enquiry Form</a></li>
+                        <li><a href="#">Map &amp; Driving Directions</a></li>
+                        <li><a href="#">Your Feedback</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </JqxMenu>
+        <span style="font-size: 14px; position: relative; top: 180px; font-family: Verdana Arial;">
+            Right-Click here to Open the Menu
+        </span>
+    </div>
+</template>
+<script>
+    import JqxMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue";
+
+    export default {
+        components: {
+            JqxMenu
+        },
+        methods: {
+            isRightClick: function (event) {
+                let rightclick;
+                if (!event) event = window.event;
+                if (event.which) rightclick = (event.which == 3);
+                else if (event.button) rightclick = (event.button == 2);
+                return rightclick;
+            },
+            contextmenuMenu: function (e) {
+                e.preventDefault();
+            },
+            mousedown: function (event) {
+                let rightClick = this.isRightClick(event) || jqx.mobile.isTouchDevice();
+                if (rightClick) {
+                    this.$refs.jqxMenu.open(parseInt(event.clientX), parseInt(event.clientY));
+                    return false;
+                }
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/menu/contextmenu/main.js b/menu/contextmenu/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/menu/contextmenu/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/menu/contextmenu/package.json b/menu/contextmenu/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/menu/contextmenu/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/menu/defaultfunctionality/App.vue b/menu/defaultfunctionality/App.vue
new file mode 100644
index 00000000..4e8f29b1
--- /dev/null
+++ b/menu/defaultfunctionality/App.vue
@@ -0,0 +1,200 @@
+<template>
+    <div style="height: 300px;">
+        <JqxMenu ref="myMenu" :width="670" :height="30">
+            <ul>
+                <li><a href="#Home">Home</a></li>
+                <li>
+                    Solutions
+                    <ul style="width: 250px;">
+                        <li><a href="#Education">Education</a></li>
+                        <li><a href="#Financial">Financial services</a></li>
+                        <li><a href="#Government">Government</a></li>
+                        <li><a href="#Manufacturing">Manufacturing</a></li>
+                        <li type="separator"></li>
+                        <li>
+                            Software Solutions
+                            <ul style="width: 220px;">
+                                <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
+                                <li><a href="#Mobile">Mobile</a></li>
+                                <li><a href="#RIA">Rich Internet applications</a></li>
+                                <li><a href="#TechnicalCommunication">Technical communication</a></li>
+                                <li><a href="#Training">Training and eLearning</a></li>
+                                <li><a href="#WebConferencing">Web conferencing</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#">All industries and solutions</a></li>
+                    </ul>
+                </li>
+                <li>
+                    Products
+                    <ul>
+                        <li><a href="#PCProducts">PC products</a></li>
+                        <li><a href="#MobileProducts">Mobile products</a></li>
+                        <li><a href="#AllProducts">All products</a></li>
+                    </ul>
+                </li>
+                <li>
+                    Support
+                    <ul style="width: 200px;">
+                        <li><a href="#SupportHome">Support home</a></li>
+                        <li><a href="#CustomerService">Customer Service</a></li>
+                        <li><a href="#KB">Knowledge base</a></li>
+                        <li><a href="#Books">Books</a></li>
+                        <li><a href="#Training">Training and certification</a></li>
+                        <li><a href="#SupportPrograms">Support programs</a></li>
+                        <li><a href="#Forums">Forums</a></li>
+                        <li><a href="#Documentation">Documentation</a></li>
+                        <li><a href="#Updates">Updates</a></li>
+                    </ul>
+                </li>
+                <li>
+                    Communities
+                    <ul style="width: 200px;">
+                        <li><a href="#Designers">Designers</a></li>
+                        <li><a href="#Developers">Developers</a></li>
+                        <li><a href="#Educators">Educators and students</a></li>
+                        <li><a href="#Partners">Partners</a></li>
+                        <li type="separator"></li>
+                        <li>
+                            By resource
+                            <ul>
+                                <li><a href="#Labs">Labs</a></li>
+                                <li><a href="#TV">TV</a></li>
+                                <li><a href="#Forums">Forums</a></li>
+                                <li><a href="#Exchange">Exchange</a></li>
+                                <li><a href="#Blogs">Blogs</a></li>
+                                <li><a href="#Experience Design">Experience Design</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Company
+                    <ul style="width: 180px;">
+                        <li><a href="#About">About Us</a></li>
+                        <li><a href="#Press">Press</a></li>
+                        <li><a href="#Investor">Investor Relations</a></li>
+                        <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
+                        <li><a href="#Careers">Careers</a></li>
+                        <li><a href="#Showcase">Showcase</a></li>
+                        <li><a href="#Events">Events</a></li>
+                        <li><a href="#ContactUs">Contact Us</a></li>
+                        <li><a href="#Become an affiliate">Become an affiliate</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </JqxMenu>
+        <br />
+        <div style="margin-left: 60px; margin-top: 120px;">
+            <div style="font-size: 16px; font-family: Verdana Arial;">
+                Settings
+            </div>
+            <div style="margin-top: 20px; font-size: 14px; font-family: Verdana Arial; float: left;">
+                <JqxCheckBox @change="animationOnChange($event)"
+                             :width="150" :height="20" :checked="true">
+                    Enable Animation
+                </JqxCheckBox>
+                <div style="margin-top: 20px;">
+                    <JqxCheckBox style="margin-top: 20px;" @change="disabledOnChange($event)"
+                                 :width="150" :height="20" :checked="false">
+                        Disabled
+                    </JqxCheckBox>
+                </div>
+            </div>
+            <div style="margin-top: 20px; margin-left: 60px; font-size: 14px; font-family: Verdana Arial; float: left;">
+                <JqxCheckBox @change="hoverOnChange($event)"
+                             :width="150" :height="20" :checked="true">
+                    Enable Hover
+                </JqxCheckBox>
+                <div style="margin-top: 20px;">
+                    <JqxCheckBox @change="openOnChange($event)"
+                                 :width="150" :height="20" :checked="true">
+                        Auto Open
+                    </JqxCheckBox>
+                </div>
+            </div>
+            <div style="margin-top: 20px; margin-left: 60px; font-size: 14px; font-family: Verdana Arial; float: left;">
+                <JqxCheckBox @change="topLevelArrowsOnChange($event)"
+                             :width="200" :height="20">
+                    Show Top-Level Arrows
+                </JqxCheckBox>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import JqxMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+
+    export default {
+        components: {
+            JqxMenu,
+            JqxCheckBox
+        },
+        methods: {
+            animationOnChange: function(event) {
+                let value = event.args.checked;
+                // enable or disable the menu's animation.
+                if (!value) {
+                    this.$refs.myMenu.setOptions
+                        ({
+                            animationShowDuration: 0,
+                            animationHideDuration: 0,
+                            animationShowDelay: 0
+                        });
+                }
+                else {
+                    this.$refs.myMenu.setOptions
+                        ({
+                            animationShowDuration: 300,
+                            animationHideDuration: 200,
+                            animationShowDelay: 200
+                        });
+                }
+            },
+            disabledOnChange: function (event) {
+                let value = event.args.checked;
+                // enable or disable the menu
+                if (!value) {
+                    this.$refs.myMenu.disabled = false;
+                }
+                else {
+                    this.$refs.myMenu.disabled = true;
+                }
+            },
+            hoverOnChange: function (event) {
+                let value = event.args.checked;
+                // enable or disable the menu's hover effect.
+                if (!value) {
+                    this.$refs.myMenu.enableHover = false;
+                }
+                else {
+                    this.$refs.myMenu.enableHover = true;
+                }
+            },
+            openOnChange: function (event) {
+                let value = event.args.checked;
+                // enable or disable the opening of the top level menu items when the user hovers them.
+                if (!value) {
+                    this.$refs.myMenu.autoOpen = false;
+                }
+                else {
+                    this.$refs.myMenu.autoOpen = true;
+                }
+            },
+            topLevelArrowsOnChange: function (event) {
+                let value = event.args.checked;
+                // enable or disable the top level arrows.
+                if (!value) {
+                    this.$refs.myMenu.showTopLevelArrows = false;
+                }
+                else {
+                    this.$refs.myMenu.showTopLevelArrows = true;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/menu/defaultfunctionality/main.js b/menu/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/menu/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/menu/defaultfunctionality/package.json b/menu/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/menu/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/menu/fluidsize/App.vue b/menu/fluidsize/App.vue
new file mode 100644
index 00000000..a8acbd7e
--- /dev/null
+++ b/menu/fluidsize/App.vue
@@ -0,0 +1,153 @@
+<template>
+    <JqxMenu :width="'100%'"
+             :height="'100%'">
+        <ul>
+            <li><a href="#Home">Home</a></li>
+            <li>
+                Solutions
+                <ul style="width: 250px;">
+                    <li><a href="#Education">Education</a></li>
+                    <li><a href="#Financial">Financial services</a></li>
+                    <li><a href="#Government">Government</a></li>
+                    <li><a href="#Manufacturing">Manufacturing</a></li>
+                    <li type="separator"></li>
+                    <li>
+                        Software Solutions
+                        <ul style="width: 220px;">
+                            <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
+                            <li><a href="#Mobile">Mobile</a></li>
+                            <li><a href="#RIA">Rich Internet applications</a></li>
+                            <li><a href="#TechnicalCommunication">Technical communication</a></li>
+                            <li><a href="#Training">Training and eLearning</a></li>
+                            <li><a href="#WebConferencing">Web conferencing</a></li>
+                        </ul>
+                    </li>
+                    <li><a href="#">All industries and solutions</a></li>
+                </ul>
+            </li>
+            <li>
+                Products
+                <ul>
+                    <li><a href="#PCProducts">PC products</a></li>
+                    <li><a href="#MobileProducts">Mobile products</a></li>
+                    <li><a href="#AllProducts">All products</a></li>
+                </ul>
+            </li>
+            <li>
+                Support
+                <ul style="width: 200px;">
+                    <li><a href="#SupportHome">Support home</a></li>
+                    <li><a href="#CustomerService">Customer Service</a></li>
+                    <li><a href="#KB">Knowledge base</a></li>
+                    <li><a href="#Books">Books</a></li>
+                    <li><a href="#Training">Training and certification</a></li>
+                    <li><a href="#SupportPrograms">Support programs</a></li>
+                    <li><a href="#Forums">Forums</a></li>
+                    <li><a href="#Documentation">Documentation</a></li>
+                    <li><a href="#Updates">Updates</a></li>
+                </ul>
+            </li>
+            <li>
+                Communities
+                <ul style="width: 200px;">
+                    <li><a href="#Designers">Designers</a></li>
+                    <li><a href="#Developers">Developers</a></li>
+                    <li><a href="#Educators">Educators and students</a></li>
+                    <li><a href="#Partners">Partners</a></li>
+                    <li type="separator"></li>
+                    <li>By resource</li>
+                </ul>
+            </li>
+            <li>
+                Company
+                <ul style="width: 180px;">
+                    <li><a href="#About">About Us</a></li>
+                    <li><a href="#Press">Press</a></li>
+                    <li><a href="#Investor">Investor Relations</a></li>
+                    <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
+                    <li><a href="#Careers">Careers</a></li>
+                    <li><a href="#Showcase">Showcase</a></li>
+                    <li><a href="#Events">Events</a></li>
+                    <li><a href="#ContactUs">Contact Us</a></li>
+                    <li><a href="#Become an affiliate">Become an affiliate</a></li>
+                </ul>
+            </li>
+        </ul>
+    </JqxMenu>
+</template>
+<script>
+    import JqxMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+
+    export default {
+        components: {
+            JqxMenu,
+            JqxCheckBox
+        },
+        methods: {
+            animationOnChange: function(event) {
+                let value = event.args.checked;
+                // enable or disable the menu's animation.
+                if (!value) {
+                    this.$refs.myMenu.setOptions
+                        ({
+                            animationShowDuration: 0,
+                            animationHideDuration: 0,
+                            animationShowDelay: 0
+                        });
+                }
+                else {
+                    this.$refs.myMenu.setOptions
+                        ({
+                            animationShowDuration: 300,
+                            animationHideDuration: 200,
+                            animationShowDelay: 200
+                        });
+                }
+            },
+            disabledOnChange: function (event) {
+                let value = event.args.checked;
+                // enable or disable the menu
+                if (!value) {
+                    this.$refs.myMenu.disabled = false;
+                }
+                else {
+                    this.$refs.myMenu.disabled = true;
+                }
+            },
+            hoverOnChange: function (event) {
+                let value = event.args.checked;
+                // enable or disable the menu's hover effect.
+                if (!value) {
+                    this.$refs.myMenu.enableHover = false;
+                }
+                else {
+                    this.$refs.myMenu.enableHover = true;
+                }
+            },
+            openOnChange: function (event) {
+                let value = event.args.checked;
+                // enable or disable the opening of the top level menu items when the user hovers them.
+                if (!value) {
+                    this.$refs.myMenu.autoOpen = false;
+                }
+                else {
+                    this.$refs.myMenu.autoOpen = true;
+                }
+            },
+            topLevelArrowsOnChange: function (event) {
+                let value = event.args.checked;
+                // enable or disable the top level arrows.
+                if (!value) {
+                    this.$refs.myMenu.showTopLevelArrows = false;
+                }
+                else {
+                    this.$refs.myMenu.showTopLevelArrows = true;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/menu/fluidsize/main.js b/menu/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/menu/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/menu/fluidsize/package.json b/menu/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/menu/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/menu/images/App.vue b/menu/images/App.vue
new file mode 100644
index 00000000..a06f6827
--- /dev/null
+++ b/menu/images/App.vue
@@ -0,0 +1,107 @@
+<template>
+    <div style="height: 300px;">
+        <JqxMenu :mode="'vertical'"
+                 :width="150"
+                 :height="225">
+            <ul>
+                <li>
+                    <img style="float: left; margin-right: 5px;" src="../../../images/mailIcon.png" /><span>Mail</span>
+                </li>
+                <li>
+                    <img style="float: left; margin-right: 5px;" src="../../../images/calendarIcon.png" /><span>Calendar</span>
+                </li>
+                <li>
+                    <img style="float: left; margin-right: 5px;" src="../../../images/contactsIcon.png" /><span>Contacts</span>
+                </li>
+                <li>
+                    <img style="float: left; margin-right: 5px;" src="../../../images/folder.png" /><span>
+                        <span>Inbox</span>
+                    </span>
+                    <ul>
+                        <li>
+                            <img style="float: left; margin-right: 5px;" src="../../../images/folder.png" /><span>jQWidgets</span>
+                            <ul>
+                                <li>
+                                    <img style="float: left; margin-right: 5px;" src="../../../images/folder.png" /><span>Admin</span>
+                                </li>
+                                <li>
+                                    <img style="float: left; margin-right: 5px;" src="../../../images/folder.png" /><span>Corporate</span>
+                                </li>
+                                <li>
+                                    <img style="float: left; margin-right: 5px;" src="../../../images/folder.png" /><span>Finance</span>
+                                </li>
+                                <li>
+                                    <img style="float: left; margin-right: 5px;" src="../../../images/folder.png" /><span>Other</span>
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            <img style="float: left; margin-right: 5px;" src="../../../images/folder.png" /><span>Personal</span>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <img style="float: left; margin-right: 5px;" src="../../../images/recycle.png" />
+                    <span>Deleted Items</span>
+                    <ul>
+                        <li>
+                            <img style="float: left; margin-right: 5px;" src="../../../images/folder.png" /><span>Today</span>
+                        </li>
+                        <li>
+                            <img style="float: left; margin-right: 5px;" src="../../../images/folder.png" /><span>
+                                Last
+                                Week
+                            </span>
+                        </li>
+                        <li>
+                            <img style="float: left; margin-right: 5px;" src="../../../images/folder.png" /><span>
+                                Last
+                                Month
+                            </span>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <img style="float: left; margin-right: 5px;" src="../../../images/settings.png" /><span>Settings</span>
+                    <ul style="width: 230px;">
+                        <li>
+                            <JqxCheckBox style="float: left; margin-right: 5px;" :checked="true">
+                            </JqxCheckBox>
+                            Enable Auto-Save
+                        </li>
+                        <li>
+                            <JqxCheckBox style="float: left; margin-right: 5px;">
+                            </JqxCheckBox>
+                            Send email as anonymous
+                        </li>
+                        <li>
+                            <JqxCheckBox style="float: left; margin-right: 5px;">
+                            </JqxCheckBox>
+                            Save sent emails
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <img style="float: left; margin-right: 5px;" src="../../../images/notesIcon.png" /><span>Notes</span>
+                </li>
+                <li>
+                    <img style="float: left; margin-right: 5px;" src="../../../images/favorites.png" /><span>Favorites</span>
+                </li>
+            </ul>
+        </JqxMenu>
+    </div>
+</template>
+<script>
+    import JqxMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+
+    export default {
+        components: {
+            JqxMenu,
+            JqxCheckBox
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/menu/images/main.js b/menu/images/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/menu/images/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/menu/images/package.json b/menu/images/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/menu/images/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/menu/jsonmenu/App.vue b/menu/jsonmenu/App.vue
new file mode 100644
index 00000000..66d3ef4d
--- /dev/null
+++ b/menu/jsonmenu/App.vue
@@ -0,0 +1,125 @@
+<template>
+    <div>
+        <JqxMenu @itemclick="itemclick($event)"
+                 :source="records"
+                 :width="405"
+                 :height="30">
+        </JqxMenu>
+        <div style="margin-top: 50px; font-size: 13px; font-family: Verdana;" ref="eventLog"></div>
+    </div>
+</template>
+<script>
+    import JqxMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue"
+
+    export default {
+        components: {
+            JqxMenu
+        },
+        data: function () {
+            return {
+                records: this.getAdapter(this.source).getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }])
+            }
+        },
+        beforeCreate: function () {
+            const data = [
+                {
+                    'id': '12',
+                    'text': 'Frappuccino',
+                    'parentid': '-1',
+                    'subMenuWidth': '250px'
+                },
+                {
+                    'text': 'Chocolate Beverage',
+                    'id': '1',
+                    'parentid': '-1',
+                    'subMenuWidth': '250px'
+                }, {
+                    'id': '2',
+                    'parentid': '1',
+                    'text': 'Hot Chocolate'
+                }, {
+                    'id': '3',
+                    'parentid': '1',
+                    'text': 'Peppermint Hot Chocolate'
+                }, {
+                    'id': '4',
+                    'parentid': '1',
+                    'text': 'Salted Caramel Hot Chocolate'
+                }, {
+                    'id': '5',
+                    'parentid': '1',
+                    'text': 'White Hot Chocolate'
+                }, {
+                    'id': '6',
+                    'text': 'Espresso Beverage',
+                    'parentid': '-1',
+                    'subMenuWidth': '200px'
+                }, {
+                    'id': '7',
+                    'parentid': '6',
+                    'text': 'Caffe Americano'
+                }, {
+                    'id': '8',
+                    'text': 'Caffe Latte',
+                    'parentid': '6'
+                }, {
+                    'id': '9',
+                    'text': 'Caffe Mocha',
+                    'parentid': '6'
+                }, {
+                    'id': '10',
+                    'text': 'Cappuccino',
+                    'parentid': '6'
+                }, {
+                    'id': '11',
+                    'text': 'Pumpkin Spice Latte',
+                    'parentid': '6'
+                }, {
+                    'id': '13',
+                    'text': 'Caffe Vanilla Frappuccino',
+                    'parentid': '12'
+                }, {
+                    'id': '15',
+                    'text': '450 calories',
+                    'parentid': '13'
+                }, {
+                    'id': '16',
+                    'text': '16g fat',
+                    'parentid': '13'
+                }, {
+                    'id': '17',
+                    'text': '13g protein',
+                    'parentid': '13'
+                }, {
+                    'id': '14',
+                    'text': 'Caffe Vanilla Frappuccino Light',
+                    'parentid': '12'
+                }];
+
+            // prepare the data
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'id' },
+                    { name: 'parentid' },
+                    { name: 'text' },
+                    { name: 'subMenuWidth' }
+                ],
+                id: 'id',
+                localdata: data
+            };
+        },
+        methods: {
+            getAdapter: function (source) {
+                // create data adapter and perform data
+                return new jqx.dataAdapter(this.source, { autoBind: true });
+            },
+            itemclick: function (event) {
+                this.$refs.eventLog.innerHTML = 'Id: ' + event.args.id + ', Text: ' + event.args.innerText;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/menu/jsonmenu/main.js b/menu/jsonmenu/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/menu/jsonmenu/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/menu/jsonmenu/package.json b/menu/jsonmenu/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/menu/jsonmenu/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/menu/keyboardnavigation/App.vue b/menu/keyboardnavigation/App.vue
new file mode 100644
index 00000000..423f31d7
--- /dev/null
+++ b/menu/keyboardnavigation/App.vue
@@ -0,0 +1,128 @@
+<template>
+    <div>
+        <JqxMenu ref="jqxMenu"
+                 @itemclick="itemclick($event)"
+                 :showTopLevelArrows="true"
+                 :keyboardNavigation="true"
+                 :width="700"
+                 :height="30">
+            <ul>
+                <li><a href="#Home">Home</a></li>
+                <li>
+                    Solutions
+                    <ul style="width: 250px;">
+                        <li><a href="#Education">Education</a></li>
+                        <li><a href="#Financial">Financial services</a></li>
+                        <li><a href="#Government">Government</a></li>
+                        <li><a href="#Manufacturing">Manufacturing</a></li>
+                        <li type="separator"></li>
+                        <li>
+                            Software Solutions
+                            <ul style="width: 220px;">
+                                <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
+                                <li><a href="#Mobile">Mobile</a></li>
+                                <li><a href="#RIA">Rich Internet applications</a></li>
+                                <li><a href="#TechnicalCommunication">Technical communication</a></li>
+                                <li><a href="#Training">Training and eLearning</a></li>
+                                <li><a href="#WebConferencing">Web conferencing</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#">All industries and solutions</a></li>
+                    </ul>
+                </li>
+                <li>
+                    Products
+                    <ul>
+                        <li><a href="#PCProducts">PC products</a></li>
+                        <li><a href="#MobileProducts">Mobile products</a></li>
+                        <li><a href="#AllProducts">All products</a></li>
+                    </ul>
+                </li>
+                <li>
+                    Support
+                    <ul style="width: 200px;">
+                        <li><a href="#SupportHome">Support home</a></li>
+                        <li><a href="#CustomerService">Customer Service</a></li>
+                        <li><a href="#KB">Knowledge base</a></li>
+                        <li><a href="#Books">Books</a></li>
+                        <li><a href="#Training">Training and certification</a></li>
+                        <li><a href="#SupportPrograms">Support programs</a></li>
+                        <li><a href="#Forums">Forums</a></li>
+                        <li><a href="#Documentation">Documentation</a></li>
+                        <li><a href="#Updates">Updates</a></li>
+                    </ul>
+                </li>
+                <li>
+                    Communities
+                    <ul style="width: 200px;">
+                        <li><a href="#Designers">Designers</a></li>
+                        <li><a href="#Developers">Developers</a></li>
+                        <li><a href="#Educators">Educators and students</a></li>
+                        <li><a href="#Partners">Partners</a></li>
+                        <li type="separator"></li>
+                        <li>
+                            By resource
+                            <ul>
+                                <li><a href="#Labs">Labs</a></li>
+                                <li><a href="#TV">TV</a></li>
+                                <li><a href="#Forums">Forums</a></li>
+                                <li><a href="#Exchange">Exchange</a></li>
+                                <li><a href="#Blogs">Blogs</a></li>
+                                <li><a href="#Experience Design">Experience Design</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Company
+                    <ul style="width: 180px;">
+                        <li><a href="#About">About Us</a></li>
+                        <li><a href="#Press">Press</a></li>
+                        <li><a href="#Investor">Investor Relations</a></li>
+                        <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
+                        <li><a href="#Careers">Careers</a></li>
+                        <li><a href="#Showcase">Showcase</a></li>
+                        <li><a href="#Events">Events</a></li>
+                        <li><a href="#ContactUs">Contact Us</a></li>
+                        <li><a href="#Become an affiliate">Become an affiliate</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </JqxMenu>
+        <div style="font-family: Verdana; font-size: 12px; width: 400px; margin-left: 20px; float: left;">
+            <br /><br />
+            <div ref="log"></div>
+            <br /><br />
+            <ul>
+                <li><b>Tab</b> - Once the focus is received, users will be able to use the keyboard to change the focused menu item.</li>
+                <li><b>Shift+Tab</b> - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous menu item.</li>
+                <li><b>Up/Down</b> arrow keys - select previous or next item in a vertical menu or sub menu.</li>
+                <li><b>Left/Right</b> arrow keys - select previous or next item in a horizontal menu.</li>
+                <li><b>Alt Up/Down</b> arrow keys - opens or closes the popup.</li>
+                <li><b>Alt Left/Right</b> arrow keys - opens or closes the popup in a sub menu item or vertical menu.</li>
+                <li><b>Esc</b> - closes all popups.</li>
+                <li><b>Enter</b> - Triggers the item's click.</li>
+            </ul>
+        </div>
+    </div>
+</template>
+<script>
+    import JqxMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue"
+
+    export default {
+        components: {
+            JqxMenu
+        },
+        mounted: function () {
+            this.$refs.jqxMenu.focus();
+        },
+        methods: {
+            itemclick: function (event) {
+                this.$refs.log.innerHTML = "Clicked: " + event.args.innerText;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/menu/keyboardnavigation/main.js b/menu/keyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/menu/keyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/menu/keyboardnavigation/package.json b/menu/keyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/menu/keyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/menu/loadmenufromarray/App.vue b/menu/loadmenufromarray/App.vue
new file mode 100644
index 00000000..a2eb442d
--- /dev/null
+++ b/menu/loadmenufromarray/App.vue
@@ -0,0 +1,46 @@
+<template>
+    <div style="float: left;">
+        <JqxMenu :source="source"
+                 :mode="'vertical'"
+                 :width="180"
+                 :height="180">
+        </JqxMenu>
+    </div>
+</template>
+<script>
+    import JqxMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue"
+
+    export default {
+        components: {
+            JqxMenu
+        },
+        data: function () {
+            return {
+                source: [
+                    {
+                        html: "<img src='../../../images/mailIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>Mail</span>",
+                        items: [
+                            { html: "<img src='../../../images/calendarIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>Calendar</span>" },
+                            { html: "<img src='../../../images/contactsIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>Contacts</span>" }
+                        ]
+                    },
+                    {
+                        html: "<img src='../../../images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Inbox</span>",
+                        items: [
+                            { html: "<img src='../../../images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Admin</span>" },
+                            { html: "<img src='../../../images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Corporate</span>" },
+                            { html: "<img src='../../../images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Finance</span>" },
+                            { html: "<img src='../../../images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Other</span>" }]
+                    },
+                    { html: "<img src='../../../images/recycle.png'/><span style='position: relative; left: 3px; top: -2px;'>Deleted Items</span>" },
+                    { html: "<img src='../../../images/notesIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>Notes</span>" },
+                    { html: "<img src='../../../images/settings.png'/><span style='position: relative; left: 3px; top: -2px;'>Settings</span>" },
+                    { html: "<img src='../../../images/favorites.png'/><span style='position: relative; left: 3px; top: -2px;'>Favorites</span>" }
+                ]
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/menu/loadmenufromarray/main.js b/menu/loadmenufromarray/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/menu/loadmenufromarray/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/menu/loadmenufromarray/package.json b/menu/loadmenufromarray/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/menu/loadmenufromarray/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/menu/minimizedmenu/App.vue b/menu/minimizedmenu/App.vue
new file mode 100644
index 00000000..545047da
--- /dev/null
+++ b/menu/minimizedmenu/App.vue
@@ -0,0 +1,72 @@
+<template>
+    <div>
+        <JqxMenu ref="myMenu"
+                 :autoSizeMainItems="true"
+                 :width="'100%'"
+                 :height="32">
+            <ul>
+                <li><a href="#Home">Home</a></li>
+                <li>
+                    <a href="#Solutions">Solutions</a>
+                    <ul style="width: 250px;">
+                        <li><a href="#Education">Education</a></li>
+                        <li><a href="#Financial">Financial services</a></li>
+                        <li><a href="#Government">Government</a></li>
+                        <li><a href="#Manufacturing">Manufacturing</a></li>
+                        <li type="separator"></li>
+                        <li>
+                            Software Solutions
+                            <ul style="width: 220px;">
+                                <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
+                                <li><a href="#Mobile">Mobile</a></li>
+                                <li><a href="#RIA">Rich Internet applications</a></li>
+                                <li><a href="#TechnicalCommunication">Technical communication</a></li>
+                                <li><a href="#Training">Training and eLearning</a></li>
+                                <li><a href="#WebConferencing">Web conferencing</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#">All industries and solutions</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#Products">Products</a>
+                    <ul>
+                        <li><a href="#PCProducts">PC products</a></li>
+                        <li><a href="#MobileProducts">Mobile products</a></li>
+                        <li><a href="#AllProducts">All products</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </JqxMenu>
+        <br />
+        <br />
+        <JqxCheckBox ref="myCheckBox" @change="change($event)" :checked="true">Minimized</JqxCheckBox>
+    </div>
+</template>
+<script>
+    import JqxMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue"
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue"
+
+    export default {
+        components: {
+            JqxMenu,
+            JqxCheckBox
+        },
+        mounted: function () {
+            this.$refs.myMenu.minimize();
+        },
+        methods: {
+            change: function(event) {
+                if (this.$refs.myCheckBox.val()) {
+                    this.$refs.myMenu.minimize();
+                }
+                else {
+                    this.$refs.myMenu.restore();
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/menu/minimizedmenu/main.js b/menu/minimizedmenu/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/menu/minimizedmenu/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/menu/minimizedmenu/package.json b/menu/minimizedmenu/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/menu/minimizedmenu/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/menu/opendirection/App.vue b/menu/opendirection/App.vue
new file mode 100644
index 00000000..d8574a86
--- /dev/null
+++ b/menu/opendirection/App.vue
@@ -0,0 +1,62 @@
+<template>
+    <div style="margin-top: 100px; width: 310px;">
+        <JqxMenu ref="myMenu"
+                 :width="310" :height="30" :mode="'horizontal'" :showTopLevelArrows="true">
+            <ul>
+                <li style="width: 80px;">
+                    <a href="#">About Us</a>
+                    <ul>
+                        <li><a href="#">History</a></li>
+                        <li><a href="#">Our Vision</a></li>
+                        <li>
+                            <a href="#">The Team</a>
+                            <ul>
+                                <li><a href="#">Brigita</a></li>
+                                <li><a href="#">John</a></li>
+                                <li><a href="#">Michael</a></li>
+                                <li><a href="#">Peter</a></li>
+                                <li><a href="#">Sarah</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#">Clients</a></li>
+                        <li><a href="#">Testimonials</a></li>
+                        <li><a href="#">Press</a></li>
+                        <li><a href="#">FAQs</a></li>
+                    </ul>
+                </li>
+                <li id='Services'>
+                    <a href="#">Services</a>
+                    <ul>
+                        <li><a href="#">Delivery</a></li>
+                        <li><a href="#">Shop Online</a></li>
+                        <li><a href="#">Support</a></li>
+                    </ul>
+                </li>
+                <li id='ContactUs'>
+                    <a href="#">Contact Us</a>
+                    <ul>
+                        <li><a href="#">Enquiry Form</a></li>
+                        <li><a href="#">Map &amp; Driving Directions</a></li>
+                        <li><a href="#">Your Feedback</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </JqxMenu>
+    </div>
+</template>
+<script>
+    import JqxMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue"
+
+    export default {
+        components: {
+            JqxMenu
+        },
+        mounted: function () {
+            this.$refs.myMenu.setItemOpenDirection('Services', 'left', 'up');
+            this.$refs.myMenu.setItemOpenDirection('ContactUs', 'left', 'down');
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/menu/opendirection/main.js b/menu/opendirection/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/menu/opendirection/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/menu/opendirection/package.json b/menu/opendirection/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/menu/opendirection/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/menu/righttoleftlayout/App.vue b/menu/righttoleftlayout/App.vue
new file mode 100644
index 00000000..1d7bdfbe
--- /dev/null
+++ b/menu/righttoleftlayout/App.vue
@@ -0,0 +1,103 @@
+<template>
+    <div style="height: 300px; float: right; margin-left: 5px;">
+        <JqxMenu :rtl="true"
+                 :width="600"
+                 :height="30">
+            <ul>
+                <li><a href="#Home">Home</a></li>
+                <li>
+                    Solutions
+                    <ul style="width: 250px;">
+                        <li><a href="#Education">Education</a></li>
+                        <li><a href="#Financial">Financial services</a></li>
+                        <li><a href="#Government">Government</a></li>
+                        <li><a href="#Manufacturing">Manufacturing</a></li>
+                        <li type="separator"></li>
+                        <li>
+                            Software Solutions
+                            <ul style="width: 220px;">
+                                <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
+                                <li><a href="#Mobile">Mobile</a></li>
+                                <li><a href="#RIA">Rich Internet applications</a></li>
+                                <li><a href="#TechnicalCommunication">Technical communication</a></li>
+                                <li><a href="#Training">Training and eLearning</a></li>
+                                <li><a href="#WebConferencing">Web conferencing</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#">All industries and solutions</a></li>
+                    </ul>
+                </li>
+                <li>
+                    Products
+                    <ul>
+                        <li><a href="#PCProducts">PC products</a></li>
+                        <li><a href="#MobileProducts">Mobile products</a></li>
+                        <li><a href="#AllProducts">All products</a></li>
+                    </ul>
+                </li>
+                <li>
+                    Support
+                    <ul style="width: 200px;">
+                        <li><a href="#SupportHome">Support home</a></li>
+                        <li><a href="#CustomerService">Customer Service</a></li>
+                        <li><a href="#KB">Knowledge base</a></li>
+                        <li><a href="#Books">Books</a></li>
+                        <li><a href="#Training">Training and certification</a></li>
+                        <li><a href="#SupportPrograms">Support programs</a></li>
+                        <li><a href="#Forums">Forums</a></li>
+                        <li><a href="#Documentation">Documentation</a></li>
+                        <li><a href="#Updates">Updates</a></li>
+                    </ul>
+                </li>
+                <li>
+                    Communities
+                    <ul style="width: 200px;">
+                        <li><a href="#Designers">Designers</a></li>
+                        <li><a href="#Developers">Developers</a></li>
+                        <li><a href="#Educators">Educators and students</a></li>
+                        <li><a href="#Partners">Partners</a></li>
+                        <li type="separator"></li>
+                        <li>
+                            By resource
+                            <ul>
+                                <li><a href="#Labs">Labs</a></li>
+                                <li><a href="#TV">TV</a></li>
+                                <li><a href="#Forums">Forums</a></li>
+                                <li><a href="#Exchange">Exchange</a></li>
+                                <li><a href="#Blogs">Blogs</a></li>
+                                <li><a href="#Experience Design">Experience Design</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Company
+                    <ul style="width: 180px;">
+                        <li><a href="#About">About Us</a></li>
+                        <li><a href="#Press">Press</a></li>
+                        <li><a href="#Investor">Investor Relations</a></li>
+                        <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
+                        <li><a href="#Careers">Careers</a></li>
+                        <li><a href="#Showcase">Showcase</a></li>
+                        <li><a href="#Events">Events</a></li>
+                        <li><a href="#ContactUs">Contact Us</a></li>
+                        <li><a href="#Become an affiliate">Become an affiliate</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </JqxMenu>
+        <br />
+    </div>
+</template>
+<script>
+    import JqxMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue"
+
+    export default {
+        components: {
+            JqxMenu
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/menu/righttoleftlayout/main.js b/menu/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/menu/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/menu/righttoleftlayout/package.json b/menu/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/menu/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/menu/verticalmenu/App.vue b/menu/verticalmenu/App.vue
new file mode 100644
index 00000000..a26b562f
--- /dev/null
+++ b/menu/verticalmenu/App.vue
@@ -0,0 +1,86 @@
+<template>
+    <div style="width: 110px;">
+        <JqxMenu :mode="'vertical'"
+                 :width="120">
+            <ul>
+                <li><a href="#">Home</a></li>
+                <li>
+                    About Us
+                    <ul>
+                        <li><a href="#">History</a></li>
+                        <li><a href="#">Our Vision</a></li>
+                        <li>
+                            <a href="#">The Team</a>
+                            <ul>
+                                <li><a href="#">Brigita</a></li>
+                                <li><a href="#">John</a></li>
+                                <li><a href="#">Michael</a></li>
+                                <li><a href="#">Peter</a></li>
+                                <li><a href="#">Sarah</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#">Clients</a></li>
+                        <li><a href="#">Testimonials</a></li>
+                        <li><a href="#">Press</a></li>
+                        <li><a href="#">FAQs</a></li>
+                    </ul>
+                </li>
+                <li>
+                    Services
+                    <ul>
+                        <li><a href="#">Product Development</a></li>
+                        <li><a href="#">Delivery</a></li>
+                        <li><a href="#">Shop Online</a></li>
+                        <li><a href="#">Support</a></li>
+                        <li><a href="#">Training &amp; Consulting</a></li>
+                    </ul>
+                </li>
+                <li>
+                    Products
+                    <ul>
+                        <li>
+                            <a href="#">New</a>
+                            <ul>
+                                <li><a href="#">Corporate Use</a></li>
+                                <li><a href="#">Private Use</a></li>
+                            </ul>
+                        </li>
+                        <li>
+                            <a href="#">Used</a>
+                            <ul>
+                                <li><a href="#">Corporate Use</a></li>
+                                <li><a href="#">Private Use</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#">Featured</a></li>
+                        <li><a href="#">Top Rated</a></li>
+                        <li><a href="#">Prices</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Gallery</a></li>
+                <li><a href="#">Events</a></li>
+                <li><a href="#">Careers</a></li>
+                <li>
+                    <a href="#">Contact Us</a>
+                    <ul>
+                        <li><a href="#">Enquiry Form</a></li>
+                        <li><a href="#">Map &amp; Driving Directions</a></li>
+                        <li><a href="#">Your Feedback</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </JqxMenu>
+    </div>
+</template>
+<script>
+    import JqxMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue"
+
+    export default {
+        components: {
+            JqxMenu
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/menu/verticalmenu/main.js b/menu/verticalmenu/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/menu/verticalmenu/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/menu/verticalmenu/package.json b/menu/verticalmenu/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/menu/verticalmenu/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/menu/xmlmenu/App.vue b/menu/xmlmenu/App.vue
new file mode 100644
index 00000000..fad1b5d1
--- /dev/null
+++ b/menu/xmlmenu/App.vue
@@ -0,0 +1,49 @@
+<template>
+    <JqxMenu :source="records"
+             :mode="'vertical'"
+             :width="150">
+    </JqxMenu>
+</template>
+<script>
+    import JqxMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue"
+
+    export default {
+        components: {
+            JqxMenu
+        },
+        data: function () {
+            return {
+                records: this.getAdapter(this.source).getGroupedRecords(['ContactTitle', 'ContactName'], 'items', 'label', [{ name: 'ContactName', map: 'label' }])
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: "xml",
+                datafields: [
+                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
+                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' },
+                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle' },
+                    { name: 'City', map: 'm\\:properties>d\\:City' },
+                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode' },
+                    { name: 'Country', map: 'm\\:properties>d\\:Country' }
+                ],
+                root: "entry",
+                record: "content",
+                id: 'm\\:properties>d\\:CustomerID',
+                url: "../sampledata/customers.xml",
+                async: false
+            }
+        },
+        methods: {
+            getAdapter: function(source) {
+                let dataAdapter = new jqx.dataAdapter(source);
+                // perform Data Binding.
+                dataAdapter.dataBind();
+                return dataAdapter;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/menu/xmlmenu/main.js b/menu/xmlmenu/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/menu/xmlmenu/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/menu/xmlmenu/package.json b/menu/xmlmenu/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/menu/xmlmenu/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/navbar/defaultfunctionality/App.vue b/navbar/defaultfunctionality/App.vue
new file mode 100644
index 00000000..616899e1
--- /dev/null
+++ b/navbar/defaultfunctionality/App.vue
@@ -0,0 +1,82 @@
+<template>
+    <div style="width: 80%;">
+        NavBar with 2 Items. Each item is with 50% width.
+        <br />
+        <JqxNavBar :height="40" :selectedItem="0">
+            <ul>
+                <li>1</li>
+                <li>2</li>
+            </ul>
+        </JqxNavBar>
+        <br />
+        NavBar with 3 Items. Each item is with 33.33% width.
+        <br />
+        <JqxNavBar :height="40" :selectedItem="0">
+            <ul>
+                <li>1</li>
+                <li>2</li>
+                <li>3</li>
+            </ul>
+        </JqxNavBar>
+        <br />
+        NavBar with 4 Items. Each item is with 25% width.
+        <br />
+        <JqxNavBar :height="40" :selectedItem="0">
+            <ul>
+                <li>1</li>
+                <li>2</li>
+                <li>3</li>
+                <li>4</li>
+            </ul>
+        </JqxNavBar>
+        <br />
+        NavBar with 5 Items. Each item is with 20% width.
+        <br />
+        <JqxNavBar :height="40" :selectedItem="0">
+            <ul>
+                <li>1</li>
+                <li>2</li>
+                <li>3</li>
+                <li>4</li>
+                <li>5</li>
+            </ul>
+        </JqxNavBar>
+        <br />
+        NavBar with more than 5 Items. Items are displayed in 2 columns and each item is with 50% width.
+        <br />
+        <JqxNavBar :height="160" :selectedItem="0">
+            <ul>
+                <li>1</li>
+                <li>2</li>
+                <li>3</li>
+                <li>4</li>
+                <li>5</li>
+                <li>6</li>
+                <li>7</li>
+                <li>8</li>
+            </ul>
+        </JqxNavBar>
+        <br />
+        NavBar with "columns" set to ["30%", "50%", "20%"].
+        <br />
+        <JqxNavBar :height="40" :selectedItem="0" :columns="['30%', '50%', '20%']">
+            <ul>
+                <li>1</li>
+                <li>2</li>
+                <li>3</li>
+            </ul>
+        </JqxNavBar>
+    </div>
+</template>
+<script>
+    import JqxNavBar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue"
+
+    export default {
+        components: {
+            JqxNavBar
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/navbar/defaultfunctionality/main.js b/navbar/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/navbar/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/navbar/defaultfunctionality/package.json b/navbar/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/navbar/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/navbar/minimizednavbar/App.vue b/navbar/minimizednavbar/App.vue
new file mode 100644
index 00000000..02aa58ea
--- /dev/null
+++ b/navbar/minimizednavbar/App.vue
@@ -0,0 +1,54 @@
+<template>
+    <JqxNavBar :selection="false"
+               :height="'auto'">
+        <ul>
+            <li>
+                Minimized NavBar with Vertical Layout
+                <JqxNavBar :minimizedTitle="'NavBar 1'"
+                           :minimized="true"
+                           :minimizedHeight="40"
+                           :height="120"
+                           :orientation="'vertical'"
+                           :selectedItem="0">
+                    <ul>
+                        <li>1</li>
+                        <li>2</li>
+                        <li>3</li>
+                    </ul>
+                </JqxNavBar>
+            </li>
+            <li>
+                Minimized NavBar with Horizontal Layout
+                <JqxNavBar :minimizedTitle="'NavBar 2'"
+                           :minimized="true"
+                           :minimizedHeight="40"
+                           :height="120"
+                           :selectedItem="0">
+                    <ul>
+                        <li>1</li>
+                        <li>2</li>
+                        <li>3</li>
+                    </ul>
+                </JqxNavBar>
+            </li>
+        </ul>
+    </JqxNavBar>
+</template>
+<script>
+    import JqxNavBar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue"
+
+    export default {
+        components: {
+            JqxNavBar
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+</style>
diff --git a/navbar/minimizednavbar/main.js b/navbar/minimizednavbar/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/navbar/minimizednavbar/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/navbar/minimizednavbar/package.json b/navbar/minimizednavbar/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/navbar/minimizednavbar/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/navbar/righttoleftlayout/App.vue b/navbar/righttoleftlayout/App.vue
new file mode 100644
index 00000000..a2b95391
--- /dev/null
+++ b/navbar/righttoleftlayout/App.vue
@@ -0,0 +1,23 @@
+<template>
+    <JqxNavBar :rtl="true"
+               :height="40"
+               :selectedItem="0">
+        <ul>
+            <li>1</li>
+            <li>2</li>
+            <li>3</li>
+        </ul>
+    </JqxNavBar>
+</template>
+<script>
+    import JqxNavBar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue"
+
+    export default {
+        components: {
+            JqxNavBar
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/navbar/righttoleftlayout/main.js b/navbar/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/navbar/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/navbar/righttoleftlayout/package.json b/navbar/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/navbar/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/navbar/verticalnavbar/App.vue b/navbar/verticalnavbar/App.vue
new file mode 100644
index 00000000..ae761808
--- /dev/null
+++ b/navbar/verticalnavbar/App.vue
@@ -0,0 +1,23 @@
+<template>
+    <JqxNavBar :orientation="'vertical'"
+               :height="120"
+               :selectedItem="0">
+        <ul>
+            <li>1</li>
+            <li>2</li>
+            <li>3</li>
+        </ul>
+    </JqxNavBar>
+</template>
+<script>
+    import JqxNavBar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue"
+
+    export default {
+        components: {
+            JqxNavBar
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/navbar/verticalnavbar/main.js b/navbar/verticalnavbar/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/navbar/verticalnavbar/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/navbar/verticalnavbar/package.json b/navbar/verticalnavbar/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/navbar/verticalnavbar/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/navigationbar/defaultfunctionality/App.vue b/navigationbar/defaultfunctionality/App.vue
new file mode 100644
index 00000000..bbb99c67
--- /dev/null
+++ b/navigationbar/defaultfunctionality/App.vue
@@ -0,0 +1,87 @@
+<template>
+    <JqxNavigationBar :width="400" :height="460">
+        <div>
+            Early History of the Internet
+        </div>
+        <div>
+            <ul>
+                <li>1961 First packet-switching papers</li>
+                <li>1966 Merit Network founded</li>
+                <li>1966 ARPANET planning starts</li>
+                <li>1969 ARPANET carries its first packets</li>
+                <li>1970 Mark I network at NPL (UK)</li>
+                <li>1970 Network Information Center (NIC)</li>
+                <li>1971 Merit Network"s packet-switched network operational</li>
+                <li>1971 Tymnet packet-switched network</li>
+                <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
+                <li>1973 CYCLADES network demonstrated</li>
+                <li>1974 Telenet packet-switched network</li>
+                <li>1976 X.25 protocol approved</li>
+                <li>1979 Internet Activities Board (IAB)</li>
+                <li>1980 USENET news using UUCP</li>
+                <li>1980 Ethernet standard introduced</li>
+                <li>1981 BITNET established</li>
+            </ul>
+        </div>
+        <div>
+            Merging the networks and creating the Internet
+        </div>
+        <div>
+            <ul>
+                <li>1981 Computer Science Network (CSNET)</li>
+                <li>1982 TCP/IP protocol suite formalized</li>
+                <li>1982 Simple Mail Transfer Protocol (SMTP)</li>
+                <li>1983 Domain Name System (DNS)</li>
+                <li>1983 MILNET split off from ARPANET</li>
+                <li>1986 NSFNET with 56 kbit/s links</li>
+                <li>1986 Internet Engineering Task Force (IETF)</li>
+                <li>1987 UUNET founded</li>
+                <li>1988 NSFNET upgraded to 1.5 Mbit/s (T1)</li>
+                <li>1988 OSI Reference Model released</li>
+                <li>1988 Morris worm</li>
+                <li>1989 Border Gateway Protocol (BGP)</li>
+                <li>1989 PSINet founded, allows commercial traffic</li>
+                <li>1989 Federal Internet Exchanges (FIXes)</li>
+                <li>1990 GOSIP (without TCP/IP)</li>
+                <li>1990 ARPANET decommissioned</li>
+            </ul>
+        </div>
+        <div>
+            Popular Internet services
+        </div>
+        <div>
+            <ul>
+                <li>1990 IMDb Internet movie database</li>
+                <li>1995 Amazon.com online retailer</li>
+                <li>1995 eBay online auction and shopping</li>
+                <li>1995 Craigslist classified advertisements</li>
+                <li>1996 Hotmail free web-based e-mail</li>
+                <li>1997 Babel Fish automatic translation</li>
+                <li>1998 Google Search</li>
+                <li>1999 Napster peer-to-peer file sharing</li>
+                <li>2001 Wikipedia, the free encyclopedia</li>
+                <li>2003 LinkedIn business networking</li>
+                <li>2003 Myspace social networking site</li>
+                <li>2003 Skype Internet voice calls</li>
+                <li>2003 iTunes Store</li>
+                <li>2004 Facebook social networking site</li>
+                <li>2004 Podcast media file series</li>
+                <li>2004 Flickr image hosting</li>
+                <li>2005 YouTube video sharing</li>
+                <li>2005 Google Earth virtual globe</li>
+            </ul>
+        </div>
+    </JqxNavigationBar>
+</template>
+<script>
+    import JqxNavigationBar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue"
+
+    export default {
+        components: {
+            JqxNavigationBar
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/navigationbar/defaultfunctionality/main.js b/navigationbar/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/navigationbar/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/navigationbar/defaultfunctionality/package.json b/navigationbar/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/navigationbar/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/navigationbar/disabled/App.vue b/navigationbar/disabled/App.vue
new file mode 100644
index 00000000..8a6d9573
--- /dev/null
+++ b/navigationbar/disabled/App.vue
@@ -0,0 +1,98 @@
+<template>
+    <div style="float: left;">
+        <JqxNavigationBar :disabled="true"
+                          :expandMode="'singleFitHeight'"
+                          :height="430"
+                          :width="400">
+            <!--Header-->
+            <div>
+                Early History of the Internet
+            </div>
+            <!--Content-->
+            <div>
+                <ul>
+                    <li>1961 First packet-switching papers</li>
+                    <li>1966 Merit Network founded</li>
+                    <li>1966 ARPANET planning starts</li>
+                    <li>1969 ARPANET carries its first packets</li>
+                    <li>1970 Mark I network at NPL (UK)</li>
+                    <li>1970 Network Information Center (NIC)</li>
+                    <li>1971 Merit Network's packet-switched network operational</li>
+                    <li>1971 Tymnet packet-switched network</li>
+                    <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
+                    <li>1973 CYCLADES network demonstrated</li>
+                    <li>1974 Telenet packet-switched network</li>
+                    <li>1976 X.25 protocol approved</li>
+                    <li>1979 Internet Activities Board (IAB)</li>
+                    <li>1980 USENET news using UUCP</li>
+                    <li>1980 Ethernet standard introduced</li>
+                    <li>1981 BITNET established</li>
+                </ul>
+            </div>
+            <!--Header-->
+            <div>
+                Merging the networks and creating the Internet
+            </div>
+            <!--Content-->
+            <div>
+                <ul>
+                    <li>1981 Computer Science Network (CSNET)</li>
+                    <li>1982 TCP/IP protocol suite formalized</li>
+                    <li>1982 Simple Mail Transfer Protocol (SMTP)</li>
+                    <li>1983 Domain Name System (DNS)</li>
+                    <li>1983 MILNET split off from ARPANET</li>
+                    <li>1986 NSFNET with 56 kbit/s links</li>
+                    <li>1986 Internet Engineering Task Force (IETF)</li>
+                    <li>1987 UUNET founded</li>
+                    <li>1988 NSFNET upgraded to 1.5 Mbit/s (T1)</li>
+                    <li>1988 OSI Reference Model released</li>
+                    <li>1988 Morris worm</li>
+                    <li>1989 Border Gateway Protocol (BGP)</li>
+                    <li>1989 PSINet founded, allows commercial traffic</li>
+                    <li>1989 Federal Internet Exchanges (FIXes)</li>
+                    <li>1990 GOSIP (without TCP/IP)</li>
+                    <li>1990 ARPANET decommissioned</li>
+                </ul>
+            </div>
+            <!--Header-->
+            <div>
+                Popular Internet services
+            </div>
+            <!--Content-->
+            <div>
+                <ul>
+                    <li>1990 IMDb Internet movie database</li>
+                    <li>1995 Amazon.com online retailer</li>
+                    <li>1995 eBay online auction and shopping</li>
+                    <li>1995 Craigslist classified advertisements</li>
+                    <li>1996 Hotmail free web-based e-mail</li>
+                    <li>1997 Babel Fish automatic translation</li>
+                    <li>1998 Google Search</li>
+                    <li>1999 Napster peer-to-peer file sharing</li>
+                    <li>2001 Wikipedia, the free encyclopedia</li>
+                    <li>2003 LinkedIn business networking</li>
+                    <li>2003 Myspace social networking site</li>
+                    <li>2003 Skype Internet voice calls</li>
+                    <li>2003 iTunes Store</li>
+                    <li>2004 Facebook social networking site</li>
+                    <li>2004 Podcast media file series</li>
+                    <li>2004 Flickr image hosting</li>
+                    <li>2005 YouTube video sharing</li>
+                    <li>2005 Google Earth virtual globe</li>
+                </ul>
+            </div>
+        </JqxNavigationBar>
+    </div>
+</template>
+<script>
+    import JqxNavigationBar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue"
+
+    export default {
+        components: {
+            JqxNavigationBar
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/navigationbar/disabled/main.js b/navigationbar/disabled/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/navigationbar/disabled/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/navigationbar/disabled/package.json b/navigationbar/disabled/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/navigationbar/disabled/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/navigationbar/events/App.vue b/navigationbar/events/App.vue
new file mode 100644
index 00000000..b1b1bd94
--- /dev/null
+++ b/navigationbar/events/App.vue
@@ -0,0 +1,137 @@
+<template>
+        <div style="float: left;">
+            <JqxNavigationBar @collapsedItem="collapsedItem($event)"
+                              @expandedItem="expandedItem($event)"
+                              :expandMode="'singleFitHeight'"
+                              :height="430"
+                              :width="400">
+                <!--Header-->
+                <div>
+                    Early History of the Internet
+                </div>
+                <!--Content-->
+                <div>
+                    <ul>
+                        <li>1961 First packet-switching papers</li>
+                        <li>1966 Merit Network founded</li>
+                        <li>1966 ARPANET planning starts</li>
+                        <li>1969 ARPANET carries its first packets</li>
+                        <li>1970 Mark I network at NPL (UK)</li>
+                        <li>1970 Network Information Center (NIC)</li>
+                        <li>1971 Merit Network's packet-switched network operational</li>
+                        <li>1971 Tymnet packet-switched network</li>
+                        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
+                        <li>1973 CYCLADES network demonstrated</li>
+                        <li>1974 Telenet packet-switched network</li>
+                        <li>1976 X.25 protocol approved</li>
+                        <li>1979 Internet Activities Board (IAB)</li>
+                        <li>1980 USENET news using UUCP</li>
+                        <li>1980 Ethernet standard introduced</li>
+                        <li>1981 BITNET established</li>
+                    </ul>
+                </div>
+                <!--Header-->
+                <div>
+                    Merging the networks and creating the Internet
+                </div>
+                <!--Content-->
+                <div>
+                    <ul>
+                        <li>1981 Computer Science Network (CSNET)</li>
+                        <li>1982 TCP/IP protocol suite formalized</li>
+                        <li>1982 Simple Mail Transfer Protocol (SMTP)</li>
+                        <li>1983 Domain Name System (DNS)</li>
+                        <li>1983 MILNET split off from ARPANET</li>
+                        <li>1986 NSFNET with 56 kbit/s links</li>
+                        <li>1986 Internet Engineering Task Force (IETF)</li>
+                        <li>1987 UUNET founded</li>
+                        <li>1988 NSFNET upgraded to 1.5 Mbit/s (T1)</li>
+                        <li>1988 OSI Reference Model released</li>
+                        <li>1988 Morris worm</li>
+                        <li>1989 Border Gateway Protocol (BGP)</li>
+                        <li>1989 PSINet founded, allows commercial traffic</li>
+                        <li>1989 Federal Internet Exchanges (FIXes)</li>
+                        <li>1990 GOSIP (without TCP/IP)</li>
+                        <li>1990 ARPANET decommissioned</li>
+                    </ul>
+                </div>
+                <!--Header-->
+                <div>
+                    Popular Internet services
+                </div>
+                <!--Content-->
+                <div>
+                    <ul>
+                        <li>1990 IMDb Internet movie database</li>
+                        <li>1995 Amazon.com online retailer</li>
+                        <li>1995 eBay online auction and shopping</li>
+                        <li>1995 Craigslist classified advertisements</li>
+                        <li>1996 Hotmail free web-based e-mail</li>
+                        <li>1997 Babel Fish automatic translation</li>
+                        <li>1998 Google Search</li>
+                        <li>1999 Napster peer-to-peer file sharing</li>
+                        <li>2001 Wikipedia, the free encyclopedia</li>
+                        <li>2003 LinkedIn business networking</li>
+                        <li>2003 Myspace social networking site</li>
+                        <li>2003 Skype Internet voice calls</li>
+                        <li>2003 iTunes Store</li>
+                        <li>2004 Facebook social networking site</li>
+                        <li>2004 Podcast media file series</li>
+                        <li>2004 Flickr image hosting</li>
+                        <li>2005 YouTube video sharing</li>
+                        <li>2005 Google Earth virtual globe</li>
+                    </ul>
+                </div>
+            </JqxNavigationBar>
+            <div style="margin-left: 20px; font-size: 12px; font-family: Verdana, Geneva, DejaVu Sans, sans-serif; margin-top: 50px; float: left;">
+                <div>
+                    <span>Events:</span>
+                    <JqxPanel ref="events" :height="250" :width="420"></JqxPanel>
+                </div>
+            </div>
+        </div>
+</template>
+<script>
+    import JqxNavigationBar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue"
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue"
+
+    export default {
+        components: {
+            JqxNavigationBar,
+            JqxPanel
+        },
+        methods: {
+            getName: function(index) {
+                switch (index) {
+                    case 0:
+                        return 'Early History of the Internet';
+                    case 1:
+                        return 'Merging the networks and creating the Internet';
+                    case 2:
+                        return 'Popular Internet services';
+                }
+            },
+            collapsedItem: function(event) {
+                let text = this.getName(event.item);
+                this.$refs.events.prepend('<div style="margin-top: 5px;">Collapsed: ' + text + '</div>');
+            },
+            expandedItem: function(event) {
+                let text = this.getName(event.item);
+                this.$refs.events.prepend('<div style="margin-top: 5px;">Expanded: ' + text + '</div>');
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    .jqx-panel {
+        border: none;
+    }
+</style>
diff --git a/navigationbar/events/main.js b/navigationbar/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/navigationbar/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/navigationbar/events/package.json b/navigationbar/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/navigationbar/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/navigationbar/fittocontainer/App.vue b/navigationbar/fittocontainer/App.vue
new file mode 100644
index 00000000..cdc6b61a
--- /dev/null
+++ b/navigationbar/fittocontainer/App.vue
@@ -0,0 +1,139 @@
+<template>
+    <div style="width: 680px; height: 450px; border: none;">
+
+        <div id="leftPanel" style="width: 225px; height: 100%; float: left;">
+            <JqxNavigationBar :width="'100%'" :height="'100%'" :expandMode="'singleFitHeight'">
+                <div>
+                    Fantasy
+                </div>
+                <div>
+                    <ul>
+                        <li>J. R. R. Tolkien</li>
+                        <li>Terry Brooks</li>
+                        <li>J. K. Rowling</li>
+                    </ul>
+                </div>
+                <div>
+                    Science Fiction
+                </div>
+                <div>
+                    <ul>
+                        <li>H. G. Wells</li>
+                        <li>Simon R. Green</li>
+                    </ul>
+                </div>
+                <div>
+                    Horror
+                </div>
+                <div>
+                    <ul>
+                        <li>H. P. Lovecraft</li>
+                        <li>Stephen King</li>
+                    </ul>
+                </div>
+            </JqxNavigationBar>
+        </div>
+
+        <div style="width: 450px;  height: 100%; float: left;" id="rightPanel">
+            <div id="rightPanelContent" className="jqx-widget-content">
+                <div id="bookShelf" style="margin: 5px; width: 444px; height: 425px;">
+                </div>
+                <div id="shoppingCart" style="float: left; margin-left: 5px;">
+                    <img style="float: left;" width="16" height="16" src="../../../images/shopping_cart.png" />
+                    <div id="text">
+                        Shopping cart is empty.
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+<script>
+    import JqxNavigationBar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue";
+
+    export default {
+        components: {
+            JqxNavigationBar
+        },
+        mounted: function () {
+            let Tolkien = '<div class="bookContainer"><div class="book"><img style="float: left" src="../../../images/books/The Hobbit.JPG" /><i>The Hobbit</i></div><div class="book"><img src="../../../images/books/The Lord of the Rings.jpg" /><i>The Lord of the Rings</i></div><div class="book"><img src="../../../images/books/The Silmarillion.JPG" /><i>The Silmarillion</i></div></div>';
+
+            let Brooks = '<div class="bookContainer"><div class="book"><img src="../../../images/books/The Sword of Shannara.jpg" /><i>The Sword of Shannara</i></div><div class="book"><img src="../../../images/books/The Elfstones of Shannara.jpg" /><i>The Elfstones of Shannara</i></div><div class="book"><img src="../../../images/books/The Wishsong of Shannara.jpg" /><i>The Wishsong of Shannara</i></div><div class="book"><img src="../../../images/books/Running with the Demon.jpg" /><i>Running with the Demon</i></div><div class="book"><img src="../../../images/books/A Knight of the Word.jpg" /><i>A Knight of the Word</i></div><div class="book"><img src="../../../images/books/Angel Fire East.jpg" /><i>Angel Fire East</i></div></div>';
+
+            let Rowling = '<div class="bookContainer"><div class="book"><img src="../../../images/books/Harry Potter and the Philosopher&apos;s Stone.jpg" /><i>Harry Potter and the Philosopher&apos;s Stone</i></div><div class="book"><img src="../../../images/books/Harry Potter and the Chamber of Secrets.jpg" /><i>Harry Potter and the Chamber of Secrets</i></div><div class="book"><img src="../../../images/books/Harry Potter and the Prisoner of Azkaban.jpg" /><i>Harry Potter and the Prisoner of Azkaban</i></div><div class="book"><img src="../../../images/books/Harry Potter and the Goblet of Fire.jpg" /><i>Harry Potter and the Goblet of Fire</i></div><div class="book"><img src="../../../images/books/Harry Potter and the Order of the Phoenix.jpg" /><i>Harry Potter and the Order of the Phoenix</i></div><div class="book"><img src="../../../images/books/Harry Potter and the Half-Blood Prince.jpg" /><i>Harry Potter and the Half-Blood Prince</i></div><div class="book"><img src="../../../images/books/Harry Potter and the Deathly Hallows.jpg" /><i>Harry Potter and the Deathly Hallows</i></div></div>';
+
+            let Wells = '<div class="bookContainer"><div class="book"><img src="../../../images/books/The Time Machine.JPG" /><i>The Time Machine</i></div><div class="book"><img src="../../../images/books/The War of the Worlds.jpg" /><i>The War of the Worlds</i></div></div>';
+
+            let Green = '<div class="bookContainer"><div class="book"><img src="../../../images/books/Deathstalker.jpg" /><i>Deathstalker</i></div><div class="book"><img src="../../../images/books/Deathstalker Rebellion.jpg" /><i>Deathstalker Rebellion</i></div><div class="book"><img src="../../../images/books/Deathstalker War.jpg" /><i>Deathstalker War</i></div><div class="book"><img src="../../../images/books/Deathstalker Honor.jpg" /><i>Deathstalker Honor</i></div><div class="book"><img src="../../../images/books/Deathstalker Destiny.jpg" /><i>Deathstalker Destiny</i></div></div>';
+
+            let Lovecraft = '<div class="bookContainer"><div class="book"><img src="../../../images/books/The Call of Cthulhu.jpg" /><i>The Call of Cthulhu</i></div><div class="book"><img src="../../../images/books/At the Mountains of Madness.jpg" /><i>At the Mountains of Madness</i></div></div>';
+
+            let King = '<div class="bookContainer"><div class="book"><img src="../../../images/books/Carrie.jpg" /><i>Carrie</i></div><div class="book"><img src="../../../images/books/Night Shift.jpg" /><i>Night Shift</i></div><div class="book"><img src="../../../images/books/It.jpg" /><i>It</i></div><div class="book"><img src="../../../images/books/The Dark Half.jpg" /><i>The Dark Half</i></div></div>';
+
+            let liTags = document.getElementsByTagName('LI');
+
+            document.getElementById('bookShelf').innerHTML = Tolkien;
+
+            let booksNum = 0;
+            let addToShoppingCart = () => {
+                booksNum += 1;
+                document.getElementById('text').innerHTML = 'Added ' + booksNum + (booksNum == 1 ? ' book' : ' books') + ' to shopping cart.'
+            };
+
+            let booksImages = document.getElementsByClassName('book');
+            for (var j = 0; j < booksImages.length; j++) {
+                booksImages[j].getElementsByTagName('IMG')[0].addEventListener('click', addToShoppingCart);
+                (booksImages[j].getElementsByTagName('IMG')[0]).style.cursor = 'pointer';
+            }
+
+            for (let i = 0; i < liTags.length; i++) {
+                liTags[i].addEventListener('click', () => {
+                    let bookShelf = document.getElementById('bookShelf');
+                    switch (i) {
+                        case 0:
+                            bookShelf.innerHTML = Tolkien;
+                            break;
+                        case 1:
+                            bookShelf.innerHTML = Brooks;
+                            break;
+                        case 2:
+                            bookShelf.innerHTML = Rowling;
+                            break;
+                        case 3:
+                            bookShelf.innerHTML = Wells;
+                            break;
+                        case 4:
+                            bookShelf.innerHTML = Green;
+                            break;
+                        case 5:
+                            bookShelf.innerHTML = Lovecraft;
+                            break;
+                        case 6:
+                            bookShelf.innerHTML = King;
+                            break;
+                    };
+
+                    booksImages = document.getElementsByClassName('book');
+                    for (var j = 0; j < booksImages.length; j++) {
+                        booksImages[j].getElementsByTagName('IMG')[0].addEventListener('click', addToShoppingCart);
+                        (booksImages[j].getElementsByTagName('IMG')[0]).style.cursor = 'pointer';
+                    }
+                });
+            }
+        }
+    }
+</script>
+
+<style>
+    .bookContainer {
+        width: 500px;
+    }
+
+    .book {
+        width: 105px;
+        height: 215px;
+        float: left;
+        margin-left: 5px;
+    }
+</style>
diff --git a/navigationbar/fittocontainer/main.js b/navigationbar/fittocontainer/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/navigationbar/fittocontainer/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/navigationbar/fittocontainer/package.json b/navigationbar/fittocontainer/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/navigationbar/fittocontainer/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/navigationbar/fluidsize/App.vue b/navigationbar/fluidsize/App.vue
new file mode 100644
index 00000000..58ad6d63
--- /dev/null
+++ b/navigationbar/fluidsize/App.vue
@@ -0,0 +1,95 @@
+<template>
+    <JqxNavigationBar :height="'100%'"
+                      :width="'100%'">
+        <div>
+            <div style="margin-top: 2px;">
+                <div style="float: left;">
+                    <img alt="Mail" src="../../../images/mailIcon.png" />
+                </div>
+                <div style="margin-left: 4px; float: left;">
+                    Mail
+                </div>
+            </div>
+        </div>
+        <div>
+            <ul>
+                <li><a href="#">Contacts</a></li>
+                <li><a href="#">Mails</a></li>
+                <li><a href="#">Notes</a></li>
+            </ul>
+        </div>
+        <div>
+            <div style="margin-top: 2px;">
+                <div style="float: left;">
+                    <img alt="Mail" src="../../../images/contactsIcon.png" />
+                </div>
+                <div style="margin-left: 4px; float: left;">
+                    Contacts
+                </div>
+            </div>
+        </div>
+        <div>
+            <ul>
+                <li><a href="#">Business Cards</a></li>
+                <li><a href="#">Address Cards</a></li>
+                <li><a href="#">Detailed Address Cards</a></li>
+                <li><a href="#">Phone List</a></li>
+            </ul>
+        </div>
+        <div>
+            <div style="margin-top: 2px;">
+                <div style="float: left;">
+                    <img alt="Mail" src="../../../images/tasksIcon.png" />
+                </div>
+                <div style="margin-left: 4px; float: left;">
+                    Tasks
+                </div>
+            </div>
+        </div>
+        <div>
+            <ul>
+                <li><a href="#">Simple List</a></li>
+                <li><a href="#">Detailed List</a></li>
+                <li><a href="#">Active Tasks</a></li>
+                <li><a href="#">Phone List</a></li>
+            </ul>
+        </div>
+        <div>
+            <div style="margin-top: 2px;">
+                <div style="float: left;">
+                    <img alt="Mail" src="../../../images/notesIcon.png" />
+                </div>
+                <div style="margin-left: 4px; float: left;">
+                    Notes
+                </div>
+            </div>
+        </div>
+        <div>
+            <ul>
+                <li><a href="#">Icons</a></li>
+                <li><a href="#">Notes List</a></li>
+                <li><a href="#">Last Seven Days</a></li>
+            </ul>
+        </div>
+    </JqxNavigationBar>
+</template>
+<script>
+    import JqxNavigationBar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue"
+
+    export default {
+        components: {
+            JqxNavigationBar
+        }
+    }
+</script>
+
+<style>
+    body, html {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        padding: 3px;
+        box-sizing: border-box;
+        margin: 0;
+    }
+</style>
diff --git a/navigationbar/fluidsize/main.js b/navigationbar/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/navigationbar/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/navigationbar/fluidsize/package.json b/navigationbar/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/navigationbar/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/navigationbar/keyboardnavigation/App.vue b/navigationbar/keyboardnavigation/App.vue
new file mode 100644
index 00000000..0b8f04d8
--- /dev/null
+++ b/navigationbar/keyboardnavigation/App.vue
@@ -0,0 +1,104 @@
+<template>
+    <div style="float: left;">
+        <JqxNavigationBar ref="myNavigationBar"
+                          :expandedIndexes="[0]"
+                          :expandMode="'multiple'"
+                          :width="250">
+            <div>
+                <div style="margin-top: 2px;">
+                    <div style="float: left;">
+                        <img alt="Mail" src="../../../images/mailIcon.png" />
+                    </div>
+                    <div style="margin-left: 4px; float: left;">
+                        Mail
+                    </div>
+                </div>
+            </div>
+            <div>
+                <ul>
+                    <li><a href="#">Contacts</a></li>
+                    <li><a href="#">Mails</a></li>
+                    <li><a href="#">Notes</a></li>
+                </ul>
+            </div>
+            <div>
+                <div style="margin-top: 2px;">
+                    <div style="float: left;">
+                        <img alt="Mail" src="../../../images/contactsIcon.png" />
+                    </div>
+                    <div style="margin-left: 4px; float: left;">
+                        Contacts
+                    </div>
+                </div>
+            </div>
+            <div>
+                <ul>
+                    <li><a href="#">Business Cards</a></li>
+                    <li><a href="#">Address Cards</a></li>
+                    <li><a href="#">Detailed Address Cards</a></li>
+                    <li><a href="#">Phone List</a></li>
+                </ul>
+            </div>
+            <div>
+                <div style="margin-top: 2px;">
+                    <div style="float: left;">
+                        <img alt="Mail" src="../../../images/tasksIcon.png" />
+                    </div>
+                    <div style="margin-left: 4px; float: left;">
+                        Tasks
+                    </div>
+                </div>
+            </div>
+            <div>
+                <ul>
+                    <li><a href="#">Simple List</a></li>
+                    <li><a href="#">Detailed List</a></li>
+                    <li><a href="#">Active Tasks</a></li>
+                    <li><a href="#">Phone List</a></li>
+                </ul>
+            </div>
+            <div>
+                <div style="margin-top: 2px;">
+                    <div style="float: left;">
+                        <img alt="Mail" src="../../../images/notesIcon.png" />
+                    </div>
+                    <div style="margin-left: 4px; float: left;">
+                        Notes
+                    </div>
+                </div>
+            </div>
+            <div>
+                <ul>
+                    <li><a href="#">Icons</a></li>
+                    <li><a href="#">Notes List</a></li>
+                    <li><a href="#">Last Seven Days</a></li>
+                </ul>
+            </div>
+        </JqxNavigationBar>
+        <div style="font-family: Verdana; font-size: 12px; width: 400px; margin-left: 20px; float: left;">
+            <ul>
+                <li><b>Tab</b> - Like other widgets, the jqxNavigationBar widget receives focus by tabbing into it. Once focus is received, users will be able to use the keyboard to change the jqxNavigationBar"s selection. A second tab will take the user to the next focusable element in the tab order.</li>
+                <li><b>Shift+Tab</b> - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous focusable element in the tab order.</li>
+                <li><b>Up or Left</b> arrow keys - select previous item.</li>
+                <li><b>Down or Right</b> arrow keys - select next item.</li>
+                <li><b>Home/End</b> keys - navigate to the first or last item.</li>
+                <li><b>Enter</b> key - Expand the focused item"s state when the jqxNavigationBar"s "expandMode" property is "single" or "singleFitHeight". Toggle the focused item"s state when the expand mode is "toggle" or "multiple"</li>
+            </ul>
+        </div>
+    </div>
+</template>
+<script>
+    import JqxNavigationBar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue"
+
+    export default {
+        components: {
+            JqxNavigationBar
+        },
+        mounted: function () {
+            this.$refs.myNavigationBar.focus();
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/navigationbar/keyboardnavigation/main.js b/navigationbar/keyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/navigationbar/keyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/navigationbar/keyboardnavigation/package.json b/navigationbar/keyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/navigationbar/keyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/navigationbar/multipleexpanded/App.vue b/navigationbar/multipleexpanded/App.vue
new file mode 100644
index 00000000..58ae72be
--- /dev/null
+++ b/navigationbar/multipleexpanded/App.vue
@@ -0,0 +1,90 @@
+<template>
+    <div style="width: 300px;">
+        <JqxNavigationBar :expandedIndexes="[2, 3]"
+                          :expandMode="'multiple'"
+                          :width="300">
+            <div>
+                <div style="margin-top: 2px;">
+                    <div style="float: left;">
+                        <img alt="Mail" src="../../../images/mailIcon.png" />
+                    </div>
+                    <div style="margin-left: 4px; float: left;">
+                        Mail
+                    </div>
+                </div>
+            </div>
+            <div>
+                <ul>
+                    <li><a href="#">Contacts</a></li>
+                    <li><a href="#">Mails</a></li>
+                    <li><a href="#">Notes</a></li>
+                </ul>
+            </div>
+            <div>
+                <div style="margin-top: 2px;">
+                    <div style="float: left;">
+                        <img alt="Mail" src="../../../images/contactsIcon.png" />
+                    </div>
+                    <div style="margin-left: 4px; float: left;">
+                        Contacts
+                    </div>
+                </div>
+            </div>
+            <div>
+                <ul>
+                    <li><a href="#">Business Cards</a></li>
+                    <li><a href="#">Address Cards</a></li>
+                    <li><a href="#">Detailed Address Cards</a></li>
+                    <li><a href="#">Phone List</a></li>
+                </ul>
+            </div>
+            <div>
+                <div style="margin-top: 2px;">
+                    <div style="float: left;">
+                        <img alt="Mail" src="../../../images/tasksIcon.png" />
+                    </div>
+                    <div style="margin-left: 4px; float: left;">
+                        Tasks
+                    </div>
+                </div>
+            </div>
+            <div>
+                <ul>
+                    <li><a href="#">Simple List</a></li>
+                    <li><a href="#">Detailed List</a></li>
+                    <li><a href="#">Active Tasks</a></li>
+                    <li><a href="#">Phone List</a></li>
+                </ul>
+            </div>
+            <div>
+                <div style="margin-top: 2px;">
+                    <div style="float: left;">
+                        <img alt="Mail" src="../../../images/notesIcon.png" />
+                    </div>
+                    <div style="margin-left: 4px; float: left;">
+                        Notes
+                    </div>
+                </div>
+            </div>
+            <div>
+                <ul>
+                    <li><a href="#">Icons</a></li>
+                    <li><a href="#">Notes List</a></li>
+                    <li><a href="#">Last Seven Days</a></li>
+                </ul>
+            </div>
+        </JqxNavigationBar>
+    </div>
+</template>
+<script>
+    import JqxNavigationBar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue"
+
+    export default {
+        components: {
+            JqxNavigationBar
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/navigationbar/multipleexpanded/main.js b/navigationbar/multipleexpanded/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/navigationbar/multipleexpanded/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/navigationbar/multipleexpanded/package.json b/navigationbar/multipleexpanded/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/navigationbar/multipleexpanded/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/navigationbar/righttoleftlayout/App.vue b/navigationbar/righttoleftlayout/App.vue
new file mode 100644
index 00000000..b02364a1
--- /dev/null
+++ b/navigationbar/righttoleftlayout/App.vue
@@ -0,0 +1,98 @@
+<template>
+    <div style="float: left;">
+        <JqxNavigationBar :rtl="true"
+                          :expandMode="'singleFitHeight'"
+                          :width="400"
+                          :height="430">
+            <!--Header-->
+            <div>
+                Early History of the Internet
+            </div>
+            <!--Content-->
+            <div>
+                <ul style="direction: rtl;">
+                    <li>1961 First packet-switching papers</li>
+                    <li>1966 Merit Network founded</li>
+                    <li>1966 ARPANET planning starts</li>
+                    <li>1969 ARPANET carries its first packets</li>
+                    <li>1970 Mark I network at NPL (UK)</li>
+                    <li>1970 Network Information Center (NIC)</li>
+                    <li>1971 Merit Network's packet-switched network operational</li>
+                    <li>1971 Tymnet packet-switched network</li>
+                    <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
+                    <li>1973 CYCLADES network demonstrated</li>
+                    <li>1974 Telenet packet-switched network</li>
+                    <li>1976 X.25 protocol approved</li>
+                    <li>1979 Internet Activities Board (IAB)</li>
+                    <li>1980 USENET news using UUCP</li>
+                    <li>1980 Ethernet standard introduced</li>
+                    <li>1981 BITNET established</li>
+                </ul>
+            </div>
+            <!--Header-->
+            <div>
+                Merging the networks and creating the Internet
+            </div>
+            <!--Content-->
+            <div>
+                <ul style="direction: rtl;">
+                    <li>1981 Computer Science Network (CSNET)</li>
+                    <li>1982 TCP/IP protocol suite formalized</li>
+                    <li>1982 Simple Mail Transfer Protocol (SMTP)</li>
+                    <li>1983 Domain Name System (DNS)</li>
+                    <li>1983 MILNET split off from ARPANET</li>
+                    <li>1986 NSFNET with 56 kbit/s links</li>
+                    <li>1986 Internet Engineering Task Force (IETF)</li>
+                    <li>1987 UUNET founded</li>
+                    <li>1988 NSFNET upgraded to 1.5 Mbit/s (T1)</li>
+                    <li>1988 OSI Reference Model released</li>
+                    <li>1988 Morris worm</li>
+                    <li>1989 Border Gateway Protocol (BGP)</li>
+                    <li>1989 PSINet founded, allows commercial traffic</li>
+                    <li>1989 Federal Internet Exchanges (FIXes)</li>
+                    <li>1990 GOSIP (without TCP/IP)</li>
+                    <li>1990 ARPANET decommissioned</li>
+                </ul>
+            </div>
+            <!--Header-->
+            <div>
+                Popular Internet services
+            </div>
+            <!--Content-->
+            <div>
+                <ul style="direction: rtl;">
+                    <li>1990 IMDb Internet movie database</li>
+                    <li>1995 Amazon.com online retailer</li>
+                    <li>1995 eBay online auction and shopping</li>
+                    <li>1995 Craigslist classified advertisements</li>
+                    <li>1996 Hotmail free web-based e-mail</li>
+                    <li>1997 Babel Fish automatic translation</li>
+                    <li>1998 Google Search</li>
+                    <li>1999 Napster peer-to-peer file sharing</li>
+                    <li>2001 Wikipedia, the free encyclopedia</li>
+                    <li>2003 LinkedIn business networking</li>
+                    <li>2003 Myspace social networking site</li>
+                    <li>2003 Skype Internet voice calls</li>
+                    <li>2003 iTunes Store</li>
+                    <li>2004 Facebook social networking site</li>
+                    <li>2004 Podcast media file series</li>
+                    <li>2004 Flickr image hosting</li>
+                    <li>2005 YouTube video sharing</li>
+                    <li>2005 Google Earth virtual globe</li>
+                </ul>
+            </div>
+        </JqxNavigationBar>
+    </div>
+</template>
+<script>
+    import JqxNavigationBar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue"
+
+    export default {
+        components: {
+            JqxNavigationBar
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/navigationbar/righttoleftlayout/main.js b/navigationbar/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/navigationbar/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/navigationbar/righttoleftlayout/package.json b/navigationbar/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/navigationbar/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/navigationbar/togglemode/App.vue b/navigationbar/togglemode/App.vue
new file mode 100644
index 00000000..dfbf4a3e
--- /dev/null
+++ b/navigationbar/togglemode/App.vue
@@ -0,0 +1,97 @@
+<template>
+    <div style="float: left;">
+        <JqxNavigationBar :expandMode="'toggle'"
+                          :width="400"
+                          :height="480">
+            <!--Header-->
+            <div>
+                Early History of the Internet
+            </div>
+            <!--Content-->
+            <div>
+                <ul>
+                    <li>1961 First packet-switching papers</li>
+                    <li>1966 Merit Network founded</li>
+                    <li>1966 ARPANET planning starts</li>
+                    <li>1969 ARPANET carries its first packets</li>
+                    <li>1970 Mark I network at NPL (UK)</li>
+                    <li>1970 Network Information Center (NIC)</li>
+                    <li>1971 Merit Network's packet-switched network operational</li>
+                    <li>1971 Tymnet packet-switched network</li>
+                    <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
+                    <li>1973 CYCLADES network demonstrated</li>
+                    <li>1974 Telenet packet-switched network</li>
+                    <li>1976 X.25 protocol approved</li>
+                    <li>1979 Internet Activities Board (IAB)</li>
+                    <li>1980 USENET news using UUCP</li>
+                    <li>1980 Ethernet standard introduced</li>
+                    <li>1981 BITNET established</li>
+                </ul>
+            </div>
+            <!--Header-->
+            <div>
+                Merging the networks and creating the Internet
+            </div>
+            <!--Content-->
+            <div>
+                <ul>
+                    <li>1981 Computer Science Network (CSNET)</li>
+                    <li>1982 TCP/IP protocol suite formalized</li>
+                    <li>1982 Simple Mail Transfer Protocol (SMTP)</li>
+                    <li>1983 Domain Name System (DNS)</li>
+                    <li>1983 MILNET split off from ARPANET</li>
+                    <li>1986 NSFNET with 56 kbit/s links</li>
+                    <li>1986 Internet Engineering Task Force (IETF)</li>
+                    <li>1987 UUNET founded</li>
+                    <li>1988 NSFNET upgraded to 1.5 Mbit/s (T1)</li>
+                    <li>1988 OSI Reference Model released</li>
+                    <li>1988 Morris worm</li>
+                    <li>1989 Border Gateway Protocol (BGP)</li>
+                    <li>1989 PSINet founded, allows commercial traffic</li>
+                    <li>1989 Federal Internet Exchanges (FIXes)</li>
+                    <li>1990 GOSIP (without TCP/IP)</li>
+                    <li>1990 ARPANET decommissioned</li>
+                </ul>
+            </div>
+            <!--Header-->
+            <div>
+                Popular Internet services
+            </div>
+            <!--Content-->
+            <div>
+                <ul>
+                    <li>1990 IMDb Internet movie database</li>
+                    <li>1995 Amazon.com online retailer</li>
+                    <li>1995 eBay online auction and shopping</li>
+                    <li>1995 Craigslist classified advertisements</li>
+                    <li>1996 Hotmail free web-based e-mail</li>
+                    <li>1997 Babel Fish automatic translation</li>
+                    <li>1998 Google Search</li>
+                    <li>1999 Napster peer-to-peer file sharing</li>
+                    <li>2001 Wikipedia, the free encyclopedia</li>
+                    <li>2003 LinkedIn business networking</li>
+                    <li>2003 Myspace social networking site</li>
+                    <li>2003 Skype Internet voice calls</li>
+                    <li>2003 iTunes Store</li>
+                    <li>2004 Facebook social networking site</li>
+                    <li>2004 Podcast media file series</li>
+                    <li>2004 Flickr image hosting</li>
+                    <li>2005 YouTube video sharing</li>
+                    <li>2005 Google Earth virtual globe</li>
+                </ul>
+            </div>
+        </JqxNavigationBar>
+    </div>
+</template>
+<script>
+    import JqxNavigationBar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue"
+
+    export default {
+        components: {
+            JqxNavigationBar
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/navigationbar/togglemode/main.js b/navigationbar/togglemode/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/navigationbar/togglemode/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/navigationbar/togglemode/package.json b/navigationbar/togglemode/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/navigationbar/togglemode/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/notification/customicon/App.vue b/notification/customicon/App.vue
new file mode 100644
index 00000000..fc02c57c
--- /dev/null
+++ b/notification/customicon/App.vue
@@ -0,0 +1,88 @@
+<template>
+    <div>
+        <JqxNotification ref="myNotification"
+                         :icon="{ width: 25, height: 25, url: '../../../images/smiley.png', padding: 5}"
+                         :template="null"
+                         :opacity="0.9"
+                         :position="'top-left'"
+                         :width="'auto'">
+            <div>
+                Thank you for your feedback!
+            </div>
+        </JqxNotification>
+        <table style="margin-left: 15px; margin-top: 15px;">
+            <tr>
+                <td class="label">
+                    Name:
+                </td>
+                <td>
+                    <JqxInput ref="name" :width="150"></JqxInput>
+                </td>
+            </tr>
+            <tr>
+                <td class="label">
+                    E-mail:
+                </td>
+                <td>
+                    <JqxInput ref="email" :width="150"></JqxInput>
+                </td>
+            </tr>
+            <tr>
+                <td class="label" style="vertical-align: top;">
+                    Comment:
+                </td>
+                <td>
+                    <JqxTextArea ref="comment" :width="155" :height="150"></JqxTextArea>
+                </td>
+            </tr>
+            <tr>
+                <td colspan="2"></td>
+            </tr>
+            <tr>
+                <td colspan="2" style="text-align: center;">
+                    <JqxButton @click="click()">Submit comment</JqxButton>
+                </td>
+            </tr>
+        </table>
+    </div>
+</template>
+<script>
+    import JqxNotification from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+    import JqxTextArea from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxNotification,
+            JqxInput,
+            JqxTextArea,
+            JqxButton
+        },
+        methods: {
+            click: function () {
+                this.$refs.name.val('');
+                this.$refs.email.val('');
+                this.$refs.comment.val('');
+                this.$refs.myNotification.open();
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        width: fit-content;
+    }
+
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    .label {
+        text-align: right;
+    }
+</style>
diff --git a/notification/customicon/main.js b/notification/customicon/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/notification/customicon/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/notification/customicon/package.json b/notification/customicon/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/notification/customicon/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/notification/defaultfunctionality/App.vue b/notification/defaultfunctionality/App.vue
new file mode 100644
index 00000000..ead93648
--- /dev/null
+++ b/notification/defaultfunctionality/App.vue
@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <!--Notifications-->
+        <JqxNotification ref="msgNotification"
+                         :width="250" :position="'top-right'" :opacity="0.9" :autoOpen="false"
+                         :autoClose="true" :animationOpenDelay="800" :autoCloseDelay="3000" :template="'info'">
+            <div>
+                Welcome to our website.
+            </div>
+        </JqxNotification>
+        <JqxNotification ref="timeNotification"
+                         :width="250" :position="'top-right'" :opacity="0.9" :autoOpen="false"
+                         :autoClose="true" :animationOpenDelay="800" :autoCloseDelay="3000" :template="'time'">
+            <div>Current time: <span id="currentTime" style="font-weight: bold;"></span>.</div>
+        </JqxNotification>
+        <!--Layout-->
+        <JqxButton :width="230" :height="22" @click="onClickOpenMessageNotification()">
+            Open a message notification
+        </JqxButton>
+        <br /><br />
+        <JqxButton :width="230" :height="22" @click="onClickOpenTimeNotification()">
+            Open a current time notification
+        </JqxButton>
+    </div>
+</template>
+<script>
+    import JqxNotification from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxNotification,
+            JqxButton
+        },
+        methods: {
+            onClickOpenMessageNotification: function() {
+                this.$refs.msgNotification.open();
+            },
+            onClickOpenTimeNotification: function () {
+                let date = new Date();
+                let minutes = date.getMinutes();
+                let minutesString = '';
+                if (minutes < 10) {
+                    minutesString = "0" + minutes;
+                } else {
+                    minutesString = "" + minutes;
+                }
+
+                let seconds = date.getSeconds();
+                let secondsString = '';
+                if (seconds < 10) {
+                    secondsString = "0" + seconds;
+                } else {
+                    secondsString = "" + seconds;
+                }
+
+                let timeSpan = document.getElementById('currentTime');
+                timeSpan.innerText = date.getHours() + ":" + minutesString + ":" + secondsString;
+                this.$refs.timeNotification.open();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/notification/defaultfunctionality/main.js b/notification/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/notification/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/notification/defaultfunctionality/package.json b/notification/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/notification/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/notification/events/App.vue b/notification/events/App.vue
new file mode 100644
index 00000000..c7c4a67b
--- /dev/null
+++ b/notification/events/App.vue
@@ -0,0 +1,91 @@
+<template>
+    <div>
+        <JqxNotification ref="jqxNotification"
+                         @open="open($event)"
+                         @close="close($event)"
+                         @click="click($event)"
+                         :blink="true"
+                         :closeOnClick="true"
+                         :autoClose="false"
+                         :template="'mail'"
+                         :opacity="0.9"
+                         :position="'top-right'"
+                         :width="'auto'">
+            <div>
+                You have <b>2</b> new messages.
+            </div>
+            <div style="font-size: smaller; text-align: center;">
+                Click to view.
+            </div>
+        </JqxNotification>
+
+        <JqxButton @click="clickCheckMail()" :width="120">
+            Check mail
+        </JqxButton>
+
+        <div style="margin-top: 15px;">
+            Events log:
+        </div>
+        <JqxPanel ref="eventsPanel" :width="150" :height="150">
+        </JqxPanel>
+        <div ref="messagePanel" style="width: 400px; display: none;">
+            <p>
+                <b>From:</b> Ken
+            </p>
+            <p>
+                <b>About</b>: Appointment
+            </p>
+            <p>
+                Hi,<br />
+                I just wanted to remind you dinner is at 8pm tonight at Carl's.
+            </p>
+            <hr style="width: 300px; text-align: right;" />
+            <p>
+                <b>From:</b> Sue
+            </p>
+            <p>
+                <b>About</b>: Shopping
+            </p>
+            <p>
+                Here's the shopping list for tommorow's party:
+            </p>
+            <ul>
+                <li>Wine</li>
+                <li>Tomatoes</li>
+                <li>Cheese</li>
+                <li>Popcorn</li>
+            </ul>
+        </div>
+    </div>
+</template>
+<script>
+    import JqxNotification from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxNotification,
+            JqxPanel,
+            JqxButton
+        },
+        methods: {
+            writeEventType: function(event) {
+                this.$refs.eventsPanel.append(event.type + "<br />");
+            },
+            open: function (event) {
+                this.writeEventType(event);
+            },
+            close: function (event) {
+                this.writeEventType(event);
+            },
+            click: function (event) {
+                this.writeEventType(event);
+                this.$refs.messagePanel.style.display = 'inline-block';
+            },
+            clickCheckMail: function () {
+                this.$refs.jqxNotification.open();
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/notification/events/main.js b/notification/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/notification/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/notification/events/package.json b/notification/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/notification/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/notification/fluidsize/App.vue b/notification/fluidsize/App.vue
new file mode 100644
index 00000000..9c40784a
--- /dev/null
+++ b/notification/fluidsize/App.vue
@@ -0,0 +1,27 @@
+<template>
+    <JqxNotification :blink="true"
+                     :autoOpen="true"
+                     :autoClose="false"
+                     :animationOpenDelay="800"
+                     :template="'success'"
+                     :opacity="0.9"
+                     :position="'top-left'"
+                     :width="'80%'">
+        <span>This notification's width is 80%.</span>
+    </JqxNotification>
+</template>
+<script>
+    import JqxNotification from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue";
+
+    export default {
+        components: {
+            JqxNotification
+        }
+    }
+</script>
+
+<style>
+    .jqx-notification {
+        margin-top: 5em;
+    }
+</style>
diff --git a/notification/fluidsize/main.js b/notification/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/notification/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/notification/fluidsize/package.json b/notification/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/notification/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/notification/notificationcontainer/App.vue b/notification/notificationcontainer/App.vue
new file mode 100644
index 00000000..3882fd21
--- /dev/null
+++ b/notification/notificationcontainer/App.vue
@@ -0,0 +1,51 @@
+<template>
+    <div>
+        <JqxNotification ref="myNotification"
+                         :template="'info'"
+                         :autoClose="true"
+                         :appendContainer="'#container'"
+                         :opacity="0.9"
+                         :width="'100%'">
+            <div>
+                <div></div>
+            </div>
+        </JqxNotification>
+
+        <JqxButton @click="click()" :width="120">Open notification</JqxButton>
+
+        <div id="container" style="width: 300px; height: 400px; margin-top: 15px; background-color: #F2F2F2;
+        border: 1px dashed #AAAAAA; overflow: auto;">
+        </div>
+    </div>
+</template>
+<script>
+    import JqxNotification from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxNotification,
+            JqxButton
+        },
+        beforeCreate: function () {
+            this.quotes = [
+                'I\'m gonna make him an offer he can\'t refuse.',
+                'Toto, I\'ve got a feeling we\'re not in Kansas anymore.',
+                'You talkin\' to me?',
+                'Bond. James Bond.',
+                'I\'ll be back.',
+                'Round up the usual suspects.',
+                'I\'m the king of the world!',
+                'A martini. Shaken, not stirred.',
+                'May the Force be with you.',
+                'Well, nobody\'s perfect.'
+            ];
+        },
+        methods: {
+            click: function() {
+                this.$refs.myNotification.$el.querySelector('.jqx-notification-content').innerHTML = this.quotes[Math.round(Math.random() * this.quotes.length - 1)];
+                this.$refs.myNotification.open();
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/notification/notificationcontainer/main.js b/notification/notificationcontainer/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/notification/notificationcontainer/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/notification/notificationcontainer/package.json b/notification/notificationcontainer/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/notification/notificationcontainer/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/notification/righttoleftlayout/App.vue b/notification/righttoleftlayout/App.vue
new file mode 100644
index 00000000..966fbb2d
--- /dev/null
+++ b/notification/righttoleftlayout/App.vue
@@ -0,0 +1,27 @@
+<template>
+    <JqxNotification :rtl="true"
+                     :position="'top-left'"
+                     :opacity="0.9"
+                     :animationOpenDelay="800"
+                     :autoOpen="true"
+                     :autoClose="false"
+                     :template="'info'"
+                     :width="'auto'">
+        <span>אין לך הודעות</span>
+    </JqxNotification>
+</template>
+<script>
+    import JqxNotification from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue";
+
+    export default {
+        components: {
+            JqxNotification
+        }
+    }
+</script>
+
+<style>
+    .jqx-notification {
+        margin-top: 5em;
+    }
+</style>
diff --git a/notification/righttoleftlayout/main.js b/notification/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/notification/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/notification/righttoleftlayout/package.json b/notification/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/notification/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/notification/settings/App.vue b/notification/settings/App.vue
new file mode 100644
index 00000000..81a297d5
--- /dev/null
+++ b/notification/settings/App.vue
@@ -0,0 +1,161 @@
+<template>
+    <div>
+        <JqxNotification ref="myNotification"
+                         :template="'info'"
+                         :icon="{ width: 25, height: 25, url: '../../../images/smiley.png', padding: 5}"
+                         :blink="false"
+                         :autoOpen="false"
+                         :autoClose="true"
+                         :closeOnClick="true"
+                         :position="'top-right'"
+                         :opacity="0.9"
+                         :width="'auto'">
+            <div>
+                <span>
+                    Welcome to our website.
+                </span>
+            </div>
+        </JqxNotification>
+
+        <div style="float: left; margin-left: 25%;">
+            <JqxButton @click="openNotificationClick()" :width="160">Open notification</JqxButton>
+            <JqxButton @click="closeLastNotificationClick()" :width="160">Close last notification</JqxButton>
+            <JqxButton @click="closeNotificationsClick()" :width="160">Close all notifications</JqxButton>
+        </div>
+
+        <div style="float: left; margin-left: 15px;">
+            <JqxExpander :toggleMode="'none'"
+                         :showArrow="false"
+                         :height="385"
+                         :width="200">
+                <div>
+                    JqxNotification settings
+                </div>
+                <div style="padding: 5px;">
+                    <div>
+                        Position:
+                    </div>
+                    <ul style="list-style: none; padding: 0px; margin-top: 10px; margin-left: 20px; font-family: Verdana;
+                font-size: 12px;">
+                        <li>
+                            <JqxRadioButton :checked="false" :groupName="'position'" @checked="topLeftChecked()">
+                                Top-Left
+                            </JqxRadioButton>
+                        </li>
+                        <li>
+                            <JqxRadioButton :checked="true" :groupName="'position'" @checked="topRightChecked()">
+                                Top-Right
+                            </JqxRadioButton>
+                        </li>
+                        <li>
+                            <JqxRadioButton :checked="false" :groupName="'position'" @checked="bottomLeftChecked()">
+                                Bottom-Left
+                            </JqxRadioButton>
+                        </li>
+                        <li>
+                            <JqxRadioButton :checked="false" :groupName="'position'" @checked="bottomRightChecked()">
+                                Bottom-Right
+                            </JqxRadioButton>
+                        </li>
+                    </ul>
+                    <br />
+                    <div>
+                        Template:
+                    </div>
+                    <JqxDropDownList @change="change($event)"
+                                     :source="source"
+                                     :width="'100%'"
+                                     :height="25"
+                                     :autoDropDownHeight="true"
+                                     :selectedIndex="0">
+                    </JqxDropDownList>
+                    <br />
+                    <JqxCheckBox :checked="true" @change="closeOnClickCheckboxChange($event)">
+                        Close on click
+                    </JqxCheckBox>
+                    <JqxCheckBox :checked="true" @change="autoCloseCheckBoxChange($event)">
+                        Auto close
+                    </JqxCheckBox>
+                    <JqxCheckBox :checked="false" @change="blinkCheckboxChange($event)">
+                        Blink
+                    </JqxCheckBox>
+                </div>
+            </JqxExpander>
+        </div>
+    </div>
+</template>
+<script>
+    import JqxNotification from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxExpander from "jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue";
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+
+    export default {
+        components: {
+            JqxNotification,
+            JqxButton,
+            JqxExpander,
+            JqxRadioButton,
+            JqxDropDownList,
+            JqxCheckBox
+        },
+        data: function () {
+            return {
+                source: ['info', 'warning', 'success', 'error', 'mail', 'time', 'null']
+            }
+        },
+        methods: {
+            openNotificationClick: function() {
+                this.$refs.myNotification.open();
+            },
+            closeLastNotificationClick: function () {
+                this.$refs.myNotification.closeLast();
+            },
+            closeNotificationsClick: function () {
+                this.$refs.myNotification.closeAll();
+            },
+            topLeftChecked: function () {
+                this.$refs.myNotification.position = 'top-left';
+            },
+            topRightChecked: function () {
+                this.$refs.myNotification.position = 'top-right';
+            },
+            bottomLeftChecked: function () {
+                this.$refs.myNotification.position = 'bottom-left';
+            },
+            bottomRightChecked: function () {
+                this.$refs.myNotification.position = 'bottom-right';
+            },
+            change: function (event) {
+                let choice = event.args.item.label;
+                let newTemplate;
+                if (choice != "null") {
+                    newTemplate = choice;
+                } else {
+                    newTemplate = null;
+                }
+                this.$refs.myNotification.template = newTemplate;
+            },
+            closeOnClickCheckboxChange: function (event) {
+                let checked = event.args.checked;
+                this.$refs.myNotification.closeOnClick = checked;
+            },
+            autoCloseCheckBoxChange: function (event) {
+                let checked = event.args.checked;
+                this.$refs.myNotification.autoClose = checked;
+            },
+            blinkCheckboxChange: function (event) {
+                let checked = event.args.checked;
+                this.$refs.myNotification.blink = checked;
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button, .jqx-radiobutton, .jqx-checkbox {
+        margin-bottom: 10px;
+    }
+</style>
diff --git a/notification/settings/main.js b/notification/settings/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/notification/settings/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/notification/settings/package.json b/notification/settings/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/notification/settings/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/notification/timernotification/App.vue b/notification/timernotification/App.vue
new file mode 100644
index 00000000..46b84f5f
--- /dev/null
+++ b/notification/timernotification/App.vue
@@ -0,0 +1,121 @@
+<template>
+    <div>
+        <!--Notifications-->
+        <JqxNotification ref="timerNotification"
+                         :position="position"
+                         :animationCloseDelay="0"
+                         :autoOpen="true"
+                         :autoClose="false"
+                         :template="'time'"
+                         :width="notificationWidth">
+            <div ref="timerNotificationContent">
+                Hurry, you have <span class="timer">30</span> seconds left!
+            </div>
+        </JqxNotification>
+        <JqxNotification :position="position"
+                         :autoOpen="false"
+                         :autoClose="false"
+                         :template="'time'"
+                         :width="notificationWidth">
+            <div>Time is up!</div>
+        </JqxNotification>
+        <JqxNotification ref="correctNotification"
+                         :position="position"
+                         :autoOpen="false"
+                         :autoClose="true"
+                         :template="'success'"
+                         :width="notificationWidth">
+            <div>Your answer is correct.</div>
+        </JqxNotification>
+        <JqxNotification ref="wrongNotification"
+                         :position="position"
+                         :autoOpen="false"
+                         :autoClose="true"
+                         :template="'error'"
+                         :width="notificationWidth">
+            <div>Your answer is incorrect.</div>
+        </JqxNotification>
+        <JqxNotification ref="errorTimeOutNotification"
+                         :position="position"
+                         :autoOpen="false"
+                         :autoClose="true"
+                         :template="'error'"
+                         :width="notificationWidth">
+            <div>Time is up!</div>
+        </JqxNotification>
+        <!--Layout-->
+        <div>
+            Solve the equasion in 30 seconds:
+        </div>
+        <div>
+            20 - 3 × 4 =
+            <JqxInput ref="answerInput" :width="50" :height="25"></JqxInput>
+        </div>
+        <br />
+        <JqxButton @click="submitAnswerClick()">Submit answer</JqxButton>
+    </div>
+</template>
+<script>
+    import JqxNotification from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+    import JqxInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue";
+
+    export default {
+        components: {
+            JqxNotification,
+            JqxButton,
+            JqxInput
+        },
+        data: function () {
+            return {
+                notificationWidth: 300,
+                position: 'top-right'
+            }
+        },
+        beforeCreate: function () {
+            this.interval = null;
+            this.seconds = 30;
+        },
+        mounted: function () {
+            this.interval = this.intervalStart();
+        },
+        methods: {
+            intervalStart: function() {
+                let interval = setInterval(() => {
+                    if (this.seconds > 1) {
+                        this.seconds--;
+                        let innerSpan = this.$refs.timerNotificationContent.getElementsByTagName('SPAN')[0];
+                        innerSpan.innerText = this.seconds;
+
+                        this.$refs.timerNotification.closeLast();
+                        this.$refs.timerNotification.open();
+                    } else {
+                        clearInterval(interval);
+                        this.$refs.timerNotification.closeLast();
+                    }
+                }, 1000);
+
+                return interval;
+            },
+            submitAnswerClick: function() {
+                if (this.seconds > 1) {
+                    if (this.$refs.answerInput.val() == 8) {
+                        this.$refs.correctNotification.open()
+                        clearInterval(this.interval);
+                        this.$refs.timerNotification.closeLast();
+                    } else {
+                        this.$refs.wrongNotification.open();
+                    }
+                } else {
+                    this.$refs.errorTimeOutNotification.open();
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        width: fit-content;
+    }
+</style>
diff --git a/notification/timernotification/main.js b/notification/timernotification/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/notification/timernotification/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/notification/timernotification/package.json b/notification/timernotification/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/notification/timernotification/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/numberinput/defaultfunctionality/App.vue b/numberinput/defaultfunctionality/App.vue
new file mode 100644
index 00000000..29af818e
--- /dev/null
+++ b/numberinput/defaultfunctionality/App.vue
@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <div style="margin-top: 10px;">
+            Number
+        </div>
+        <JqxNumberInput :width="250" :height="25" :spinButtons="true"></JqxNumberInput>
+        <div style="margin-top: 10px;">
+            Percentage
+        </div>
+        <JqxNumberInput :width="250" :height="25" :symbolPosition="'right'"
+                        :symbol="'%'" :spinButtons="true" :digits="3">
+        </JqxNumberInput>
+        <div style="margin-top: 10px;">
+            Currency
+        </div>
+        <JqxNumberInput :width="250" :height="25" :symbol="'$'" :spinButtons="true">
+        </JqxNumberInput>
+        <div style="margin-top: 10px;">
+            Disabled
+        </div>
+        <JqxNumberInput :width="250" :height="25" :disabled="true" :spinButtons="true">
+        </JqxNumberInput>
+    </div>
+</template>
+<script>
+    import JqxNumberInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue";
+
+    export default {
+        components: {
+            JqxNumberInput
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/numberinput/defaultfunctionality/main.js b/numberinput/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/numberinput/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/numberinput/defaultfunctionality/package.json b/numberinput/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/numberinput/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/numberinput/events/App.vue b/numberinput/events/App.vue
new file mode 100644
index 00000000..22adce0e
--- /dev/null
+++ b/numberinput/events/App.vue
@@ -0,0 +1,61 @@
+<template>
+    <div style="float: left;">
+        <div style="margin-top: 10px;">
+            Number
+        </div>
+        <div style="margin-top: 3px;">
+            <JqxNumberInput @change="change($event)"
+                            @textchanged="textchanged($event)"
+                            :spinButtons="true"
+                            :width="250"
+                            :height="25">
+            </JqxNumberInput>
+        </div>
+        <div style="margin-left: 0px; margin-top: 20px; float: left;">
+            <div>
+                <span>
+                    Events:
+                </span>
+                <JqxPanel ref="events"
+                          :width="300"
+                          :height="250">
+                </JqxPanel>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import JqxNumberInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxNumberInput,
+            JqxPanel
+        },
+        methods: {
+            change: function (event) {
+                let value = event.args.value;
+                this.$refs.events.clearcontent();
+                this.$refs.events.prepend('<div style="margin-top: 5px;">Value: ' + value + '</div>');
+            },
+            textchanged: function (event) {
+                let text = event.args.text;
+                this.$refs.events.prepend('<div style="margin-top: 5px;">Text: ' + text + '</div>');
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    .jqx-panel {
+        border: none;
+    }
+</style>
diff --git a/numberinput/events/main.js b/numberinput/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/numberinput/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/numberinput/events/package.json b/numberinput/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/numberinput/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/numberinput/fluidsize/App.vue b/numberinput/fluidsize/App.vue
new file mode 100644
index 00000000..e2a3e450
--- /dev/null
+++ b/numberinput/fluidsize/App.vue
@@ -0,0 +1,26 @@
+<template>
+    <JqxNumberInput :spinButtons="true"
+                    :width="'50%'"
+                    :height="35">
+    </JqxNumberInput>
+</template>
+<script>
+    import JqxNumberInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue";
+
+    export default {
+        components: {
+            JqxNumberInput
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 3px;
+        box-sizing: border-box;
+        margin: 0;
+        overflow: hidden;
+    }
+</style>
diff --git a/numberinput/fluidsize/main.js b/numberinput/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/numberinput/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/numberinput/fluidsize/package.json b/numberinput/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/numberinput/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/numberinput/righttoleftlayout/App.vue b/numberinput/righttoleftlayout/App.vue
new file mode 100644
index 00000000..8c5c611c
--- /dev/null
+++ b/numberinput/righttoleftlayout/App.vue
@@ -0,0 +1,51 @@
+<template>
+    <div id="jqxWidget" style="font-size: 13px; font-family: Verdana; float: left;">
+        <div style="margin-top: 10px;">
+            Number
+        </div>
+        <div style="margin-top: 3px;">
+            <JqxNumberInput :rtl="true"
+                            :spinButtons="true"
+                            :inputMode="'simple'"
+                            :width="250"
+                            :height="25">
+            </JqxNumberInput>
+        </div>
+        <div style="margin-top: 10px;">
+            Percentage
+        </div>
+        <div style="margin-top: 3px;">
+            <JqxNumberInput :rtl="true"
+                            :spinButtons="true"
+                            :digits="3"
+                            :symbolPosition="'right'"
+                            :symbol="'%'"
+                            :width="250"
+                            :height="25">
+            </JqxNumberInput>
+        </div>
+        <div style="margin-top: 10px;">
+            Currency
+        </div>
+        <div style="margin-top: 3px;">
+            <JqxNumberInput :rtl="true"
+                            :spinButtons="true"
+                            :symbol="'$'"
+                            :width="250"
+                            :height="25">
+            </JqxNumberInput>
+        </div>
+    </div>
+</template>
+<script>
+    import JqxNumberInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue";
+
+    export default {
+        components: {
+            JqxNumberInput
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/numberinput/righttoleftlayout/main.js b/numberinput/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/numberinput/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/numberinput/righttoleftlayout/package.json b/numberinput/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/numberinput/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/numberinput/settings/App.vue b/numberinput/settings/App.vue
new file mode 100644
index 00000000..8d282a4e
--- /dev/null
+++ b/numberinput/settings/App.vue
@@ -0,0 +1,121 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left;">
+        <div style="margin-top: 3px;">
+            <JqxNumberInput ref="numericInput"
+                            :spinButtons="true"
+                            :symbol="'$'"
+                            :min="0"
+                            :width="250"
+                            :height="25">
+            </JqxNumberInput>
+        </div>
+        <div>
+            <div style="float: left;">
+                <div style="width: 170px; margin-top: 20px;">
+                    <JqxCheckBox @change="change($event)" :checked="true">
+                        Show Spin Buttons
+                    </JqxCheckBox>
+                </div>
+                <div style="margin-top: 10px;">
+                    Symbol Position
+                </div>
+                <div style="margin-top: 5px;">
+                    <JqxRadioButton @checked="checkedLeftbutton($event)" :checked="true">
+                        Left
+                    </JqxRadioButton>
+                </div>
+                <div style="margin-top: 5px;">
+                    <JqxRadioButton @checked="checkedRightbutton($event)">
+                        Right
+                    </JqxRadioButton>
+
+                </div>
+            </div>
+            <div style="margin-left: 30px; float: left;">
+                <div style="margin-top: 20px; margin-bottom:10px;">
+                    Symbol
+                </div>
+                <JqxDropDownList @select="symboltypeSelect($event)"
+                                 :source="symboltypes"
+                                 :autoDropDownHeight="true"
+                                 :selectedIndex="0"
+                                 :width="60"
+                                 :height="20">
+                </JqxDropDownList>
+                <div style="margin-top: 10px; margin-bottom: 10px;">
+                    Decimal Digits
+                </div>
+                <JqxDropDownList @select="decimaldigitsSelect($event)"
+                                 :source="decimaldigitsNumbers"
+                                 :autoDropDownHeight="true"
+                                 :selectedIndex="2"
+                                 :width="60"
+                                 :height="20">
+                </JqxDropDownList>
+                <div style="margin-top: 10px; margin-bottom: 10px;">
+                    Digits
+                </div>
+                <JqxDropDownList @select="digitsSelect($event)"
+                                 :source="digitsNumbers"
+                                 :autoDropDownHeight="true"
+                                 :selectedIndex="7"
+                                 :width="60"
+                                 :height="20">
+                </JqxDropDownList>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import JqxNumberInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+    import JqxRadioButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue";
+    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
+
+    export default {
+        components: {
+            JqxNumberInput,
+            JqxCheckBox,
+            JqxRadioButton,
+            JqxDropDownList
+        },
+        beforeCreate: function () {
+            this.symboltypes = ['$', '%', 'None'];
+            this.decimaldigitsNumbers = ['0', '1', '2', '3', '4'];
+            this.digitsNumbers = ['1', '2', '3', '4', '5', '6', '7', '8'];
+        },
+        methods: {
+            change: function(event) {
+                let checked = event.args.checked;
+                this.$refs.numericInput.spinButtons = checked;
+            },
+            checkedLeftbutton: function (event) {
+                this.$refs.numericInput.symbolPosition = 'left';
+            },
+            checkedRightbutton: function (event) {
+                this.$refs.numericInput.symbolPosition = 'right';
+            },
+            symboltypeSelect: function (event) {
+                let index = event.args.index;
+                if (index == 2) {
+                    this.$refs.numericInput.symbol = '';
+                }
+                else {
+                    let symbol = this.symboltypes[index];
+                    this.$refs.numericInput.symbol = symbol;
+                }
+            },
+            decimaldigitsSelect: function (event) {
+                let index = event.args.index;
+                this.$refs.numericInput.decimalDigits = this.decimaldigitsNumbers[index];
+            },
+            digitsSelect: function (event) {
+                let index = event.args.index;
+                this.$refs.numericInput.digits = this.digitsNumbers[index];
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/numberinput/settings/main.js b/numberinput/settings/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/numberinput/settings/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/numberinput/settings/package.json b/numberinput/settings/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/numberinput/settings/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/numberinput/simpleinputmode/App.vue b/numberinput/simpleinputmode/App.vue
new file mode 100644
index 00000000..09b86635
--- /dev/null
+++ b/numberinput/simpleinputmode/App.vue
@@ -0,0 +1,57 @@
+<template>
+    <div style="float: left;">
+        <div style="margin-top: 10px;">
+            Number
+        </div>
+        <div style="margin-top: 3px;">
+            <JqxNumberInput @change="change($event)"
+                            :spinButtons="true"
+                            :inputMode="'simple'"
+                            :width="250"
+                            :height="25">
+            </JqxNumberInput>
+        </div>
+        <div style="margin-left: 0px; margin-top: 20px; float: left;">
+            <div>
+                <span>
+                    Events:
+                </span>
+                <JqxPanel ref="events"
+                          :width="300"
+                          :height="250">
+                </JqxPanel>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import JqxNumberInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxNumberInput,
+            JqxPanel
+        },
+        methods: {
+            change: function(event) {
+                let value = event.args.value;
+                this.$refs.events.clearcontent();
+                this.$refs.events.prepend('<div style="margin-top: 5px;">Value: ' + value + '</div>');
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    .jqx-panel {
+        border: none;
+    }
+</style>
diff --git a/numberinput/simpleinputmode/main.js b/numberinput/simpleinputmode/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/numberinput/simpleinputmode/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/numberinput/simpleinputmode/package.json b/numberinput/simpleinputmode/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/numberinput/simpleinputmode/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/numberinput/templates/App.vue b/numberinput/templates/App.vue
new file mode 100644
index 00000000..9ee4a980
--- /dev/null
+++ b/numberinput/templates/App.vue
@@ -0,0 +1,75 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left;">
+        <div style="margin-top: 10px;">
+            Default
+        </div>
+        <div style="margin-top: 3px;">
+            <JqxNumberInput :spinButtons="true"
+                            :width="250"
+                            :height="25">
+            </JqxNumberInput>
+        </div>
+        <div style="margin-top: 10px;">
+            Primary
+        </div>
+        <div style="margin-top: 3px;">
+            <JqxNumberInput :template="'primary'"
+                            :spinButtons="true"
+                            :width="250"
+                            :height="25">
+            </JqxNumberInput>
+        </div>
+        <div style="margin-top: 10px;">
+            Success
+        </div>
+        <div style="margin-top: 3px;">
+            <JqxNumberInput :template="'success'"
+                            :spinButtons="true"
+                            :width="250"
+                            :height="25">
+            </JqxNumberInput>
+        </div>
+        <div style="margin-top: 10px;">
+            Info
+        </div>
+        <div style="margin-top: 3px;">
+            <JqxNumberInput :template="'info'"
+                            :spinButtons="true"
+                            :width="250"
+                            :height="25">
+            </JqxNumberInput>
+        </div>
+        <div style="margin-top: 10px;">
+            Warning
+        </div>
+        <div style="margin-top: 3px;">
+            <JqxNumberInput :template="'warning'"
+                            :spinButtons="true"
+                            :width="250"
+                            :height="25">
+            </JqxNumberInput>
+        </div>
+        <div style="margin-top: 10px;">
+            Danger
+        </div>
+        <div style="margin-top: 3px;">
+            <JqxNumberInput :template="'danger'"
+                            :spinButtons="true"
+                            :width="250"
+                            :height="25">
+            </JqxNumberInput>
+        </div>
+    </div>
+</template>
+<script>
+    import JqxNumberInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue";
+
+    export default {
+        components: {
+            JqxNumberInput
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/numberinput/templates/main.js b/numberinput/templates/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/numberinput/templates/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/numberinput/templates/package.json b/numberinput/templates/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/numberinput/templates/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/numberinput/twowaydatabinding/App.vue b/numberinput/twowaydatabinding/App.vue
new file mode 100644
index 00000000..2bdfe3c9
--- /dev/null
+++ b/numberinput/twowaydatabinding/App.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <div>The value is: {{ value }}</div><br />
+
+        <JqxNumberInput v-model="value" :width="200" :height="25" :placeHolder="'Enter Something'" />
+    </div>
+</template>
+
+<script>
+    import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
+
+    export default {
+        components: {
+            JqxNumberInput
+        },
+        data: function () {
+            return {
+                value: 2018
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/numberinput/twowaydatabinding/main.js b/numberinput/twowaydatabinding/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/numberinput/twowaydatabinding/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/numberinput/twowaydatabinding/package.json b/numberinput/twowaydatabinding/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/numberinput/twowaydatabinding/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/numberinput/validation/App.vue b/numberinput/validation/App.vue
new file mode 100644
index 00000000..0427511c
--- /dev/null
+++ b/numberinput/validation/App.vue
@@ -0,0 +1,49 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left;">
+        <div>The input is restricted from 0 to 1000</div>
+        <div style='margin-top: 10px;'>
+            Number
+        </div>
+        <div style="margin-top: 3px;">
+            <JqxNumberInput :min="0"
+                            :max="1000"
+                            :width="250"
+                            :height="25">
+            </JqxNumberInput>
+        </div>
+        <div style="margin-top: 10px;">
+            Currency
+        </div>
+        <div style="margin-top: 3px;">
+            <JqxNumberInput :min="0"
+                            :max="1000"
+                            :symbol="'$'"
+                            :width="250"
+                            :height="25">
+            </JqxNumberInput>
+        </div>
+        <div style="margin-top: 10px;">
+            Custom Validation Message
+        </div>
+        <div style="margin-top: 3px;">
+            <JqxNumberInput :min="0"
+                            :max="1000"
+                            :value="0"
+                            :width="250"
+                            :height="25">
+            </JqxNumberInput>
+        </div>
+    </div>
+</template>
+<script>
+    import JqxNumberInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue";
+
+    export default {
+        components: {
+            JqxNumberInput
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/numberinput/validation/main.js b/numberinput/validation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/numberinput/validation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/numberinput/validation/package.json b/numberinput/validation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/numberinput/validation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/panel/defaultfunctionality/App.vue b/panel/defaultfunctionality/App.vue
new file mode 100644
index 00000000..ba1a41d6
--- /dev/null
+++ b/panel/defaultfunctionality/App.vue
@@ -0,0 +1,92 @@
+<template>
+    <JqxPanel :width="350" :height="350">
+        <div style="margin: 10px;">
+            <h3>Early History of the Internet</h3>
+        </div>
+        <!--Content-->
+        <div style="white-space: nowrap;">
+            <ul>
+                <li>1961 First packet-switching papers</li>
+                <li>1966 Merit Network founded</li>
+                <li>1966 ARPANET planning starts</li>
+                <li>1969 ARPANET carries its first packets</li>
+                <li>1970 Mark I network at NPL (UK)</li>
+                <li>1970 Network Information Center (NIC)</li>
+                <li>1971 Merit Network"s packet-switched network operational</li>
+                <li>1971 Tymnet packet-switched network</li>
+                <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
+                <li>1973 CYCLADES network demonstrated</li>
+                <li>1974 Telenet packet-switched network</li>
+                <li>1976 X.25 protocol approved</li>
+                <li>1979 Internet Activities Board (IAB)</li>
+                <li>1980 USENET news using UUCP</li>
+                <li>1980 Ethernet standard introduced</li>
+                <li>1981 BITNET established</li>
+            </ul>
+        </div>
+        <!--Header-->
+        <div style="margin: 10px;">
+            <h3>Merging the networks and creating the Internet</h3>
+        </div>
+        <!--Content-->
+        <div>
+            <ul>
+                <li>1981 Computer Science Network (CSNET)</li>
+                <li>1982 TCP/IP protocol suite formalized</li>
+                <li>1982 Simple Mail Transfer Protocol (SMTP)</li>
+                <li>1983 Domain Name System (DNS)</li>
+                <li>1983 MILNET split off from ARPANET</li>
+                <li>1986 NSFNET with 56 kbit/s links</li>
+                <li>1986 Internet Engineering Task Force (IETF)</li>
+                <li>1987 UUNET founded</li>
+                <li>1988 NSFNET upgraded to 1.5 Mbit/s (T1)</li>
+                <li>1988 OSI Reference Model released</li>
+                <li>1988 Morris worm</li>
+                <li>1989 Border Gateway Protocol (BGP)</li>
+                <li>1989 PSINet founded, allows commercial traffic</li>
+                <li>1989 Federal Internet Exchanges (FIXes)</li>
+                <li>1990 GOSIP (without TCP/IP)</li>
+                <li>1990 ARPANET decommissioned</li>
+            </ul>
+        </div>
+        <!--Header-->
+        <div style="margin: 10px;">
+            <h3>Popular Internet services</h3>
+        </div>
+        <!--Content-->
+        <div>
+            <ul>
+                <li>1990 IMDb Internet movie database</li>
+                <li>1995 Amazon.com online retailer</li>
+                <li>1995 eBay online auction and shopping</li>
+                <li>1995 Craigslist classified advertisements</li>
+                <li>1996 Hotmail free web-based e-mail</li>
+                <li>1997 Babel Fish automatic translation</li>
+                <li>1998 Google Search</li>
+                <li>1999 Napster peer-to-peer file sharing</li>
+                <li>2001 Wikipedia, the free encyclopedia</li>
+                <li>2003 LinkedIn business networking</li>
+                <li>2003 Myspace social networking site</li>
+                <li>2003 Skype Internet voice calls</li>
+                <li>2003 iTunes Store</li>
+                <li>2004 Facebook social networking site</li>
+                <li>2004 Podcast media file series</li>
+                <li>2004 Flickr image hosting</li>
+                <li>2005 YouTube video sharing</li>
+                <li>2005 Google Earth virtual globe</li>
+            </ul>
+        </div>
+    </JqxPanel>
+</template>
+<script>
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxPanel
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/panel/defaultfunctionality/main.js b/panel/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/panel/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/panel/defaultfunctionality/package.json b/panel/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/panel/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/panel/dockpanel/App.vue b/panel/dockpanel/App.vue
new file mode 100644
index 00000000..d576987c
--- /dev/null
+++ b/panel/dockpanel/App.vue
@@ -0,0 +1,123 @@
+<template>
+    <div style="width: 300px; height: 600px; font-size: 13px; font-family: Verdana;">
+        <JqxDockPanel ref="DockPanel"
+                      :width="300"
+                      :height="210">
+            <div ref="first" dock="left" style="background: #486974;">
+                First Div
+            </div>
+            <div ref="second" dock="top" style="height: 100px; background: #368ba7;">
+                Second Div
+            </div>
+            <div ref="third" dock="right" style="background: #df7169;">
+                Third Div
+            </div>
+            <div ref="fourth" style="background: #a73654;">
+                Fourth Div
+            </div>
+        </JqxDockPanel>
+        <br />
+        <div>Layout Types:</div>
+        <div @click="clickOnLayout($event)">
+            <img title="click to apply a new layout" alt="layout types" src="../../../images/LayoutTypes.png" />
+        </div>
+        <br />
+        <div>Spiral:</div>
+        <JqxDockPanel ref="DockPanel2"
+                      :width="300"
+                      :height="210"
+                      :lastchildfill="false">
+            <div dock="left" style="background: #486974; width: 20px;">
+                1
+            </div>
+            <div dock="top" style="background: #368ba7; height: 20px;">
+                2
+            </div>
+            <div dock="right" style="background: #df7169; width: 20px;">
+                3
+            </div>
+            <div dock="bottom" style="background: #a73654; height: 20px;">
+                4
+            </div>
+        </JqxDockPanel>
+    </div>
+</template>
+<script>
+    import JqxDockPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdockpanel.vue";
+
+    export default {
+        components: {
+            JqxDockPanel
+        },
+        mounted: function () {
+            this.$refs.DockPanel.$el.style.color = 'white';
+            this.$refs.DockPanel2.$el.style.color = 'white';
+        },
+        methods: {
+            layoutOnClick: function(event) {
+                let layoutsLength = 4;
+                let firstElement = this.$refs.first;
+                let secondElement = this.$refs.second;
+                let thirdElement = this.$refs.third;
+                let fourthElement = this.$refs.fourth;
+
+                let position = parseInt(event.clientX) - parseInt(event.target.offsetLeft);
+
+                if (position < 55) {
+                    firstElement.setAttribute('dock', 'bottom');
+                    firstElement.style.height = '105px';
+                    secondElement.setAttribute('dock', 'left');
+                    secondElement.style.width = '100px';
+                    thirdElement.setAttribute('dock', 'left');
+                    thirdElement.style.width = '100px';
+                    fourthElement.setAttribute('dock', 'left');
+                    fourthElement.style.width = '100px';
+                } else
+                    if (position < 115) {
+                        for (let i = 0; i < layoutsLength; i++) {
+                            this.$refs.DockPanel.$el.firstChild.children[i].style.width = '100px';
+                        }
+                        firstElement.setAttribute('dock', 'left');
+                        secondElement.setAttribute('dock', 'right');
+                        thirdElement.setAttribute('dock', 'bottom');
+                        thirdElement.style.height = '140px';
+                        fourthElement.setAttribute('dock', 'top');
+                        fourthElement.style.height = '70px';
+                    } else if (position < 175) {
+                        for (let i = 0; i < layoutsLength; i++) {
+                            this.$refs.DockPanel.$el.firstChild.children[i].style.width = '150px';
+                        }
+                        firstElement.setAttribute('dock', 'left');
+                        secondElement.setAttribute('dock', 'left');
+                        thirdElement.setAttribute('dock', 'left');
+                        fourthElement.setAttribute('dock', 'left');
+
+                    } else if (position < 235) {
+                        for (let i = 0; i < layoutsLength; i++) {
+                            this.$refs.DockPanel.$el.firstChild.children[i].style.height = '70px';
+                        }
+                        firstElement.setAttribute('dock', 'top');
+                        secondElement.setAttribute('dock', 'top');
+                        thirdElement.setAttribute('dock', 'top');
+                        fourthElement.setAttribute('dock', 'top');
+                    }
+                    else {
+                        for (let i = 0; i < layoutsLength; i++) {
+                            this.$refs.DockPanel.$el.firstChild.children[i].style.width = '100px';
+                        }
+                        firstElement.setAttribute('dock', 'left');
+                        secondElement.setAttribute('dock', 'left');
+                        thirdElement.setAttribute('dock', 'left');
+                        fourthElement.setAttribute('dock', 'left');
+                    }
+            },
+            clickOnLayout: function (event) {
+                this.layoutOnClick(event);
+                this.$refs.DockPanel.refresh();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/panel/dockpanel/main.js b/panel/dockpanel/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/panel/dockpanel/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/panel/dockpanel/package.json b/panel/dockpanel/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/panel/dockpanel/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/panel/fluidsize/App.vue b/panel/fluidsize/App.vue
new file mode 100644
index 00000000..e04fd83b
--- /dev/null
+++ b/panel/fluidsize/App.vue
@@ -0,0 +1,49 @@
+<template>
+    <JqxPanel style=" font-size: 13px; font-family: Verdana;"
+              :width="'50%'"
+              :height="'50%'">
+        <div style="margin: 10px;">
+            <h3>Early History of the Internet</h3>
+        </div>
+        <!--Content-->
+        <div style="white-space: nowrap;">
+            <ul>
+                <li>1961 First packet-switching papers</li>
+                <li>1966 Merit Network founded</li>
+                <li>1966 ARPANET planning starts</li>
+                <li>1969 ARPANET carries its first packets</li>
+                <li>1970 Mark I network at NPL (UK)</li>
+                <li>1970 Network Information Center (NIC)</li>
+                <li>1971 Merit Network's packet-switched network operational</li>
+                <li>1971 Tymnet packet-switched network</li>
+                <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
+                <li>1973 CYCLADES network demonstrated</li>
+                <li>1974 Telenet packet-switched network</li>
+                <li>1976 X.25 protocol approved</li>
+                <li>1979 Internet Activities Board (IAB)</li>
+                <li>1980 USENET news using UUCP</li>
+                <li>1980 Ethernet standard introduced</li>
+                <li>1981 BITNET established</li>
+            </ul>
+        </div>
+    </JqxPanel>
+</template>
+<script>
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxPanel
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+    }
+</style>
diff --git a/panel/fluidsize/main.js b/panel/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/panel/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/panel/fluidsize/package.json b/panel/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/panel/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/panel/righttoleftlayout/App.vue b/panel/righttoleftlayout/App.vue
new file mode 100644
index 00000000..91611b30
--- /dev/null
+++ b/panel/righttoleftlayout/App.vue
@@ -0,0 +1,101 @@
+<template>
+    <JqxPanel style="font-size: 13px; font-family: Verdana;"
+              :rtl="true"
+              :width="400"
+              :height="350">
+        <div style="direction: rtl;">
+            <div style="margin: 10px;">
+                <h3>Early History of the Internet</h3>
+            </div>
+            <!--Content-->
+            <div style="white-space: nowrap;">
+                <ul>
+                    <li>1961 First packet-switching papers</li>
+                    <li>1966 Merit Network founded</li>
+                    <li>1966 ARPANET planning starts</li>
+                    <li>1969 ARPANET carries its first packets</li>
+                    <li>1970 Mark I network at NPL (UK)</li>
+                    <li>1970 Network Information Center (NIC)</li>
+                    <li>1973 CYCLADES network demonstrated</li>
+                    <li>1974 Telenet packet-switched network</li>
+                    <li>1976 X.25 protocol approved</li>
+                    <li>1979 Internet Activities Board (IAB)</li>
+                    <li>1980 USENET news using UUCP</li>
+                    <li>1980 Ethernet standard introduced</li>
+                    <li>1981 BITNET established</li>
+                </ul>
+            </div>
+            <!--Header-->
+            <div style="margin: 10px;">
+                <h3>Merging the networks and creating the Internet</h3>
+            </div>
+            <!--Content-->
+            <div>
+                <ul>
+                    <li>1981 Computer Science Network (CSNET)</li>
+                    <li>1982 TCP/IP protocol suite formalized</li>
+                    <li>1982 Simple Mail Transfer Protocol (SMTP)</li>
+                    <li>1983 Domain Name System (DNS)</li>
+                    <li>1983 MILNET split off from ARPANET</li>
+                    <li>1986 NSFNET with 56 kbit/s links</li>
+                    <li>1986 Internet Engineering Task Force (IETF)</li>
+                    <li>1987 UUNET founded</li>
+                    <li>1988 NSFNET upgraded to 1.5 Mbit/s (T1)</li>
+                    <li>1988 OSI Reference Model released</li>
+                    <li>1988 Morris worm</li>
+                    <li>1989 Border Gateway Protocol (BGP)</li>
+                    <li>1989 PSINet founded, allows commercial traffic</li>
+                    <li>1989 Federal Internet Exchanges (FIXes)</li>
+                    <li>1990 GOSIP (without TCP/IP)</li>
+                    <li>1990 ARPANET decommissioned</li>
+                </ul>
+            </div>
+            <!--Header-->
+            <div style="margin: 10px;">
+                <h3>Popular Internet services</h3>
+            </div>
+            <!--Content-->
+            <div>
+                <ul>
+                    <li>1990 IMDb Internet movie database</li>
+                    <li>1995 Amazon.com online retailer</li>
+                    <li>1995 eBay online auction and shopping</li>
+                    <li>1995 Craigslist classified advertisements</li>
+                    <li>1996 Hotmail free web-based e-mail</li>
+                    <li>1997 Babel Fish automatic translation</li>
+                    <li>1998 Google Search</li>
+                    <li>1999 Napster peer-to-peer file sharing</li>
+                    <li>2001 Wikipedia, the free encyclopedia</li>
+                    <li>2003 LinkedIn business networking</li>
+                    <li>2003 Myspace social networking site</li>
+                    <li>2003 Skype Internet voice calls</li>
+                    <li>2003 iTunes Store</li>
+                    <li>2004 Facebook social networking site</li>
+                    <li>2004 Podcast media file series</li>
+                    <li>2004 Flickr image hosting</li>
+                    <li>2005 YouTube video sharing</li>
+                    <li>2005 Google Earth virtual globe</li>
+                </ul>
+            </div>
+        </div>
+    </JqxPanel>
+</template>
+<script>
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxPanel
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+    }
+</style>
diff --git a/panel/righttoleftlayout/main.js b/panel/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/panel/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/panel/righttoleftlayout/package.json b/panel/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/panel/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/passwordinput/customstrengthrendering/App.vue b/passwordinput/customstrengthrendering/App.vue
new file mode 100644
index 00000000..42f7c080
--- /dev/null
+++ b/passwordinput/customstrengthrendering/App.vue
@@ -0,0 +1,69 @@
+<template>
+    <JqxPasswordInput :placeHolder="'Enter password'"
+                      :showStrength="true"
+                      :showStrengthPosition="'right'"
+                      :passwordStrength="passwordStrength"
+                      :width="200"
+                      :height="25">
+    </JqxPasswordInput>
+</template>
+
+<script>
+    import JqxPasswordInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpasswordinput.vue';
+
+    export default {
+        components: {
+            JqxPasswordInput
+        },
+        methods: {
+            passwordStrength: function (password, characters, defaultStrength) {
+                let length = password.length;
+                let letters = characters.letters;
+                let numbers = characters.numbers;
+                let specialKeys = characters.specialKeys;
+                let strengthCoefficient = letters + numbers + 2 * specialKeys + letters * numbers * specialKeys;
+                let strengthValue;
+                if (length < 4) {
+                    strengthValue = 'Too short';
+                } else if (strengthCoefficient < 10) {
+                    strengthValue = 'Weak';
+                } else if (strengthCoefficient < 20) {
+                    strengthValue = 'Fair';
+                } else if (strengthCoefficient < 30) {
+                    strengthValue = 'Good';
+                } else {
+                    strengthValue = 'Strong';
+                };
+
+                return strengthValue;
+            },
+            strengthTypeRenderer: function (password, characters, defaultStrength) {
+                let length = password.length;
+                let letters = characters.letters;
+                let numbers = characters.numbers;
+                let specialKeys = characters.specialKeys;
+                let strengthCoefficient = letters + numbers + 2 * specialKeys + letters * numbers / 2 + length;
+                let strengthValue;
+                let color;
+                if (length < 8) {
+                    strengthValue = 'Too short';
+                    color = 'rgb(170, 0, 51)';
+                } else if (strengthCoefficient < 20) {
+                    strengthValue = 'Weak';
+                    color = 'rgb(170, 0, 51)';
+                } else if (strengthCoefficient < 30) {
+                    strengthValue = 'Fair';
+                    color = 'rgb(255, 204, 51)';
+                } else if (strengthCoefficient < 40) {
+                    strengthValue = 'Good';
+                    color = 'rgb(45, 152, 243)';
+                } else {
+                    strengthValue = 'Strong';
+                    color = 'rgb(118, 194, 97)';
+                };
+
+                return '<div style="font-style: italic; font-weight: bold; color: "' + color + ';">' + strengthValue + '</div>';
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/passwordinput/customstrengthrendering/main.js b/passwordinput/customstrengthrendering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/passwordinput/customstrengthrendering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/passwordinput/customstrengthrendering/package.json b/passwordinput/customstrengthrendering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/passwordinput/customstrengthrendering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/passwordinput/defaultfunctionality/App.vue b/passwordinput/defaultfunctionality/App.vue
new file mode 100644
index 00000000..025b0c18
--- /dev/null
+++ b/passwordinput/defaultfunctionality/App.vue
@@ -0,0 +1,165 @@
+<template>
+    <JqxExpander ref="createAccount"
+                 :showArrow="false"
+                 :toggleMode="'none'"
+                 :width="350">
+        <div>
+            Create a new account
+        </div>
+        <div style="font-family: Verdana; font-size: 13px;">
+            <JqxValidator ref="myValidator" @validationSuccess="validationSuccess($event)" :rules="rules" :hintType="'label'">
+                <form id="form" style="overflow: hidden; margin: 10px;" action="./">
+                    <table>
+                        <tr>
+                            <td colspan="2">
+                                First Name
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <JqxInput ref="firstName" class="firstName" :width="300" :height="21"></JqxInput>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                Last Name
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <JqxInput ref="lastName" class="lastName" :width="300" :height="21"></JqxInput>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                Choose your username
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                <JqxInput ref="userName" class="userName" :width="300" :height="21"></JqxInput>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                Create a password
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                <JqxPasswordInput ref="password" class="password" :width="300" :height="21"></JqxPasswordInput>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                Confirm your password
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                <JqxPasswordInput ref="passwordConfirm" class="passwordConfirm" :width="300" :height="21"></JqxPasswordInput>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                Birthday
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                <JqxDateTimeInput :width="300"
+                                                  :height="21">
+                                </JqxDateTimeInput>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                Gender
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                <JqxDropDownList ref="gender" class="gender"
+                                                 :source="genders"
+                                                 :selectedIndex="-1"
+                                                 :placeHolder="'I am...'"
+                                                 :dropDownHeight="50"
+                                                 :width="300"
+                                                 :height="21">
+                                </JqxDropDownList>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                <JqxButton :width="150" @click="buttonClicked()">Create account</JqxButton>
+                            </td>
+                        </tr>
+                    </table>
+                </form>
+            </JqxValidator>
+        </div>
+    </JqxExpander>
+</template>
+
+<script>
+    import JqxPasswordInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpasswordinput.vue';
+    import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
+    import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
+    import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
+    import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
+    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxPasswordInput,
+            JqxExpander,
+            JqxValidator,
+            JqxInput,
+            JqxDateTimeInput,
+            JqxDropDownList,
+            JqxButton
+        },
+        data: function () {
+            return {
+                genders: ["male", "female"],
+                rules: [
+                    {
+                        input: ".firstName", message: "First name is required!", action: 'keyup, blur', rule: (input, commit) => {
+                            return this.$refs.firstName.val() != "" && this.$refs.firstName.val() != "First";
+                        }
+                    },
+                    {
+                        input: ".lastName", message: "Last name is required!", action: 'keyup, blur', rule: (input, commit) => {
+                            return this.$refs.lastName.val() != "" && this.$refs.lastName.val() != "Last";
+                        }
+                    },
+                    { input: ".userName", message: "Username is required!", action: 'keyup, blur', rule: 'required' },
+                    { input: ".password", message: "Password is required!", action: 'keyup, blur', rule: 'required' },
+                    { input: ".passwordConfirm", message: "Password is required!", action: 'keyup, blur', rule: 'required' },
+                    {
+                        input: ".passwordConfirm", message: "Passwords should match!", action: 'keyup, blur', rule: (input, commit) => {
+                            let firstPassword = this.$refs.password.val();
+                            let secondPassword = this.$refs.passwordConfirm.val();
+                            return firstPassword == secondPassword;
+                        }
+                    },
+                    {
+                        input: ".gender", message: "Gender is required!", action: 'blur', rule: (input, commit) => {
+                            let index = this.$refs.gender.getSelectedIndex();
+                            return index != -1;
+                        }
+                    }
+                ]
+            }
+        },
+        methods: {
+            buttonClicked: function() {
+                this.$refs.myValidator.validate(document.getElementById('form'));
+            },
+            validationSuccess: function(event) {
+                this.$refs.createAccount.setContent('<span style="margin: 10px;">Account created.</span>');
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/passwordinput/defaultfunctionality/main.js b/passwordinput/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/passwordinput/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/passwordinput/defaultfunctionality/package.json b/passwordinput/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/passwordinput/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/passwordinput/fluidsize/App.vue b/passwordinput/fluidsize/App.vue
new file mode 100644
index 00000000..20bd88c6
--- /dev/null
+++ b/passwordinput/fluidsize/App.vue
@@ -0,0 +1,16 @@
+<template>
+    <JqxPasswordInput :placeHolder="'Enter password'"
+                      :width="'50%'"
+                      :height="25">
+    </JqxPasswordInput>
+</template>
+
+<script>
+    import JqxPasswordInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpasswordinput.vue';
+
+    export default {
+        components: {
+            JqxPasswordInput
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/passwordinput/fluidsize/main.js b/passwordinput/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/passwordinput/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/passwordinput/fluidsize/package.json b/passwordinput/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/passwordinput/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/passwordinput/righttoleftlayout/App.vue b/passwordinput/righttoleftlayout/App.vue
new file mode 100644
index 00000000..2817a20c
--- /dev/null
+++ b/passwordinput/righttoleftlayout/App.vue
@@ -0,0 +1,31 @@
+<template>
+    <JqxPasswordInput :rtl="true"
+                      :placeHolder="'הזן את הסיסמה:'"
+                      :showStrength="true"
+                      :localization="localization"
+                      :width="200"
+                      :height="25">
+    </JqxPasswordInput>
+</template>
+
+<script>
+    import JqxPasswordInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpasswordinput.vue';
+
+    export default {
+        components: {
+            JqxPasswordInput
+        },
+        data: function () {
+            return {
+                localization: {
+                    showPasswordString: "צג סיסמא",
+                    hidePasswordString: "סתר סיסמא",
+                    passwordStrengthString: "חוזק סיסמא",
+                    tooShort: "קצר מדי",
+                    weak: "חלש", fair: "הוגן",
+                    good: "טוב", strong: "חזק"
+                }
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/passwordinput/righttoleftlayout/main.js b/passwordinput/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/passwordinput/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/passwordinput/righttoleftlayout/package.json b/passwordinput/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/passwordinput/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/passwordinput/twowaydatabinding/App.vue b/passwordinput/twowaydatabinding/App.vue
new file mode 100644
index 00000000..3caca17c
--- /dev/null
+++ b/passwordinput/twowaydatabinding/App.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <div>The value is: {{ value }}</div><br />
+
+        <JqxPasswordInput v-model="value" :width="200" :height="25" :placeHolder="'Enter Something'" />
+    </div>
+</template>
+
+<script>
+    import JqxPasswordInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpasswordinput.vue';
+
+    export default {
+        components: {
+            JqxPasswordInput
+        },
+        data: function () {
+            return {
+                value: ''
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/passwordinput/twowaydatabinding/main.js b/passwordinput/twowaydatabinding/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/passwordinput/twowaydatabinding/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/passwordinput/twowaydatabinding/package.json b/passwordinput/twowaydatabinding/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/passwordinput/twowaydatabinding/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/pivotgrid/cell-values-alignment/App.vue b/pivotgrid/cell-values-alignment/App.vue
new file mode 100644
index 00000000..acba4737
--- /dev/null
+++ b/pivotgrid/cell-values-alignment/App.vue
@@ -0,0 +1,79 @@
+<template>
+    <JqxPivotGrid :source="pivotDataSource"
+                  :treeStyleRows="true"
+                  :autoResize="true"
+                  :multipleSelectionEnabled="true">
+    </JqxPivotGrid>
+</template>
+
+<script>
+    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
+
+    export default {
+        components: {
+            JqxPivotGrid
+        },
+        data: function () {
+            return {
+                pivotDataSource: this.pivotDataSource
+            }
+        },
+        beforeCreate: function () {
+            const createPivotDataSource = function () {
+                // prepare sample data
+                let data = new Array();
+
+                let countries = [
+                    "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
+                ];
+
+                let dataPoints = [
+                    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
+                ];
+
+                for (let i = 0; i < countries.length * 2; i++) {
+                    let row = {};
+                    let value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
+
+                    row["country"] = countries[i % countries.length];
+                    row["value"] = value;
+
+                    data[i] = row;
+                }
+
+                // create a data source and data adapter
+                let source =
+                    {
+                        localdata: data,
+                        datatype: "array",
+                        datafields:
+                            [
+                                { name: 'country', type: 'string' },
+                                { name: 'value', type: 'number' }
+                            ]
+                    };
+
+                let dataAdapter = new jqx.dataAdapter(source);
+                dataAdapter.dataBind();
+
+                // create a pivot data source from the dataAdapter
+                let pivotDataSource = new jqx.pivot(
+                    dataAdapter,
+                    {
+                        pivotValuesOnRows: false,
+                        rows: [{ dataField: 'country', width: 190 }],
+                        columns: [],
+                        values: [
+                            { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
+                            { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
+                            { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
+                        ]
+                    }
+                );
+                return pivotDataSource;
+            }
+
+            this.pivotDataSource = createPivotDataSource();
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/pivotgrid/cell-values-alignment/main.js b/pivotgrid/cell-values-alignment/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/pivotgrid/cell-values-alignment/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/pivotgrid/cell-values-alignment/package.json b/pivotgrid/cell-values-alignment/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/pivotgrid/cell-values-alignment/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/pivotgrid/custom-pivot-function/App.vue b/pivotgrid/custom-pivot-function/App.vue
new file mode 100644
index 00000000..6e765bfd
--- /dev/null
+++ b/pivotgrid/custom-pivot-function/App.vue
@@ -0,0 +1,142 @@
+<template>
+    <JqxPivotGrid style="width: 800px; height: 400px;"
+                  :source="pivotDataSource"
+                  :treeStyleRows="false"
+                  :autoResize="false"
+                  :multipleSelectionEnabled="true">
+    </JqxPivotGrid>
+</template>
+
+<script>
+    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
+
+    export default {
+        components: {
+            JqxPivotGrid
+        },
+        data: function () {
+            return {
+                pivotDataSource: this.pivotDataSource
+            }
+        },
+        beforeCreate: function () {
+            const createPivotDataSource = function () {
+                // prepare sample data
+                let data = new Array();
+
+                let firstNames =
+                    [
+                        "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
+                    ];
+
+                let lastNames =
+                    [
+                        "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
+                    ];
+
+                let productNames =
+                    [
+                        "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
+                    ];
+
+                let priceValues =
+                    [
+                        "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
+                    ];
+
+                for (let i = 0; i < 500; i++) {
+                    let row = {};
+                    let productindex = Math.floor(Math.random() * productNames.length);
+                    let price = parseFloat(priceValues[productindex]);
+                    let quantity = 1 + Math.round(Math.random() * 10);
+
+                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
+                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
+                    row["productname"] = productNames[productindex];
+                    row["price"] = price;
+                    row["quantity"] = quantity;
+                    row["total"] = price * quantity;
+
+                    data[i] = row;
+                }
+
+                // create a data source and data adapter
+                let source =
+                    {
+                        localdata: data,
+                        datatype: "array",
+                        datafields:
+                            [
+                                { name: 'firstname', type: 'string' },
+                                { name: 'lastname', type: 'string' },
+                                { name: 'productname', type: 'string' },
+                                { name: 'quantity', type: 'number' },
+                                { name: 'price', type: 'number' },
+                                { name: 'total', type: 'number' }
+                            ]
+                    };
+
+                let dataAdapter = new jqx.dataAdapter(source);
+                dataAdapter.dataBind();
+
+                // create a pivot data source from the dataAdapter
+                let pivotDataSource = new jqx.pivot(
+                    dataAdapter,
+                    {
+                        customAggregationFunctions: {
+                            'var': function (values) {
+                                if (values.length <= 1)
+                                    return 0;
+
+                                // sample's mean
+                                var mean = 0;
+                                for (var i = 0; i < values.length; i++)
+                                    mean += values[i];
+
+                                mean /= values.length;
+
+                                // calc squared sum
+                                var ssum = 0;
+                                for (var i = 0; i < values.length; i++)
+                                    ssum += Math.pow(values[i] - mean, 2)
+
+                                // calc the variance
+                                var variance = ssum / values.length;
+
+                                return variance;
+                            }
+                        },
+                        pivotValuesOnRows: false,
+                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
+                        columns: [{ dataField: 'productname' }],
+                        filters: [
+                            {
+                                dataField: 'productname',
+                                filterFunction: function (value) {
+                                    if (value == "Black Tea" || value == "Green Tea")
+                                        return true;
+
+                                    return false;
+                                }
+                            }
+                        ],
+                        values: [
+                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
+                            { dataField: 'price', 'function': 'count', text: 'count' },
+                            {
+                                dataField: 'quantity',
+                                text: 'variance',
+                                'function': 'var',
+                                formatSettings: { decimalPlaces: 2 }
+                            }
+                        ]
+                    }
+                );
+
+                return pivotDataSource;	
+            }
+
+            this.pivotDataSource = createPivotDataSource();
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/pivotgrid/custom-pivot-function/main.js b/pivotgrid/custom-pivot-function/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/pivotgrid/custom-pivot-function/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/pivotgrid/custom-pivot-function/package.json b/pivotgrid/custom-pivot-function/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/pivotgrid/custom-pivot-function/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/pivotgrid/custom-rendering/App.vue b/pivotgrid/custom-rendering/App.vue
new file mode 100644
index 00000000..baea603d
--- /dev/null
+++ b/pivotgrid/custom-rendering/App.vue
@@ -0,0 +1,154 @@
+<template>
+    <JqxPivotGrid style="width: 800px; height: 400px;"
+                  :source="pivotDataSource"
+                  :itemsRenderer="myItemsRenderer"
+                  :cellsRenderer="myCellsRenderer"
+                  :treeStyleRows="false"
+                  :autoResize="false"
+                  :multipleSelectionEnabled="true">
+    </JqxPivotGrid>
+</template>
+
+<script>
+    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
+
+    export default {
+        components: {
+            JqxPivotGrid
+        },
+        data: function () {
+            return {
+                pivotDataSource: this.pivotDataSource
+            }
+        },
+        beforeCreate: function () {
+            const createPivotDataSource = function () {
+                // prepare sample data
+                let data = new Array();
+
+                let firstNames =
+                    [
+                        "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
+                    ];
+
+                let lastNames =
+                    [
+                        "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
+                    ];
+
+                let productNames =
+                    [
+                        "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
+                    ];
+
+                let priceValues =
+                    [
+                        "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
+                    ];
+
+                for (let i = 0; i < 500; i++) {
+                    let row = {};
+                    let productindex = Math.floor(Math.random() * productNames.length);
+                    let price = parseFloat(priceValues[productindex]);
+                    let quantity = 1 + Math.round(Math.random() * 10);
+
+                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
+                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
+                    row["productname"] = productNames[productindex];
+                    row["price"] = price;
+                    row["quantity"] = quantity;
+                    row["total"] = price * quantity;
+
+                    data[i] = row;
+                }
+
+                // create a data source and data adapter
+                let source =
+                    {
+                        localdata: data,
+                        datatype: "array",
+                        datafields:
+                            [
+                                { name: 'firstname', type: 'string' },
+                                { name: 'lastname', type: 'string' },
+                                { name: 'productname', type: 'string' },
+                                { name: 'quantity', type: 'number' },
+                                { name: 'price', type: 'number' },
+                                { name: 'total', type: 'number' }
+                            ]
+                    };
+
+                let dataAdapter = new jqx.dataAdapter(source);
+                dataAdapter.dataBind();
+
+                // create a pivot data source from the dataAdapter
+                let pivotDataSource = new jqx.pivot(
+                    dataAdapter,
+                    {
+                        pivotValuesOnRows: false,
+                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
+                        columns: [{ dataField: 'productname' }],
+                        filters: [
+                            {
+                                dataField: 'productname',
+                                filterFunction: function (value) {
+                                    if (value == "Black Tea" || value == "Green Tea")
+                                        return true;
+
+                                    return false;
+                                }
+                            }
+                        ],
+                        values: [
+                            { dataField: 'price', 'function': 'sum', text: 'Sum', formatSettings: { prefix: '$', decimalPlaces: 2 } },
+                            { dataField: 'price', 'function': 'count', text: 'Count' },
+                            { dataField: 'price', 'function': 'average', text: 'Average', formatSettings: { prefix: '$', decimalPlaces: 2 } }
+                        ]
+                    }
+                );
+
+                return pivotDataSource;
+            }
+
+            this.pivotDataSource = createPivotDataSource();
+        },
+        methods: {
+            myItemsRenderer: function(pivotItem) {
+                let backgroundColor = pivotItem.isColumn ? 'rgba(187, 232, 227, 255)' : 'rgba(203, 254, 187, 255)';
+                if (pivotItem.isSelected)
+                    backgroundColor = pivotItem.isColumn ? 'rgba(167, 212, 207, 255)' : 'rgba(183, 234, 157, 255)';
+
+                let sortElement = '';
+                if (pivotItem.hierarchy.getSortItem() == pivotItem) {
+                    let elementClass = pivotItem.hierarchy.getSortOrder() == 'desc' ? "jqx-icon-arrow-down" : "jqx-icon-arrow-up";
+                    sortElement = "<div id='sortElement' class='" + elementClass + "' style='position: relative; float: right; margin-right: 0px; width: 16px; height: 100%; line-height: 100%;'></div>";
+                }
+
+                return "<div style='background: "
+                    + backgroundColor
+                    + "; width: calc(100% - 8px); height: calc(100% - 8px); padding: 4px;'>"
+                    + pivotItem.text
+                    + sortElement
+                    + "</div>";
+            },
+            myCellsRenderer: function(pivotCell) {
+
+                let colors = ['rgba(248, 105, 107, 255)', 'rgba(250,170,120,255)', 'rgba(255,230,130,255)', 'rgba(175,215,130,255)', 'rgba(100,190,120,255)'];
+                let selectedColors = ['rgba(228, 85, 87, 255)', 'rgba(230,150,100,255)', 'rgba(235,210,110,255)', 'rgba(155,195,110,255)', 'rgba(80,170,100,255)'];
+
+                let val = Math.min(pivotCell.value, 20);
+                let backgroundColor = pivotCell.isSelected ? selectedColors[Math.round(val / 5)] : colors[Math.round(val / 5)];
+
+                if (pivotCell.pivotColumn.text != 'Sum')
+                    backgroundColor = pivotCell.isSelected ? 'rgba(225, 225, 225, 255)' : 'rgba(255, 255, 255, 255)';
+
+                if (pivotCell.isSelected)
+                    backgroundColor
+
+                let cellText = pivotCell.value == 0 ? '' : pivotCell.formattedValue;
+
+                return "<div style='background: " + backgroundColor + "; width: calc(100%-8px); height: 100%; padding: 4px; margin: 0px;'>" + cellText + "</div>";
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/pivotgrid/custom-rendering/main.js b/pivotgrid/custom-rendering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/pivotgrid/custom-rendering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/pivotgrid/custom-rendering/package.json b/pivotgrid/custom-rendering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/pivotgrid/custom-rendering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/pivotgrid/designer/App.vue b/pivotgrid/designer/App.vue
new file mode 100644
index 00000000..543a01ea
--- /dev/null
+++ b/pivotgrid/designer/App.vue
@@ -0,0 +1,159 @@
+<template>
+    <table>
+        <tr>
+            <td>
+                <JqxPivotDesigner style="width: 250px; height: 400px;"
+                                  ref="pivotDesigner" 
+                                  :type="'pivotGrid'">
+                </JqxPivotDesigner>
+            </td>
+            <td>
+                <JqxPivotGrid style="width: 550px; height: 400px;"
+                              ref="pivotGrid" 
+                              :source="pivotDataSource"
+                              :treeStyleRows="false"
+                              :autoResize="false"
+                              :multipleSelectionEnabled="true">
+                </JqxPivotGrid>
+            </td>
+        </tr>
+    </table>
+</template>
+
+<script>
+    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
+    import JqxPivotDesigner from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotdesigner.vue';
+
+    export default {
+        components: {
+            JqxPivotGrid,
+            JqxPivotDesigner
+        },
+        data: function () {
+            return {
+                pivotDataSource: this.pivotDataSource
+            }
+        },
+        beforeCreate: function () {
+            const createPivotDataSource = function () {
+                // prepare sample data
+                let data = new Array();
+
+                let firstNames =
+                    [
+                        "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
+                    ];
+
+                let lastNames =
+                    [
+                        "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
+                    ];
+
+                let productNames =
+                    [
+                        "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
+                    ];
+
+                let priceValues =
+                    [
+                        "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
+                    ];
+
+                for (let i = 0; i < 500; i++) {
+                    let row = {};
+                    let productindex = Math.floor(Math.random() * productNames.length);
+                    let price = parseFloat(priceValues[productindex]);
+                    let quantity = 1 + Math.round(Math.random() * 10);
+
+                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
+                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
+                    row["productname"] = productNames[productindex];
+                    row["price"] = price;
+                    row["quantity"] = quantity;
+                    row["total"] = price * quantity;
+
+                    data[i] = row;
+                }
+
+                // create a data source and data adapter
+                let source =
+                    {
+                        localdata: data,
+                        datatype: "array",
+                        datafields:
+                            [
+                                { name: 'firstname', type: 'string' },
+                                { name: 'lastname', type: 'string' },
+                                { name: 'productname', type: 'string' },
+                                { name: 'quantity', type: 'number' },
+                                { name: 'price', type: 'number' },
+                                { name: 'total', type: 'number' }
+                            ]
+                    };
+
+                let dataAdapter = new jqx.dataAdapter(source);
+                dataAdapter.dataBind();
+
+                // create a pivot data source from the dataAdapter
+                let pivotDataSource = new jqx.pivot(
+                    dataAdapter,
+                    {
+                        customAggregationFunctions: {
+                            'var': function (values) {
+                                if (values.length <= 1)
+                                    return 0;
+
+                                // sample's mean
+                                var mean = 0;
+                                for (var i = 0; i < values.length; i++)
+                                    mean += values[i];
+
+                                mean /= values.length;
+
+                                // calc squared sum
+                                var ssum = 0;
+                                for (var i = 0; i < values.length; i++)
+                                    ssum += Math.pow(values[i] - mean, 2)
+
+                                // calc the variance
+                                var variance = ssum / values.length;
+
+                                return variance;
+                            }
+                        },
+                        pivotValuesOnRows: false,
+                        rows: [{ dataField: 'firstname', text: 'First Name' }, { dataField: 'lastname' }],
+                        columns: [{ dataField: 'productname', align: 'left' }],
+                        filters: [
+                            {
+                                dataField: 'productname',
+                                text: 'Product name',
+                                filterFunction: function (value) {
+                                    if (value == "Black Tea" || value == "Green Tea")
+                                        return true;
+
+                                    return false;
+                                }
+                            }
+                        ],
+                        values: [
+                            { dataField: 'price', 'function': 'sum', text: 'Sum', align: 'left', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'center' }, cellsClassName: 'myItemStyle', cellsClassNameSelected: 'myItemStyleSelected' },
+                            { dataField: 'price', 'function': 'count', text: 'Count', className: 'myItemStyle', classNameSelected: 'myItemStyleSelected' }
+                        ]
+                    }
+                );
+
+                return pivotDataSource;
+            };
+
+            this.pivotDataSource = createPivotDataSource();
+        },
+        mounted: function() {
+            let pivotGridComponent = this.$refs.pivotGrid;
+            let pivotGridInstance = pivotGridComponent.getInstance();
+
+            this.$refs.pivotDesigner.target = pivotGridInstance;
+            this.$refs.pivotDesigner.refresh();
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/pivotgrid/designer/main.js b/pivotgrid/designer/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/pivotgrid/designer/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/pivotgrid/designer/package.json b/pivotgrid/designer/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/pivotgrid/designer/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/pivotgrid/drill-through/App.vue b/pivotgrid/drill-through/App.vue
new file mode 100644
index 00000000..13447172
--- /dev/null
+++ b/pivotgrid/drill-through/App.vue
@@ -0,0 +1,188 @@
+<template>
+    <div>
+        <JqxPivotGrid style="width: 800px; height: 400px;"
+                      ref="pivotGrid"         
+                      @pivotcelldblclick="onPivotCellDblClick($event)"
+                      :source="pivotDataSource"
+                      :treeStyleRows="true"
+                      :autoResize="false"
+                      :multipleSelectionEnabled="true">
+        </JqxPivotGrid>
+        <JqxWindow ref="drillThroughWindow"
+                   :autoOpen="false"
+                   :width="500"
+                   :height="300"
+                   :maxHeight="400"
+                   :minHeight="200"
+                   :maxWidth="700"
+                   :minWidth="200"
+                   :showCollapseButton="true">
+            <div>
+                Drillthrough records
+            </div>
+            <div style="overflow: hidden;">
+                <JqxDataTable ref="tableSrcRecords"
+                              :width="'100%'"
+                              :height="'100%'"
+                              :pageable="true"
+                              :pagerButtonsCount="10"
+                              :columns="tableSrcRecordsColumns"
+                              :columnsResize="true">
+                </JqxDataTable>
+            </div>
+        </JqxWindow>
+    </div>
+</template>
+
+<script>
+    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
+    import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
+    import JqxDataTable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue';
+
+    export default {
+        components: {
+            JqxPivotGrid,
+            JqxWindow,
+            JqxDataTable
+        },
+        data: function () {
+            return {
+                pivotDataSource: this.pivotDataSource,
+                tableSrcRecordsColumns: [
+                    { text: 'First name', dataField: 'firstname', width: 200 },
+                    { text: 'Last name', dataField: 'lastname', width: 200 },
+                    { text: 'Product', editable: false, dataField: 'productname', width: 180 },
+                    { text: 'Quantity', dataField: 'quantity', width: 80, cellsAlign: 'right', align: 'right' },
+                    { text: 'Unit Price', dataField: 'price', width: 90, cellsAlign: 'right', align: 'right', cellsFormat: 'c2' },
+                    { text: 'Total', dataField: 'total', cellsAlign: 'right', align: 'right', cellsFormat: 'c2' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.sampleData = null;
+
+            const createPivotDataSource = () => {
+                // prepare sample data
+                let data = new Array();
+
+                let firstNames =
+                    [
+                        "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
+                    ];
+
+                let lastNames =
+                    [
+                        "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
+                    ];
+
+                let productNames =
+                    [
+                        "Black Tea", "Green Tea", "Caffe Espresso"
+                    ];
+
+                let priceValues =
+                    [
+                        "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
+                    ];
+
+                for (let i = 0; i < 500; i++) {
+                    let row = {};
+                    let productindex = Math.floor(Math.random() * productNames.length);
+                    let price = parseFloat(priceValues[productindex]);
+                    let quantity = 1 + Math.round(Math.random() * 10);
+
+                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
+                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
+                    row["productname"] = productNames[productindex];
+                    row["price"] = price;
+                    row["quantity"] = quantity;
+                    row["total"] = price * quantity;
+
+                    data[i] = row;
+                }
+
+                this.sampleData = data;
+
+                // create a data source and data adapter
+                let source =
+                    {
+                        localdata: data,
+                        datatype: "array",
+                        datafields:
+                            [
+                                { name: 'firstname', type: 'string' },
+                                { name: 'lastname', type: 'string' },
+                                { name: 'productname', type: 'string' },
+                                { name: 'quantity', type: 'number' },
+                                { name: 'price', type: 'number' },
+                                { name: 'total', type: 'number' }
+                            ]
+                    };
+
+                let dataAdapter = new jqx.dataAdapter(source);
+                dataAdapter.dataBind();
+
+                // create a pivot data source from the dataAdapter
+                let pivotDataSource = new jqx.pivot(
+                    dataAdapter,
+                    {
+                        pivotValuesOnRows: false,
+                        totals: { rows: { subtotals: true, grandtotals: true }, columns: { subtotals: false, grandtotals: true } },
+                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
+                        columns: [{ dataField: 'productname' }],
+                        values: [
+                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2 } },
+                            { dataField: 'price', 'function': 'count', text: 'count' },
+                            { dataField: 'price', 'function': 'average', text: 'average', formatSettings: { prefix: '$', decimalPlaces: 2 } }
+                        ]
+                    }
+                );
+
+                return pivotDataSource;     
+            };
+
+            this.pivotDataSource = createPivotDataSource();
+        },
+        mounted: function() {
+            let pivotRow = this.$refs.pivotGrid.getPivotRows().items[0];
+            let pivotColumn = this.$refs.pivotGrid.getPivotColumns().items[0].valueItems[0];
+
+            this.drillThrough(pivotRow, pivotColumn);
+        },
+        methods: {
+            drillThrough: function (pivotRow, pivotColumn) {
+                let pivotGridInstance = this.$refs.pivotGrid.getInstance();
+                let rows = pivotGridInstance.getPivotCells().drillThroughCell(pivotRow, pivotColumn);
+
+                let drillThroughRows = [];
+                for (let i = 0; i < rows.length; i++)
+                    drillThroughRows[i] = this.sampleData[rows[i]]
+
+                let drillThroughSrc =
+                    {
+                        localData: drillThroughRows,
+                        dataType: "array",
+                        dataFields:
+                            [
+                                { name: 'firstname', type: 'string' },
+                                { name: 'lastname', type: 'string' },
+                                { name: 'productname', type: 'string' },
+                                { name: 'quantity', type: 'number' },
+                                { name: 'price', type: 'number' },
+                                { name: 'total', type: 'number' }
+                            ]
+                    };
+
+                let drillThroughDataAdapter = new jqx.dataAdapter(drillThroughSrc);
+                this.$refs.tableSrcRecords.source = drillThroughDataAdapter;
+
+                this.$refs.drillThroughWindow.open();
+            },
+            onPivotCellDblClick: function (event) {
+                var args = event.args;
+                this.drillThrough(args.pivotRow, args.pivotColumn);
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/pivotgrid/drill-through/main.js b/pivotgrid/drill-through/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/pivotgrid/drill-through/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/pivotgrid/drill-through/package.json b/pivotgrid/drill-through/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/pivotgrid/drill-through/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/pivotgrid/events/App.vue b/pivotgrid/events/App.vue
new file mode 100644
index 00000000..fc367928
--- /dev/null
+++ b/pivotgrid/events/App.vue
@@ -0,0 +1,174 @@
+<template>
+    <div>
+        <JqxPivotGrid style="width: 800px; height: 400px;"
+                      ref="pivotGrid"
+                      :source="pivotDataSource"
+                      :treeStyleRows="true"
+                      :autoResize="false"
+                      :multipleSelectionEnabled="true"
+
+                      @pivotitemexpanding="eventHandler1($event)"
+                      @pivotitemcollapsing="eventHandler1($event)"
+                      @pivotitemexpanded="eventHandler1($event)"
+                      @pivotitemcollapsed="eventHandler1($event)"
+                      @pivotitemselectionchanged="eventHandler1($event)"
+                      @sortchanging="eventHandler1($event)"
+                      @sortchanged="eventHandler1($event)"
+                      @sortremoving="eventHandler1($event)"
+                      @sortremoved="eventHandler1($event)"
+
+                      @pivotitemmouseup="eventHandler2($event)"
+                      @pivotitemmousedown="eventHandler2($event)"
+                      @pivotitemclick="eventHandler2($event)"
+                      @pivotitemdblclick="eventHandler2($event)"
+
+                      @pivotcellmouseup="eventHandler3($event)"
+                      @pivotcellmousedown="eventHandler3($event)"
+                      @pivotcellclick="eventHandler3($event)"
+                      @pivotcelldblclick="eventHandler3($event)">
+        </JqxPivotGrid>
+        <br />
+        <JqxTextArea ref="eventsLog"
+                     :width="800"
+                     :height="100">
+        </JqxTextArea>
+        <br />
+        <JqxButton :width="90" @click="onClearLog()">Clear Log</JqxButton>
+    </div>
+</template>
+
+<script>
+    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
+    import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxPivotGrid,
+            JqxTextArea,
+            JqxButton
+        },
+        data: function () {
+            return {
+                pivotDataSource: this.pivotDataSource
+            }
+        },
+        beforeCreate: function () {
+
+            const createPivotDataSource = () => {
+                // prepare sample data
+                let data = new Array();
+
+                let firstNames =
+                    [
+                        "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
+                    ];
+
+                let lastNames =
+                    [
+                        "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
+                    ];
+
+                let productNames =
+                    [
+                        "Black Tea", "Green Tea", "Caffe Espresso"
+                    ];
+
+                let priceValues =
+                    [
+                        "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
+                    ];
+
+                for (let i = 0; i < 500; i++) {
+                    let row = {};
+                    let productindex = Math.floor(Math.random() * productNames.length);
+                    let price = parseFloat(priceValues[productindex]);
+                    let quantity = 1 + Math.round(Math.random() * 10);
+
+                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
+                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
+                    row["productname"] = productNames[productindex];
+                    row["price"] = price;
+                    row["quantity"] = quantity;
+                    row["total"] = price * quantity;
+
+                    data[i] = row;
+                }
+
+                // create a data source and data adapter
+                let source =
+                    {
+                        localdata: data,
+                        datatype: "array",
+                        datafields:
+                            [
+                                { name: 'firstname', type: 'string' },
+                                { name: 'lastname', type: 'string' },
+                                { name: 'productname', type: 'string' },
+                                { name: 'quantity', type: 'number' },
+                                { name: 'price', type: 'number' },
+                                { name: 'total', type: 'number' }
+                            ]
+                    };
+
+                let dataAdapter = new jqx.dataAdapter(source);
+                dataAdapter.dataBind();
+
+                // create a pivot data source from the dataAdapter
+                let pivotDataSource = new jqx.pivot(
+                    dataAdapter,
+                    {
+                        pivotValuesOnRows: false,
+                        totals: { rows: { subtotals: true, grandtotals: true }, columns: { subtotals: false, grandtotals: true } },
+                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
+                        columns: [{ dataField: 'productname' }],
+                        values: [
+                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2 } },
+                            { dataField: 'price', 'function': 'count', text: 'count' },
+                            { dataField: 'price', 'function': 'average', text: 'average', formatSettings: { prefix: '$', decimalPlaces: 2 } }
+                        ]
+                    }
+                );
+
+                return pivotDataSource;       
+            };
+
+            this.pivotDataSource = createPivotDataSource();
+        },
+        methods: {
+            eventHandler1: function(event) {
+                var args = event.args;
+                var t = new Date();
+                var timeString = t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds() + ":" + t.getMilliseconds();
+
+                var eventData = 'Time: ' + timeString + ' Event: ' + event.type + ', pivotItem: ' + args.pivotItem.text;
+                if (event.type == 'itemselectionchanged')
+                    eventData += ', Selected: ' + args.selected;
+
+                eventData += "\r\n";
+                this.$refs.eventsLog.val(eventData + this.$refs.eventsLog.val());
+            },
+            eventHandler2: function (event) {
+                var t = new Date();
+                var timeString = t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds() + ":" + t.getMilliseconds();
+
+                var eventData = 'Time: ' + timeString + ' Event: ' + event.type + ', pivotItem: ' + event.args.pivotItem.text + ', mousebutton: ' + event.args.mousebutton;
+
+                eventData += "\r\n";
+                this.$refs.eventsLog.val(eventData + this.$refs.eventsLog.val());
+            },
+            eventHandler3: function (event) {
+                var t = new Date();
+                var timeString = t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds() + ":" + t.getMilliseconds();
+
+                var eventData = 'Time: ' + timeString + ' Event: ' + event.type + ', pivot row: ' + event.args.pivotRow.text + ', pivot column: ' + event.args.pivotColumn.text + ', mousebutton: ' + event.args.mousebutton;
+
+                eventData += "\r\n";
+                this.$refs.eventsLog.val(eventData + this.$refs.eventsLog.val());
+            },
+            onClearLog: function() {
+                this.$refs.eventsLog.val("");
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/pivotgrid/events/main.js b/pivotgrid/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/pivotgrid/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/pivotgrid/events/package.json b/pivotgrid/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/pivotgrid/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/pivotgrid/localization/App.vue b/pivotgrid/localization/App.vue
new file mode 100644
index 00000000..82de82d4
--- /dev/null
+++ b/pivotgrid/localization/App.vue
@@ -0,0 +1,122 @@
+<template>
+        <JqxPivotGrid style="width: 800px; height: 400px;"
+                      :source="pivotDataSource"
+                      :treeStyleRows="false"
+                      :autoResize="false"
+                      :multipleSelectionEnabled="true"
+                      :localization="localization">
+        </JqxPivotGrid>
+
+</template>
+
+<script>
+    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
+
+    export default {
+        components: {
+            JqxPivotGrid
+        },
+        data: function () {
+            return {
+                pivotDataSource: this.pivotDataSource,
+                localization: {
+                    sortascendingstring: "Sortiere aufsteigend",
+                    sortdescendingstring: "Sortiere absteigend",
+                    sortremovestring: "Entferne Sortierung"
+                }
+            }
+        },
+        beforeCreate: function () {
+
+            const createPivotDataSource = () => {
+                // prepare sample data
+                let data = new Array();
+
+                let firstNames =
+                    [
+                        "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
+                    ];
+
+                let lastNames =
+                    [
+                        "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
+                    ];
+
+                let productNames =
+                    [
+                        "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
+                    ];
+
+                let priceValues =
+                    [
+                        "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
+                    ];
+
+                for (let i = 0; i < 500; i++) {
+                    let row = {};
+                    let productindex = Math.floor(Math.random() * productNames.length);
+                    let price = parseFloat(priceValues[productindex]);
+                    let quantity = 1 + Math.round(Math.random() * 10);
+
+                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
+                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
+                    row["productname"] = productNames[productindex];
+                    row["price"] = price;
+                    row["quantity"] = quantity;
+                    row["total"] = price * quantity;
+
+                    data[i] = row;
+                }
+
+                // create a data source and data adapter
+                let source =
+                    {
+                        localdata: data,
+                        datatype: "array",
+                        datafields:
+                            [
+                                { name: 'firstname', type: 'string' },
+                                { name: 'lastname', type: 'string' },
+                                { name: 'productname', type: 'string' },
+                                { name: 'quantity', type: 'number' },
+                                { name: 'price', type: 'number' },
+                                { name: 'total', type: 'number' }
+                            ]
+                    };
+
+                let dataAdapter = new jqx.dataAdapter(source);
+                dataAdapter.dataBind();
+
+                // create a pivot data source from the dataAdapter
+                let pivotDataSource = new jqx.pivot(
+                    dataAdapter,
+                    {
+                        pivotValuesOnRows: false,
+                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
+                        columns: [{ dataField: 'productname' }],
+                        filters: [
+                            {
+                                dataField: 'productname',
+                                filterFunction: function (value) {
+                                    if (value == "Black Tea" || value == "Green Tea")
+                                        return true;
+
+                                    return false;
+                                }
+                            }
+                        ],
+                        values: [
+                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
+                            { dataField: 'price', 'function': 'count', text: 'count' },
+                            { dataField: 'price', 'function': 'average', text: 'average' }
+                        ]
+                    }
+                );
+
+                return pivotDataSource;	
+            };
+
+            this.pivotDataSource = createPivotDataSource();
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/pivotgrid/localization/main.js b/pivotgrid/localization/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/pivotgrid/localization/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/pivotgrid/localization/package.json b/pivotgrid/localization/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/pivotgrid/localization/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/pivotgrid/olap-tree-style-rows/App.vue b/pivotgrid/olap-tree-style-rows/App.vue
new file mode 100644
index 00000000..c3af8c99
--- /dev/null
+++ b/pivotgrid/olap-tree-style-rows/App.vue
@@ -0,0 +1,137 @@
+<template>
+    <div>
+        <JqxPivotGrid style="width: 800px; height: 400px;"
+                      ref="pivotGrid"
+                      :source="pivotDataSource"
+                      :treeStyleRows="false"
+                      :autoResize="false"
+                      :multipleSelectionEnabled="true">
+        </JqxPivotGrid>
+        <br />
+        <JqxButton ref="btnCheckRowsDisplayStyle"
+                   @click="onChangeRowsDisplayStyle()"
+                   :width="200">
+            Change to Tree style display
+        </JqxButton>
+    </div>
+</template>
+
+<script>
+    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxPivotGrid,
+            JqxButton
+        },
+        data: function () {
+            return {
+                pivotDataSource: this.pivotDataSource
+            }
+        },
+        beforeCreate: function () {
+
+            const createPivotDataSource = function () {
+                // prepare sample data
+                let data = new Array();
+
+                let firstNames = [
+                    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter"
+                ];
+
+                let lastNames = [
+                    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson"
+                ];
+
+                let productNames = [
+                    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
+                ];
+
+                let priceValues = [
+                    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
+                ];
+
+                for (let i = 0; i < 200; i++) {
+                    let row = {};
+                    let productindex = Math.floor(Math.random() * productNames.length);
+                    let price = parseFloat(priceValues[productindex]);
+                    let quantity = 1 + Math.round(Math.random() * 10);
+
+                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
+                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
+                    row["productname"] = productNames[productindex];
+                    row["price"] = price;
+                    row["quantity"] = quantity;
+                    row["total"] = price * quantity;
+
+                    data[i] = row;
+                }
+
+                // create a data source and data adapter
+                let source =
+                    {
+                        localdata: data,
+                        datatype: "array",
+                        datafields:
+                            [
+                                { name: 'firstname', type: 'string' },
+                                { name: 'lastname', type: 'string' },
+                                { name: 'productname', type: 'string' },
+                                { name: 'quantity', type: 'number' },
+                                { name: 'price', type: 'number' },
+                                { name: 'total', type: 'number' }
+                            ]
+                    };
+
+                let dataAdapter = new jqx.dataAdapter(source);
+                dataAdapter.dataBind();
+
+                // create a pivot data source from the dataAdapter
+                let pivotDataSource = new jqx.pivot(
+                    dataAdapter,
+                    {
+                        pivotValuesOnRows: false,
+                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
+                        columns: [{ dataField: 'productname' }],
+                        filters: [
+                            {
+                                dataField: 'productname',
+                                filterFunction: function (value) {
+                                    if (value == "Black Tea" || value == "Green Tea")
+                                        return true;
+
+                                    return false;
+                                }
+                            }
+                        ],
+                        values: [
+                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
+                            { dataField: 'price', 'function': 'count', text: 'count' },
+                            { dataField: 'price', 'function': 'average', text: 'average' }
+                        ]
+                    }
+                );
+
+                return pivotDataSource;
+
+            }
+            this.pivotDataSource = createPivotDataSource();
+        },
+        mounted: function () {
+            this.$refs.pivotGrid.getPivotRows().items[0].expand();
+            this.$refs.pivotGrid.treeStyleRows = false;
+        },
+        methods: {
+            onChangeRowsDisplayStyle: function() {
+                let isTreeStyleRows = !this.$refs.pivotGrid.treeStyleRows;
+                if (isTreeStyleRows)
+                    this.$refs.btnCheckRowsDisplayStyle.val('Change to OLAP style display');
+                else
+                    this.$refs.btnCheckRowsDisplayStyle.val('Change to Tree style display');
+
+                this.$refs.pivotGrid.treeStyleRows = isTreeStyleRows;
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/pivotgrid/olap-tree-style-rows/main.js b/pivotgrid/olap-tree-style-rows/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/pivotgrid/olap-tree-style-rows/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/pivotgrid/olap-tree-style-rows/package.json b/pivotgrid/olap-tree-style-rows/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/pivotgrid/olap-tree-style-rows/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/pivotgrid/rows-columns-cells-css-styling/App.vue b/pivotgrid/rows-columns-cells-css-styling/App.vue
new file mode 100644
index 00000000..d30cc23f
--- /dev/null
+++ b/pivotgrid/rows-columns-cells-css-styling/App.vue
@@ -0,0 +1,129 @@
+<template>
+    <div>
+        <JqxPivotGrid style="width: 800px; height: 400px;"
+                      ref="pivotGrid"
+                      :source="pivotDataSource"
+                      :treeStyleRows="true"
+                      :autoResize="false"
+                      :multipleSelectionEnabled="true">
+        </JqxPivotGrid>
+    </div>
+</template>
+
+<script>
+    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
+
+    export default {
+        components: {
+            JqxPivotGrid
+        },
+        data: function () {
+            return {
+                pivotDataSource: this.pivotDataSource
+            }
+        },
+        beforeCreate: function () {
+
+            const createPivotDataSource = function () {
+                // prepare sample data
+                let data = new Array();
+
+                let firstNames =
+                    [
+                        "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter"
+                    ];
+
+                let lastNames =
+                    [
+                        "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson"
+                    ];
+
+                let productNames =
+                    [
+                        "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
+                    ];
+
+                let priceValues =
+                    [
+                        "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
+                    ];
+
+                for (let i = 0; i < 200; i++) {
+                    let row = {};
+                    let productindex = Math.floor(Math.random() * productNames.length);
+                    let price = parseFloat(priceValues[productindex]);
+                    let quantity = 1 + Math.round(Math.random() * 10);
+
+                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
+                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
+                    row["productname"] = productNames[productindex];
+                    row["price"] = price;
+                    row["quantity"] = quantity;
+                    row["total"] = price * quantity;
+
+                    data[i] = row;
+                }
+
+                // create a data source and data adapter
+                let source =
+                    {
+                        localdata: data,
+                        datatype: "array",
+                        datafields:
+                            [
+                                { name: 'firstname', type: 'string' },
+                                { name: 'lastname', type: 'string' },
+                                { name: 'productname', type: 'string' },
+                                { name: 'quantity', type: 'number' },
+                                { name: 'price', type: 'number' },
+                                { name: 'total', type: 'number' }
+                            ]
+                    };
+
+                let dataAdapter = new jqx.dataAdapter(source);
+                dataAdapter.dataBind();
+
+                // create a pivot data source from the dataAdapter
+                let pivotDataSource = new jqx.pivot(
+                    dataAdapter,
+                    {
+                        pivotValuesOnRows: false,
+                        rows: [
+                            { dataField: 'firstname', className: 'rowStyle', classNameSelected: 'rowStyleSelected' },
+                            { dataField: 'lastname', className: 'rowStyle', classNameSelected: 'rowStyleSelected' }
+                        ],
+                        columns: [
+                            { dataField: 'productname', className: 'columnStyle', classNameSelected: 'columnStyleSelected' }
+                        ],
+                        filters: [
+                            {
+                                dataField: 'productname',
+                                filterFunction: function (value) {
+                                    if (value == "Black Tea" || value == "Green Tea")
+                                        return true;
+
+                                    return false;
+                                }
+                            }
+                        ],
+                        values: [
+                            { dataField: 'price', 'function': 'sum', text: 'Sum', formatSettings: { prefix: '$', decimalPlaces: 2 }, className: 'columnStyle', classNameSelected: 'columnStyleSelected', cellsClassName: 'cellStyle', cellsClassNameSelected: 'cellStyleSelected' },
+                            { dataField: 'price', 'function': 'count', text: 'Count', className: 'columnStyle', classNameSelected: 'columnStyleSelected', cellsClassName: 'cellStyle', cellsClassNameSelected: 'cellStyleSelected' },
+                            { dataField: 'price', 'function': 'average', text: 'Average', formatSettings: { prefix: '$', decimalPlaces: 2 }, className: 'columnStyle', classNameSelected: 'columnStyleSelected', cellsClassName: 'cellStyle', cellsClassNameSelected: 'cellStyleSelected' },
+                        ]
+                    }
+                );
+
+                return pivotDataSource;		
+
+            }
+            this.pivotDataSource = createPivotDataSource();
+        },
+        mounted: function () {
+            this.$refs.pivotGrid.getPivotRows().items[0].expand();
+            this.$refs.pivotGrid.treeStyleRows = true;
+        }
+    }
+</script>
+<style>
+</style>
\ No newline at end of file
diff --git a/pivotgrid/rows-columns-cells-css-styling/main.js b/pivotgrid/rows-columns-cells-css-styling/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/pivotgrid/rows-columns-cells-css-styling/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/pivotgrid/rows-columns-cells-css-styling/package.json b/pivotgrid/rows-columns-cells-css-styling/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/pivotgrid/rows-columns-cells-css-styling/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/pivotgrid/totals/App.vue b/pivotgrid/totals/App.vue
new file mode 100644
index 00000000..e78f18e3
--- /dev/null
+++ b/pivotgrid/totals/App.vue
@@ -0,0 +1,114 @@
+<template>
+    <div>
+        <JqxPivotGrid style="width: 800px; height: 400px;"
+                      ref="pivotGrid"
+                      :source="pivotDataSource"
+                      :treeStyleRows="false"
+                      :autoResize="false"
+                      :multipleSelectionEnabled="true">
+        </JqxPivotGrid>
+    </div>
+</template>
+
+<script>
+    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
+
+    export default {
+        components: {
+            JqxPivotGrid
+        },
+        data: function () {
+            return {
+                pivotDataSource: this.pivotDataSource
+            }
+        },
+        beforeCreate: function () {
+
+            const createPivotDataSource = function () {
+                // prepare sample data
+                let data = new Array();
+
+                let firstNames =
+                    [
+                        "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter"
+                    ];
+
+                let lastNames =
+                    [
+                        "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson"
+                    ];
+
+                let productNames =
+                    [
+                        "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
+                    ];
+
+                let priceValues =
+                    [
+                        "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
+                    ];
+
+                for (let i = 0; i < 200; i++) {
+                    let row = {};
+                    let productindex = Math.floor(Math.random() * productNames.length);
+                    let price = parseFloat(priceValues[productindex]);
+                    let quantity = 1 + Math.round(Math.random() * 10);
+
+                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
+                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
+                    row["productname"] = productNames[productindex];
+                    row["price"] = price;
+                    row["quantity"] = quantity;
+                    row["total"] = price * quantity;
+
+                    data[i] = row;
+                }
+
+                // create a data source and data adapter
+                let source =
+                    {
+                        localdata: data,
+                        datatype: "array",
+                        datafields:
+                            [
+                                { name: 'firstname', type: 'string' },
+                                { name: 'lastname', type: 'string' },
+                                { name: 'productname', type: 'string' },
+                                { name: 'quantity', type: 'number' },
+                                { name: 'price', type: 'number' },
+                                { name: 'total', type: 'number' }
+                            ]
+                    };
+
+                let dataAdapter = new jqx.dataAdapter(source);
+                dataAdapter.dataBind();
+
+                // create a pivot data source from the dataAdapter
+                let pivotDataSource = new jqx.pivot(
+                    dataAdapter,
+                    {
+                        pivotValuesOnRows: false,
+                        totals: { rows: { subtotals: true, grandtotals: true }, columns: { subtotals: false, grandtotals: true } },
+                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
+                        columns: [{ dataField: 'productname' }],
+                        values: [
+                            { dataField: 'price', 'function': 'sum', text: 'sum', width: NamedNodeMap, formatSettings: { prefix: '$', decimalPlaces: 2 } },
+                            { dataField: 'price', 'function': 'count', text: 'count' },
+                            { dataField: 'price', 'function': 'average', text: 'average', formatSettings: { prefix: '$', decimalPlaces: 2 } }
+                        ]
+                    }
+                );
+
+                return pivotDataSource;		
+
+            }
+            this.pivotDataSource = createPivotDataSource();
+        },
+        mounted: function () {
+            this.$refs.pivotGrid.getPivotRows().items[0].expand();
+            this.$refs.pivotGrid.refresh();
+        }
+    }
+</script>
+<style>
+</style>
\ No newline at end of file
diff --git a/pivotgrid/totals/main.js b/pivotgrid/totals/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/pivotgrid/totals/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/pivotgrid/totals/package.json b/pivotgrid/totals/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/pivotgrid/totals/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/pivotgrid/values-on-columns/App.vue b/pivotgrid/values-on-columns/App.vue
new file mode 100644
index 00000000..bc2067ba
--- /dev/null
+++ b/pivotgrid/values-on-columns/App.vue
@@ -0,0 +1,113 @@
+<template>
+    <div>
+        <JqxPivotGrid style="width: 800px; height: 400px;"
+                      ref="pivotGrid"
+                      :source="pivotDataSource"
+                      :treeStyleRows="false"
+                      :autoResize="false"
+                      :multipleSelectionEnabled="true">
+        </JqxPivotGrid>
+    </div>
+</template>
+
+<script>
+    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
+
+    export default {
+        components: {
+            JqxPivotGrid
+        },
+        data: function () {
+            return {
+                pivotDataSource: this.pivotDataSource
+            }
+        },
+        beforeCreate: function () {
+
+            const createPivotDataSource = function () {
+                // prepare sample data
+                let data = new Array();
+
+                let firstNames =
+                    [
+                        "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter"
+                    ];
+
+                let lastNames =
+                    [
+                        "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson"
+                    ];
+
+                let productNames =
+                    [
+                        "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
+                    ];
+
+                let priceValues =
+                    [
+                        "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
+                    ];
+
+                for (let i = 0; i < 200; i++) {
+                    let row = {};
+                    let productindex = Math.floor(Math.random() * productNames.length);
+                    let price = parseFloat(priceValues[productindex]);
+                    let quantity = 1 + Math.round(Math.random() * 10);
+
+                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
+                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
+                    row["productname"] = productNames[productindex];
+                    row["price"] = price;
+                    row["quantity"] = quantity;
+                    row["total"] = price * quantity;
+
+                    data[i] = row;
+                }
+
+                // create a data source and data adapter
+                let source =
+                    {
+                        localdata: data,
+                        datatype: "array",
+                        datafields:
+                            [
+                                { name: 'firstname', type: 'string' },
+                                { name: 'lastname', type: 'string' },
+                                { name: 'productname', type: 'string' },
+                                { name: 'quantity', type: 'number' },
+                                { name: 'price', type: 'number' },
+                                { name: 'total', type: 'number' }
+                            ]
+                    };
+
+                let dataAdapter = new jqx.dataAdapter(source);
+                dataAdapter.dataBind();
+
+                // create a pivot data source from the dataAdapter
+                let pivotDataSource = new jqx.pivot(
+                    dataAdapter,
+                    {
+                        pivotValuesOnRows: false,
+                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
+                        columns: [{ dataField: 'productname' }],
+                        values: [
+                            { dataField: 'price', 'function': 'sum', text: 'sum', width: NamedNodeMap, formatSettings: { prefix: '$', decimalPlaces: 2 } },
+                            { dataField: 'price', 'function': 'count', text: 'count' },
+                            { dataField: 'price', 'function': 'average', text: 'average', formatSettings: { prefix: '$', decimalPlaces: 2 } }
+                        ]
+                    }
+                );
+
+                return pivotDataSource;		
+
+            }
+            this.pivotDataSource = createPivotDataSource();
+        },
+        mounted: function () {
+            this.$refs.pivotGrid.getPivotRows().items[0].expand();
+            this.$refs.pivotGrid.refresh();
+        }
+    }
+</script>
+<style>
+</style>
\ No newline at end of file
diff --git a/pivotgrid/values-on-columns/main.js b/pivotgrid/values-on-columns/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/pivotgrid/values-on-columns/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/pivotgrid/values-on-columns/package.json b/pivotgrid/values-on-columns/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/pivotgrid/values-on-columns/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/pivotgrid/values-on-rows/App.vue b/pivotgrid/values-on-rows/App.vue
new file mode 100644
index 00000000..32099584
--- /dev/null
+++ b/pivotgrid/values-on-rows/App.vue
@@ -0,0 +1,113 @@
+<template>
+    <div>
+        <JqxPivotGrid style="width: 800px; height: 400px;"
+                      ref="pivotGrid"
+                      :source="pivotDataSource"
+                      :treeStyleRows="false"
+                      :autoResize="false"
+                      :multipleSelectionEnabled="true">
+        </JqxPivotGrid>
+    </div>
+</template>
+
+<script>
+    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
+
+    export default {
+        components: {
+            JqxPivotGrid
+        },
+        data: function () {
+            return {
+                pivotDataSource: this.pivotDataSource
+            }
+        },
+        beforeCreate: function () {
+
+            const createPivotDataSource = function () {
+                // prepare sample data
+                let data = new Array();
+
+                let firstNames =
+                    [
+                        "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter"
+                    ];
+
+                let lastNames =
+                    [
+                        "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson"
+                    ];
+
+                let productNames =
+                    [
+                        "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
+                    ];
+
+                let priceValues =
+                    [
+                        "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
+                    ];
+
+                for (let i = 0; i < 200; i++) {
+                    let row = {};
+                    let productindex = Math.floor(Math.random() * productNames.length);
+                    let price = parseFloat(priceValues[productindex]);
+                    let quantity = 1 + Math.round(Math.random() * 10);
+
+                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
+                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
+                    row["productname"] = productNames[productindex];
+                    row["price"] = price;
+                    row["quantity"] = quantity;
+                    row["total"] = price * quantity;
+
+                    data[i] = row;
+                }
+
+                // create a data source and data adapter
+                let source =
+                    {
+                        localdata: data,
+                        datatype: "array",
+                        datafields:
+                            [
+                                { name: 'firstname', type: 'string' },
+                                { name: 'lastname', type: 'string' },
+                                { name: 'productname', type: 'string' },
+                                { name: 'quantity', type: 'number' },
+                                { name: 'price', type: 'number' },
+                                { name: 'total', type: 'number' }
+                            ]
+                    };
+
+                let dataAdapter = new jqx.dataAdapter(source);
+                dataAdapter.dataBind();
+
+                // create a pivot data source from the dataAdapter
+                let pivotDataSource = new jqx.pivot(
+                    dataAdapter,
+                    {
+                        pivotValuesOnRows: true,
+                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
+                        columns: [{ dataField: 'productname' }],
+                        values: [
+                            { dataField: 'price', 'function': 'sum', text: 'sum', width: NamedNodeMap, formatSettings: { prefix: '$', decimalPlaces: 2 } },
+                            { dataField: 'price', 'function': 'count', text: 'count' },
+                            { dataField: 'price', 'function': 'average', text: 'average', formatSettings: { prefix: '$', decimalPlaces: 2 } }
+                        ]
+                    }
+                );
+
+                return pivotDataSource;		
+
+            }
+            this.pivotDataSource = createPivotDataSource();
+        },
+        mounted: function () {
+            this.$refs.pivotGrid.getPivotRows().items[0].expand();
+            this.$refs.pivotGrid.refresh();
+        }
+    }
+</script>
+<style>
+</style>
\ No newline at end of file
diff --git a/pivotgrid/values-on-rows/main.js b/pivotgrid/values-on-rows/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/pivotgrid/values-on-rows/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/pivotgrid/values-on-rows/package.json b/pivotgrid/values-on-rows/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/pivotgrid/values-on-rows/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/popover/bottompositioning/App.vue b/popover/bottompositioning/App.vue
new file mode 100644
index 00000000..525ebe45
--- /dev/null
+++ b/popover/bottompositioning/App.vue
@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <JqxPopover :offset="{ left: 0, top: 0 }"
+                    :arrowOffsetValue="0"
+                    :position="'top'"
+                    :title="'Employees'"
+                    :showCloseButton="true"
+                    :selector="'#container'">
+            <div ref="employees"></div>
+        </JqxPopover>
+        <div style="height: 60px; border-width: 0px; position: absolute; width: 100%; bottom: 0px; border-style: solid; padding-top:10px; padding-bottom: 10px; box-sizing: border-box;" id="header">
+            <div class="jqx-widget-header" id="container">
+                <JqxButton style="float: left; margin-left: 50%; left: -75px; top: 0px; position: relative; padding: 5px 22px; border-radius: 6px;"
+                           :width="150" :height="22">View Employees</JqxButton>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxPopover,
+            JqxButton
+        },
+        mounted: function () {
+            let data = new Array();
+            let firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne'];
+            let lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth'];
+            let titles = ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager', 'Sales Representative', 'Sales Representative', 'Inside Sales Coordinator', 'Sales Representative'];
+
+            for (let i = 0; i < firstNames.length; i++) {
+                let row = {};
+                row['firstname'] = firstNames[i];
+                row['lastname'] = lastNames[i];
+                row['title'] = titles[i];
+                let imgurl = '../../../images/' + firstNames[i].toLowerCase() + '.png';
+                let img = '<img height="50" width="45" src="' + imgurl + '"/>';
+                let table = '<table style="min-width: 150px;"><tr><td style="width: 55px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table>';
+                this.$refs.employees.innerHTML += table;
+            }
+        }
+    }
+</script>
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/popover/bottompositioning/main.js b/popover/bottompositioning/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/popover/bottompositioning/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/popover/bottompositioning/package.json b/popover/bottompositioning/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/popover/bottompositioning/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/popover/defaultfunctionality/App.vue b/popover/defaultfunctionality/App.vue
new file mode 100644
index 00000000..e3abb436
--- /dev/null
+++ b/popover/defaultfunctionality/App.vue
@@ -0,0 +1,59 @@
+<template>
+    <div>
+        <JqxPopover :showCloseButton="true" :selector="'.my-button'" :title="'Employees'"
+                    :arrowOffsetValue="50" :offset="{ left: left, top: top }">
+            <div ref="employees"></div>
+        </JqxPopover>
+
+        <div style="height: 33px; border-width: 1px; border-style: solid; padding: 10px;" class="jqx-widget-header">
+            <JqxButton ref="myButton"
+                       style="float: right" class="my-button" @click="updatePopoverPosition()"
+                       :width="150" :height="22" :template="'inverse'">
+                View Employees
+            </JqxButton>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxPopover,
+            JqxButton
+        },
+        data: function () {
+            return {
+                left: 0,
+                top: 0
+            }      
+        },
+        mounted: function () {
+            let data = new Array();
+            let firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne'];
+            let lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth'];
+            let titles = ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager', 'Sales Representative', 'Sales Representative', 'Inside Sales Coordinator', 'Sales Representative'];
+
+            for (let i = 0; i < firstNames.length; i++) {
+                let row = {};
+                row['firstname'] = firstNames[i];
+                row['lastname'] = lastNames[i];
+                row['title'] = titles[i];
+                let imgurl = '../../../images/' + firstNames[i].toLowerCase() + '.png';
+                let img = '<img height="50" width="45" src="' + imgurl + '"/>';
+                let table = '<table style="min-width: 150px;"><tr><td style="width: 55px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table>';
+                this.$refs.employees.innerHTML += table;
+            }
+        },
+        methods: {
+            updatePopoverPosition: function () {
+                this.left = this.$refs.myButton.$el.offsetLeft + 16;
+                this.top = this.$refs.myButton.$el.offsetTop;
+            }
+        }
+    }
+</script>
+<style>
+</style>
\ No newline at end of file
diff --git a/popover/defaultfunctionality/main.js b/popover/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/popover/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/popover/defaultfunctionality/package.json b/popover/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/popover/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/popover/modalpopover/App.vue b/popover/modalpopover/App.vue
new file mode 100644
index 00000000..d4c85ea8
--- /dev/null
+++ b/popover/modalpopover/App.vue
@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <JqxPopover :offset="{ left: 0, top: -125 }"
+                    :isModal="true"
+                    :arrowOffsetValue="-240"
+                    :position="'right'"
+                    :title="'Employees'"
+                    :showCloseButton="true"
+                    :selector="'#container'">
+            <div ref="employees"></div>
+        </JqxPopover>
+        <div style="padding: 5px;">
+            <div id="container" class="jqx-widget-header">
+                <JqxButton :width="100" :height="35">View Employees</JqxButton>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxPopover,
+            JqxButton
+        },
+        mounted: function () {
+            let data = new Array();
+            let firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne'];
+            let lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth'];
+            let titles = ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager', 'Sales Representative', 'Sales Representative', 'Inside Sales Coordinator', 'Sales Representative'];
+
+            for (let i = 0; i < firstNames.length; i++) {
+                let row = {};
+                row['firstname'] = firstNames[i];
+                row['lastname'] = lastNames[i];
+                row['title'] = titles[i];
+                let imgurl = '../../../images/' + firstNames[i].toLowerCase() + '.png';
+                let img = '<img height="50" width="45" src="' + imgurl + '"/>';
+                let table = '<table style="min-width: 150px;"><tr><td style="width: 55px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table>';
+                this.$refs.employees.innerHTML += table;
+            }
+        }
+    }
+</script>
+
+<style>
+    #container {
+        height: 800px;
+        width: 140px;
+        float: left;
+        margin-top: 30px;
+        border-width: 1px;
+        border-style: solid;
+        padding: 10px;
+    }
+
+    .jqx-button {
+        margin: auto;
+    }
+</style>
\ No newline at end of file
diff --git a/popover/modalpopover/main.js b/popover/modalpopover/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/popover/modalpopover/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/popover/modalpopover/package.json b/popover/modalpopover/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/popover/modalpopover/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/popover/positioning/App.vue b/popover/positioning/App.vue
new file mode 100644
index 00000000..e8ad528f
--- /dev/null
+++ b/popover/positioning/App.vue
@@ -0,0 +1,62 @@
+<template>
+    <div>
+        <JqxPopover :offset="{ left: 0, top: -125 }"
+                    :arrowOffsetValue="-240"
+                    :position="'left'"
+                    :title="'Employees'"
+                    :showCloseButton="true"
+                    :selector="'#container'">
+            <div ref="employees"></div>
+        </JqxPopover>
+        <div style="padding: 5px;">
+            <div id="container" class="jqx-widget-header">
+                <JqxButton :width="100" :height="35">View Employees</JqxButton>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxPopover,
+            JqxButton
+        },
+        mounted: function () {
+            let data = new Array();
+            let firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne'];
+            let lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth'];
+            let titles = ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager', 'Sales Representative', 'Sales Representative', 'Inside Sales Coordinator', 'Sales Representative'];
+
+            for (let i = 0; i < firstNames.length; i++) {
+                let row = {};
+                row['firstname'] = firstNames[i];
+                row['lastname'] = lastNames[i];
+                row['title'] = titles[i];
+                let imgurl = '../../../images/' + firstNames[i].toLowerCase() + '.png';
+                let img = '<img height="50" width="45" src="' + imgurl + '"/>';
+                let table = '<table style="min-width: 150px;"><tr><td style="width: 55px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table>';
+                this.$refs.employees.innerHTML += table;
+            }
+        }
+    }
+</script>
+
+<style>
+    #container {
+        height: 800px;
+        width: 140px;
+        float: right;
+        margin-top: 30px;
+        border-width: 1px;
+        border-style: solid;
+        padding: 10px;
+    }
+
+    .jqx-button {
+        margin: auto;
+    }
+</style>
\ No newline at end of file
diff --git a/popover/positioning/main.js b/popover/positioning/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/popover/positioning/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/popover/positioning/package.json b/popover/positioning/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/popover/positioning/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/popover/righttoleftlayout/App.vue b/popover/righttoleftlayout/App.vue
new file mode 100644
index 00000000..07f68f05
--- /dev/null
+++ b/popover/righttoleftlayout/App.vue
@@ -0,0 +1,52 @@
+<template>
+    <div>
+        <JqxPopover ref="popover" :showCloseButton="true" :selector="'.my-button'" :title="'Employees'"
+                    :arrowOffsetValue="50" :offset="{ left: left, top: top }" :rtl="true">
+            <div ref="employees"></div>
+        </JqxPopover>
+
+        <div style="height: 33px; border-width: 1px; border-style: solid; padding: 10px;" class="jqx-widget-header">
+            <JqxButton ref="myButton" style="float: right" class="my-button" 
+                       :width="150" :height="22" :template="'inverse'">
+                View Employees
+            </JqxButton>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxPopover,
+            JqxButton
+        },
+        data: function () {
+            return {
+                left: 0,
+                top: 0
+            }
+        },
+        mounted: function () {
+            let data = new Array();
+            let firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne'];
+            let lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth'];
+            let titles = ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager', 'Sales Representative', 'Sales Representative', 'Inside Sales Coordinator', 'Sales Representative'];
+
+            for (let i = 0; i < firstNames.length; i++) {
+                let row = {};
+                row['firstname'] = firstNames[i];
+                row['lastname'] = lastNames[i];
+                row['title'] = titles[i];
+                let imgurl = '../../../images/' + firstNames[i].toLowerCase() + '.png';
+                let img = '<img height="50" width="45" src="' + imgurl + '"/>';
+                let table = '<table style="min-width: 150px;"><tr><td style="width: 55px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table>';
+                this.$refs.employees.innerHTML += table;
+            }
+        }
+    }
+</script>
+<style>
+</style>
\ No newline at end of file
diff --git a/popover/righttoleftlayout/main.js b/popover/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/popover/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/popover/righttoleftlayout/package.json b/popover/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/popover/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/progressbar/colorranges/App.vue b/progressbar/colorranges/App.vue
new file mode 100644
index 00000000..14a6d432
--- /dev/null
+++ b/progressbar/colorranges/App.vue
@@ -0,0 +1,54 @@
+<template>
+    <div>
+        <div style="margin-top: 10px">Horizontal</div>
+
+        <JqxProgressBar ref="myProgressBar"
+                        :width="250" :height="30" :value="0" :showText="true" :orientation="'horizontal'"
+                        :renderText="renderText" :colorRanges="horizontalColorRanges">
+        </JqxProgressBar>
+
+        <div style="margin-top: 10px">Vertical</div>
+
+        <JqxProgressBar ref="myVerticalProgressBar"
+                        :width="30" :height="250" :value="0" :showText="true" :orientation="'vertical'"
+                        :renderText="renderText" :colorRanges="verticalColorRanges">
+        </JqxProgressBar>
+    </div>
+</template>
+
+<script>
+    import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
+
+    export default {
+        components: {
+            JqxProgressBar
+        },
+        data: function () {
+            return {
+                horizontalColorRanges: [{ stop: 20, color: '#33b5e5' }, { stop: 50, color: '#98ca00' }, { stop: 80, color: '#ff4444' }, { stop: 100, color: '#aa66cc' }],
+                verticalColorRanges: [{ stop: 40, color: '#f0ad4e' }, { stop: 59, color: '#5bc0de' }, { stop: 70, color: '#5cb85c' }, { stop: 100, color: '#d9534f' }],
+                renderText: (text, value) => {
+                    if (value < 60) {
+                        return '<span class="jqx-rc-all" style="color: #333;">' + text + '</span>';
+                    }
+                    return '<span class="jqx-rc-all" style="color: #fff;">' + text + '</span>';
+                }
+            }
+        },
+        mounted: function () {
+            let value = 0;
+            let interval = setInterval(_ => {
+                value++;
+
+                if (value == 100) {
+                    clearInterval(interval);
+                }
+
+                this.$refs.myProgressBar.val(value);
+                this.$refs.myVerticalProgressBar.val(value);
+            }, 20);
+        }
+    }
+</script>
+<style>
+</style>
\ No newline at end of file
diff --git a/progressbar/colorranges/main.js b/progressbar/colorranges/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/progressbar/colorranges/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/progressbar/colorranges/package.json b/progressbar/colorranges/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/progressbar/colorranges/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/progressbar/defaultfunctionality/App.vue b/progressbar/defaultfunctionality/App.vue
new file mode 100644
index 00000000..f3a902bd
--- /dev/null
+++ b/progressbar/defaultfunctionality/App.vue
@@ -0,0 +1,103 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left;">
+        <div style="margin-top: 10px;">Horizontal</div>
+
+        <JqxProgressBar ref="myHorizontalProgressBar"
+                        :width="250" :height="30" :value="50">
+        </JqxProgressBar>
+
+        <div style="margin-top: 10px;">Vertical</div>
+
+        <JqxProgressBar ref="myVerticalProgressBar"
+                        :width="30" :height="250" :value="50" :orientation="'vertical'">
+        </JqxProgressBar>
+
+        <br />
+        <div>Enter a value between 0 and 100</div>
+
+        <JqxInput ref="valueInputElement"></JqxInput>
+
+        <JqxButton @click="onClick()">Update</JqxButton>
+
+        <JqxCheckBox @change="onCheckBox($event)">
+            Show Progress Text
+        </JqxCheckBox>
+
+        <JqxCheckBox ref="myRenderCheckBox" @change="onCustomTextCheckBox($event)">
+            Custom Progress Text
+        </JqxCheckBox>
+    </div>
+</template>
+
+<script>
+    import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
+    import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+
+    export default {
+        components: {
+            JqxProgressBar,
+            JqxInput,
+            JqxButton,
+            JqxCheckBox
+        },
+        methods: {
+            renderText(text) {
+                const isChecked = this.$refs.myRenderCheckBox.checked;
+
+                if (isChecked) {
+                    return "<span class='jqx-rc-all' style='background: #ffe8a6; color: #e53d37; font-style: italic;'>" + text + "</span>";
+                } else {
+                    return text;
+                }
+            },
+            getValueInput: function () {
+                return parseInt(this.$refs.valueInputElement.val());
+            },
+            onClick: function () {
+                const value = this.getValueInput();
+                if (!isNaN(value)) {
+                    this.valueInput = value;
+                    this.$refs.myHorizontalProgressBar.val(value);
+                    this.$refs.myVerticalProgressBar.val(value);
+                    this.isUpdated = true;
+                }
+            },
+            onCheckBox: function (event) {
+                const value = this.getValueInput();
+                if (value != null && this.isUpdated) {
+                    this.$refs.myHorizontalProgressBar.value = this.valueInput;
+                    this.$refs.myVerticalProgressBar.value = this.valueInput;
+                }
+
+                const isChecked = event.args.checked;
+                this.$refs.myHorizontalProgressBar.showText = isChecked;
+                this.$refs.myVerticalProgressBar.showText = isChecked;
+            },
+            onCustomTextCheckBox: function (event) {
+                const value = this.getValueInput();
+
+                if (value != null && this.isUpdated) {
+                    this.$refs.myHorizontalProgressBar.value = this.valueInput;
+                    this.$refs.myVerticalProgressBar.value = this.valueInput;
+                }
+
+                this.$refs.myHorizontalProgressBar.renderText = this.renderText;;
+                this.$refs.myVerticalProgressBar.renderText = this.renderText;
+
+                // Need to refresh the progressbar
+                this.$refs.myHorizontalProgressBar.showText = false;
+                this.$refs.myVerticalProgressBar.showText = false;
+                this.$refs.myHorizontalProgressBar.showText = true;
+                this.$refs.myVerticalProgressBar.showText = true;
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        display: inline-block;
+    }
+</style>
\ No newline at end of file
diff --git a/progressbar/defaultfunctionality/main.js b/progressbar/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/progressbar/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/progressbar/defaultfunctionality/package.json b/progressbar/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/progressbar/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/progressbar/layout/App.vue b/progressbar/layout/App.vue
new file mode 100644
index 00000000..3675f075
--- /dev/null
+++ b/progressbar/layout/App.vue
@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <div id="container" style="font-family: Verdana; font-size: 12px; float: left">
+            <b>Default Layout</b>
+            <JqxProgressBar :width="300"
+                            :height="40"
+                            :value="50">
+            </JqxProgressBar><br />
+            <JqxProgressBar style="margin-top: 10px;"
+                            :width="40"
+                            :height="300"
+                            :orientation="'vertical'"
+                            :value="50">
+            </JqxProgressBar>
+            <div style="margin-top: 10px;" id='verticalProgressBar'></div>
+        </div>
+        <div style="float: right; font-family: Verdana; font-size: 12px;" id="rightContainer">
+            <b>Reversed Layout</b>
+            <JqxProgressBar :width="300"
+                            :height="40"
+                            :layout="'reverse'"
+                            :value="50">
+            </JqxProgressBar><br />
+            <JqxProgressBar style="float: right;"
+                            :width="40"
+                            :height="300"
+                            :orientation="'reverse'"
+                            :layout="'vertical'"
+                            :value="50">
+            </JqxProgressBar>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
+  
+    export default {
+        components: {
+            JqxProgressBar
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/progressbar/layout/main.js b/progressbar/layout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/progressbar/layout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/progressbar/layout/package.json b/progressbar/layout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/progressbar/layout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/progressbar/righttoleftlayout/App.vue b/progressbar/righttoleftlayout/App.vue
new file mode 100644
index 00000000..8f74b68d
--- /dev/null
+++ b/progressbar/righttoleftlayout/App.vue
@@ -0,0 +1,20 @@
+<template>
+    <JqxProgressBar :rtl="true"
+                    :width="300"
+                    :height="30"
+                    :value="50">
+    </JqxProgressBar>
+</template>
+
+<script>
+    import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
+  
+    export default {
+        components: {
+            JqxProgressBar
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/progressbar/righttoleftlayout/main.js b/progressbar/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/progressbar/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/progressbar/righttoleftlayout/package.json b/progressbar/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/progressbar/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/progressbar/templates/App.vue b/progressbar/templates/App.vue
new file mode 100644
index 00000000..8134c8e8
--- /dev/null
+++ b/progressbar/templates/App.vue
@@ -0,0 +1,105 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana; float: left;">
+        <div style="margin-top: 10px;">Primary</div>
+        <JqxProgressBar ref="jqxProgressBar2"
+                        :animationDuration="0"
+                        :width="250"
+                        :height="30"
+                        :value="0"
+                        :showText="true"
+                        :renderText="renderText"
+                        :template="'primary'">
+        </JqxProgressBar>
+        <div style="margin-top: 10px;">Success</div>
+        <JqxProgressBar ref="jqxProgressBar3"
+                        :animationDuration="0"
+                        :width="250"
+                        :height="30"
+                        :value="0"
+                        :showText="true"
+                        :renderText="renderText"
+                        :template="'success'">
+        </JqxProgressBar>
+        <div style="margin-top: 10px;">Info</div>
+        <JqxProgressBar ref="jqxProgressBar4"
+                        :animationDuration="0"
+                        :width="250"
+                        :height="30"
+                        :value="0"
+                        :showText="true"
+                        :renderText="renderText"
+                        :template="'info'">
+        </JqxProgressBar>
+        <div style="margin-top: 10px;">Warning</div>
+        <JqxProgressBar ref="jqxProgressBar5"
+                        :animationDuration="0"
+                        :width="250"
+                        :height="30"
+                        :value="0"
+                        :showText="true"
+                        :renderText="renderText"
+                        :template="'warning'">
+        </JqxProgressBar>
+        <div style="margin-top: 10px;">Danger</div>
+        <JqxProgressBar ref="jqxProgressBar6"
+                        :animationDuration="0"
+                        :width="250"
+                        :height="30"
+                        :value="0"
+                        :showText="true"
+                        :renderText="renderText"
+                        :template="'danger'">
+        </JqxProgressBar>
+    </div>
+</template>
+
+<script>
+    import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
+  
+    export default {
+        components: {
+            JqxProgressBar
+        },
+        mounted: function() {
+            let values = {};
+            let addInterval = (id, intervalStep) => {
+                values[id] = { value: 0 };
+                values[id].interval = setInterval(() => {
+                    values[id].value++;
+                    if (values[id].value == 100) {
+                        clearInterval(values[id].interval);
+                    }
+
+                    this.$refs[id].val(values[id].value);
+                }, intervalStep);
+            };
+
+            addInterval('jqxProgressBar2', 20);
+            addInterval('jqxProgressBar3', 30);
+            addInterval('jqxProgressBar4', 40);
+            addInterval('jqxProgressBar5', 50);
+            addInterval('jqxProgressBar6', 60);
+        },
+        methods: {
+            renderText: function (text, value)  {
+                if (value < 55) {
+                    return '<span class="jqx-rc-all" style="color: #333;">' + text + '</span>';
+                }
+                return '<span class="jqx-rc-all" style="color: #fff;">' + text + '</span>';
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    .jqx-rc-all {
+        position: relative;
+    }
+</style>
\ No newline at end of file
diff --git a/progressbar/templates/main.js b/progressbar/templates/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/progressbar/templates/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/progressbar/templates/package.json b/progressbar/templates/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/progressbar/templates/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/radiobutton/defaultfunctionality/App.vue b/radiobutton/defaultfunctionality/App.vue
new file mode 100644
index 00000000..7beb89cd
--- /dev/null
+++ b/radiobutton/defaultfunctionality/App.vue
@@ -0,0 +1,88 @@
+<template>
+    <div>
+        <h3>
+            House Contract
+        </h3>
+
+        <JqxRadioButton @change="firstBtnOnChange($event)"
+                        :width="250" :height="25" :checked="true">
+            <span>12 Months Contract</span>
+        </JqxRadioButton>
+
+        <JqxRadioButton @change="secondBtnOnChange($event)"
+                        :width="250" :height="25">
+            <span>6 Months Contract</span>
+        </JqxRadioButton>
+
+        <JqxRadioButton @change="thirdBtnOnChange($event)"
+                        :width="250" :height="25">
+            <span>3 Months Contract</span>
+        </JqxRadioButton>
+
+        <JqxRadioButton :width="250" :height="25" :disabled="true">
+            <span>1 Month Contract</span>
+        </JqxRadioButton>
+
+        <div style="margin-top: 10px">
+            <div>Events:</div>
+            <div ref="eventsLog"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
+  
+    export default {
+        components: {
+            JqxRadioButton
+        },
+        beforeCreate: function() {
+            this.count = 0;
+        },
+        methods: {
+            clearLog: function() {             
+                let log = this.$refs.eventsLog;
+                if (this.count >= 2) {
+                    log.innerHTML = '';
+                    this.count = 0;
+                }
+                this.count++;
+            },
+            firstBtnOnChange: function (event) {
+                this.clearLog();
+                let log = this.$refs.eventsLog;
+                let checked = event.args.checked;
+                if (checked) {
+                    log.innerHTML += '<div><span>Checked: 12 Months Contract</span></div>';
+                }
+                else {
+                    log.innerHTML += '<div><span>Unchecked: 12 Months Contract</span></div>';
+                }
+            },
+            secondBtnOnChange: function (event) {
+                this.clearLog();
+                let log = this.$refs.eventsLog;
+                let checked = event.args.checked;
+                if (checked) {
+                    log.innerHTML += '<div><span>Checked: 6 Months Contract</span></div>';
+                } else {
+                    log.innerHTML += '<div><span>Unchecked: 6 Months Contract</span></div>';
+                }
+            },
+            thirdBtnOnChange: function (event) {
+                this.clearLog();
+                let log = this.$refs.eventsLog;
+                let checked = event.args.checked;
+                if (checked) {
+                    log.innerHTML += '<div><span>Checked: 3 Months Contract</span></div>';
+                } else {
+                    log.innerHTML += '<div><span>Unchecked: 3 Months Contract</span></div>';
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/radiobutton/defaultfunctionality/main.js b/radiobutton/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/radiobutton/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/radiobutton/defaultfunctionality/package.json b/radiobutton/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/radiobutton/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/radiobutton/twowaydatabinding/App.vue b/radiobutton/twowaydatabinding/App.vue
new file mode 100644
index 00000000..c6c39c07
--- /dev/null
+++ b/radiobutton/twowaydatabinding/App.vue
@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <div>The value is: {{ value }}</div><br />
+
+        <JqxRadioButton v-model="value" :width="250" :height="25">1 Radio</JqxRadioButton>
+        <JqxRadioButton v-model="value" :width="250" :height="25">2 Radio</JqxRadioButton>
+        <JqxRadioButton v-model="value" :width="250" :height="25">3 Radio</JqxRadioButton>
+    </div>
+</template>
+
+<script>
+    import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
+
+    export default {
+        components: {
+            JqxRadioButton
+        },
+        data: function () {
+            return {
+                value: ''
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/radiobutton/twowaydatabinding/main.js b/radiobutton/twowaydatabinding/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/radiobutton/twowaydatabinding/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/radiobutton/twowaydatabinding/package.json b/radiobutton/twowaydatabinding/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/radiobutton/twowaydatabinding/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/rangeselector/backgroundimage/App.vue b/rangeselector/backgroundimage/App.vue
new file mode 100644
index 00000000..df65c6ed
--- /dev/null
+++ b/rangeselector/backgroundimage/App.vue
@@ -0,0 +1,76 @@
+<template>
+    <div>
+        <JqxRangeSelector ref="rangeSelector"
+                          :width="500"
+                          :height="100"
+                          :min="min"
+                          :max="max"
+                          :range="range"
+                          :majorTicksInterval="'week'"
+                          :minorTicksInterval="'day'"
+                          :labelsFormat="'dd'"
+                          :markersFormat="'d'"
+                          :showGroupLabels="true">
+            <div id="jqxRangeSelectorContent">
+                <img id="backgroundImage" />
+            </div>
+        </JqxRangeSelector>
+        <br />
+
+        <JqxButton style="margin-left: 80px;" @click="onClickSubmit()" :width="120">
+            Submit vacation
+        </JqxButton>
+
+        <div style="margin-left: 80px; margin-top: 10px;" ref="result"></div>
+    </div>
+</template>
+
+<script>
+    import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+  
+    export default {
+        components: {
+            JqxRangeSelector,
+            JqxButton
+        },
+        data: function () {
+            return {
+                min: new Date(2014, 5, 1),
+                max: new Date(2014, 9, 1),
+                range: { from: new Date(2014, 5, 1), to: new Date(2014, 6, 29), min: { days: 7 } }
+            }
+        },
+        methods: {
+            onClickSubmit: function() {
+                let months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
+                let range = this.$refs.rangeSelector.getRange();
+
+                let from = new Date(range.from.toString());
+                let to = new Date(range.to.toString());
+
+                let fromDate = from.getDate();
+                let fromMonth = from.getMonth();
+                let toDate = to.getDate();
+                let toMonth = to.getMonth();
+
+                this.$refs.result.innerHTML = "Vacation period selected: from " + months[fromMonth] + " " + fromDate + " to " + months[toMonth] + " " + toDate;
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    #backgroundImage {
+        width: 500px;
+        height: 100px;
+        background: url(../../../images/imageNature5.jpg) -100px -100px;
+    }
+</style>
\ No newline at end of file
diff --git a/rangeselector/backgroundimage/main.js b/rangeselector/backgroundimage/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/rangeselector/backgroundimage/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/rangeselector/backgroundimage/package.json b/rangeselector/backgroundimage/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/rangeselector/backgroundimage/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/rangeselector/chartonbackground/App.vue b/rangeselector/chartonbackground/App.vue
new file mode 100644
index 00000000..3a5196fb
--- /dev/null
+++ b/rangeselector/chartonbackground/App.vue
@@ -0,0 +1,117 @@
+<template>
+    <div>
+        <label style="margin-left: 250px; font-size: 18px; font-weight: bold;">Weather in Geneva, Switzerland</label>
+
+        <br />
+
+        <label style="margin-left: 250px; font-size: 14px; font-weight: bold;">Climatological Information about Geneva</label>
+
+        <JqxRangeSelector :width="getWidth" :height="200" :min="0" :max="12"
+                          :range="{ from: 3, to: 9 }" :majorTicksInterval="1"
+                          :minorTicksInterval="1" :labelsOnTicks="false"
+                          :labelsFormatFunction="labelsFormatFunction"
+                          :markersFormatFunction="markersFormatFunction">
+
+            <JqxChart style="width: 750px; height: 200px" 
+                      :title="''" :description="''" :showBorderLine="false"
+                      :showLegend="false" :enableAnimations="true" :padding="padding"
+                      :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
+                      :colorScheme="'scheme05'" :seriesGroups="seriesGroups">
+            </JqxChart>
+
+        </JqxRangeSelector>
+    </div>
+</template>
+
+<script>
+    import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+
+    export default {
+        components: {
+            JqxRangeSelector,
+            JqxChart
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('rangeselector'),
+                dataAdapter: new jqx.dataAdapter(this.source, {
+                    async: false,
+                    autoBind: true,
+                    loadComplete: (data, status, xhr, records) => {
+                        this.recordsArray = records;
+                    },
+                    loadError: (xhr, status, error) => {
+                        alert('Error loading "' + this.source.url + '" : ' + error);
+                    }
+                }),
+                padding: { left: 5, top: 0, right: 0, bottom: 0 },
+                titlePadding: { left: 0, top: 0, right: 0, bottom: 0 },
+                xAxis: {
+                    text: 'Category Axis',
+                    textRotationAngle: 0,
+                    dataField: 'month',
+                    showTickMarks: false,
+                    showLabels: false,
+                    tickMarksInterval: 1,
+                    tickMarksColor: '#888888',
+                    valuesOnTicks: true,
+                    unitInterval: 1,
+                    visible: false,
+                    showGridLines: false,
+                    gridLinesInterval: 3,
+                    gridLinesColor: '#888888',
+                    axisSize: 'auto'
+                },
+                seriesGroups: [
+                    {
+                        type: 'line',
+                        showLabels: false,
+                        valueAxis:
+                            {
+                                unitInterval: 5,
+                                visible: false,
+                                description: 'Temperature [C]',
+                                axisSize: 'auto',
+                                tickMarksColor: '#888888'
+                            },
+                        series: [
+                            { dataField: 'max', lineColor: 'green', displayText: 'Max Temperature' },
+                            { dataField: 'min', lineColor: 'red', displayText: 'Min Temperature' }
+                        ]
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'month' },
+                    { name: 'min' },
+                    { name: 'max' },
+                ],
+                url: '../sampledata/weather_geneva.txt'
+            };
+
+            this.recordsArray = [];
+        },
+        methods: {
+            labelsFormatFunction: function (data) {
+                if (this.recordsArray[data]) {
+                    return "1 " + this.recordsArray[data].month;
+                }
+                else return "31 " + this.recordsArray[data - 1].month;
+            },
+            markersFormatFunction: function (data) {
+                if (this.recordsArray[data]) {
+                    return "1 " + this.recordsArray[data].month;
+                }
+                else return "31 " + this.recordsArray[data - 1].month;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/rangeselector/chartonbackground/main.js b/rangeselector/chartonbackground/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/rangeselector/chartonbackground/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/rangeselector/chartonbackground/package.json b/rangeselector/chartonbackground/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/rangeselector/chartonbackground/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/rangeselector/customizedmarkers/App.vue b/rangeselector/customizedmarkers/App.vue
new file mode 100644
index 00000000..eedc9875
--- /dev/null
+++ b/rangeselector/customizedmarkers/App.vue
@@ -0,0 +1,36 @@
+<template>
+    <JqxRangeSelector :width="getWidth" :height="100" :min="0" :max="200"
+                      :range="{from: 10, to: 50}" :labelsOnTicks="false"
+                      :majorTicksInterval="20" :markersFormatFunction="markersFormatFunction">
+    
+    </JqxRangeSelector>
+</template>
+
+<script>
+    import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
+
+    export default {
+        components: {
+            JqxRangeSelector
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('rangeselector')
+            }
+        },      
+        methods: {
+            markersFormatFunction: function (value, position) {
+                let side;
+                if (position == "left") {
+                    side = "From";
+                } else if (position == "right") {
+                    side = "To";
+                };
+                return side + ": <span>" + value.toFixed(0) + "</span>";
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/rangeselector/customizedmarkers/main.js b/rangeselector/customizedmarkers/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/rangeselector/customizedmarkers/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/rangeselector/customizedmarkers/package.json b/rangeselector/customizedmarkers/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/rangeselector/customizedmarkers/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/rangeselector/datascale/App.vue b/rangeselector/datascale/App.vue
new file mode 100644
index 00000000..069d9df6
--- /dev/null
+++ b/rangeselector/datascale/App.vue
@@ -0,0 +1,35 @@
+<template>
+    <JqxRangeSelector 
+                  :width="getWidth"
+                  :height="100"
+                  :min="min"
+                  :max="max"
+                  :range="range"
+                  :labelsOnTicks="false"
+                  :majorTicksInterval="'month'"
+                  :minorTicksInterval="'day'"
+                  :labelsFormat="'MMM'"
+                  :markersFormat="'d'">
+    </JqxRangeSelector>
+</template>
+
+<script>
+    import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
+
+    export default {
+        components: {
+            JqxRangeSelector
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('rangeselector'),
+                min: new Date(2014, 0, 1),
+                max: new Date(2014, 11, 31),
+                range: { from: new Date(2014, 3, 15), to: new Date(2014, 7, 29) }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/rangeselector/datascale/main.js b/rangeselector/datascale/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/rangeselector/datascale/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/rangeselector/datascale/package.json b/rangeselector/datascale/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/rangeselector/datascale/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/rangeselector/decimalscale/App.vue b/rangeselector/decimalscale/App.vue
new file mode 100644
index 00000000..b27db5f9
--- /dev/null
+++ b/rangeselector/decimalscale/App.vue
@@ -0,0 +1,37 @@
+<template>
+    <JqxRangeSelector 
+                  :width="getWidth"
+                  :height="90"
+                  :min="0"
+                  :max="10"
+                  :range="{ from: 2, to: 5 }"
+                  :labelsOnTicks="false"
+                  :minorTicksInterval="0.1"
+                  :majorTicksInterval="2.5"
+                  :labelsFormatFunction="formatFunction"
+                  :markersFormatFunction="formatFunction">
+    </JqxRangeSelector>
+</template>
+
+<script>
+    import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
+
+    export default {
+        components: {
+            JqxRangeSelector
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('rangeselector')
+            }
+        },
+        methods: {
+            formatFunction: function (value) {
+                return jqx.dataFormat.formatNumber(value, 'f1') + " mm";
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/rangeselector/decimalscale/main.js b/rangeselector/decimalscale/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/rangeselector/decimalscale/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/rangeselector/decimalscale/package.json b/rangeselector/decimalscale/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/rangeselector/decimalscale/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/rangeselector/defaultfunctionality/App.vue b/rangeselector/defaultfunctionality/App.vue
new file mode 100644
index 00000000..c0d3ca7d
--- /dev/null
+++ b/rangeselector/defaultfunctionality/App.vue
@@ -0,0 +1,57 @@
+<template>
+    <div>
+        <JqxRangeSelector ref="myRangeSelector"
+                          :width="getWidth" :height="100"
+                          :min="0" :max="200"
+                          :range="{ from: 10, to: 50 }" 
+                          :majorTicksInterval="10" 
+                          :minorTicksInterval="1">
+            <div id="rangeSelectorContent"></div>
+        </JqxRangeSelector>
+
+        <div style="margin-left:30px; margin-top: 50px;">
+            <JqxButton @click="onClickSet()">
+                Set range
+            </JqxButton>
+            <JqxButton @click="onClickGet()">
+                Get range
+            </JqxButton>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxRangeSelector,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('rangeselector')
+            }
+        },
+        methods: {
+            onClickGet: function() {
+                // Get Range.
+                let range = this.$refs.myRangeSelector.getRange();
+                alert("The selected range is from " + range.from + " to " + range.to);
+            },
+            onClickSet: function () {
+                // Set Range.
+                this.$refs.myRangeSelector.setRange(30, 70);
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        width: fit-content;
+        display: inline-block;
+        margin-right: 5px;
+    }
+</style>
\ No newline at end of file
diff --git a/rangeselector/defaultfunctionality/main.js b/rangeselector/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/rangeselector/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/rangeselector/defaultfunctionality/package.json b/rangeselector/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/rangeselector/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/rangeselector/fluidsize/App.vue b/rangeselector/fluidsize/App.vue
new file mode 100644
index 00000000..15d76eb2
--- /dev/null
+++ b/rangeselector/fluidsize/App.vue
@@ -0,0 +1,52 @@
+<template>
+    <div>
+        <JqxRangeSelector ref="myRangeSelector"
+                          :width="'80%'" :height="100"
+                          :min="0" :max="100"
+                          :range="{ from: 10, to: 50 }" 
+                          :majorTicksInterval="10" 
+                          :minorTicksInterval="1">
+            <div id="rangeSelectorContent"></div>
+        </JqxRangeSelector>
+
+        <div style="margin-left:30px; margin-top: 50px;">
+            <JqxButton @click="onClickSet()">
+                Set range
+            </JqxButton>
+            <JqxButton @click="onClickGet()">
+                Get range
+            </JqxButton>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxRangeSelector,
+            JqxButton
+        },
+        methods: {
+            onClickGet: function() {
+                // Get Range.
+                let range = this.$refs.myRangeSelector.getRange();
+                alert("The selected range is from " + range.from + " to " + range.to);
+            },
+            onClickSet: function () {
+                // Set Range.
+                this.$refs.myRangeSelector.setRange(30, 70);
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        width: fit-content;
+        display: inline-block;
+        margin-right: 5px;
+    }
+</style>
\ No newline at end of file
diff --git a/rangeselector/fluidsize/main.js b/rangeselector/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/rangeselector/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/rangeselector/fluidsize/package.json b/rangeselector/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/rangeselector/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/rangeselector/negativescale/App.vue b/rangeselector/negativescale/App.vue
new file mode 100644
index 00000000..c96859dc
--- /dev/null
+++ b/rangeselector/negativescale/App.vue
@@ -0,0 +1,28 @@
+<template>
+        <JqxRangeSelector :width="getWidth" 
+                          :height="100"
+                          :min="-1000" 
+                          :max="-100"
+                          :range="{ from: -500, to: -300 }"
+                          :minorTicksInterval="10"
+                          :majorTicksInterval="100">
+        </JqxRangeSelector>
+</template>
+
+<script>
+    import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
+
+    export default {
+        components: {
+            JqxRangeSelector
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('rangeselector')
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/rangeselector/negativescale/main.js b/rangeselector/negativescale/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/rangeselector/negativescale/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/rangeselector/negativescale/package.json b/rangeselector/negativescale/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/rangeselector/negativescale/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/rangeselector/numericscale/App.vue b/rangeselector/numericscale/App.vue
new file mode 100644
index 00000000..b1a80dbb
--- /dev/null
+++ b/rangeselector/numericscale/App.vue
@@ -0,0 +1,30 @@
+<template>
+        <JqxRangeSelector :width="getWidth" 
+                          :height="100"
+                          :min="1000" 
+                          :max="10000"
+                          :range="{ from: 3000, to: 5000 }"
+                          :labelsFormat="'c0'"
+                          :markersFormat="'c0'"
+                          :minorTicksInterval="100"
+                          :majorTicksInterval="1500">
+        </JqxRangeSelector>
+</template>
+
+<script>
+    import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
+
+    export default {
+        components: {
+            JqxRangeSelector
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('rangeselector')
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/rangeselector/numericscale/main.js b/rangeselector/numericscale/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/rangeselector/numericscale/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/rangeselector/numericscale/package.json b/rangeselector/numericscale/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/rangeselector/numericscale/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/rangeselector/rangeselectorasafilter/App.vue b/rangeselector/rangeselectorasafilter/App.vue
new file mode 100644
index 00000000..20b5876b
--- /dev/null
+++ b/rangeselector/rangeselectorasafilter/App.vue
@@ -0,0 +1,108 @@
+<template>
+    <div>
+        <label style="font-size: 13px; font-family: Verdana;">
+            Major scientific discoveries in selected period:
+        </label>
+        <JqxGrid ref="myGrid" style="margin-top: 10px;"
+                 :width="getWidthGrid" :height="300"
+                 :source="dataAdapter"
+                 :filterable="true"
+                 :columngroups="columngroups"
+                 :columns="columns">
+        </JqxGrid>
+        <br />
+        <label style="font-size: 13px; margin-top: 10px; font-family: Verdana;">
+            Select period:
+        </label>
+        <br />
+        <JqxRangeSelector ref="myRangeSelector"
+                          @change="change($event)"
+                          :width="getWidthRange"
+                          :height="80"
+                          :min="min"
+                          :max="max"
+                          :range="range"
+                          :labelsFormat="'yyyy'"
+                          :markersFormat="'yyyy'"
+                          :minorTicksInterval="'year'"
+                          :majorTicksInterval="{ years: 10 }">
+        </JqxRangeSelector>
+    </div>
+</template>
+
+<script>
+    import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
+    import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
+
+    export default {
+        components: {
+            JqxRangeSelector,
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidthGrid: getWidth('grid'),
+                getWidthRange: getWidth('rangeselector'),
+                min: new Date(1798, 12, 31),
+                max: new Date(1900, 1, 1),
+                range: { from: new Date(1800, 1, 1), to: new Date(1900, 1, 1) },
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: "Discovery", columngroup: "header", datafield: "discovery", width: 250 },
+                    { text: "Scientist", columngroup: "header", datafield: "scientist", width: 210 },
+                    { text: "Year", columngroup: "header", datafield: "year", cellsformat: "yyyy" }
+                ],
+                columngroups: [
+                    { text: "Major scientific discoveries in the 19th century", align: "center", name: "header" }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                    datatype: 'json',
+                    datafields: [
+                        { name: 'discovery', type: 'string' },
+                        { name: 'scientist', type: 'string' },
+                        { name: 'year', type: 'date' }
+                    ],
+                    id: 'id',
+                url: '../sampledata/discoveries.txt'
+                };
+        },
+        methods: {
+            change: function(event) {
+                let range = event.args;
+                let min = this.$refs.myRangeSelector.min;
+                let max = this.$refs.myRangeSelector.max;
+
+                min = new Date(min);
+                max = new Date(max);
+
+                if (range.from.getTime() == min.getTime() && range.to.getTime() == max.getTime()) {
+                    this.$refs.myGrid.clearfilters();
+                } else {
+                    this.applyFilter(range.from, range.to);
+                };
+            },
+            applyFilter: function (from, to) {
+                this.$refs.myGrid.clearfilters();
+                let filtertype = 'datefilter';
+                let filtergroup = new jqx.filter();
+                let filter_or_operator = 0;
+                let filtervalueFrom = from;
+                let filterconditionFrom = 'GREATER_THAN_OR_EQUAL';
+                let filterFrom = filtergroup.createfilter(filtertype, filtervalueFrom, filterconditionFrom);
+                filtergroup.addfilter(filter_or_operator, filterFrom);
+                let filtervalueTo = to;
+                let filterconditionTo = 'LESS_THAN_OR_EQUAL';
+                let filterTo = filtergroup.createfilter(filtertype, filtervalueTo, filterconditionTo);
+                filtergroup.addfilter(filter_or_operator, filterTo);
+                this.$refs.myGrid.addfilter('year', filtergroup);
+                this.$refs.myGrid.applyfilters();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/rangeselector/rangeselectorasafilter/main.js b/rangeselector/rangeselectorasafilter/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/rangeselector/rangeselectorasafilter/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/rangeselector/rangeselectorasafilter/package.json b/rangeselector/rangeselectorasafilter/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/rangeselector/rangeselectorasafilter/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/rangeselector/righttoleftlayout/App.vue b/rangeselector/righttoleftlayout/App.vue
new file mode 100644
index 00000000..5c98588a
--- /dev/null
+++ b/rangeselector/righttoleftlayout/App.vue
@@ -0,0 +1,90 @@
+<template>
+    <JqxRangeSelector ref="myRangeSelector"
+                      :width="getWidth"
+                      :height="100"
+                      :min="min"
+                      :max="max"
+                      :range="range"
+                      :minorTicksInterval="minorTicksInterval"
+                      :majorTicksInterval="majorTicksInterval"
+                      :rtl="true">
+    </JqxRangeSelector>
+</template>
+
+<script>
+    import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
+    import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
+
+    export default {
+        components: {
+            JqxRangeSelector,
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('rangeselector'),
+                min: 0,
+                max: 100,
+                range: { from: 40, to: 60 },
+                minorTicksInterval: 1,
+                majorTicksInterval: 10,
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: "Discovery", columngroup: "header", datafield: "discovery", width: 250 },
+                    { text: "Scientist", columngroup: "header", datafield: "scientist", width: 210 },
+                    { text: "Year", columngroup: "header", datafield: "year", cellsformat: "yyyy" }
+                ],
+                columngroups: [
+                    { text: "Major scientific discoveries in the 19th century", align: "center", name: "header" }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                    datatype: 'json',
+                    datafields: [
+                        { name: 'discovery', type: 'string' },
+                        { name: 'scientist', type: 'string' },
+                        { name: 'year', type: 'date' }
+                    ],
+                    id: 'id',
+                url: '../sampledata/discoveries.txt'
+                };
+        },
+        methods: {
+            change: function(event) {
+                let range = event.args;
+                let min = this.$refs.myRangeSelector.min;
+                let max = this.$refs.myRangeSelector.max;
+
+                min = new Date(min);
+                max = new Date(max);
+
+                if (range.from.getTime() == min.getTime() && range.to.getTime() == max.getTime()) {
+                    this.$refs.myGrid.clearfilters();
+                } else {
+                    this.applyFilter(range.from, range.to);
+                };
+            },
+            applyFilter: function (from, to) {
+                this.$refs.myGrid.clearfilters();
+                let filtertype = 'datefilter';
+                let filtergroup = new jqx.filter();
+                let filter_or_operator = 0;
+                let filtervalueFrom = from;
+                let filterconditionFrom = 'GREATER_THAN_OR_EQUAL';
+                let filterFrom = filtergroup.createfilter(filtertype, filtervalueFrom, filterconditionFrom);
+                filtergroup.addfilter(filter_or_operator, filterFrom);
+                let filtervalueTo = to;
+                let filterconditionTo = 'LESS_THAN_OR_EQUAL';
+                let filterTo = filtergroup.createfilter(filtertype, filtervalueTo, filterconditionTo);
+                filtergroup.addfilter(filter_or_operator, filterTo);
+                this.$refs.myGrid.addfilter('year', filtergroup);
+                this.$refs.myGrid.applyfilters();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/rangeselector/righttoleftlayout/main.js b/rangeselector/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/rangeselector/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/rangeselector/righttoleftlayout/package.json b/rangeselector/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/rangeselector/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/rangeselector/timescale/App.vue b/rangeselector/timescale/App.vue
new file mode 100644
index 00000000..ce7ff7f5
--- /dev/null
+++ b/rangeselector/timescale/App.vue
@@ -0,0 +1,93 @@
+<template>
+    <JqxRangeSelector ref="myRangeSelector"
+                      :width="getWidth"
+                      :height="100"
+                      :min="min"
+                      :max="max"
+                      :range="range"
+                      :labelsFormat="labelsFormat"
+                      :markersFormat="markersFormat"
+                      :minorTicksInterval="minorTicksInterval"
+                      :majorTicksInterval="majorTicksInterval">
+    </JqxRangeSelector>
+</template>
+
+<script>
+    import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
+    import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
+
+    export default {
+        components: {
+            JqxRangeSelector,
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('rangeselector'),
+                min: new Date(2014, 5, 1, 0, 0, 0),
+                max: new Date(2014, 5, 1, 24, 0, 0),
+                range: { from: new Date(2014, 5, 1, 4, 0, 0), to: new Date(2014, 5, 1, 12, 0, 0) },
+                minorTicksInterval: { minutes: 30 },
+                majorTicksInterval: { hours: 4 },
+                labelsFormat: 'hh:mm tt',
+                markersFormat: 'hh:mm tt',
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: "Discovery", columngroup: "header", datafield: "discovery", width: 250 },
+                    { text: "Scientist", columngroup: "header", datafield: "scientist", width: 210 },
+                    { text: "Year", columngroup: "header", datafield: "year", cellsformat: "yyyy" }
+                ],
+                columngroups: [
+                    { text: "Major scientific discoveries in the 19th century", align: "center", name: "header" }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                    datatype: 'json',
+                    datafields: [
+                        { name: 'discovery', type: 'string' },
+                        { name: 'scientist', type: 'string' },
+                        { name: 'year', type: 'date' }
+                    ],
+                    id: 'id',
+                url: '../sampledata/discoveries.txt'
+                };
+        },
+        methods: {
+            change: function(event) {
+                let range = event.args;
+                let min = this.$refs.myRangeSelector.min;
+                let max = this.$refs.myRangeSelector.max;
+
+                min = new Date(min);
+                max = new Date(max);
+
+                if (range.from.getTime() == min.getTime() && range.to.getTime() == max.getTime()) {
+                    this.$refs.myGrid.clearfilters();
+                } else {
+                    this.applyFilter(range.from, range.to);
+                };
+            },
+            applyFilter: function (from, to) {
+                this.$refs.myGrid.clearfilters();
+                let filtertype = 'datefilter';
+                let filtergroup = new jqx.filter();
+                let filter_or_operator = 0;
+                let filtervalueFrom = from;
+                let filterconditionFrom = 'GREATER_THAN_OR_EQUAL';
+                let filterFrom = filtergroup.createfilter(filtertype, filtervalueFrom, filterconditionFrom);
+                filtergroup.addfilter(filter_or_operator, filterFrom);
+                let filtervalueTo = to;
+                let filterconditionTo = 'LESS_THAN_OR_EQUAL';
+                let filterTo = filtergroup.createfilter(filtertype, filtervalueTo, filterconditionTo);
+                filtergroup.addfilter(filter_or_operator, filterTo);
+                this.$refs.myGrid.addfilter('year', filtergroup);
+                this.$refs.myGrid.applyfilters();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/rangeselector/timescale/main.js b/rangeselector/timescale/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/rangeselector/timescale/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/rangeselector/timescale/package.json b/rangeselector/timescale/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/rangeselector/timescale/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/rating/defaultfunctionality/App.vue b/rating/defaultfunctionality/App.vue
new file mode 100644
index 00000000..8bb4f887
--- /dev/null
+++ b/rating/defaultfunctionality/App.vue
@@ -0,0 +1,30 @@
+<template>
+    <div style="font-size: 13px; font-family: Verdana;">
+        <JqxRating @change="change($event)"
+                   :width="350"
+                   :height="35"></JqxRating>
+        <div style="margin-top: 10px;">
+            <div style="float: left;">Rating: </div><div style="float: left;" ref="rate"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxRating from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrating.vue';
+
+    export default {
+        components: {
+            JqxRating
+        },     
+        methods: {
+            change: function(event) {
+                let rate = this.$refs.rate;
+
+                rate.innerHTML = '<span> ' + event.value + '</span>';
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/rating/defaultfunctionality/main.js b/rating/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/rating/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/rating/defaultfunctionality/package.json b/rating/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/rating/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/rating/twowaydatabinding/App.vue b/rating/twowaydatabinding/App.vue
new file mode 100644
index 00000000..56ef770e
--- /dev/null
+++ b/rating/twowaydatabinding/App.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <div>The value is: {{ value }}</div><br />
+
+        <JqxRating v-model="value" :width="350" :height="35" />
+    </div>
+</template>
+
+<script>
+    import JqxRating from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrating.vue';
+
+    export default {
+        components: {
+            JqxRating
+        },
+        data: function () {
+            return {
+                value: 3
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/rating/twowaydatabinding/main.js b/rating/twowaydatabinding/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/rating/twowaydatabinding/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/rating/twowaydatabinding/package.json b/rating/twowaydatabinding/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/rating/twowaydatabinding/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/repeatbutton/defaultfunctionality/App.vue b/repeatbutton/defaultfunctionality/App.vue
new file mode 100644
index 00000000..0d2425b5
--- /dev/null
+++ b/repeatbutton/defaultfunctionality/App.vue
@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <JqxRepeatButton style="margin-left: 25px"
+                         @click="repeatOnClick()"
+                         :width="200" :delay="10">
+            Click Me!
+        </JqxRepeatButton>
+
+        <JqxProgressBar ref="myProgressBar" style="margin-top: 10px"
+                        :width="250" :height="25" :max="30">
+        </JqxProgressBar>
+    </div>
+</template>
+
+<script>
+    import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
+    import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
+
+    export default {
+        components: {
+            JqxRepeatButton,
+            JqxProgressBar
+        },     
+        methods: {
+            repeatOnClick() {
+                let currentValue = this.$refs.myProgressBar.value;
+                currentValue += 1;
+                this.$refs.myProgressBar.setOptions({ animationDuration: 0, value: currentValue });
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/repeatbutton/defaultfunctionality/main.js b/repeatbutton/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/repeatbutton/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/repeatbutton/defaultfunctionality/package.json b/repeatbutton/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/repeatbutton/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/responsivepanel/defaultfunctionality/App.vue b/responsivepanel/defaultfunctionality/App.vue
new file mode 100644
index 00000000..d321111c
--- /dev/null
+++ b/responsivepanel/defaultfunctionality/App.vue
@@ -0,0 +1,188 @@
+<template>
+    <div>
+        <div ref="container" style="height: 300px; width:800px;">
+            <div style="box-sizing: border-box; margin-bottom: 2px; width: 100%; height: 50px; padding: 10px 0 0 10px;">
+                <div ref="toggleResponsivePanel" id="toggleResponsivePanel"></div>
+            </div>
+
+            <JqxResponsivePanel ref="myResponsivePanel"
+                                @open="responsivePanelEventsHandler($event)"
+                                @close="responsivePanelEventsHandler($event)"
+                                @expand="responsivePanelEventsHandler($event)"
+                                @collapse="responsivePanelEventsHandler($event)"
+                                :width="'30%'"
+                                :height="'100%'"
+                                :collapseBreakpoint="700"
+                                :autoClose="false"
+                                :toggleButton="'#toggleResponsivePanel'" :animationType="'none'">
+
+                <JqxTree :width="'100%'" :height="'100%'">
+                    <ul>
+                        <li><a href="#">Home</a></li>
+                        <li>
+                            About Us
+                            <ul>
+                                <li><a href="#">History</a></li>
+                                <li><a href="#">Our Vision</a></li>
+                                <li>
+                                    <a href="#">The Team</a>
+                                    <ul>
+                                        <li><a href="#">Brigita</a></li>
+                                        <li><a href="#">John</a></li>
+                                        <li><a href="#">Michael</a></li>
+                                        <li><a href="#">Peter</a></li>
+                                        <li><a href="#">Sarah</a></li>
+                                    </ul>
+                                </li>
+                                <li><a href="#">Clients</a></li>
+                                <li><a href="#">Testimonials</a></li>
+                                <li><a href="#">Press</a></li>
+                                <li><a href="#">FAQs</a></li>
+                            </ul>
+                        </li>
+                        <li>
+                            Services
+                            <ul>
+                                <li><a href="#">Product Development</a></li>
+                                <li><a href="#">Delivery</a></li>
+                                <li><a href="#">Shop Online</a></li>
+                                <li><a href="#">Support</a></li>
+                                <li><a href="#">Training &amp; Consulting</a></li>
+                            </ul>
+                        </li>
+                        <li>
+                            Products
+                            <ul>
+                                <li>
+                                    <a href="#">New</a>
+                                    <ul>
+                                        <li><a href="#">Corporate Use</a></li>
+                                        <li><a href="#">Private Use</a></li>
+                                    </ul>
+                                </li>
+                                <li>
+                                    <a href="#">Used</a>
+                                    <ul>
+                                        <li><a href="#">Corporate Use</a></li>
+                                        <li><a href="#">Private Use</a></li>
+                                    </ul>
+                                </li>
+                                <li><a href="#">Featured</a></li>
+                                <li><a href="#">Top Rated</a></li>
+                                <li><a href="#">Prices</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#">Gallery</a></li>
+                        <li><a href="#">Events</a></li>
+                        <li><a href="#">Careers</a></li>
+                        <li>
+                            <a href="#">Contact Us</a>
+                            <ul>
+                                <li><a href="#">Enquiry Form</a></li>
+                                <li><a href="#">Map &amp; Driving Directions</a></li>
+                                <li><a href="#">Your Feedback</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </JqxTree>
+            </JqxResponsivePanel>
+
+            <JqxPanel ref="myPanel" :width="'65%'" :height="'100%'">
+
+                <h4 style="text-align: center;">About Us</h4>
+                <p style="line-height: 1.5;">
+                    <span style="float: left; font-size: 3.26em; line-height: 0.5; margin-top: 0.2em;">S</span><strong>
+                        tark
+                        Industries
+                    </strong> is a multinational conglomerate with facilities in over
+                    thirty different countries on all seven continents. The President and CEO of Stark
+                    Industries is billionaire industrialist Anthony "Tony" Stark.
+                </p>
+                <p>
+                    The company&#39;s origins date back to the mid-19 century when Isaac Stark, Sr. began
+                    developing new electrical and engineering technology that helped to redefine innovative
+                    security measures for the industrial age.
+                </p>
+                <p>
+                    With growing prosperity, Stark Industries (then known as Stark Enterprises) was
+                    quickly propelled into the modern era as a major global industrial superpower, due
+                    in no small measure to Isaac Stark, Sr.&#39;s direct descendant Howard Stark. Under
+                    Howard Stark&#39;s leadership, Stark Industries became the world leader in the development
+                    of munitions with its corporate office located on Long Island, New York. Stark Industries
+                    quickly branched out into other scientific fields including aeronautics, robotics,
+                    micro-technology and fringe science. With increasing expansion, the company soon
+                    became known as Stark Industries. When Howard Stark passed away, his sole heir Tony
+                    Stark inherited all of his father&#39;s business assets and took full control of Stark
+                    Industries.
+                </p>
+            </JqxPanel>
+        </div>
+
+        <div style="padding-top: 20px; clear: both"></div>
+
+        <JqxButton @click="resizeSmallBtnOnClick()" :width="180" :height="25">Resize Panel to 500px</JqxButton>
+
+        <JqxButton @click="resizeBigBtnOnClick()" :width="180" :height="25">Resize Panel to 800px</JqxButton>
+    </div>
+</template>
+
+<script>
+    import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
+    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
+    import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxPanel,
+            JqxTree,
+            JqxResponsivePanel,
+            JqxButton
+        },
+        beforeCreate: function () {
+            this.flag = true;
+        },
+        methods: {
+            responsivePanelEventsHandler: function (event) {
+                if (event.args.element)
+                    return;
+
+                const collapsed = this.$refs.myResponsivePanel.isCollapsed();
+                const opened = this.$refs.myResponsivePanel.isOpened();
+
+                if (collapsed && !opened) {
+                    this.$refs.myPanel.width = '100%';
+                }
+                else if ((collapsed && opened) || !collapsed) {
+                    this.$refs.myPanel.width = '65%';
+                }
+            },
+            resizeSmallBtnOnClick: function () {
+                this.$refs.container.style.width = '500px';
+                this.$refs.myPanel.width = '100%';
+                this.$refs.myResponsivePanel.refresh();
+            },
+            resizeBigBtnOnClick: function () {
+                this.$refs.container.style.width = '800px';
+                this.$refs.myPanel.width = '65%';
+                this.$refs.myResponsivePanel.refresh();
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-responsive-panel, .jqx-panel {
+        float: left;
+    }
+
+    .jqx-tree {
+        border: none !important;
+    }
+
+    .jqx-button {
+        display: inline-block;
+        margin-right: 5px;
+        line-height: 25px;
+    }
+</style>
\ No newline at end of file
diff --git a/responsivepanel/defaultfunctionality/main.js b/responsivepanel/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/responsivepanel/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/responsivepanel/defaultfunctionality/package.json b/responsivepanel/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/responsivepanel/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/responsivepanel/fluidsize/App.vue b/responsivepanel/fluidsize/App.vue
new file mode 100644
index 00000000..1c48713b
--- /dev/null
+++ b/responsivepanel/fluidsize/App.vue
@@ -0,0 +1,152 @@
+<template>
+    <div style="height:100%; width:100%;">
+
+        <JqxResponsivePanel ref="myResponsivePanel"
+                            @collapse="responsivePanelOnCollapse($event)"
+                            :width="'30%'"
+                            :height="'80%'"
+                            :collapseBreakpoint="700"
+                            :autoClose="false"
+                            :animationType="'none'">
+
+            <JqxTree :width="'100%'" :height="'100%'">
+                <ul>
+                    <li><a href="#">Home</a></li>
+                    <li>
+                        About Us
+                        <ul>
+                            <li><a href="#">History</a></li>
+                            <li><a href="#">Our Vision</a></li>
+                            <li>
+                                <a href="#">The Team</a>
+                                <ul>
+                                    <li><a href="#">Brigita</a></li>
+                                    <li><a href="#">John</a></li>
+                                    <li><a href="#">Michael</a></li>
+                                    <li><a href="#">Peter</a></li>
+                                    <li><a href="#">Sarah</a></li>
+                                </ul>
+                            </li>
+                            <li><a href="#">Clients</a></li>
+                            <li><a href="#">Testimonials</a></li>
+                            <li><a href="#">Press</a></li>
+                            <li><a href="#">FAQs</a></li>
+                        </ul>
+                    </li>
+                    <li>
+                        Services
+                        <ul>
+                            <li><a href="#">Product Development</a></li>
+                            <li><a href="#">Delivery</a></li>
+                            <li><a href="#">Shop Online</a></li>
+                            <li><a href="#">Support</a></li>
+                            <li><a href="#">Training &amp; Consulting</a></li>
+                        </ul>
+                    </li>
+                    <li>
+                        Products
+                        <ul>
+                            <li>
+                                <a href="#">New</a>
+                                <ul>
+                                    <li><a href="#">Corporate Use</a></li>
+                                    <li><a href="#">Private Use</a></li>
+                                </ul>
+                            </li>
+                            <li>
+                                <a href="#">Used</a>
+                                <ul>
+                                    <li><a href="#">Corporate Use</a></li>
+                                    <li><a href="#">Private Use</a></li>
+                                </ul>
+                            </li>
+                            <li><a href="#">Featured</a></li>
+                            <li><a href="#">Top Rated</a></li>
+                            <li><a href="#">Prices</a></li>
+                        </ul>
+                    </li>
+                    <li><a href="#">Gallery</a></li>
+                    <li><a href="#">Events</a></li>
+                    <li><a href="#">Careers</a></li>
+                    <li>
+                        <a href="#">Contact Us</a>
+                        <ul>
+                            <li><a href="#">Enquiry Form</a></li>
+                            <li><a href="#">Map &amp; Driving Directions</a></li>
+                            <li><a href="#">Your Feedback</a></li>
+                        </ul>
+                    </li>
+                </ul>
+            </JqxTree>
+        </JqxResponsivePanel>
+
+        <JqxPanel ref="myPanel" :width="'65%'" :height="'80%'">
+
+            <h4 style="text-align: center;">About Us</h4>
+            <p style="line-height: 1.5;">
+                <span style="float: left; font-size: 3.26em; line-height: 0.5; margin-top: 0.2em;">S</span><strong>
+                    tark
+                    Industries
+                </strong> is a multinational conglomerate with facilities in over
+                thirty different countries on all seven continents. The President and CEO of Stark
+                Industries is billionaire industrialist Anthony "Tony" Stark.
+            </p>
+            <p>
+                The company&#39;s origins date back to the mid-19 century when Isaac Stark, Sr. began
+                developing new electrical and engineering technology that helped to redefine innovative
+                security measures for the industrial age.
+            </p>
+            <p>
+                With growing prosperity, Stark Industries (then known as Stark Enterprises) was
+                quickly propelled into the modern era as a major global industrial superpower, due
+                in no small measure to Isaac Stark, Sr.&#39;s direct descendant Howard Stark. Under
+                Howard Stark&#39;s leadership, Stark Industries became the world leader in the development
+                of munitions with its corporate office located on Long Island, New York. Stark Industries
+                quickly branched out into other scientific fields including aeronautics, robotics,
+                micro-technology and fringe science. With increasing expansion, the company soon
+                became known as Stark Industries. When Howard Stark passed away, his sole heir Tony
+                Stark inherited all of his father&#39;s business assets and took full control of Stark
+                Industries.
+            </p>
+        </JqxPanel>
+    </div>
+</template>
+
+<script>
+    import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
+    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
+    import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
+
+    export default {
+        components: {
+            JqxPanel,
+            JqxTree,
+            JqxResponsivePanel
+        },
+        methods: {
+            responsivePanelOnCollapse: function (event) {
+                if (event.args.element) {
+                    return;
+                }
+                this.$refs.myResponsivePanel.$el.style.display = 'block';
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-responsive-panel, .jqx-panel {
+        float: left;
+    }
+
+    .jqx-tree {
+        border: none !important;
+    }
+
+    body, html {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/responsivepanel/fluidsize/main.js b/responsivepanel/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/responsivepanel/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/responsivepanel/fluidsize/package.json b/responsivepanel/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/responsivepanel/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/responsivepanel/integrationwithjqxmenu/App.vue b/responsivepanel/integrationwithjqxmenu/App.vue
new file mode 100644
index 00000000..e7979e75
--- /dev/null
+++ b/responsivepanel/integrationwithjqxmenu/App.vue
@@ -0,0 +1,183 @@
+<template>
+    <div>
+        <div ref="container" style="height: 300px; width: 800px;">
+            <div style="box-sizing: border-box; margin-bottom: 2px; width: 100%; height: 50px; padding: 10px 0 0 10px;">
+                <div ref="toggleResponsivePanel" id="toggleResponsivePanel"></div>
+            </div>
+            
+            <JqxResponsivePanel ref="myResponsivePanel"
+                                @open="responsivePanelEventsHandler($event)"
+                                @close="responsivePanelEventsHandler($event)"
+                                @expand="responsivePanelEventsHandler($event)"
+                                @collapse="responsivePanelEventsHandler($event)"
+                                :width="'30%'" :height="'100%'"
+                                :collapseBreakpoint="700"
+                                :autoClose="false"
+                                :toggleButton="'#toggleResponsivePanel'"
+                                :animationType="'none'">
+                <JqxMenu :width="'100%'" :height="'100%'" :mode="'vertical'">
+                    <ul>
+                        <li><a href="#">Home</a></li>
+                        <li>
+                            About Us
+                            <ul>
+                                <li><a href="#">History</a></li>
+                                <li><a href="#">Our Vision</a></li>
+                                <li>
+                                    <a href="#">The Team</a>
+                                    <ul>
+                                        <li><a href="#">Brigita</a></li>
+                                        <li><a href="#">John</a></li>
+                                        <li><a href="#">Michael</a></li>
+                                        <li><a href="#">Peter</a></li>
+                                        <li><a href="#">Sarah</a></li>
+                                    </ul>
+                                </li>
+                                <li><a href="#">Clients</a></li>
+                                <li><a href="#">Testimonials</a></li>
+                                <li><a href="#">Press</a></li>
+                                <li><a href="#">FAQs</a></li>
+                            </ul>
+                        </li>
+                        <li>
+                            Services
+                            <ul>
+                                <li><a href="#">Product Development</a></li>
+                                <li><a href="#">Delivery</a></li>
+                                <li><a href="#">Shop Online</a></li>
+                                <li><a href="#">Support</a></li>
+                                <li><a href="#">Training &amp; Consulting</a></li>
+                            </ul>
+                        </li>
+                        <li>
+                            Products
+                            <ul>
+                                <li>
+                                    <a href="#">New</a>
+                                    <ul>
+                                        <li><a href="#">Corporate Use</a></li>
+                                        <li><a href="#">Private Use</a></li>
+                                    </ul>
+                                </li>
+                                <li>
+                                    <a href="#">Used</a>
+                                    <ul>
+                                        <li><a href="#">Corporate Use</a></li>
+                                        <li><a href="#">Private Use</a></li>
+                                    </ul>
+                                </li>
+                                <li><a href="#">Featured</a></li>
+                                <li><a href="#">Top Rated</a></li>
+                                <li><a href="#">Prices</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#">Gallery</a></li>
+                        <li><a href="#">Events</a></li>
+                        <li><a href="#">Careers</a></li>
+                        <li>
+                            <a href="#">Contact Us</a>
+                            <ul>
+                                <li><a href="#">Enquiry Form</a></li>
+                                <li><a href="#">Map &amp; Driving Directions</a></li>
+                                <li><a href="#">Your Feedback</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </JqxMenu>
+            </JqxResponsivePanel>
+
+            <JqxPanel ref="myPanel" :width="'65%'" :height="'100%'">
+                <h4 style="text-align: center;">About Us</h4>
+                <p style="line-height: 1.5;">
+                    <span style="float: left; font-size: 3.26em; line-height: 0.5; margin-top: 0.2em;">S</span><strong>
+                        tark
+                        Industries
+                    </strong> is a multinational conglomerate with facilities in over
+                    thirty different countries on all seven continents. The President and CEO of Stark
+                    Industries is billionaire industrialist Anthony "Tony" Stark.
+                </p>
+                <p>
+                    The company&#39;s origins date back to the mid-19 century when Isaac Stark, Sr. began
+                    developing new electrical and engineering technology that helped to redefine innovative
+                    security measures for the industrial age.
+                </p>
+                <p>
+                    With growing prosperity, Stark Industries (then known as Stark Enterprises) was
+                    quickly propelled into the modern era as a major global industrial superpower, due
+                    in no small measure to Isaac Stark, Sr.&#39;s direct descendant Howard Stark. Under
+                    Howard Stark&#39;s leadership, Stark Industries became the world leader in the development
+                    of munitions with its corporate office located on Long Island, New York. Stark Industries
+                    quickly branched out into other scientific fields including aeronautics, robotics,
+                    micro-technology and fringe science. With increasing expansion, the company soon
+                    became known as Stark Industries. When Howard Stark passed away, his sole heir Tony
+                    Stark inherited all of his father&#39;s business assets and took full control of Stark
+                    Industries.
+                </p>
+            </JqxPanel>
+        </div>
+
+        <div style="padding-top: 20px; clear: both"></div>
+
+        <JqxButton @click="resizeSmallBtnOnClick()" :width="180" :height="25">Resize Panel to 500px</JqxButton>
+
+        <JqxButton @click="resizeBigBtnOnClick()" :width="180" :height="25">Resize Panel to 800px</JqxButton>
+    </div>
+</template>
+
+<script>
+    import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
+    import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
+    import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxPanel,
+            JqxMenu,
+            JqxResponsivePanel,
+            JqxButton
+        },
+        methods: {
+            responsivePanelEventsHandler: function (event) { 
+                if (event.args.element)
+                    return;
+
+                const collapsed = this.$refs.myResponsivePanel.isCollapsed();
+                const opened = this.$refs.myResponsivePanel.isOpened();
+
+                if (collapsed && !opened) {
+                    this.$refs.myPanel.width = '100%';
+                }
+                else if ((collapsed && opened) || !collapsed) {
+                    this.$refs.myPanel.width = '65%';
+                }
+            },
+            resizeSmallBtnOnClick: function () {
+                this.$refs.container.style.width = '500px';
+                this.$refs.myPanel.width = '100%';
+                this.$refs.myResponsivePanel.refresh();
+            },
+            resizeBigBtnOnClick: function () {
+                this.$refs.container.style.width = '800px';
+                this.$refs.myPanel.width = '65%';
+                this.$refs.myResponsivePanel.refresh();
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-responsive-panel, .jqx-panel {
+        float: left;
+    }
+
+    .jqx-menu {
+        border: none !important;
+    }
+
+    .jqx-button {
+        display: inline-block;
+        margin-right: 5px;
+        line-height: 25px;
+    }
+</style>
\ No newline at end of file
diff --git a/responsivepanel/integrationwithjqxmenu/main.js b/responsivepanel/integrationwithjqxmenu/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/responsivepanel/integrationwithjqxmenu/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/responsivepanel/integrationwithjqxmenu/package.json b/responsivepanel/integrationwithjqxmenu/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/responsivepanel/integrationwithjqxmenu/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/responsivepanel/righttoleftlayout/App.vue b/responsivepanel/righttoleftlayout/App.vue
new file mode 100644
index 00000000..caa9bbdc
--- /dev/null
+++ b/responsivepanel/righttoleftlayout/App.vue
@@ -0,0 +1,52 @@
+<template>
+    <div style="float: right; width: 600px;">
+        <div id="header">
+            <div id="toggleResponsivePanel"></div>
+        </div>
+        <JqxResponsivePanel :width="250" :height="'auto'" 
+                            :collapseBreakpoint="800" :autoClose="false"
+                            :toggleButton="'#toggleResponsivePanel'" 
+                            :animationDirection="'right'">
+            <img src="../../../images/leo.jpg" />
+            <br />
+            <strong>Leo</strong> the Lion is one of the earliest recognized constellations.
+            The Mesopotamians are known to have documented the 'lion' constellation. The Persians
+            called it Ser or Shir; the Turks, Artan; the Syrians, Aryo; the Jewish, Arye; the
+            Indians, Simha. These are all translated as 'lion.'
+        </JqxResponsivePanel>
+
+    </div>
+</template>
+
+<script>
+    import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
+
+    export default {
+        components: {
+            JqxResponsivePanel
+        }    
+    }
+</script>
+
+<style>
+    #header {
+        box-sizing: border-box;
+        margin-bottom: 2px;
+        width: 100%;
+        height: 50px;
+        padding: 10px 0 0 10px;
+    }
+
+    .jqx-responsive-panel, #toggleResponsivePanel {
+        float: right;
+    }
+
+    #toggleResponsivePanel {
+        margin-right: 10px;
+    }
+
+    .jqx-responsive-panel {
+        padding: 5px;
+        direction: rtl !important;
+    }
+</style>
\ No newline at end of file
diff --git a/responsivepanel/righttoleftlayout/main.js b/responsivepanel/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/responsivepanel/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/responsivepanel/righttoleftlayout/package.json b/responsivepanel/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/responsivepanel/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/ribbon/collapsible/App.vue b/ribbon/collapsible/App.vue
new file mode 100644
index 00000000..c2d266bf
--- /dev/null
+++ b/ribbon/collapsible/App.vue
@@ -0,0 +1,198 @@
+<template>
+    <div>
+        <div class="header">
+            <p>Welcome to Our Online Shop!</p>
+            <p class="cart">0 Products</p>
+        </div>
+
+        <JqxRibbon ref="myRibbon"
+                   :width="700" :height="31" :position="'top'" :mode="'popup'"
+                   :selectedIndex="0" :selectionMode="'click'" :animationType="'fade'">
+            <ul>
+                <li style="margin-left:20px;">Business</li>
+                <li>Games</li>
+                <li>Internet and Movies</li>
+            </ul>
+            <div class="contents">
+                <div class="content"></div>
+                <div class="content"></div>
+                <div class="content"></div>
+            </div>
+        </JqxRibbon>
+
+        <JqxCheckBox ref="myCheckBox" @change="change($event)" :width="130" :checked="true">
+            Menu Mode
+        </JqxCheckBox>
+    </div>
+</template>
+
+<script>
+    import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+
+
+    export default {
+        components: {
+            JqxRibbon,
+            JqxCheckBox
+
+        },
+        beforeCreate: function () {
+            const data = [
+                {
+                    laptops:
+                    [
+                        { img: '../../../images/l-16.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3317U', price: 1899, display: 13.3, hdd: '128GB SSD', model: 'ASUS TAICHI31-CX009H' },
+                        { img: '../../../images/l-17.jpg', ram: '4GB DD3', cpu: 'Intel Core i7-3517U', price: 1799, display: 13.3, hdd: '628GB', model: 'Asus TX300CA-C4024H' },
+                        { img: '../../../images/l-26.gif', ram: '4GB DD3', cpu: 'Intel Core i7-3667U', price: 2699, display: 14.0, hdd: '256GB SSD', model: 'Lenovo Thinkpad X1 Carbon' },
+                        { img: '../../../images/l-29.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3317U ', price: 1299, display: 11.6, hdd: '128GB SSD', model: 'Sony Vaio Duo' },
+                        { img: '../../../images/l-30.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3230M', price: 999, display: 15.5, hdd: '256GB SSD', model: 'Sony VAIO' },
+                        { img: '../../../images/l-13.jpg', ram: '4GB DD3', cpu: 'Intel Core i7-3720QM', price: 2999, display: 15.4, hdd: '512GB SSD', model: 'Apple MacBook Pro' }
+                    ]
+                },
+                {
+                    laptops:
+                    [
+                        { img: '../../../images/l-14.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3667U', price: 1299, display: 13.3, hdd: '256GB SSD', model: 'Apple MacBook Air' },
+                        { img: '../../../images/l-15.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3632QM', price: 2199, display: 15.4, hdd: '256GB SSD', model: 'Asus ZenBook UX51VZ' },
+                        { img: '../../../images/l-19.jpg', ram: '8GB DD3', cpu: 'Intel Core i5-3210M', price: 1499, display: 15.6, hdd: '750GB', model: 'Samsung Series 7 Chronos' },
+                        { img: '../../../images/l-20.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3720QM', price: 1499, display: 17.3, hdd: '256GB SSD', model: 'HP EliteBook 8770w' },
+                        { img: '../../../images/l-21.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3517U', price: 1499, display: 14.0, hdd: '512GB', model: 'Dell XPS 14' },
+                        { img: '../../../images/l-23.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3537U', price: 1699, display: 15.6, hdd: '1TB', model: 'Acer Aspire R7-571G' },
+                    ]
+                },
+                {
+                    laptops:
+                    [
+                        { img: '../../../images/l-27.jpg', ram: '16GB DD3', cpu: 'Intel Core i5-3317U ', price: 1699, display: 12.5, hdd: '128GB SSD', model: 'Dell XPS Duo 12' },
+                        { img: '../../../images/l-24.jpg', ram: '16GB DD3', cpu: 'Intel Core i7-4500U', price: 1599, display: 15.6, hdd: '256GB SSD', model: 'Acer Aspire V5-573G' },
+                        { img: '../../../images/l-28.png', ram: '16GB DD3', cpu: 'Intel Core i7-3537U', price: 1799, display: 12.5, hdd: '256GB SSD', model: 'Lenovo ThinkPad Twist S230u' },
+                        { img: '../../../images/l-25.jpg', ram: '32GB DD3', cpu: 'Intel Core i7-4700MQ', price: 2199, display: 17.3, hdd: '1TB', model: 'Toshiba Qosmio X70-A-114' },
+                        { img: '../../../images/l-18.gif', ram: '16GB DD3', cpu: 'Intel Core i7-3820QM', price: 2499, display: 15.6, hdd: '1TB', model: 'Lenovo ThinkPad T530' },
+                        { img: '../../../images/l-22.jpg', ram: '32GB DD3', cpu: 'Intel Core i7-4800MQ', price: 3499, display: 17.3, hdd: '750GB', model: 'Dell Alienware 17' }
+                    ]
+                }
+            ];
+
+            const source =
+                {
+                    localData: data,
+                    dataType: 'array'
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(source);
+        },
+        mounted: function () {
+            this.buildRibbonHTML();
+            this.buildBuyButtons();
+        },
+        methods: {
+            generateContent: function () {
+                const records = this.records();
+                const ribbonHTML = [];
+                for (let j = 0; j < records.length; j++) {
+                    const rowData = records[j];
+                    const laptops = rowData.laptops;
+
+                    let container = '<div style="padding-left: 15px;">';
+                    for (let i = 0; i < laptops.length; i++) {
+                        const laptop = laptops[i];
+                        let item = '<div class="item-container">';
+                        const image = '<img width=160 height=120 src="' + laptop.img + '" class="img" />';
+                        let info = '<div style="margin: 5px; margin-left: 20px; margin-bottom: 3px;">';
+                        info += '<div><i>' + laptop.model + '</i></div>';
+                        info += '<div>Price: $' + laptop.price + '</div>';
+                        info += '<div>RAM: ' + laptop.ram + '</div>';
+                        info += '<div>HDD: ' + laptop.hdd + '</div>';
+                        info += '<div>CPU: ' + laptop.cpu + '</div>';
+                        info += '<div>Display: ' + laptop.display + '</div>';
+                        info += '</div>';
+                        let buy = '<div class="buyButton" id="buyButton' + j + i + '">Buy</div>';
+
+                        item += image;
+                        item += info;
+                        item += buy;
+                        item += '</div>';
+                        container += item;
+
+                    }
+
+                    container += '</div>';
+                    ribbonHTML.push(container);
+                };
+
+                return ribbonHTML;
+            },
+            records: function () {
+                this.dataAdapter.dataBind();
+                return this.dataAdapter.records;
+            },
+            buildRibbonHTML: function () {
+                const content = this.generateContent();
+                const containers = document.querySelector('.jqx-ribbon-content').children;
+
+                for (let i = 0; i < containers.length; i++) {
+                    containers[i].innerHTML = content[i];
+                }
+            },
+            buildBuyButtons: function () {
+                let itemsInCart = 0;
+                const allBuyButtons = document.querySelectorAll('.buyButton');
+
+                for (let i = 0; i < allBuyButtons.length; i++) {
+                    const currentButton = allBuyButtons[i];
+                    const currentID = currentButton.id;
+
+                    const currentBuyButton = jqwidgets.createInstance('#' + currentID, 'jqxButton', { width: 80 });
+                    currentBuyButton.addEventHandler('click', function () {
+                        itemsInCart += 1;
+                        document.querySelectorAll('.cart')[0].innerHTML = '' + itemsInCart + ' Products';
+                    });
+                }
+            },
+            change: function (event) {
+                const checked = event.args.checked;
+                this.$refs.myRibbon.mode = checked ? 'popup' : 'default';
+            }
+        }
+    }
+</script>
+
+<style>
+    .header {
+        width: 700px;
+        height: 50px;
+        margin-bottom: 10px;
+        background: #4272b8;
+        color: white;
+    }
+
+        .header p:first-child {
+            float: left;
+            margin-left: 20px;
+        }
+
+        .header p:last-child {
+            float: right;
+            margin-right: 60px;
+        }
+
+    .jqx-checkbox {
+        float: right;
+    }
+
+    .jqx-button, .img {
+        position: relative;
+        top: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .item-container {
+        float: left;
+        width: 220px;
+        overflow: hidden;
+        white-space: nowrap;
+        height: 275px;
+    }
+</style>
\ No newline at end of file
diff --git a/ribbon/collapsible/main.js b/ribbon/collapsible/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/ribbon/collapsible/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/ribbon/collapsible/package.json b/ribbon/collapsible/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/ribbon/collapsible/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/ribbon/defaultfunctionality/App.vue b/ribbon/defaultfunctionality/App.vue
new file mode 100644
index 00000000..f27f818a
--- /dev/null
+++ b/ribbon/defaultfunctionality/App.vue
@@ -0,0 +1,861 @@
+<template>
+    <div>
+        <JqxRibbon ref="myRibbon" class="ribbon"
+                   :width="getWidth" :height="131" :animationType="'none'"
+                   :selectionMode="'click'" :position="'top'" :mode="'default'"
+                   :theme="'demoTheme'" :selectedIndex="1">
+            <ul>
+                <li id="fileItem">
+                    <JqxDropDownButton class='fileItemButton' ref="fileItemButton"
+                                       :width="50" :height="26" :arrowSize="0"
+                                       :dropDownWidth="120" :theme="'demoTheme'">
+                        <div style="height:110px;">
+                            <ul style="list-style-type: none; margin:0px; padding: 3px;">
+                                <li>
+                                    <JqxButton class='button' :theme="'demoTheme'">
+                                        <div class="icon SaveImage"></div> Save
+                                    </JqxButton>
+                                </li>
+                                <li>
+                                    <JqxButton class='button' :theme="'demoTheme'">
+                                        <div class="icon SaveSelectionImage"></div> Save As
+                                    </JqxButton>
+                                </li>
+                                <li>
+                                    <JqxButton class='button' :theme="'demoTheme'">
+                                        <div class="icon folder"></div> Open
+                                    </JqxButton>
+                                </li>
+                                <li>
+                                    <JqxButton class='button' :theme="'demoTheme'">
+                                        <div class="icon close"></div> Close
+                                    </JqxButton>
+                                </li>
+                            </ul>
+                        </div>
+                    </JqxDropDownButton>
+                </li>
+                <li>Home</li>
+                <li>Help</li>
+            </ul>
+            <div>
+                <div style="overflow: hidden;">
+                </div>
+                <div style="overflow: hidden;">
+                    <table class="buttonHolderTable" id="clipBoardTable">
+                        <tr>
+                            <td rowspan="3" style="text-align: center; height: 70px; font-size: 10px">
+                                <div id="paste" style="width: 50px;">
+                                    <JqxButton ref="pasteButton" class="pasteButton" @click='onPasteButtonClick($event)' @mousedown='onMouseDownPasteButton($event)'
+                                               :width="35" :height="56" :theme="'demoTheme'">
+                                        <span class="icon page_paste" style="zoom: 1.5"></span><span class="pasteText">Paste</span>
+                                    </JqxButton>
+                                    <JqxDropDownList @select='onPasteDropDownSelect($event)' class="pasteDropDown"
+                                                     :width="22" :height="10" :autoDropDownHeight="true" :animationType="'none'"
+                                                     :theme="'demoTheme'" :selectedIndex="0" :source="pasteData" :dropDownWidth="110"
+                                                     :renderer="pasteRenderer" :selectionRenderer="pasteRelectionRenderer">
+                                    </JqxDropDownList>
+                                </div>
+                            </td>
+                            <td class="firstrow" rowspan="1">
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Cut (Ctrl + X)'">
+                                    <JqxButton class='cutButton' ref="cutButton" :theme="'demoTheme'">
+                                        <div class="icon cut_red"></div>
+                                        <span class="cutText">Cut</span>
+                                    </JqxButton>
+                                </JqxTooltip>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="secondrow">
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Copy (Ctrl + C)'">
+                                    <JqxButton class='copyButton' ref="copyButton" :theme="'demoTheme'">
+                                        <div class="icon page_copy"></div>
+                                        <span class="copyText">Copy</span>
+                                    </JqxButton>
+                                </JqxTooltip>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="thirdrow">
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Format Painter'">
+                                    <JqxButton class='formatPainter' ref="formatPainter" :theme="'demoTheme'">
+                                        <div class="icon FormatPainterImage"></div>
+                                        <span class="formatPainter">Format Painter</span>
+                                    </JqxButton>
+                                </JqxTooltip>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2" style="font-size: 9px; text-align: center; top: -3px; position: relative;">
+                                Clipboard
+                            </td>
+                        </tr>
+                    </table>
+                    <div class="sectionSeparator">
+                    </div>
+                    <table class="buttonHolderTable" style="float: left;">
+                        <tr>
+                            <td colspan="4">
+                                <JqxDropDownList :width="120" :height="21" :autoDropDownHeight="true"
+                                                 :theme="'demoTheme'" :selectedIndex="1" :source="fontListSource">
+                                </JqxDropDownList>
+                            </td>
+                            <td>
+                                <JqxDropDownList style="margin-left: 7px;"
+                                                 :width="70" :height="21" :autoDropDownHeight="true" :renderer="fontSizeListRenderer"
+                                                 :theme="'demoTheme'" :selectedIndex="2" :source="fontSizeListSource">
+                                </JqxDropDownList>
+                            </td>
+                            <td>
+                                <JqxButton :theme="'demoTheme'"><div class="icon fontsizeincrease16"></div></JqxButton>
+                            </td>
+                            <td>
+                                <JqxButton :theme="'demoTheme'"><div class="icon fontsizedecrease16"></div></JqxButton>
+                            </td>
+                            <td>
+                                <JqxButton :theme="'demoTheme'"><div class="icon ClearFormattingImage"></div></JqxButton>
+                            </td>
+                            <td>
+                                <JqxDropDownList :width="50" :selectionRenderer="changeCaseListSelectionRenderer" :autoDropDownHeight="true"
+                                                 :theme="'demoTheme'" :selectedIndex="0" :source="changeCaseListSource" :dropDownWidth="150">
+                                </JqxDropDownList>
+                            </td>
+                        </tr>
+                        <tr class="secondrow">
+                            <td colspan="8">
+                                <JqxDropDownButton ref="fontColorButton"
+                                                   :width="123" :height="21"
+                                                   :dropDownWidth="180" :theme="'demoTheme'">
+                                    <div style="padding: 3px;">
+                                        <JqxColorPicker @colorchange='onFontColorPicker($event)'
+                                                        :width="180" :height="180"
+                                                        :color="'FF0000'" :colorMode="'hue'">
+                                        </JqxColorPicker>
+                                    </div>
+                                </JqxDropDownButton>
+                                <div class="separator"></div>
+                                <JqxDropDownButton ref="highlightColorButton"
+                                                   :width="130" :height="21"
+                                                   :dropDownWidth="180" :theme="'demoTheme'">
+                                    <div style="padding: 3px;">
+                                        <JqxColorPicker @colorchange='onHighlightColorPicker($event)'
+                                                        :width="180" :height="180"
+                                                        :color="'FF0000'" :colorMode="'hue'">
+                                        </JqxColorPicker>
+                                    </div>
+                                </JqxDropDownButton>
+                            </td>
+                        </tr>
+                        <tr class="thirdrow">
+                            <td colspan="8" style="padding: 0;">
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Superscript'" :height="20">
+                                    <JqxToggleButton ref="superScript" @click='onSuperScriptClick()' :theme="'demoTheme'">
+                                        <div class="icon text_superscript"></div>
+                                    </JqxToggleButton>
+                                </JqxTooltip>
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Subscript'" :height="20">
+                                    <JqxToggleButton ref="subScript" @click='onSubScriptClick()' :theme="'demoTheme'">
+                                        <div class="icon text_subscript"></div>
+                                    </JqxToggleButton>
+                                </JqxTooltip>
+                                <div class="separator" style="top: 3px;"></div>
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Bold (Ctrl + B)'" :height="20">
+                                    <JqxToggleButton :theme="'demoTheme'">
+                                        <div class="icon text_bold"></div>
+                                    </JqxToggleButton>
+                                </JqxTooltip>
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Italic (Ctrl + I)'" :height="20">
+                                    <JqxToggleButton :theme="'demoTheme'">
+                                        <div class="icon text_italic"></div>
+                                    </JqxToggleButton>
+                                </JqxTooltip>
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Underline (Ctrl + U)'" :height="20">
+                                    <JqxToggleButton :theme="'demoTheme'">
+                                        <div class="icon text_underline"></div>
+                                    </JqxToggleButton>
+                                </JqxTooltip>
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Strikethrough'" :height="20">
+                                    <JqxToggleButton :theme="'demoTheme'">
+                                        <div class="icon text_strikethrough"></div>
+                                    </JqxToggleButton>
+                                </JqxTooltip>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="9" style="height: 10px; font-size: 9px; text-align: center;">
+                                Font
+                            </td>
+                        </tr>
+                    </table>
+                    <div class="sectionSeparator">
+                    </div>
+                    <table class="buttonHolderTable" style="float: left;">
+                        <tr class="firstrow">
+                            <td colspan="8">
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Bulleted List'">
+                                    <JqxButton :theme="'demoTheme'">
+                                        <div class="icon text_list_bullets"></div>
+                                    </JqxButton>
+                                </JqxTooltip>
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Numbered List'">
+                                    <JqxButton :theme="'demoTheme'">
+                                        <div class="icon text_list_numbers"></div>
+                                    </JqxButton>
+                                </JqxTooltip>
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Decrease Indent'">
+                                    <JqxButton :theme="'demoTheme'">
+                                        <div class="icon text_indent"></div>
+                                    </JqxButton>
+                                </JqxTooltip>
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Increase Indent'">
+                                    <JqxButton :theme="'demoTheme'">
+                                        <div class="icon text_indent_remove"></div>
+                                    </JqxButton>
+                                </JqxTooltip>
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Sort Direction'">
+                                    <JqxButton :theme="'demoTheme'">
+                                        <div class="icon SortHS"></div>
+                                    </JqxButton>
+                                </JqxTooltip>
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Fill Style'" style="vertical-align: middle;">
+                                    <JqxDropDownButton ref="bucketColorButton"
+                                                       :width="42" :height="20"
+                                                       :dropDownWidth="180" :theme="'demoTheme'">
+                                        <div style="padding: 3px;">
+                                            <JqxColorPicker @colorchange='onBucketColorPicker($event)'
+                                                            :width="180" :height="180"
+                                                            :color="'000000'" :colorMode="'hue'">
+                                            </JqxColorPicker>
+                                        </div>
+                                    </JqxDropDownButton>
+                                </JqxTooltip>
+                            </td>
+                        </tr>
+                        <tr class="secondrow">
+                            <td colspan="8">
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Align Text Left (Ctrl + L)'">
+                                    <JqxButton :theme="'demoTheme'">
+                                        <div class="icon text_align_left"></div>
+                                    </JqxButton>
+                                </JqxTooltip>
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Center (Ctrl + E)'">
+                                    <JqxButton :theme="'demoTheme'">
+                                        <div class="icon text_align_center"></div>
+                                    </JqxButton>
+                                </JqxTooltip>
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Align Text Right (Ctrl + R)'">
+                                    <JqxButton :theme="'demoTheme'">
+                                        <div class="icon text_align_right"></div>
+                                    </JqxButton>
+                                </JqxTooltip>
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Justify (Ctrl + J)'">
+                                    <JqxButton :theme="'demoTheme'">
+                                        <div class="icon text_align_justify"></div>
+                                    </JqxButton>
+                                </JqxTooltip>
+                                <div class="separator" style="top:5px; height: 15px;"></div>
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Line and Paragraph Spacing'">
+                                    <JqxButton :theme="'demoTheme'">
+                                        <div class="icon text_linespacing"></div>
+                                    </JqxButton>
+                                </JqxTooltip>
+                                <JqxTooltip :position="'mouse'" :theme="'demoTheme'" :content="'Show/Hide special characters'">
+                                    <JqxButton :theme="'demoTheme'">
+                                        <div class="icon ShowParagraphMarksImage"></div>
+                                    </JqxButton>
+                                </JqxTooltip>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td style="height: 35px; text-align: center; vertical-align: bottom; font-size: 9px;">
+                                Alignment
+                            </td>
+                        </tr>
+                    </table>
+                    <div class="sectionSeparator">
+                    </div>
+                </div>
+                <div style="overflow: hidden;">
+                    <table class="buttonHolderTable" style="height: 100%;">
+                        <tr>
+                            <td class="bigTd">
+                                <JqxButton class='button left' :theme="'demoTheme'" :width="36" :height="36">
+                                    <img class="img" src="../../../images/help-26.png" />
+                                </JqxButton>
+                                Help
+                            </td>
+                            <td class="bigTd">
+                                <JqxButton class='button left' :theme="'demoTheme'" :width="36" :height="36">
+                                    <img class="img" src="../../../images/about-26.png" />
+                                </JqxButton>
+                                About
+                            </td>
+                            <td class="bigTd">
+                                <JqxButton class="button left" :theme="'demoTheme'" :width="36" :height="36">
+                                    <img class="img" src="../../../images/downloading_updates-26.png" />
+                                </JqxButton>
+                                Update
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+        </JqxRibbon>
+        <JqxGrid class="grid" :width="850" :source="gridData.source" :theme="'demoTheme'" :editable="true"
+                 :columnsresize="true" :selectionmode='"multiplecellsadvanced"' :columns="gridData.columns">
+        </JqxGrid>
+    </div>
+</template>
+
+<script>
+    import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
+    import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+    import JqxToggleButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtogglebutton.vue';
+    import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
+    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
+    import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcolorpicker.vue';
+    import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
+
+
+    export default {
+        components: {
+            JqxRibbon,
+            JqxGrid,
+            JqxButton,
+            JqxToggleButton,
+            JqxDropDownButton,
+            JqxDropDownList,
+            JqxColorPicker,
+            JqxTooltip
+
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('ribbon'),
+                gridData: this.manageGridData(),
+                fontSizeListSource: [8, 9, 10, 11, 12, 14, 18, 20, 22, 24],
+                changeCaseListSource: ['Sentence Case', 'lowercase', 'UPPERCASE', 'Capitalize Each Word'],
+                fontListSource:
+                    [
+                        "<span style='font-family: Courier New;'>Courier New</span>",
+                        "<span style='font-family: Times New Roman;'>Times New Roman</span>",
+                        "<span style='font-family: Arial;'>Arial</span>"
+                    ],
+                pasteData:
+                    [
+                        { label: 'Paste', imageClass: 'icon page_paste' },
+                        { label: 'Paste Special', imageClass: 'icon paste_plain' },
+                        { label: 'Paste text', imageClass: 'icon paste_word' },
+                        { label: 'Paste link', imageClass: 'icon PasteImage' }
+                    ]
+            }
+        },
+        mounted: function () {
+            this.buttonsStyling();
+            this.$refs.myRibbon.disableAt(0);
+            this.$refs.myRibbon.$el.firstElementChild.children[0].style.padding = '0';
+            this.$refs.myRibbon.$el.firstElementChild.children[1].style.padding = '7px 5px';
+            this.$refs.myRibbon.$el.firstElementChild.children[2].style.padding = '7px 5px';
+            this.$refs.myRibbon.$el.firstElementChild.children[1].style.marginLeft = '5px';
+            this.$refs.myRibbon.$el.firstElementChild.children[2].style.marginRight = '5px';
+            this.$refs.fileItemButton.setContent('<span style="position: relative; line-height: 26px; margin-left:10px;">File</span>');
+            this.$refs.fontColorButton.setContent('<span style="position: relative; display:inline; top: 2px"><div class="icon FontDialogImage"></div><span id="fontColorPreview" style="display: block; position:absolute;  height: 3px; width: 16px; background:#000"></span></span><span style="position:relative; display: inline; top:3px">Font Color</span>');
+            this.$refs.bucketColorButton.setContent('<span style="position: relative; display:inline"><div class="icon paintcan"></div><span id="bucketColorPreview" style="display: block; position:absolute;  height: 3px; width: 16px; background:#000"></span></span><span style="position:relative; display: inline; top:3px"></span>');
+            this.$refs.highlightColorButton.setContent('<span style="position: relative; display:inline; top: 2px"><div class="icon pencil"></div><span id="highlightColorPreview" style="display: block; position:absolute;  height: 3px; width: 16px; background:#F00"></span></span><span style="position:relative; display: inline; top:3px">Highlight Color</span>');
+        },
+        methods: {
+            buttonsStyling: function () {
+                for (let i = 0; i < document.getElementsByTagName('jqxtooltip').length; i++) {
+                    document.querySelectorAll('jqxtooltip')[i].firstElementChild.style.display = 'inline-block';
+                }
+
+                for (let i = 0; i < document.getElementsByTagName('jqxbutton').length; i++) {
+                    document.querySelectorAll('jqxbutton')[i].firstElementChild.style.display = 'inline-block';
+                    document.querySelectorAll('jqxbutton')[i].firstElementChild.setAttribute('checked', 'false');
+                }
+
+                for (let i = 0; i < document.getElementsByTagName('jqxdropdownlist').length; i++) {
+                    document.querySelectorAll('jqxdropdownlist')[i].firstElementChild.style.display = 'inline-block';
+                }
+
+                this.$refs.fileItemButton.$el.firstElementChild.style.color = 'white';
+                this.$refs.fileItemButton.$el.firstElementChild.style.background = 'transparent';
+            },
+            onBucketColorPicker: function (event) {
+                document.querySelector('#bucketColorPreview').style.background = '#' + event.args.color.hex;
+            },
+            onFontColorPicker: function (event) {
+                document.querySelector('#fontColorPreview').style.background = '#' + event.args.color.hex;
+            },
+
+            onHighlightColorPicker: function (event) {
+                document.querySelector('#highlightColorPreview').style.background = '#' + event.args.color.hex;
+            },
+            onSubScriptClick: function () {
+                this.$refs.superScript.toggled = false;
+            },
+            onSuperScriptClick: function () {
+                this.$refs.subScript.toggled = false;
+            },
+            onPasteButtonClick: function () {
+                const text = this.$refs.pasteButton.$el.querySelectorAll('.pasteText')[0].innerHTML;
+                console.log(text + ' clicked');
+            },
+            onMouseDownPasteButton: function (event) {
+                event.preventDefault();
+            },
+            onPasteDropDownSelect: function (event) {
+                const pasteData =
+                    [
+                        { label: 'Paste', imageClass: 'icon page_paste' },
+                        { label: 'Paste Special', imageClass: 'icon paste_plain' },
+                        { label: 'Paste text', imageClass: 'icon paste_word' },
+                        { label: 'Paste link', imageClass: 'icon PasteImage' }
+                    ];
+                const index = event.args.index;
+                const icon = '<span class="' + pasteData[index].imageClass + '" style="zoom: 1.5"></span>';
+                this.$refs.pasteButton.$el.innerHTML = icon + '<span class="pasteText">' + pasteData[index].label + '</span>';
+                this.$refs.pasteButton.render();
+            },
+            fontSizeListRenderer: function (index, label, value) {
+                return '<span style="font-size:' + value + 'px;">' + value + '</span>';
+            },
+            changeCaseListSelectionRenderer: function (object, index, label) {
+                return '<div class="icon change-case-16" style="top:3px;  position:relative"></div>';
+            },
+            pasteRenderer: function (index, label, value) {
+                const labelEl = '<span style="font-size: 10px">' + label + '</span>';
+                const icon = '<span class="' + this.pasteData[index].imageClass + '" style=""></span>';
+                return '<span>' + icon + labelEl + '</span>';
+            },
+            pasteRelectionRenderer: function (object, index, label) {
+                return '';
+            },
+            manageGridData: function () {
+                const numberrenderer = function (row, column, value) {
+                    return '<div style="text-align: center; margin-top: 5px;">' + (1 + value) + '</div>';
+                };
+
+                const datafields = [];
+                const columns = [];
+
+                for (let i = 0; i < 26; i++) {
+                    const text = String.fromCharCode(65 + i);
+
+                    if (i == 0) {
+                        const cssclass = 'jqx-widget-header';
+                        columns[columns.length] =
+                            {
+                                pinned: true,
+                                exportable: false,
+                                text: '',
+                                columntype: 'number',
+                                cellclassname: cssclass,
+                                cellsrenderer: numberrenderer
+                            };
+                    }
+
+                    datafields[datafields.length] = { name: text };
+                    columns[columns.length] = { text: text, datafield: text, width: 60, align: 'center' };
+                }
+
+                const source =
+                    {
+                        unboundmode: true,
+                        totalrecords: 100,
+                        datafields: datafields,
+                    };
+
+                const dataAdapter = new jqx.dataAdapter(source);
+
+                const jqxGridSettings =
+                    {
+                        source: dataAdapter,
+                        columns: columns
+                    };
+
+                return jqxGridSettings;
+            }
+        }
+    }
+</script>
+
+<style>
+    .button {
+        margin: 2px;
+        margin-right: 0;
+        font-size: 11px;
+    }
+
+    .sectionSeparator {
+        width: 1px;
+        height: 105px;
+        background-color: #eee;
+        float: left;
+        margin: 10px 5px 0 5px;
+    }
+
+    .bigTd {
+        text-align: center;
+        vertical-align: top;
+        width: 50px;
+    }
+
+    .left {
+        margin-left: 7px;
+    }
+
+    #clipBoardTable {
+        height: 100%;
+        border-collapse: separate;
+        border-spacing: 0 0;
+        float: left;
+    }
+
+    .grid {
+        border-top: none;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+
+    .ribbon li {
+        line-height: 16px;
+    }
+
+    span, li {
+        font-size: 11px !important;
+    }
+
+    .ribbon, .jqx-ribbon-content-section-demoTheme {
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .pasteText {
+        font-size: 10px;
+    }
+
+    div.pasteButton {
+        text-align: center;
+    }
+
+        div.pasteButton .icon {
+            margin-right: 0;
+        }
+
+    .pasteDropDown {
+        margin-left: 10px;
+    }
+
+        .pasteDropDown .jqx-listitem-element-demoTheme {
+            border: none;
+            font-size: 10px;
+        }
+
+    .jqx-dropdownlist-state-normal {
+        background: transparent;
+        border: none;
+    }
+
+    .jqx-button {
+        background: transparent;
+    }
+
+    .separator {
+        padding: 0 0 0 1px;
+        height: 20px;
+        border: solid 1px #fff;
+        border-top: 0;
+        border-bottom: 0;
+        margin: 0 2px;
+        width: 1px;
+        display: inline-block;
+        position: relative;
+        background: #bfc3c7;
+        background: linear-gradient(#f8f9fa, #bfc3c7, #f8f9fa);
+    }
+
+    .firstrow, .secondrow, .thirdrow {
+        font-size: 0;
+        padding: 0;
+    }
+
+        .firstrow div,
+        .secondrow div,
+        .thirdrow div {
+            position: relative;
+            display: inline-block;
+            font-size: 10px;
+        }
+
+        .thirdrow .separator {
+            margin: 0 2px;
+            height: 14px;
+        }
+
+    .jqx-button-demoTheme span {
+        margin-left: 2px;
+    }
+
+    .jqx-button {
+        position: relative;
+        height: 16px;
+        padding: 2px;
+        border: 1px solid transparent;
+        line-height: 16px;
+        text-align: left;
+    }
+
+    #fileItem {
+        padding: 0px;
+    }
+
+    #fileItem {
+        background: #006400;
+        color: White !important;
+        background-image: none;
+        text-shadow: none;
+    }
+
+    #fileItem {
+        background: #338333 !important;
+        color: White !important;
+        text-shadow: none;
+    }
+
+    #fileItem {
+        background: #005000 !important;
+        color: White !important;
+        text-shadow: none;
+    }
+
+    .jqx-ribbon-content-section-demoTheme {
+        background: #eaedf1;
+        background: linear-gradient(#fff 40%, #eaedf1);
+    }
+
+    .jqx-button-demoTheme:hover {
+        border-color: #f1ca58;
+        box-shadow: 0 0 1px 1px #fff inset;
+        background: #fde38a;
+        background: linear-gradient(#fdeeb3, #fde38a, #fdefbb);
+    }
+
+    .jqx-button-demoTheme:active {
+        border-color: #c2963d;
+        background: #fff37f;
+        background: linear-gradient(#ffe575, #fff37f);
+    }
+
+    .jqx-fill-state-hover-demoTheme,
+    .jqx-fill-state-pressed-demoTheme {
+        border-color: #c2963d;
+        background: #fff37f;
+        background: linear-gradient(#ffe575, #fff37f);
+    }
+
+    .fileItemButton {
+        background: transparent;
+        border: none;
+        color: #fff;
+    }
+
+    .icon {
+        background: url('../../../images/ribbon-icons.png') no-repeat top left;
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+        margin-right: 2px;
+        margin-left: 2px;
+        vertical-align: middle;
+    }
+
+        .icon.closed_door {
+            background-position: 0 0;
+        }
+
+        .icon.change-case-16 {
+            background-position: -26px 0;
+        }
+
+        .icon.ClearFormattingImage {
+            background-position: -52px 0;
+            width: 17px;
+        }
+
+        .icon.close {
+            background-position: -78px 0;
+        }
+
+        .icon.cut {
+            background-position: -104px 0;
+        }
+
+        .icon.cut_red {
+            background-position: -130px 0;
+        }
+
+        .icon.cut-icon-16 {
+            background-position: -156px 0;
+        }
+
+        .icon.CutImage {
+            background-position: -182px 0;
+        }
+
+        .icon.folder {
+            background-position: -208px 0;
+        }
+
+        .icon.FontDialogImage {
+            background-position: -234px 0;
+        }
+
+        .icon.fontsizedecrease16 {
+            background-position: -260px 0;
+        }
+
+        .icon.fontsizeincrease16 {
+            background-position: -286px 0;
+        }
+
+        .icon.FormatPainterImage {
+            background-position: -312px 0;
+        }
+
+        .icon.page_copy {
+            background-position: -338px 0;
+        }
+
+        .icon.page_paste {
+            background-position: -364px 0;
+        }
+
+        .icon.page_white_paste {
+            background-position: -390px 0;
+        }
+
+        .icon.paintcan {
+            background-position: -416px 0;
+        }
+
+        .icon.paste_plain {
+            background-position: -442px 0;
+        }
+
+        .icon.paste_word {
+            background-position: -468px 0;
+        }
+
+        .icon.paste-24 {
+            background-position: -494px 0;
+            width: 24px;
+            height: 24px;
+        }
+
+        .icon.paste-48 {
+            background-position: -528px 0;
+            width: 48px;
+            height: 48px;
+        }
+
+        .icon.PasteImage {
+            background-position: -586px 0;
+        }
+
+        .icon.PasteImageLarge {
+            background-position: -612px 0;
+            width: 32px;
+            height: 32px;
+        }
+
+        .icon.PasteSpecialImage {
+            background-position: -654px 0;
+        }
+
+        .icon.pencil {
+            background-position: -680px 0;
+        }
+
+        .icon.SaveImage {
+            background-position: -706px 0;
+        }
+
+        .icon.SaveSelectionImage {
+            background-position: -732px 0;
+        }
+
+        .icon.ShowParagraphMarksImage {
+            background-position: -758px 0;
+        }
+
+        .icon.SortHS {
+            background-position: -784px 0;
+        }
+
+        .icon.spellcheck {
+            background-position: -810px 0;
+        }
+
+        .icon.text_align_center {
+            background-position: -836px 0;
+        }
+
+        .icon.text_align_justify {
+            background-position: -862px 0;
+        }
+
+        .icon.text_align_left {
+            background-position: -888px 0;
+        }
+
+        .icon.text_align_right {
+            background-position: -914px 0;
+        }
+
+        .icon.text_bold {
+            background-position: -940px 0;
+        }
+
+        .icon.text_indent {
+            background-position: -966px 0;
+        }
+
+        .icon.text_indent_remove {
+            background-position: -992px 0;
+        }
+
+        .icon.text_italic {
+            background-position: -1018px 0;
+        }
+
+        .icon.text_linespacing {
+            background-position: -1044px 0;
+        }
+
+        .icon.text_list_bullets {
+            background-position: -1070px 0;
+        }
+
+        .icon.text_list_numbers {
+            background-position: -1096px 0;
+        }
+
+        .icon.text_strikethrough {
+            background-position: -1122px 0;
+        }
+
+        .icon.text_subscript {
+            background-position: -1148px 0;
+        }
+
+        .icon.text_superscript {
+            background-position: -1174px 0;
+        }
+
+        .icon.text_underline {
+            background-position: -1200px 0;
+        }
+</style>
\ No newline at end of file
diff --git a/ribbon/defaultfunctionality/main.js b/ribbon/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/ribbon/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/ribbon/defaultfunctionality/package.json b/ribbon/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/ribbon/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/ribbon/events/App.vue b/ribbon/events/App.vue
new file mode 100644
index 00000000..1a0f573d
--- /dev/null
+++ b/ribbon/events/App.vue
@@ -0,0 +1,197 @@
+<template>
+    <div>
+        <JqxRibbon 
+            @select="select($event)"
+            @unselect="unselect($event)"
+            :width="getWidth" :height="300" :position="'top'" 
+            :selectionMode="'click'" :animationType="'fade'">
+            <ul>
+                <li style="margin-left: 30px;">Browse Books</li>
+                <li>Shipping</li>
+                <li>About Us</li>
+            </ul>
+            <div>
+                <div>
+                    <table>
+                        <tr>
+                            <td>
+                                <b>Fiction</b>
+                            </td>
+                            <td>
+                                <b>Biography</b>
+                            </td>
+                            <td>
+                                <b>Science</b>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <a href="#">Adventure</a>
+                            </td>
+                            <td>
+                                <a href="#">Biography: General</a>
+                            </td>
+                            <td>
+                                <a href="#">Astronomy</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <a href="#">Classics</a>
+                            </td>
+                            <td>
+                                <a href="#">Diaries, Letters & Journals</a>
+                            </td>
+                            <td>
+                                <a href="#">Biology</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <a href="#">Historical Fiction</a>
+                            </td>
+                            <td>
+                                <a href="#">Memoirs</a>
+                            </td>
+                            <td>
+                                <a href="#">Geography</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <a href="#">Romance</a>
+                            </td>
+                            <td>
+                                <b>Food & Drink</b>
+                            </td>
+                            <td>
+                                <a href="#">Mathematics</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <a href="#">Science Fiction</a>
+                            </td>
+                            <td>
+                                <a href="#">General Cookery</a>
+                            </td>
+                            <td>
+                                <a href="#">Physics</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <a href="#">Thrillers</a>
+                            </td>
+                            <td>
+                                <a href="#">National Cuisine</a>
+                            </td>
+                            <td></td>
+                        </tr>
+                        <tr>
+                            <td></td>
+                            <td>
+                                <a href="#">Quick & Easy Cooking</a>
+                            </td>
+                            <td></td>
+                        </tr>
+                        <tr>
+                            <td></td>
+                            <td>
+                                <a href="#">Vegetarian Cookery</a>
+                            </td>
+                            <td>
+                                <a href="#">More books >></a>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+                <div>
+                    <table>
+                        <tr>
+                            <td>
+                                <a href="#">Countries we ship to</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <a href="#">Delivery options</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <a href="#">Order cancellation and returns</a>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+                <div>
+                    <table>
+                        <tr>
+                            <td>
+                                <a href="#">Contact us</a>
+                            </td>
+                            <td rowspan="3" style="width: 125px;"></td>
+                            <td rowspan="3">
+                                <img src="../../../images/bookshop.png" />
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <a href="#">Jobs</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <a href="#">Affiliates</a>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+        </JqxRibbon>
+
+        <div style="margin-top: 30px; font-weight: bold;">
+            Events:
+        </div>
+        <JqxPanel ref="myPanel" :width="200" :height="250"></JqxPanel>
+    </div>
+</template>
+
+<script>
+    import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
+    import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
+
+    export default {
+        components: {
+            JqxRibbon,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('ribbon')
+            }
+        },
+        methods: {
+            select: function (event) {
+                const selectedIndex = event.args.selectedIndex;
+                this.$refs.myPanel.prepend('<div style="margin-top: 5px;">Selected: ' + selectedIndex + '</div>');
+            },
+            unselect: function (event) {
+                const unselectedIndex = event.args.unselectedIndex;
+                this.$refs.myPanel.prepend('<div style="margin-top: 5px;">Unselected: ' + unselectedIndex + '</div>');
+            }
+        }
+    }
+</script>
+
+<style>
+    table {
+        border-collapse: separate;
+        border-spacing: 15px 5px;
+    }
+
+    .jqx-panel{
+        border: none;
+    }
+</style>
\ No newline at end of file
diff --git a/ribbon/events/main.js b/ribbon/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/ribbon/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/ribbon/events/package.json b/ribbon/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/ribbon/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/ribbon/fluidsize/App.vue b/ribbon/fluidsize/App.vue
new file mode 100644
index 00000000..6330adab
--- /dev/null
+++ b/ribbon/fluidsize/App.vue
@@ -0,0 +1,172 @@
+<template>
+    <JqxRibbon  
+        :width="'100%'" :height="350" :selectedIndex="0"
+        :position="'top'" :selectionMode="'click'" :animationType="'fade'">
+        <ul>
+            <li style="margin-left: 30px;">Browse Books</li>
+            <li>Shipping</li>
+            <li>About Us</li>
+        </ul>
+        <div>
+            <div>
+                <table style="width: 100%;">
+                    <tr>
+                        <td>
+                            <b>Fiction</b>
+                        </td>
+                        <td>
+                            <b>Biography</b>
+                        </td>
+                        <td>
+                            <b>Science</b>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Adventure</a>
+                        </td>
+                        <td>
+                            <a href="#">Biography: General</a>
+                        </td>
+                        <td>
+                            <a href="#">Astronomy</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Classics</a>
+                        </td>
+                        <td>
+                            <a href="#">Diaries, Letters & Journals</a>
+                        </td>
+                        <td>
+                            <a href="#">Biology</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Historical Fiction</a>
+                        </td>
+                        <td>
+                            <a href="#">Memoirs</a>
+                        </td>
+                        <td>
+                            <a href="#">Geography</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Romance</a>
+                        </td>
+                        <td>
+                            <b>Food & Drink</b>
+                        </td>
+                        <td>
+                            <a href="#">Mathematics</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Science Fiction</a>
+                        </td>
+                        <td>
+                            <a href="#">General Cookery</a>
+                        </td>
+                        <td>
+                            <a href="#">Physics</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Thrillers</a>
+                        </td>
+                        <td>
+                            <a href="#">National Cuisine</a>
+                        </td>
+                        <td></td>
+                    </tr>
+                    <tr>
+                        <td></td>
+                        <td>
+                            <a href="#">Quick & Easy Cooking</a>
+                        </td>
+                        <td></td>
+                    </tr>
+                    <tr>
+                        <td></td>
+                        <td>
+                            <a href="#">Vegetarian Cookery</a>
+                        </td>
+                        <td>
+                            <a href="#">More books >></a>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+            <div>
+                <table style="width:100%;">
+                    <tr>
+                        <td>
+                            <a href="#">Countries we ship to</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Delivery options</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Order cancellation and returns</a>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+            <div>
+                <table style="width: 100%;">
+                    <tr>
+                        <td>
+                            <a href="#">Contact us</a>
+                        </td>
+                        <td rowspan="3" style="width: 125px;"></td>
+                        <td rowspan="3">
+                            <img src="../../../images/bookshop.png" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Jobs</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Affiliates</a>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </JqxRibbon>
+</template>
+
+<script>
+    import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
+
+    export default {
+        components: {
+            JqxRibbon
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('ribbon')
+            }
+        }
+    }
+</script>
+
+<style>
+    table {
+        border-collapse: separate;
+        border-spacing: 15px 5px;
+    }
+</style>
\ No newline at end of file
diff --git a/ribbon/fluidsize/main.js b/ribbon/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/ribbon/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/ribbon/fluidsize/package.json b/ribbon/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/ribbon/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/ribbon/integrationwithotherwidgets/App.vue b/ribbon/integrationwithotherwidgets/App.vue
new file mode 100644
index 00000000..0f55e093
--- /dev/null
+++ b/ribbon/integrationwithotherwidgets/App.vue
@@ -0,0 +1,143 @@
+<template>
+    <div>
+        <div class="img-container">
+            <img src="../../../images/mailIcon.png">
+            <span>Inbox</span>
+        </div>
+
+        <JqxRibbon        
+            :width="getWidth" :initContent="initContent" :position="'top'"
+            :selectionMode="'click'":animationType="'none'">
+            <ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
+                <li style="margin-left: 30px;">Main</li>
+                <li>Social</li>
+                <li>Promotions</li>
+            </ul>
+            <div>
+                <div>
+                    <div id="mainGrid" class="grid"></div>
+                </div>
+                <div>
+                    <div id="socialGrid" class="grid"></div>
+                </div>
+                <div>
+                    <table style="width: 100%;">
+                        <tr>
+                            <td style="text-align: center;">
+                                No new mail under <em>Promotions</em>.<br />
+                                <button id="refreshButton" title="Refresh">
+                                    <img src="../../../images/refresh.png" />
+                                </button>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+        </JqxRibbon>
+    </div>
+</template>
+
+<script>
+    import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
+    import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
+
+    export default {
+        components: {
+            JqxRibbon,
+            JqxGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('ribbon')
+            }
+        },
+        methods: {
+            initContent: function (index) {
+                switch (index) {
+                    case 0:
+                        this.initiMainGrid();
+                        break;
+                    case 1:
+                        this.initiSocialGrid();
+                        break;
+                    case 2:
+                        jqwidgets.createInstance('#refreshButton', 'jqxButton', {});
+                        break;
+                }
+            },
+            initiMainGrid: function () {
+                const data = [{ from: 'Anthony', subject: 'Visit to the zoo', time: '09/10/2014 12:35' }, { from: 'Peter', subject: 'Job application', time: '08/23/2014 18:13' }, { from: 'Sarah', subject: 'The roses...', time: '08/05/2014 15:01' }];
+
+                const source =
+                    {
+                        datatype: 'json',
+                        datafields: [
+                            { name: 'from', type: 'string' },
+                            { name: 'subject', type: 'string' },
+                            { name: 'time', type: 'date' }
+                        ],
+                        localdata: data
+                    };
+
+                const mainDataAdapter = new jqx.dataAdapter(source);
+
+                jqwidgets.createInstance('#mainGrid', 'jqxGrid', {
+                    width: '100%',
+                    autoheight: true,
+                    source: mainDataAdapter,
+                    selectionmode: 'checkbox',
+                    columns: [
+                        { text: 'From', datafield: 'from', width: 100 },
+                        { text: 'Subject', datafield: 'subject', width: 200 },
+                        { text: 'Time', datafield: 'time', cellsformat: 'MMM d h:mm tt' }
+                    ]
+                });
+            },
+            initiSocialGrid: function () {
+                const data = [{ from: 'PhotoPics.com', subject: 'Join us today!', time: '09/08/2014 11:00' }, { from: 'CookMaster', subject: 'Welcome to the CookMaster forum.', time: '08/29/2014 22:33' }];
+
+                const source =
+                    {
+                        datatype: 'json',
+                        datafields: [
+                            { name: 'from', type: 'string' },
+                            { name: 'subject', type: 'string' },
+                            { name: 'time', type: 'date' }
+                        ],
+                        localdata: data
+                    };
+
+                const socialDataAdapter = new jqx.dataAdapter(source);
+
+                jqwidgets.createInstance('#socialGrid', 'jqxGrid', {
+                    width: '100%',
+                    autoheight: true,
+                    source: socialDataAdapter,
+                    selectionmode: 'checkbox',
+                    columns: [
+                        { text: 'From', datafield: 'from', width: 100 },
+                        { text: 'Subject', datafield: 'subject', width: 240 },
+                        { text: 'Time', datafield: 'time', cellsformat: 'MMM d h:mm tt' }
+                    ]
+                });
+            }
+        }
+    }
+</script>
+
+<style>
+    .img-container {
+        width: 90%;
+        padding: 5px 10px;
+        background-color: #1C3672;
+        color: white;
+    }
+    .img-container img {
+        vertical-align: middle;
+        margin-right: 10px;
+    }
+    .grid {
+        margin-top: 3px;
+        border: none;
+    }
+</style>
\ No newline at end of file
diff --git a/ribbon/integrationwithotherwidgets/main.js b/ribbon/integrationwithotherwidgets/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/ribbon/integrationwithotherwidgets/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/ribbon/integrationwithotherwidgets/package.json b/ribbon/integrationwithotherwidgets/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/ribbon/integrationwithotherwidgets/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/ribbon/popuplayout/App.vue b/ribbon/popuplayout/App.vue
new file mode 100644
index 00000000..9e0cc665
--- /dev/null
+++ b/ribbon/popuplayout/App.vue
@@ -0,0 +1,299 @@
+<template>
+    <JqxRibbon ref="myRibbon"
+        :width="getWidth" :height="30" :mode="'popup'"
+        :position="'top'" :selectionMode="'click'" :animationType="'none'">
+        <ul>
+            <li>TV and Players</li>
+            <li>Cell phones</li>
+            <li>Cameras</li>
+            <li>Computers</li>
+        </ul>
+        <div>
+            <div>
+                <table>
+                    <tr>
+                        <td class="list">
+                            <b><a href="#">TV</a></b>
+                        </td>
+                    </tr>
+                    <tr></tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">LED</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">LCD</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">Plasma</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <hr />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <b><a href="#">PLAYERS</a></b>
+                        </td>
+                    </tr>
+                    <tr></tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">DVD</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">Blu-Ray</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">CD</a>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+            <div>
+                <table>
+                    <tr>
+                        <td class="list">
+                            <b><a href="#">PHONES</a></b>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">By Brand</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">By Display size</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <hr />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <b><a href="#">SMARTPHONES</a></b>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">By Brand</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">By OS</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">By Display size</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">By CPU</a>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+            <div>
+                <table>
+                    <tr>
+                        <td class="list">
+                            <b>
+                                <a href="#">
+                                    DIGITAL<br />
+                                    CAMERAS
+                                </a>
+                            </b>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">Hybrid</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">Compact</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">Digital SLR</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <hr />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <b><a href="#">CAMCORDERS</a></b>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">FLASH</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">HDD</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">HD Flash</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">HD HDD</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">HD Extreme</a>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+            <div>
+                <table>
+                    <tr>
+                        <td class="list">
+                            <b><a href="#">LAPTOPS</a></b>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">By Processor Type</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">By RAM Capacity</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">By HDD Capacity</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">By Display Size</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">By Brand</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <hr />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <b><a href="#">DESKTOPS</a></b>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">By Processor Type</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">By RAM Capacity</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">By HDD Capacity</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">By Brand</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <hr />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <b><a href="#">ALL-IN-ONE</a></b>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="list">
+                            <a href="#">By Brand</a>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </JqxRibbon>
+</template>
+
+<script>
+    import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
+
+    export default {
+        components: {
+            JqxRibbon
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('ribbon')
+            }
+        },
+        mounted: function () {
+            const myRibbon = this.$refs.myRibbon;
+
+            myRibbon.setPopupLayout(0, 'near', 130, 205);
+            myRibbon.setPopupLayout(1, 'center', 130, 200);
+            myRibbon.setPopupLayout(2, 'center', 130, 260);
+            myRibbon.setPopupLayout(3, 'far', 130, 350);
+        }
+    }
+</script>
+
+<style>
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    table {
+        margin-left: 5px;
+        border-collapse: separate;
+        border-spacing: 0px 3px;
+        vertical-align: middle;
+    }
+
+    hr {
+        width: 75%;
+        float: left;
+    }
+</style>
\ No newline at end of file
diff --git a/ribbon/popuplayout/main.js b/ribbon/popuplayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/ribbon/popuplayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/ribbon/popuplayout/package.json b/ribbon/popuplayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/ribbon/popuplayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/ribbon/ribbonatthebottom/App.vue b/ribbon/ribbonatthebottom/App.vue
new file mode 100644
index 00000000..a1238648
--- /dev/null
+++ b/ribbon/ribbonatthebottom/App.vue
@@ -0,0 +1,114 @@
+<template>
+    <JqxRibbon
+        :width="getWidth" :height="300" :position="'bottom'"
+        :selectionMode="'click'" :animationType="'fade'">
+        <ul>
+            <li style="margin-left: 30px;">Browse Books</li>
+            <li>Shipping</li>
+            <li>About Us</li>
+        </ul>
+        <div>
+            <div>
+                <table>
+                    <tr>
+                        <td><b>Fiction</b></td>
+                        <td><b>Biography</b></td>
+                        <td><b>Science</b> </td>
+                    </tr>
+                    <tr>
+                        <td><a href="#">Adventure</a></td>
+                        <td><a href="#">Biography: General</a>
+                        </td>
+                        <td><a href="#">Astronomy</a> </td>
+                    </tr>
+                    <tr>
+                        <td><a href="#">Classics</a> </td>
+                        <td><a href="#">Diaries, Letters & Journals</a></td>
+                        <td><a href="#">Biology</a></td>
+                    </tr>
+                    <tr>
+                        <td><a href="#">Historical Fiction</a></td>
+                        <td><a href="#">Memoirs</a></td>
+                        <td><a href="#">Geography</a></td>
+                    </tr>
+                    <tr>
+                        <td><a href="#">Romance</a></td>
+                        <td><b>Food & Drink</b></td>
+                        <td><a href="#">Mathematics</a></td>
+                    </tr>
+                    <tr>
+                        <td><a href="#">Science Fiction</a></td>
+                        <td><a href="#">General Cookery</a></td>
+                        <td><a href="#">Physics</a></td>
+                    </tr>
+                    <tr>
+                        <td><a href="#">Thrillers</a></td>
+                        <td><a href="#">National Cuisine</a></td>
+                        <td></td>
+                    </tr>
+                    <tr>
+                        <td></td>
+                        <td><a href="#">Quick & Easy Cooking</a></td>
+                        <td></td>
+                    </tr>
+                    <tr>
+                        <td></td>
+                        <td><a href="#">Vegetarian Cookery</a></td>
+                        <td><a href="#">More books >></a></td>
+                    </tr>
+                </table>
+            </div>
+            <div>
+                <table>
+                    <tr>
+                        <td><a href="#">Countries we ship to</a></td>
+                    </tr>
+                    <tr>
+                        <td><a href="#">Delivery options</a></td>
+                    </tr>
+                    <tr>
+                        <td><a href="#">Order cancellation and returns</a> </td>
+                    </tr>
+                </table>
+            </div>
+            <div>
+                <table>
+                    <tr>
+                        <td><a href="#">Contact us</a></td>
+                        <td rowspan="3" style="width: 125px;"></td>
+                        <td rowspan="3"> <img src="../../../images/bookshop.png" /></td>
+                    </tr>
+                    <tr>
+                        <td><a href="#">Jobs</a></td>
+                    </tr>
+                    <tr>
+                        <td><a href="#">Affiliates</a></td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </JqxRibbon>
+</template>
+
+<script>
+    import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
+
+
+    export default {
+        components: {
+            JqxRibbon
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('ribbon')
+            }
+        }
+    }
+</script>
+
+<style>
+    table {
+        border-collapse: separate;
+        border-spacing: 15px 5px;
+    }
+</style>
\ No newline at end of file
diff --git a/ribbon/ribbonatthebottom/main.js b/ribbon/ribbonatthebottom/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/ribbon/ribbonatthebottom/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/ribbon/ribbonatthebottom/package.json b/ribbon/ribbonatthebottom/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/ribbon/ribbonatthebottom/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/ribbon/righttoleftlayout/App.vue b/ribbon/righttoleftlayout/App.vue
new file mode 100644
index 00000000..931d03ca
--- /dev/null
+++ b/ribbon/righttoleftlayout/App.vue
@@ -0,0 +1,172 @@
+<template>
+    <JqxRibbon  
+        :width="'100%'" :height="350" :selectedIndex="0" :rtl="true"
+        :position="'top'" :selectionMode="'click'" :animationType="'fade'">
+        <ul>
+            <li style="margin-left: 30px;">Browse Books</li>
+            <li>Shipping</li>
+            <li>About Us</li>
+        </ul>
+        <div>
+            <div>
+                <table style="width: 100%;">
+                    <tr>
+                        <td>
+                            <b>Fiction</b>
+                        </td>
+                        <td>
+                            <b>Biography</b>
+                        </td>
+                        <td>
+                            <b>Science</b>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Adventure</a>
+                        </td>
+                        <td>
+                            <a href="#">Biography: General</a>
+                        </td>
+                        <td>
+                            <a href="#">Astronomy</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Classics</a>
+                        </td>
+                        <td>
+                            <a href="#">Diaries, Letters & Journals</a>
+                        </td>
+                        <td>
+                            <a href="#">Biology</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Historical Fiction</a>
+                        </td>
+                        <td>
+                            <a href="#">Memoirs</a>
+                        </td>
+                        <td>
+                            <a href="#">Geography</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Romance</a>
+                        </td>
+                        <td>
+                            <b>Food & Drink</b>
+                        </td>
+                        <td>
+                            <a href="#">Mathematics</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Science Fiction</a>
+                        </td>
+                        <td>
+                            <a href="#">General Cookery</a>
+                        </td>
+                        <td>
+                            <a href="#">Physics</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Thrillers</a>
+                        </td>
+                        <td>
+                            <a href="#">National Cuisine</a>
+                        </td>
+                        <td></td>
+                    </tr>
+                    <tr>
+                        <td></td>
+                        <td>
+                            <a href="#">Quick & Easy Cooking</a>
+                        </td>
+                        <td></td>
+                    </tr>
+                    <tr>
+                        <td></td>
+                        <td>
+                            <a href="#">Vegetarian Cookery</a>
+                        </td>
+                        <td>
+                            <a href="#">More books >></a>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+            <div>
+                <table style="width:100%;">
+                    <tr>
+                        <td>
+                            <a href="#">Countries we ship to</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Delivery options</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Order cancellation and returns</a>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+            <div>
+                <table style="width: 100%;">
+                    <tr>
+                        <td>
+                            <a href="#">Contact us</a>
+                        </td>
+                        <td rowspan="3" style="width: 125px;"></td>
+                        <td rowspan="3">
+                            <img src="../../../images/bookshop.png" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Jobs</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="#">Affiliates</a>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </JqxRibbon>
+</template>
+
+<script>
+    import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
+
+    export default {
+        components: {
+            JqxRibbon
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('ribbon')
+            }
+        }
+    }
+</script>
+
+<style>
+    table {
+        border-collapse: separate;
+        border-spacing: 15px 5px;
+    }
+</style>
\ No newline at end of file
diff --git a/ribbon/righttoleftlayout/main.js b/ribbon/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/ribbon/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/ribbon/righttoleftlayout/package.json b/ribbon/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/ribbon/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/ribbon/scrolling/App.vue b/ribbon/scrolling/App.vue
new file mode 100644
index 00000000..ccf7fb24
--- /dev/null
+++ b/ribbon/scrolling/App.vue
@@ -0,0 +1,175 @@
+<template>
+    <div>
+        <JqxRibbon ref="myRibbon" style='float: left;'
+                   :width="450" :position="'top'"
+                   :selectionMode="'click'" :animationType="'fade'">
+            <ul>
+                <li>Sunflower</li>
+                <li>Rose</li>
+                <li>Tulip</li>
+                <li>Petunia</li>
+                <li>Morning glory</li>
+                <li>Violet</li>
+                <li>Lily</li>
+                <li>Jasmine</li>
+                <li>Hibiscus</li>
+                <li>Edelweiss</li>
+                <li>Dahlia</li>
+                <li>Narcissus</li>
+            </ul>
+            <div>
+                <div class="contentSection">
+                    <b>Sunflower</b> "whole seed" (fruit) are sold as a snack food, after roasting in
+                    ovens, with or without salt added. Sunflowers can be processed into a peanut butter
+                    alternative, Sunbutter. In Germany, it is mixed together with rye flour to make
+                    Sonnenblumenkernbrot (literally: sunflower whole seed bread), which is quite popular
+                    in German-speaking Europe. It is also sold as food for birds and can be used directly
+                    in cooking and salads. Sunflower oil, extracted from the seeds, is used for cooking,
+                    as a carrier oil and to produce margarine and biodiesel, as it is cheaper than olive
+                    oil. A range of sunflower varieties exist with differing fatty acid compositions;
+                    some 'high oleic' types contain a higher level of healthy monounsaturated fats in
+                    their oil than Olive oil.
+                </div>
+                <div class="contentSection">
+                    The <b>rose</b> was sacred to Venus (mythology). Venus was the Roman goddess of
+                    love and beauty. It was also linked with Cupid. He was the Roman god of desire -
+                    in one myth, he dropped nectar and the nectar bubbled up from the ground as roses.
+                    The rose was also sacred to Bacchus. He was the Roman god of wine.
+                </div>
+                <div class="contentSection">
+                    <b>Tulips</b> are spring-blooming perennials that grow from bulbs. Depending on
+                    the species, tulip plants can be between 4 inches (10 cm) and 28 inches (71 cm)
+                    high. The tulip's large flowers usually bloom on scapes with leaves in a rosette
+                    at ground level and a single flowering stalk arising from amongst the leaves.Tulip
+                    stems have few leaves. Larger species tend to have multiple leaves. Plants typically
+                    have two to six leaves, some species up to 12. The tulip's leaf is strap-shaped,
+                    with a waxy coating, and the leaves are alternately arranged on the stem; these
+                    fleshy blades are often bluish green in color. Most tulips produce only one flower
+                    per stem, but a few species bear multiple flowers on their scapes (e.g. Tulipa turkestanica).
+                    The generally cup or star-shaped tulip flower has three petals and three sepals,
+                    which are often termed tepals because they are nearly identical.
+                </div>
+                <div class="contentSection">
+                    <b>Petunia</b> is a genus in the family Solanaceae, subfamily Petunioideae. Well
+                    known members of Solanaceae in other subfamilies include tobacco (Nicotianoideae),
+                    and the cape gooseberry, tomato, potato, deadly nightshades and chili pepper (Solanoideae).
+                    Some botanists place the plants of the genus Calibrachoa in the genus Petunia, but
+                    this is not accepted by others. Petchoa is a hybrid genus derived from crossing
+                    the genetically similar Calibrachoa and Petunia.
+                </div>
+                <div class="contentSection">
+                    Most <b>morning glory</b> flowers unravel into full bloom in the early morning.
+                    The flowers usually start to fade a few hours before the "petals" start showing
+                    visible curling. They prefer full solar exposure throughout the day, and mesic soils.
+                    Some morning glories, such as Ipomoea muricata, are night-blooming flowers. In some
+                    places, such as Australian bushland, some species of morning glories develop thick
+                    roots and tend to grow in dense thickets. They can quickly spread by way of long,
+                    creeping stems. By crowding out, blanketing and smothering other plants, morning
+                    glory has turned into a serious invasive weed problem.
+                </div>
+                <div class="contentSection">
+                    <b>Viola</b> typically have heart-shaped, scalloped leaves, though a number have
+                    palmate leaves or other shapes. The vast majority of Viola species are herbaceous,
+                    and a substantial number are acaulescent in habit - meaning they lack any noticeable
+                    stems and the foliage and flowers appear to rise from the ground; the remaining
+                    species have short stems with foliage and flowers produced in the axils of the leaves.
+                    The simple leaves of plants with either habit are arranged alternately; the acaulescent
+                    species produce basal rosettes. Plants always have leaves with stipules that are
+                    often leaf-like.
+                </div>
+                <div class="contentSection">
+                    <b>Lilies</b> are tall perennials ranging in height from 26 ft (60180 cm). They
+                    form naked or tunicless scaly underground bulbs which are their overwintering organs.
+                    In some North American species the base of the bulb develops into rhizomes, on which
+                    numerous small bulbs are found. Some species develop stolons. Most bulbs are deeply
+                    buried, but a few species form bulbs near the soil surface. Many species form stem-roots.
+                    With these, the bulb grows naturally at some depth in the soil, and each year the
+                    new stem puts out adventitious roots above the bulb as it emerges from the soil.
+                    These roots are in addition to the basal roots that develop at the base of the bulb.
+                </div>
+                <div class="contentSection">
+                    <b>Jasmines</b> can be either deciduous (leaves falling in autumn) or evergreen
+                    (green all year round), and can be erect, spreading, or climbing shrubs and vines.
+                    Their leaves are borne opposite or alternate. They can be simple, trifoliate, or
+                    pinnate. The flowers are typically around 2.5 cm (0.98 in) in diameter. They are
+                    white or yellow in color, although in rare instances they can be slightly reddish.
+                    The flowers are borne in cymose clusters with a minimum of three flowers, though
+                    they can also be solitary on the ends of branchlets. Each flower has about four
+                    to nine petals, two locules, and one to four ovules. They have two stamens with
+                    very short filaments. The bracts are linear or ovate. The calyx is bell-shaped.
+                    They are usually very fragrant. The fruits of jasmines are berries that turn black
+                    when ripe.
+                </div>
+                <div class="contentSection">
+                    The leaves of <b>Hibiscus</b> are alternate, ovate to lanceolate, often with a toothed
+                    or lobed margin. The flowers are large, conspicuous, trumpet-shaped, with five or
+                    more petals, color from white to pink, red, orange, purple or yellow, and from 418
+                    cm broad. Flower color in certain species, such as H. mutabilis and H. tiliaceus,
+                    changes with age. The fruit is a dry five-lobed capsule, containing several seeds
+                    in each lobe, which are released when the capsule dehisces (splits open) at maturity.
+                    It is of red and white colours. It is an example of complete flowers.
+                </div>
+                <div class="contentSection">
+                    Flowering stalks of <b>Edelweiss</b> can grow to a size of 320 cm (in cultivation,
+                    up to 40 cm). Each bloom consists of five to six small yellow clustered spikelet-florets
+                    (5 mm) surrounded by fuzzy white "petals" (technically, bracts) in a double star
+                    formation. The flowers bloom between July and September.
+                </div>
+                <div class="contentSection">
+                    <b>Dahlia</b> is a genus of the uplands and mountains, being found at elevations
+                    between 1,500 and 3,700 meters, in what has been described as a "pine-oak woodland"
+                    vegetative zone. Most species have limited ranges scattered throughout many mountain
+                    ranges in Mexico.
+                </div>
+                <div class="contentSection">
+                    The <b>Narcissi</b> are perennial herbaceous geophytes which grow from pale brown-skinned
+                    spherical bulbs with pronounced necks, and reach heights varying from 5-80 cm depending
+                    on species. Dwarf forms include N. asturiensis which reaches 5-8 cm, while N. italicus
+                    may grow as high as 80cm. The leafless stems, appearing from early to late spring
+                    depending on the species, bear from 1 to 20 blooms. Stem shape depends on the species,
+                    some are highly compressed with a visible seam, while others are rounded. The stems
+                    are upright and located at the centre of the leaves. It is hollow in the upper portion
+                    but towards the bulb is more solid and filled with a spongy material. In a few species
+                    such as N. hedraeanthus the stem is oblique.
+                </div>
+            </div>
+        </JqxRibbon>
+        <div style='width: 200px; float: left; margin-left: 30px;'>
+            <div>
+                <b>Scroll Buttons Position:</b>
+            </div>
+            <JqxRadioButton :width="100" :height="25" @checked="checkedNear($event)">
+                Near
+            </JqxRadioButton>
+            <JqxRadioButton :width="100" :height="25" @checked="checkedFar($event)">
+                Far
+            </JqxRadioButton>
+            <JqxRadioButton :width="500" :height="25" :checked='true' @checked="checkedBoth($event)">
+                Both
+            </JqxRadioButton>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
+    import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
+
+    export default {
+        components: {
+            JqxRibbon,
+            JqxRadioButton
+        },
+        methods: {
+            checkedNear: function () {
+                this.$refs.myRibbon.scrollPosition = 'near';
+            },
+            checkedFar: function () {
+                this.$refs.myRibbon.scrollPosition = 'far';
+            },
+            checkedBoth: function () {
+                this.$refs.myRibbon.scrollPosition = 'both';
+            }
+        }
+    }
+</script>
diff --git a/ribbon/scrolling/main.js b/ribbon/scrolling/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/ribbon/scrolling/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/ribbon/scrolling/package.json b/ribbon/scrolling/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/ribbon/scrolling/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/ribbon/verticalribbon/App.vue b/ribbon/verticalribbon/App.vue
new file mode 100644
index 00000000..8778c62b
--- /dev/null
+++ b/ribbon/verticalribbon/App.vue
@@ -0,0 +1,460 @@
+<template>
+    <div>
+        <JqxRibbon ref="myRibbon"
+            :width="getWidth" :height="335" :position="'left'"
+            :selectionMode="'hover'" :animationType="'fade'">
+            <ul id="header" style="width: 115px;">
+                <li>TV and Players</li>
+                <li>Cell phones</li>
+                <li>Cameras</li>
+                <li>Computers</li>
+            </ul>
+            <div>
+                <div>
+                    <div class="container">
+                        <table>
+                            <tr>
+                                <td class="list">
+                                    <b><a href="#">TV</a></b>
+                                </td>
+                            </tr>
+                            <tr></tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">LED</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">LCD</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">Plasma</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <hr />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <b><a href="#">PLAYERS</a></b>
+                                </td>
+                            </tr>
+                            <tr></tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">DVD</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">Blu-Ray</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">CD</a>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                    <div class="container">
+                        <table>
+                            <tr>
+                                <td class="promo">
+                                    PROMO
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="image">
+                                    <img src="../../../images/tv.png" />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="name">
+                                    <a href="#">LG 22MN43D-PZ</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="price">
+                                    Price: $1583
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+                <div>
+                    <div class="container">
+                        <table>
+                            <tr>
+                                <td class="list">
+                                    <b><a href="#">PHONES</a></b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Brand</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Display size</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <hr />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <b><a href="#">SMARTPHONES</a></b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Brand</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By OS</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Display size</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By CPU</a>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                    <div class="container">
+                        <table>
+                            <tr>
+                                <td class="promo">
+                                    PROMO
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="image">
+                                    <img src="../../../images/Samsung-Galaxy-S4.png" />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="name">
+                                    <a href="#">Samsung I9505 Galaxy S4</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="price">
+                                    Price: $569
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+                <div>
+                    <div class="container">
+                        <table>
+                            <tr>
+                                <td class="list">
+                                    <b>
+                                        <a href="#">
+                                            DIGITAL<br />
+                                            CAMERAS
+                                        </a>
+                                    </b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">Hybrid</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">Compact</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">Digital SLR</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <hr />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <b><a href="#">CAMCORDERS</a></b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">FLASH</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">HDD</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">HD Flash</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">HD HDD</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">HD Extreme</a>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                    <div class="container">
+                        <table>
+                            <tr>
+                                <td class="promo">
+                                    PROMO
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="image">
+                                    <img src="../../../images/camera.png" />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="name">
+                                    <a href="#">Nikon COOLPIX L330</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="price">
+                                    Price: $358
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+                <div>
+                    <div class="container">
+                        <table>
+                            <tr>
+                                <td class="list">
+                                    <b><a href="#">LAPTOPS</a></b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Processor Type</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By RAM Capacity</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By HDD Capacity</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Display Size</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Brand</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <hr />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <b><a href="#">DESKTOPS</a></b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Processor Type</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By RAM Capacity</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By HDD Capacity</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Brand</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <hr />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <b><a href="#">ALL-IN-ONE</a></b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Brand</a>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                    <div class="container">
+                        <table>
+                            <tr>
+                                <td class="promo">
+                                    PROMO
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="image">
+                                    <img src="../../../images/l-25.jpg" style="width: 140px; height: 105px;" />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="name">
+                                    <a href="#">Toshiba Qosmio X70-A-114</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="price">
+                                    Price: $2199
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </JqxRibbon>
+
+        <JqxCheckBox style="margin-top: 50px;" @change="change($event)">
+            Menu Mode
+        </JqxCheckBox>
+    </div>
+</template>
+
+<script>
+    import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+
+    export default {
+        components: {
+            JqxRibbon,
+            JqxCheckBox
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('ribbon')
+            }
+        },
+        methods: {
+            change: function (event) {
+                const myRibbon = this.$refs.myRibbon;
+                const checked = event.args.checked;
+                const mode = checked ? 'popup' : 'default';
+                const width = checked ? 115 : 425;
+
+                myRibbon.setOptions({ width: width, mode: mode });
+
+                if (mode == 'popup') {
+                    myRibbon.setPopupLayout(0, 'default', 310, '100%');
+                    myRibbon.setPopupLayout(1, 'default', 310, '100%');
+                    myRibbon.setPopupLayout(2, 'default', 310, '100%');
+                    myRibbon.setPopupLayout(3, 'default', 310, '100%');
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    a:hover {
+        color: #DC1F26;
+    }
+
+    table {
+        border-collapse: separate;
+        border-spacing: 0px 3px;
+        width: 142px;
+    }
+
+    .promo, .price {
+        height: 25px;
+        background-color: #DC1F26;
+        color: White;
+        text-align: center;
+        font-size: 17px;
+    }
+
+    .promo {
+        font-weight: bold;
+        font-family: "Trebuchet MS", Helvetica, sans-serif;
+    }
+
+    .price {
+        font-family: "Trebuchet MS", Helvetica, sans-serif;
+        border: 1px solid pink;
+        padding: 5px 5px;
+        border-radius: 22px;
+    }
+
+    .name {
+        height: 35px;
+        text-align: center;
+        font-style: italic;
+    }
+
+    .image {
+        height: 220px;
+        text-align: center;
+    }
+
+    .container {
+        width: 140px;
+        float: left;
+        margin-left: 5px;
+    }
+
+    hr {
+        width: 75%;
+        float: left;
+    }
+</style>
\ No newline at end of file
diff --git a/ribbon/verticalribbon/main.js b/ribbon/verticalribbon/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/ribbon/verticalribbon/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/ribbon/verticalribbon/package.json b/ribbon/verticalribbon/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/ribbon/verticalribbon/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/ribbon/verticalrightposition/App.vue b/ribbon/verticalrightposition/App.vue
new file mode 100644
index 00000000..4e3f2ea4
--- /dev/null
+++ b/ribbon/verticalrightposition/App.vue
@@ -0,0 +1,460 @@
+<template>
+    <div>
+        <JqxRibbon ref="myRibbon"
+            :width="getWidth" :height="335" :position="'right'"
+            :selectionMode="'hover'" :animationType="'fade'">
+            <ul id="header" style="width: 115px;">
+                <li>TV and Players</li>
+                <li>Cell phones</li>
+                <li>Cameras</li>
+                <li>Computers</li>
+            </ul>
+            <div>
+                <div>
+                    <div class="container">
+                        <table>
+                            <tr>
+                                <td class="list">
+                                    <b><a href="#">TV</a></b>
+                                </td>
+                            </tr>
+                            <tr></tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">LED</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">LCD</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">Plasma</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <hr />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <b><a href="#">PLAYERS</a></b>
+                                </td>
+                            </tr>
+                            <tr></tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">DVD</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">Blu-Ray</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">CD</a>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                    <div class="container">
+                        <table>
+                            <tr>
+                                <td class="promo">
+                                    PROMO
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="image">
+                                    <img src="../../../images/tv.png" />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="name">
+                                    <a href="#">LG 22MN43D-PZ</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="price">
+                                    Price: $1583
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+                <div>
+                    <div class="container">
+                        <table>
+                            <tr>
+                                <td class="list">
+                                    <b><a href="#">PHONES</a></b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Brand</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Display size</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <hr />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <b><a href="#">SMARTPHONES</a></b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Brand</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By OS</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Display size</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By CPU</a>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                    <div class="container">
+                        <table>
+                            <tr>
+                                <td class="promo">
+                                    PROMO
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="image">
+                                    <img src="../../../images/Samsung-Galaxy-S4.png" />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="name">
+                                    <a href="#">Samsung I9505 Galaxy S4</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="price">
+                                    Price: $569
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+                <div>
+                    <div class="container">
+                        <table>
+                            <tr>
+                                <td class="list">
+                                    <b>
+                                        <a href="#">
+                                            DIGITAL<br />
+                                            CAMERAS
+                                        </a>
+                                    </b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">Hybrid</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">Compact</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">Digital SLR</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <hr />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <b><a href="#">CAMCORDERS</a></b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">FLASH</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">HDD</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">HD Flash</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">HD HDD</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">HD Extreme</a>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                    <div class="container">
+                        <table>
+                            <tr>
+                                <td class="promo">
+                                    PROMO
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="image">
+                                    <img src="../../../images/camera.png" />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="name">
+                                    <a href="#">Nikon COOLPIX L330</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="price">
+                                    Price: $358
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+                <div>
+                    <div class="container">
+                        <table>
+                            <tr>
+                                <td class="list">
+                                    <b><a href="#">LAPTOPS</a></b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Processor Type</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By RAM Capacity</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By HDD Capacity</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Display Size</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Brand</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <hr />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <b><a href="#">DESKTOPS</a></b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Processor Type</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By RAM Capacity</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By HDD Capacity</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Brand</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <hr />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <b><a href="#">ALL-IN-ONE</a></b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="list">
+                                    <a href="#">By Brand</a>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                    <div class="container">
+                        <table>
+                            <tr>
+                                <td class="promo">
+                                    PROMO
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="image">
+                                    <img src="../../../images/l-25.jpg" style="width: 140px; height: 105px;" />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="name">
+                                    <a href="#">Toshiba Qosmio X70-A-114</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="price">
+                                    Price: $2199
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </JqxRibbon>
+
+        <JqxCheckBox style="margin-top: 50px;" @change="change($event)">
+            Menu Mode
+        </JqxCheckBox>
+    </div>
+</template>
+
+<script>
+    import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+
+    export default {
+        components: {
+            JqxRibbon,
+            JqxCheckBox
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('ribbon')
+            }
+        },
+        methods: {
+            change: function (event) {
+                const myRibbon = this.$refs.myRibbon;
+                const checked = event.args.checked;
+                const mode = checked ? 'popup' : 'default';
+                const width = checked ? 115 : 425;
+
+                myRibbon.setOptions({ mode: mode });
+
+                if (mode == 'popup') {
+                    myRibbon.setPopupLayout(0, 'default', 310, '100%');
+                    myRibbon.setPopupLayout(1, 'default', 310, '100%');
+                    myRibbon.setPopupLayout(2, 'default', 310, '100%');
+                    myRibbon.setPopupLayout(3, 'default', 310, '100%');
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    a:hover {
+        color: #DC1F26;
+    }
+
+    table {
+        border-collapse: separate;
+        border-spacing: 0px 3px;
+        width: 142px;
+    }
+
+    .promo, .price {
+        height: 25px;
+        background-color: #DC1F26;
+        color: White;
+        text-align: center;
+        font-size: 17px;
+    }
+
+    .promo {
+        font-weight: bold;
+        font-family: "Trebuchet MS", Helvetica, sans-serif;
+    }
+
+    .price {
+        font-family: "Trebuchet MS", Helvetica, sans-serif;
+        border: 1px solid pink;
+        padding: 5px 5px;
+        border-radius: 22px;
+    }
+
+    .name {
+        height: 35px;
+        text-align: center;
+        font-style: italic;
+    }
+
+    .image {
+        height: 220px;
+        text-align: center;
+    }
+
+    .container {
+        width: 140px;
+        float: left;
+        margin-left: 5px;
+    }
+
+    hr {
+        width: 75%;
+        float: left;
+    }
+</style>
\ No newline at end of file
diff --git a/ribbon/verticalrightposition/main.js b/ribbon/verticalrightposition/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/ribbon/verticalrightposition/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/ribbon/verticalrightposition/package.json b/ribbon/verticalrightposition/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/ribbon/verticalrightposition/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/agendaview/App.vue b/scheduler/agendaview/App.vue
new file mode 100644
index 00000000..1584e81c
--- /dev/null
+++ b/scheduler/agendaview/App.vue
@@ -0,0 +1,134 @@
+<template>
+    <JqxScheduler ref='myScheduler'
+        :width='getWidth' :height='600' :source='dataAdapter' :date='date' :showLegend='true' :view='"agendaView"'
+        :appointmentDataFields='appointmentDataFields' :resources='resources' :views='views' :dayNameFormat='"abbr"'
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'location',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources:
+                {
+                    colorScheme: 'scheme05',
+                    dataField: 'calendar',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [
+                    'dayView',
+                    'weekView',
+                    'monthView',
+                    'agendaView'
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const generateAppointments =  function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: 'George brings projector for presentations.',
+                    location: '',
+                    subject: 'Quarterly Project Review Meeting',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 23, 9, 0, 0),
+                    end: new Date(2016, 10, 23, 16, 0, 0)
+                };
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'IT Group Mtg.',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 24, 10, 0, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                };
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Course Social Media',
+                    calendar: 'Room 3',
+                    start: new Date(2016, 10, 27, 11, 0, 0),
+                    end: new Date(2016, 10, 27, 13, 0, 0)
+                };
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'New Projects Planning',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 23, 16, 0, 0),
+                    end: new Date(2016, 10, 23, 18, 0, 0)
+                };
+                const appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with James',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 25, 15, 0, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                };
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with Nancy',
+                    calendar: 'Room 4',
+                    start: new Date(2016, 10, 26, 14, 0, 0),
+                    end: new Date(2016, 10, 26, 16, 0, 0)
+                };
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            }
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/agendaview/main.js b/scheduler/agendaview/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/agendaview/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/agendaview/package.json b/scheduler/agendaview/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/agendaview/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/appointmentcustomization/App.vue b/scheduler/appointmentcustomization/App.vue
new file mode 100644
index 00000000..a0749680
--- /dev/null
+++ b/scheduler/appointmentcustomization/App.vue
@@ -0,0 +1,177 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date"  :view="'weekView'" :appointmentsMinHeight="20"
+        :appointmentDataFields="appointmentDataFields" :views="views"  :renderAppointment="renderAppointment" 
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'location',
+                    subject: 'subject',
+                    style: 'style',
+                    color: 'color',
+                    background: 'background',
+                    borderColor: 'borderColor'
+                },
+                views:
+                [
+                    'dayView',
+                    'weekView',
+                    'monthView'
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const generateAppointments =  function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: 'Quarterly Project Review Meeting',
+                    location: '',
+                    subject: 'Nancy',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 23, 9, 0, 0),
+                    end: new Date(2016, 10, 23, 16, 0, 0)
+                }
+                const appointment2 = {
+                    id: 'id2',
+                    description: 'IT Group Mtg.',
+                    location: '',
+                    subject: 'John',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 24, 10, 0, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                }
+                const appointment3 = {
+                    id: 'id3',
+                    description: 'Course Social Media',
+                    location: '',
+                    subject: 'Antony',
+                    calendar: 'Room 3',
+                    start: new Date(2016, 10, 27, 11, 0, 0),
+                    end: new Date(2016, 10, 27, 13, 0, 0)
+                }
+                const appointment4 = {
+                    id: 'id4',
+                    description: 'New Projects Planning',
+                    location: '',
+                    subject: 'Michael',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 23, 16, 0, 0),
+                    end: new Date(2016, 10, 23, 18, 0, 0)
+                }
+                const appointment5 = {
+                    id: 'id5',
+                    description: 'Interview with James',
+                    location: '',
+                    subject: 'Peter',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 25, 15, 0, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                }
+                const appointment6 = {
+                    id: 'id6',
+                    description: 'Interview with Nancy',
+                    location: '',
+                    subject: 'George',
+                    calendar: 'Room 4',
+                    start: new Date(2016, 10, 26, 14, 0, 0),
+                    end: new Date(2016, 10, 26, 16, 0, 0)
+                }
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            }
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'style', type: 'string' },
+                        { name: 'color', type: 'string' },
+                        { name: 'background', type: 'string' },
+                        { name: 'borderColor', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+        },
+        methods: {
+            renderAppointment: function (data) {
+                // data Object properties
+                // appointment - Object with the properties from the Scheduler.s source object.
+                // width - int
+                // height- int
+                // textColor - hex
+                // background - hex
+                // borderColor - hex
+                // style - string
+                // cssClass - string
+                // html - html string
+                // view - string
+                let img = '<img style="top: 2px; position: relative;" src="../../../images/person.png"/>';
+                if (data.appointment.subject == 'Nancy') {
+                    img = '<img style="top: 2px; position: relative;" src="../../../images/woman.png"/>';
+                }
+                else if (data.appointment.subject == 'Peter') {
+                    img = '<img style="top: 2px; position: relative;" src="../../../images/boss.png"/>';
+                }
+                else if (data.appointment.subject == 'Antony') {
+                    img = '<img style="top: 2px; position: relative;" src="../../../images/oldboss.png"/>';
+                }
+                else if (data.appointment.subject == 'John') {
+                    img = '<img style="top: 2px; position: relative;" src="../../../images/asian.png"/>';
+                }
+
+                if (data.view == 'weekView' || data.view == 'dayView' || data.view == 'monthView') {
+                    data.html = img + '<i>' + data.appointment.subject + '</i>';
+                    if (data.appointment.id == 'id1') {
+                        data.style = '#AA4643';
+                    }
+                    else if (data.appointment.id == 'id2' || data.appointment.id == 'id6') {
+                        data.style = '#309B46';
+                    }
+                    else if (data.appointment.id == 'id3') {
+                        data.style = '#447F6E';
+                    }
+                }
+
+                return data;
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/appointmentcustomization/main.js b/scheduler/appointmentcustomization/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/appointmentcustomization/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/appointmentcustomization/package.json b/scheduler/appointmentcustomization/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/appointmentcustomization/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/appointmentrestrictions/App.vue b/scheduler/appointmentrestrictions/App.vue
new file mode 100644
index 00000000..4c04abb3
--- /dev/null
+++ b/scheduler/appointmentrestrictions/App.vue
@@ -0,0 +1,158 @@
+<template>
+    <div>
+        <JqxScheduler ref="myScheduler"
+            :width="getWidth" :height="600" :source="dataAdapter" :date="date" :showLegend="true" :view="'monthView'"
+            :appointmentDataFields="appointmentDataFields" :resources="resources" :views="views" 
+        />
+
+        <br />
+
+        <JqxButton @click="click()" :width="120">Show Hidden Appointments</JqxButton>
+    </div>
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxScheduler,
+            JqxButton
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'place',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources:
+                {
+                    colorScheme: 'scheme05',
+                    dataField: 'calendar',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [
+                    'dayView',
+                    'weekView',
+                    'monthView'
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const generateAppointments =  function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: 'George brings projector for presentations.',
+                    location: '',
+                    subject: 'Resize is disabled',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 23, 9, 0, 0),
+                    end: new Date(2016, 10, 23, 16, 0, 0)
+                }
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'Drag is disabled',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 24, 10, 0, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                }
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Drag and Resize are disabled',
+                    calendar: 'Room 3',
+                    start: new Date(2016, 10, 27, 11, 0, 0),
+                    end: new Date(2016, 10, 27, 13, 0, 0)
+                }
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'Edit with Dialog is disabled',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 23, 16, 0, 0),
+                    end: new Date(2016, 10, 23, 18, 0, 0)
+                }
+                const appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Peter',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 25, 15, 0, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                }
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Nancy',
+                    calendar: 'Room 4',
+                    start: new Date(2016, 10, 26, 14, 0, 0),
+                    end: new Date(2016, 10, 26, 16, 0, 0)
+                }
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            }
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+            this.$refs.myScheduler.beginAppointmentsUpdate();
+            this.$refs.myScheduler.setAppointmentProperty('id1', 'resizable', false);
+            this.$refs.myScheduler.setAppointmentProperty('id2', 'draggable', false);
+            this.$refs.myScheduler.setAppointmentProperty('id3', 'resizable', false);
+            this.$refs.myScheduler.setAppointmentProperty('id3', 'draggable', false);
+            this.$refs.myScheduler.setAppointmentProperty('id4', 'readOnly', true);
+            this.$refs.myScheduler.setAppointmentProperty('id5', 'hidden', true);
+            this.$refs.myScheduler.setAppointmentProperty('id6', 'hidden', true);
+            this.$refs.myScheduler.endAppointmentsUpdate();
+        },
+        methods: {
+            click: function () {
+                this.$refs.myScheduler.beginAppointmentsUpdate();
+                this.$refs.myScheduler.setAppointmentProperty('id5', 'hidden', false);
+                this.$refs.myScheduler.setAppointmentProperty('id6', 'hidden', false);
+                this.$refs.myScheduler.endAppointmentsUpdate();
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/appointmentrestrictions/main.js b/scheduler/appointmentrestrictions/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/appointmentrestrictions/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/appointmentrestrictions/package.json b/scheduler/appointmentrestrictions/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/appointmentrestrictions/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/appointmentsexacttimerendering/App.vue b/scheduler/appointmentsexacttimerendering/App.vue
new file mode 100644
index 00000000..308486ed
--- /dev/null
+++ b/scheduler/appointmentsexacttimerendering/App.vue
@@ -0,0 +1,133 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date"  :view="'weekView'" :showLegend="true"
+        :appointmentDataFields="appointmentDataFields" :views="views"  :resources="resources" 
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'place',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources:
+                {
+                    colorScheme: 'scheme05',
+                    dataField: 'calendar',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [
+                    { type: 'dayView', appointmentsRenderMode: 'exactTime' },
+                    { type: 'weekView', appointmentsRenderMode: 'exactTime' },
+                    { type: 'monthView', appointmentsRenderMode: 'exactTime' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const generateAppointments =  function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: 'George brings projector for presentations.',
+                    location: '',
+                    subject: 'Quarterly Project Review Meeting',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 23, 9, 15, 0),
+                    end: new Date(2016, 10, 23, 16, 0, 0)
+                }
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'IT Group Mtg.',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 24, 10, 45, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                }
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Course Social Media',
+                    calendar: 'Room 3',
+                    start: new Date(2016, 10, 27, 11, 30, 0),
+                    end: new Date(2016, 10, 27, 13, 0, 0)
+                }
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'New Projects Planning',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 23, 16, 15, 0),
+                    end: new Date(2016, 10, 26, 18, 0, 0)
+                }
+                const appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with James',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 25, 15, 45, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                }
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with Nancy',
+                    calendar: 'Room 4',
+                    start: new Date(2016, 10, 26, 14, 30, 0),
+                    end: new Date(2016, 10, 26, 16, 0, 0)
+                }
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            }
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');    
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/appointmentsexacttimerendering/main.js b/scheduler/appointmentsexacttimerendering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/appointmentsexacttimerendering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/appointmentsexacttimerendering/package.json b/scheduler/appointmentsexacttimerendering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/appointmentsexacttimerendering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/appointmentstatuses/App.vue b/scheduler/appointmentstatuses/App.vue
new file mode 100644
index 00000000..832f644a
--- /dev/null
+++ b/scheduler/appointmentstatuses/App.vue
@@ -0,0 +1,141 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date" :showLegend="true" :view="1"
+        :appointmentDataFields="appointmentDataFields" :resources="resources" :views="views" 
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    status: 'status',
+                    description: 'description',
+                    location: 'place',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources:
+                {
+                    colorScheme: 'scheme05',
+                    dataField: 'calendar',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [
+                    'dayView',
+                    'weekView',
+                    'monthView'
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const generateAppointments =  function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: '',
+                    location: '',
+                    subject: 'Appointment with the dentist',
+                    status: 'tentative',
+                    calendar: 'Paula',
+                    start: new Date(2016, 10, 23, 9, 0, 0),
+                    end: new Date(2016, 10, 23, 11, 0, 0)
+                };
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'Business Plans Review',
+                    calendar: 'Tom',
+                    status: 'tentative',
+                    start: new Date(2016, 10, 24, 10, 0, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                };
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Lunch with Monica',
+                    status: 'tentative',
+                    calendar: 'Chris',
+                    start: new Date(2016, 10, 27, 11, 0, 0),
+                    end: new Date(2016, 10, 27, 13, 0, 0)
+                };
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'Meeting John',
+                    status: 'free',
+                    calendar: 'Paula',
+                    start: new Date(2016, 10, 23, 16, 0, 0),
+                    end: new Date(2016, 10, 23, 18, 0, 0)
+                };
+                const appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Parent-Teacher Conference',
+                    status: 'outOfOffice',
+                    calendar: 'Chris',
+                    start: new Date(2016, 10, 25, 15, 0, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                };
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with Nancy',
+                    status: 'busy',
+                    calendar: 'Tom',
+                    start: new Date(2016, 10, 26, 14, 0, 0),
+                    end: new Date(2016, 10, 26, 16, 0, 0)
+                };
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            }
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'status', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/appointmentstatuses/main.js b/scheduler/appointmentstatuses/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/appointmentstatuses/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/appointmentstatuses/package.json b/scheduler/appointmentstatuses/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/appointmentstatuses/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/bindingtoicalendar/App.vue b/scheduler/bindingtoicalendar/App.vue
new file mode 100644
index 00000000..aa3b3833
--- /dev/null
+++ b/scheduler/bindingtoicalendar/App.vue
@@ -0,0 +1,54 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date" :showLegend="true" :ready="ready"
+         :view="'weekView'" :appointmentDataFields="appointmentDataFields" :views="views" 
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'DTSTART',
+                    to: 'DTEND',
+                    id: 'UID',
+                    description: 'DESCRIPTION',
+                    location: 'LOCATION',
+                    subject: 'SUMMARY',
+                    recurrencePattern: 'RRULE',
+                    recurrenceException: 'EXDATE',
+                    status: 'STATUS'
+                },
+                views:
+                [
+                    'dayView',
+                    'weekView',
+                    'monthView'
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    dataType: 'ics',
+                    url: '../sampledata/icalendar.txt'
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myScheduler.scrollTop(200);
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/bindingtoicalendar/main.js b/scheduler/bindingtoicalendar/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/bindingtoicalendar/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/bindingtoicalendar/package.json b/scheduler/bindingtoicalendar/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/bindingtoicalendar/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/bindingtojson/App.vue b/scheduler/bindingtojson/App.vue
new file mode 100644
index 00000000..09556586
--- /dev/null
+++ b/scheduler/bindingtojson/App.vue
@@ -0,0 +1,61 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date" :showLegend="true"
+         :view="'weekView'" :appointmentDataFields="appointmentDataFields" :views="views" 
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'about',
+                    location: 'address',
+                    subject: 'name',
+                    style: 'style',
+                    status: 'status'
+                },
+                views:
+                [
+                    'dayView',
+                    'weekView',
+                    'monthView'
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    dataType: 'json',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'status', type: 'string' },
+                        { name: 'about', type: 'string' },
+                        { name: 'address', type: 'string' },
+                        { name: 'company', type: 'string' },
+                        { name: 'name', type: 'string' },
+                        { name: 'style', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
+                        { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
+                    ],
+                    id: 'id',
+                    url: '../sampledata/appointments.txt'
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/bindingtojson/main.js b/scheduler/bindingtojson/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/bindingtojson/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/bindingtojson/package.json b/scheduler/bindingtojson/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/bindingtojson/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/contextmenu/App.vue b/scheduler/contextmenu/App.vue
new file mode 100644
index 00000000..69c8d89c
--- /dev/null
+++ b/scheduler/contextmenu/App.vue
@@ -0,0 +1,206 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date"  :showLegend="true" :view="'1'"
+        :appointmentDataFields="appointmentDataFields" :views="views" :resources="resources" 
+        :contextMenuCreate="contextMenuCreate" :contextMenuItemClick="contextMenuItemClick" 
+        :contextMenuOpen="contextMenuOpen" :contextMenuClose="contextMenuClose" 
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'place',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources: 
+                {
+                    colorScheme: 'scheme02',
+                    dataField: 'calendar',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [        
+                    'dayView',
+                    'weekView',
+                    'monthView'
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const generateAppointments = function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: 'George brings projector for presentations.',
+                    location: '',
+                    subject: 'Quarterly Project Review Meeting',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 23, 9, 0, 0),
+                    end: new Date(2016, 10, 23, 16, 0, 0)
+                }
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'IT Group Mtg.',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 24, 10, 0, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                }
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Course Social Media',
+                    calendar: 'Room 3',
+                    start: new Date(2016, 10, 27, 11, 0, 0),
+                    end: new Date(2016, 10, 27, 13, 0, 0)
+                }
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'New Projects Planning',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 23, 16, 0, 0),
+                    end: new Date(2016, 10, 23, 18, 0, 0)
+                }
+                const appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with James',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 25, 15, 0, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                }
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with Nancy',
+                    calendar: 'Room 4',
+                    start: new Date(2016, 10, 26, 14, 0, 0),
+                    end: new Date(2016, 10, 26, 16, 0, 0)
+                }
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            };
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+        },
+        methods: {
+            /*
+            * called when the context menu is created.
+            * @param {Object} menu - jqxMenu's jQuery object.
+            * @param {Object} settings - Object with the menu's initialization settings.
+            */
+            contextMenuCreate : function (menu, settings) {
+                const source = settings.source;
+                source.push({ id: 'delete', label: 'Delete Appointment' });
+                source.push({
+                    id: 'status', label: 'Set Status', items:
+                    [
+                        { label: 'Free', id: 'free' },
+                        { label: 'Out of Office', id: 'outOfOffice' },
+                        { label: 'Tentative', id: 'tentative' },
+                        { label: 'Busy', id: 'busy' }
+                    ]
+                });
+            },
+            /*
+            * called when the user clicks an item in the Context Menu. Returning true as a result disables the built-in Click handler.
+            * @param {Object} menu - jqxMenu's jQuery object.
+            * @param {Object} the selected appointment instance or NULL when the menu is opened from cells selection.
+            * @param {jQuery.Event Object} the jqxMenu's itemclick event object.
+            */
+            contextMenuItemClick: function (menu, appointment, event) {
+                const args = event.args;
+                switch (args.id) {
+                    case 'delete':
+                        this.$refs.myScheduler.deleteAppointment(appointment.id);
+                        return true;
+                    case 'free':
+                        this.$refs.myScheduler.setAppointmentProperty(appointment.id, 'status', 'free');
+                        return true;
+                    case 'outOfOffice':
+                        this.$refs.myScheduler.setAppointmentProperty(appointment.id, 'status', 'outOfOffice');
+                        return true;
+                    case 'tentative':
+                        this.$refs.myScheduler.setAppointmentProperty(appointment.id, 'status', 'tentative');
+                        return true;
+                    case 'busy':
+                        this.$refs.myScheduler.setAppointmentProperty(appointment.id, 'status', 'busy');
+                        return true;
+                }
+            },
+            /*
+            * called when the menu is opened.
+            * @param {Object} menu - jqxMenu's jQuery object.
+            * @param {Object} the selected appointment instance or NULL when the menu is opened from cells selection.
+            * @param {jQuery.Event Object} the open event.
+            */
+            contextMenuOpen: function (menu, appointment, event) {
+                if (!appointment) {
+                    menu.jqxMenu('hideItem', 'delete');
+                    menu.jqxMenu('hideItem', 'status');
+                }
+                else {
+                    menu.jqxMenu('showItem', 'delete');
+                    menu.jqxMenu('showItem', 'status');
+                }
+            },
+            /*
+            * called when the menu is closed.
+            * @param {Object} menu - jqxMenu's jQuery object.
+            * @param {Object} the selected appointment instance or NULL when the menu is opened from cells selection.
+            * @param {jQuery.Event Object} the close event.
+            */
+            contextMenuClose : function (menu, settings) {
+
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/contextmenu/main.js b/scheduler/contextmenu/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/contextmenu/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/contextmenu/package.json b/scheduler/contextmenu/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/contextmenu/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/dataexport/App.vue b/scheduler/dataexport/App.vue
new file mode 100644
index 00000000..f05ae40b
--- /dev/null
+++ b/scheduler/dataexport/App.vue
@@ -0,0 +1,186 @@
+<template>
+    <div>
+        <JqxScheduler ref="myScheduler"
+            :width="getWidth" :height="600" :source="dataAdapter" :date="date" :view="'weekView'" :resources="resources"
+            :appointmentDataFields="appointmentDataFields" :views="views" :showLegend="true"
+         />
+
+        <div class="container">
+            <div>
+                <JqxButton ref="excelExport" @click="excelExportClick()" :width="120">Export to Excel</JqxButton>
+                <JqxButton ref="xmlExport" @click="xmlExportClick()" :width="120">Export to XML</JqxButton>
+                <JqxButton ref="csvExport" @click="csvExportClick()" :width="120">Export to CSV</JqxButton>
+                <JqxButton ref="tsvExport" @click="tsvExportClick()" :width="120">Export to TSV</JqxButton>
+            </div>
+            <div>
+                <JqxButton ref="htmlExport" @click="htmlExportClick()" :width="120">Export to HTML</JqxButton>
+                <JqxButton ref="jsonExport" @click="jsonExportClick()" :width="120">Export to JSON</JqxButton>
+                <JqxButton ref="pdfExport" @click="pdfExportClick()" :width="120">Export to PDF</JqxButton>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxScheduler,
+            JqxButton
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'place',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources: 
+                {
+                    colorScheme: 'scheme05',
+                    dataField: 'calendar',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [        
+                    'dayView',
+                    'weekView',
+                    'monthView'
+                ]
+            }
+        },
+        beforeCreate: function () { 
+            const generateAppointments = function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: 'George brings projector for presentations.',
+                    location: '',
+                    subject: 'Quarterly Project Review Meeting',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 23, 9, 0, 0),
+                    end: new Date(2016, 10, 23, 16, 0, 0)
+                }
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'IT Group Mtg.',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 24, 10, 0, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                }
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Course Social Media',
+                    calendar: 'Room 3',
+                    start: new Date(2016, 10, 27, 11, 0, 0),
+                    end: new Date(2016, 10, 27, 13, 0, 0)
+                }
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'New Projects Planning',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 23, 16, 0, 0),
+                    end: new Date(2016, 10, 23, 18, 0, 0)
+                }
+                const appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with James',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 25, 15, 0, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                }
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with Nancy',
+                    calendar: 'Room 4',
+                    start: new Date(2016, 10, 26, 14, 0, 0),
+                    end: new Date(2016, 10, 26, 16, 0, 0)
+                }
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            };
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+        },
+        methods: {
+            excelExportClick: function () {
+                this.$refs.myScheduler.exportData('xls');
+            },
+            xmlExportClick: function () {
+                this.$refs.myScheduler.exportData('xml');
+            },
+            csvExportClick: function () {
+                this.$refs.myScheduler.exportData('csv');
+            },
+            tsvExportClick: function () {
+                this.$refs.myScheduler.exportData('tsv');
+            },
+            htmlExportClick: function () {
+                this.$refs.myScheduler.exportData('html');
+            },
+            jsonExportClick: function () {
+                this.$refs.myScheduler.exportData('json');
+            },
+            pdfExportClick: function () {
+                this.$refs.myScheduler.exportData('pdf');
+            }
+        }      
+    }
+</script>
+
+<style>
+    .container {
+        margin-top: 20px;
+    }
+
+    .jqx-button {
+        margin-right: 10px;
+        margin-bottom: 10px;
+        display: inline-block;
+    }
+</style>
\ No newline at end of file
diff --git a/scheduler/dataexport/main.js b/scheduler/dataexport/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/dataexport/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/dataexport/package.json b/scheduler/dataexport/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/dataexport/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/dataprinting/App.vue b/scheduler/dataprinting/App.vue
new file mode 100644
index 00000000..d17ea1f0
--- /dev/null
+++ b/scheduler/dataprinting/App.vue
@@ -0,0 +1,167 @@
+<template>
+    <div>
+        <JqxScheduler ref="myScheduler"
+            :width="getWidth" :height="600" :source="dataAdapter" :date="date" :showLegend="true" :view="'weekView'"
+            :appointmentDataFields="appointmentDataFields" :views="views" :resources="resources" :exportSettings="exportSettings"
+         /> 
+
+        <br />
+
+        <JqxButton ref="myButton" @click="printClick()" :width="120">Print</JqxButton>
+    </div>
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue'
+
+    export default {
+        components: {
+            JqxScheduler,
+            JqxButton
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                exportSettings: {
+                    fileName: null
+                },
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'place',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources: 
+                {
+                    colorScheme: 'scheme05',
+                    dataField: 'calendar',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [        
+                    'dayView',
+                    'weekView',
+                    'monthView'
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const generateAppointments = function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: 'George brings projector for presentations.',
+                    location: '',
+                    subject: 'Quarterly Project Review Meeting',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 23, 9, 0, 0),
+                    end: new Date(2016, 10, 23, 16, 0, 0)
+                }
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'IT Group Mtg.',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 24, 10, 0, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                }
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Course Social Media',
+                    calendar: 'Room 3',
+                    start: new Date(2016, 10, 27, 11, 0, 0),
+                    end: new Date(2016, 10, 27, 13, 0, 0)
+                }
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'New Projects Planning',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 23, 16, 0, 0),
+                    end: new Date(2016, 10, 23, 18, 0, 0)
+                }
+                const appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with James',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 25, 15, 0, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                }
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with Nancy',
+                    calendar: 'Room 4',
+                    start: new Date(2016, 10, 26, 14, 0, 0),
+                    end: new Date(2016, 10, 26, 16, 0, 0)
+                }
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            };
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+        },
+        methods: {
+            printClick: function () {
+                const content = this.$refs.myScheduler.exportData('html');
+                const newWindow = window.open('', '', 'width=800, height=500'),
+                    document = newWindow.document.open(),
+                    pageContent =
+                        '<!DOCTYPE html>' +
+                        '<html>' +
+                        '<head>' +
+                        '<meta charset="utf-8" />' +
+                        '<title>jqxScheduler Print Preview</title>' +
+                        '        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>' +
+                        '<body>' + content + '</body></html>';
+                try {
+                    document.write(pageContent);
+                    document.close();
+                    newWindow.print();
+                }
+                catch (er) {
+                    document.close();
+                }
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/dataprinting/main.js b/scheduler/dataprinting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/dataprinting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/dataprinting/package.json b/scheduler/dataprinting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/dataprinting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/defaultfunctionality/App.vue b/scheduler/defaultfunctionality/App.vue
new file mode 100644
index 00000000..3b58c401
--- /dev/null
+++ b/scheduler/defaultfunctionality/App.vue
@@ -0,0 +1,133 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date" :showLegend="true" :view="'weekView'"
+        :appointmentDataFields="appointmentDataFields" :resources="resources" :views="views"
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'location',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources:
+                {
+                    colorScheme: 'scheme05',
+                    dataField: 'calendar',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [
+                    'dayView',
+                    'weekView',
+                    'monthView'
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const generateAppointments =  function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: 'George brings projector for presentations.',
+                    location: '',
+                    subject: 'Quarterly Project Review Meeting',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 23, 9, 0, 0),
+                    end: new Date(2016, 10, 23, 16, 0, 0)
+                };
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'IT Group Mtg.',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 24, 10, 0, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                };
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Course Social Media',
+                    calendar: 'Room 3',
+                    start: new Date(2016, 10, 27, 11, 0, 0),
+                    end: new Date(2016, 10, 27, 13, 0, 0)
+                };
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'New Projects Planning',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 23, 16, 0, 0),
+                    end: new Date(2016, 10, 23, 18, 0, 0)
+                };
+                const appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with James',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 25, 15, 0, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                };
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with Nancy',
+                    calendar: 'Room 4',
+                    start: new Date(2016, 10, 26, 14, 0, 0),
+                    end: new Date(2016, 10, 26, 16, 0, 0)
+                };
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            }
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/defaultfunctionality/main.js b/scheduler/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/defaultfunctionality/package.json b/scheduler/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/editdialog/App.vue b/scheduler/editdialog/App.vue
new file mode 100644
index 00000000..999d3b85
--- /dev/null
+++ b/scheduler/editdialog/App.vue
@@ -0,0 +1,262 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date"  :showLegend="true" :view="'monthView'"
+        :appointmentDataFields="appointmentDataFields" :views="views" :resources="resources" 
+        :editDialogCreate="editDialogCreate" :editDialogOpen="editDialogOpen" 
+        :editDialogClose="editDialogClose" :editDialogKeyDown="editDialogKeyDown" 
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                printButton: null,
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'place',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources: 
+                {
+                    colorScheme: 'scheme01',
+                    dataField: 'calendar',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [        
+                    'dayView',
+                    'weekView',
+                    'monthView'
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const generateAppointments = function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: 'George brings projector for presentations.',
+                    location: '',
+                    subject: 'Fashion Expo',
+                    calendar: 'East Coast Events',
+                    start: new Date(2016, 10, 15, 9, 0, 0),
+                    end: new Date(2016, 10, 18, 16, 0, 0)
+                }
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'Cloud Data Expo',
+                    calendar: 'Middle West Events',
+                    start: new Date(2016, 10, 20, 10, 0, 0),
+                    end: new Date(2016, 10, 22, 15, 0, 0)
+                }
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Digital Media Conference',
+                    calendar: 'West Coast Events',
+                    start: new Date(2016, 10, 23, 11, 0, 0),
+                    end: new Date(2016, 10, 28, 13, 0, 0)
+                }
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'Modern Software Development Conference',
+                    calendar: 'West Coast Events',
+                    start: new Date(2016, 10, 10, 16, 0, 0),
+                    end: new Date(2016, 10, 12, 18, 0, 0)
+                }
+                const appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Marketing Future Expo',
+                    calendar: 'Middle West Events',
+                    start: new Date(2016, 10, 5, 15, 0, 0),
+                    end: new Date(2016, 10, 6, 17, 0, 0)
+                }
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Future Computing',
+                    calendar: 'East Coast Events',
+                    start: new Date(2016, 10, 13, 14, 0, 0),
+                    end: new Date(2016, 10, 20, 16, 0, 0)
+                }
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            };
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+        },
+        methods: {
+            // called when the dialog is craeted.
+            editDialogCreate: function (dialog, fields, editAppointment) {
+                // hide repeat option
+                fields.repeatContainer.hide();
+                // hide status option
+                fields.statusContainer.hide();
+                // hide timeZone option
+                fields.timeZoneContainer.hide();
+                // hide color option
+                fields.colorContainer.hide();
+                fields.subjectLabel.html('Title');
+                fields.locationLabel.html('Where');
+                fields.fromLabel.html('Start');
+                fields.toLabel.html('End');
+                fields.resourceLabel.html('Calendar');
+
+                const buttonElement = document.createElement('BUTTON');
+                buttonElement.innerText = 'Print';
+                buttonElement.style.cssFloat = 'right';
+                buttonElement.style.marginLeft = '5px';
+                buttonElement.id = 'PrintButton';
+
+                fields.buttons[0].appendChild(buttonElement);
+
+                this.printButton = jqwidgets.createInstance('#PrintButton', 'jqxButton', {
+                    width: 50,
+                    height: 25
+                });
+
+                this.printButton.addEventHandler('click', function () {
+                    const appointment = editAppointment;
+                    if (!appointment && printButton.disabled) {
+                        return;
+                    }
+
+                    const appointmentContent =
+                        '<table class="printTable">' +
+                        '<tr>' +
+                        '<td class="label">Title</td>' +
+                        '<td>' + fields.subject.val() + '</td>' +
+                        '</tr>' +
+                        '<tr>' +
+                        '<td class="label">Start</td>' +
+                        '<td>' + fields.from.val() + '</td>' +
+                        '</tr>' +
+                        '<tr>' +
+                        '<td class="label">End</td>' +
+                        '<td>' + fields.to.val() + '</td>' +
+                        '</tr>' +
+                        '<tr>' +
+                        '<td class="label">Where</td>' +
+                        '<td>' + fields.location.val() + '</td>' +
+                        '</tr>' +
+                        '<tr>' +
+                        '<td class="label">Calendar</td>' +
+                        '<td>' + fields.resource.val() + '</td>' +
+                        '</tr>'
+                        + '</table>';
+
+                    const newWindow = window.open('', '', 'width=800, height=500'),
+                        document = newWindow.document.open(),
+                        pageContent =
+                            '<!DOCTYPE html>\n' +
+                            '<html>\n' +
+                            '<head>\n' +
+                            '<meta charset="utf-8" />\n' +
+                            '<title>jQWidgets Scheduler</title>\n' +
+                            '<style>\n' +
+                            '.printTable {\n' +
+                            'border-color: #aaa;\n' +
+                            '}\n' +
+                            '.printTable .label {\n' +
+                            'font-weight: bold;\n' +
+                            '}\n' +
+                            '.printTable td{\n' +
+                            'padding: 4px 3px;\n' +
+                            'border: 1px solid #DDD;\n' +
+                            'vertical-align: top;\n' +
+                            '}\n' +
+                            '</style>' +
+                            '        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>\n' +
+                            '<body>\n' + appointmentContent + '\n</body>\n</html>';
+                    try {
+                        document.write(pageContent);
+                        document.close();
+                    }
+                    catch (error) {
+                    }
+                    newWindow.print();
+                });
+            },
+            /*
+            * called when the dialog is opened. Returning true as a result disables the built-in handler.
+            * @param {Object} dialog - jqxWindow's jQuery object.
+            * @param {Object} fields - Object with all widgets inside the dialog.
+            * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.
+            */
+            editDialogOpen: function (dialog, fields, editAppointment) {
+                if (!editAppointment && this.printButton) {
+                    this.printButton.disabled = true;
+                }
+                else if (editAppointment && this.printButton) {
+                    this.printButton.disabled = false;
+                }
+            },
+            /*
+            * called when the dialog is closed.
+            * @param {Object} dialog - jqxWindow's jQuery object.
+            * @param {Object} fields - Object with all widgets inside the dialog.
+            * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.
+            */
+            editDialogClose: function (dialog, fields, editAppointment) {
+
+            },
+            /*
+            * called when a key is pressed while the dialog is on focus. Returning true or false as a result disables the built-in keyDown handler.
+            * @param {Object} dialog - jqxWindow's jQuery object.
+            * @param {Object} fields - Object with all widgets inside the dialog.
+            * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.
+            * @param {jQuery.Event Object} the keyDown event.
+            */
+            editDialogKeyDown: function (dialog, fields, editAppointment, event) {
+
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/editdialog/main.js b/scheduler/editdialog/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/editdialog/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/editdialog/package.json b/scheduler/editdialog/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/editdialog/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/events/App.vue b/scheduler/events/App.vue
new file mode 100644
index 00000000..cde8e752
--- /dev/null
+++ b/scheduler/events/App.vue
@@ -0,0 +1,96 @@
+<template>
+    <div>
+        <JqxScheduler ref="myScheduler"
+                      @appointmentDelete="mySchedulerOnAppointmentDelete($event)"
+                      @appointmentAdd="mySchedulerOnAppointmentAdd($event)"
+                      @appointmentDoubleClick="mySchedulerOnAppointmentDoubleClick($event)"
+                      @appointmentChange="mySchedulerOnAppointmentChange($event)"
+                      @cellClick="mySchedulerOnCellClick($event)"
+                      :width="getWidth" :height="600" :source="dataAdapter" :date="date" :view="'weekView'" :rowsHeight="40"
+                      :appointmentDataFields="appointmentDataFields" :views="views" :ready="ready" />
+
+        <br />
+
+        <div>Event Log:</div>
+        <div ref="myLog"></div>
+    </div>
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'about',
+                    location: 'address',
+                    subject: 'name',
+                    style: 'style',
+                    status: 'status'
+                },
+                views:
+                [        
+                    'dayView',
+                    'weekView'
+                ]
+            }
+        },
+        beforeCreate: function () { 
+            this.source =
+                {
+                    dataType: 'json',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'status', type: 'string' },
+                        { name: 'about', type: 'string' },
+                        { name: 'address', type: 'string' },
+                        { name: 'company', type: 'string' },
+                        { name: 'name', type: 'string' },
+                        { name: 'style', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
+                        { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
+                    ],
+                    id: 'id',
+                    url: '../sampledata/appointments.txt'
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myScheduler.scrollTop(600);
+            },
+            mySchedulerOnAppointmentAdd: function (event) {
+                const appointment = event.args.appointment;
+                this.$refs.myLog.innerHTML = 'appointmentDelete is raised';
+            },
+            mySchedulerOnAppointmentDelete: function (event) {
+                const appointment = event.args.appointment;
+                this.$refs.myLog.innerHTML = 'appointmentAdd is raised';
+            },
+            mySchedulerOnAppointmentDoubleClick: function (event) {
+                const appointment = event.args.appointment;
+                this.$refs.myLog.innerHTML = 'appointmentDoubleClick is raised';
+            },
+            mySchedulerOnAppointmentChange: function (event) {
+                const appointment = event.args.appointment;
+                this.$refs.myLog.innerHTML = 'appointmentChange is raised';
+            },
+            mySchedulerOnCellClick: function (event) {
+                const cell = event.args.cell;
+                this.$refs.myLog.innerHTML = 'cellClick is raised';
+            },
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/events/main.js b/scheduler/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/events/package.json b/scheduler/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/fluidsize/App.vue b/scheduler/fluidsize/App.vue
new file mode 100644
index 00000000..d19613c5
--- /dev/null
+++ b/scheduler/fluidsize/App.vue
@@ -0,0 +1,71 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="'100%'" :height="'100%'" :source="dataAdapter" :date="date" :view="'weekView'" 
+        :appointmentDataFields="appointmentDataFields" :views="views"
+    /> 
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'about',
+                    location: 'address',
+                    subject: 'name',
+                    style: 'style',
+                    status: 'status'
+                },
+                views:
+                [        
+                    'dayView',
+                    'weekView',
+                    'monthView'
+                ],
+
+            }
+        },
+        beforeCreate: function () {   
+            this.source =
+                {
+                    dataType: 'json',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'status', type: 'string' },
+                        { name: 'about', type: 'string' },
+                        { name: 'address', type: 'string' },
+                        { name: 'company', type: 'string' },
+                        { name: 'name', type: 'string' },
+                        { name: 'style', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
+                        { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
+                    ],
+                    id: 'id',
+                    url: '../sampledata/appointments.txt'
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+    }
+</style>
\ No newline at end of file
diff --git a/scheduler/fluidsize/main.js b/scheduler/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/fluidsize/package.json b/scheduler/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/hidetimeruler/App.vue b/scheduler/hidetimeruler/App.vue
new file mode 100644
index 00000000..15346020
--- /dev/null
+++ b/scheduler/hidetimeruler/App.vue
@@ -0,0 +1,65 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date"  :view="'weekView'"
+        :appointmentDataFields="appointmentDataFields" :views="views" :ready="ready" 
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'about',
+                    location: 'address',
+                    subject: 'name',
+                    style: 'style',
+                    status: 'status'
+                },
+                views:
+                [        
+                    { type: 'dayView', timeRuler: { hidden: true } },
+                    { type: 'weekView', timeRuler: { hidden: true } }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    dataType: 'json',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'status', type: 'string' },
+                        { name: 'about', type: 'string' },
+                        { name: 'address', type: 'string' },
+                        { name: 'company', type: 'string' },
+                        { name: 'name', type: 'string' },
+                        { name: 'style', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
+                        { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
+                    ],
+                    id: 'id',
+                    url: '../sampledata/appointments.txt'
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myScheduler.scrollTop(400);
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/hidetimeruler/main.js b/scheduler/hidetimeruler/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/hidetimeruler/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/hidetimeruler/package.json b/scheduler/hidetimeruler/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/hidetimeruler/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/hideweekends/App.vue b/scheduler/hideweekends/App.vue
new file mode 100644
index 00000000..2b24078a
--- /dev/null
+++ b/scheduler/hideweekends/App.vue
@@ -0,0 +1,66 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date"  :view="'weekView'"
+        :appointmentDataFields="appointmentDataFields" :views="views" :ready="ready" 
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'about',
+                    location: 'address',
+                    subject: 'name',
+                    style: 'style',
+                    status: 'status'
+                },
+                views:
+                [        
+                    { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
+                    { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
+                    { type: 'monthView', showWeekends: false }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    dataType: 'json',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'status', type: 'string' },
+                        { name: 'about', type: 'string' },
+                        { name: 'address', type: 'string' },
+                        { name: 'company', type: 'string' },
+                        { name: 'name', type: 'string' },
+                        { name: 'style', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
+                        { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
+                    ],
+                    id: 'id',
+                    url: '../sampledata/appointments.txt'
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myScheduler.scrollTop(400);
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/hideweekends/main.js b/scheduler/hideweekends/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/hideweekends/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/hideweekends/package.json b/scheduler/hideweekends/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/hideweekends/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/keyboardnavigation/App.vue b/scheduler/keyboardnavigation/App.vue
new file mode 100644
index 00000000..aedee200
--- /dev/null
+++ b/scheduler/keyboardnavigation/App.vue
@@ -0,0 +1,131 @@
+<template>
+    <div>
+        <JqxScheduler ref="myScheduler"
+            :width="getWidth" :height="600" :source="dataAdapter" :date="date" :view="'weekView'" 
+            :appointmentDataFields="appointmentDataFields" :views="views" :ready="ready" 
+        />
+
+        <br />
+
+        <div style="font-family: Verdana; font-size: 12px; width: 690px;">
+            <ul>
+                <li>
+                    <b>Left Arrow</b> key is pressed - Selects the left cell, when the Scheduler is focused.
+                    <ul>
+                        <li>
+                            Navigates to previous view when <b>Ctrl</b> key is pressed and appointment is not selected.
+                        </li>
+                        <li>Selected appointment is moved left when <b>Ctrl</b> key is pressed.</li>
+                        <li>Selected appointment is resized when <b>Shift</b> key is pressed and it is all day, timelineView or monthView appointment.</li>
+                        <li>Selects left cell and updates the cells selection when <b>Shift</b> key is pressed.</li>
+                    </ul>
+                </li>
+                <li>
+                    <b>Right Arrow</b> key is pressed - Selects the right cell, when the Scheduler is focused.
+                    <ul>
+                        <li>
+                            Navigates to next view when <b>Ctrl</b> key is pressed and appointment is not selected.
+                        </li>
+                        <li>Selected appointment is moved right when <b>Ctrl</b> key is pressed.</li>
+                        <li>Selected appointment is resized when <b>Shift</b> key is pressed and it is all day, timelineView or monthView appointment.</li>
+                        <li>Selects right cell and updates the cells selection when <b>Shift</b> key is pressed.</li>
+                    </ul>
+                </li>
+                <li>
+                    <b>Up Arrow</b> key is pressed - Selects the cell above, when the Scheduler is focused.
+                    <ul>
+                        <li>Moves to cell selection to the first row when <b>Ctrl</b> key is pressed and cell is selected.</li>
+                        <li>Selected appointment is moved above when <b>Ctrl</b> key is pressed.</li>
+                        <li>Selected appointment is resized when <b>Shift</b> key is pressed and it is dayView or weekView appointment.</li>
+                        <li>Selects the above cell and updates the cells selection when <b>Shift</b> key is pressed.</li>
+                    </ul>
+                </li>
+                <li>
+                    <b>Down Arrow</b> key is pressed - Selects the cell below, when the Scheduler is focused.
+                    <ul>
+                        <li>Moves to cell selection to the last row when <b>Ctrl</b> key is pressed and cell is selected.</li>
+                        <li>Selected appointment is moved below when <b>Ctrl</b> key is pressed.</li>
+                        <li>Selected appointment is resized when <b>Shift</b> key is pressed and it is dayView or weekView appointment.</li>
+                        <li>Selects the below cell and updates the cells selection when <b>Shift</b> key is pressed.</li>
+                    </ul>
+                </li>
+                <li><b>Enter</b> key is pressed - Opens the Edit Dialog.</li>
+                <li><b>Esc</b> key is pressed - Cancels dragging or resizing.</li>
+                <li>
+                    <b>Tab</b> key is pressed - Tabs the selection to next appointment or out of Scheduler.
+                </li>
+                <li><b>Shift+Tab</b> keys are pressed - Tabs the selection to previous appointment or to focused cell.</li>
+                <li><b>Alt</b> key are pressed - When Alt and Number is pressed, the Scheduler toggles Appointments visibility by Resource.</li>
+                <li>
+                    <b>Ctrl</b> key is pressed
+                    <ul>
+                        <li>Sets the View when <b>Number</b> key is pressed. For example Ctrl + 1, sets the view to the first view.</li>
+                        <li>Opens the Context Menu when <b>m</b> key is pressed.</li>
+                        <li>Opens the DateTimeInput in the Navigation Toolbar<b>d</b> key is pressed.</li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'about',
+                    location: 'address',
+                    subject: 'name',
+                    style: 'style',
+                    status: 'status'
+                },
+                views:
+                [        
+                    'dayView',
+                    'weekView',
+                    'monthView'
+                ]
+            }
+        },
+        beforeCreate: function () { 
+            this.source =
+                {
+                    dataType: 'json',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'status', type: 'string' },
+                        { name: 'about', type: 'string' },
+                        { name: 'address', type: 'string' },
+                        { name: 'company', type: 'string' },
+                        { name: 'name', type: 'string' },
+                        { name: 'style', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
+                        { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
+                    ],
+                    id: 'id',
+                    url: '../sampledata/appointments.txt'
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myScheduler.scrollTop(600);
+                this.$refs.myScheduler.focus();
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/keyboardnavigation/main.js b/scheduler/keyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/keyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/keyboardnavigation/package.json b/scheduler/keyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/keyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/localization/App.vue b/scheduler/localization/App.vue
new file mode 100644
index 00000000..2df2a7d5
--- /dev/null
+++ b/scheduler/localization/App.vue
@@ -0,0 +1,287 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date" :showLegend="true" :view="'weekView'" 
+        :appointmentDataFields="appointmentDataFields" :views="views" :resources="resources" 
+        :localization="localization" :editDialogCreate="editDialogCreate"
+        /> 
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                exportSettings: {
+                    fileName: null
+                },
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'place',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources: 
+                {
+                    colorScheme: 'scheme05',
+                    dataField: 'calendar',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [        
+                    { type: 'dayView', timeRuler: { formatString: 'HH:mm' } },
+                    { type: 'weekView', timeRuler: { formatString: 'HH:mm' } },
+                    { type: 'monthView' }
+                ],
+                localization:
+                {
+                    // separator of parts of a date (e.g. '/' in 11/05/1955)
+                    '/': '/',
+                    // separator of parts of a time (e.g. ':' in 05:44 PM)
+                    ':': ':',
+                    // the first day of the week (0 = Sunday, 1 = Monday, etc)
+                    firstDay: 1,
+                    days: {
+                        // full day names
+                        names: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+                        // abbreviated day names
+                        namesAbbr: ['Sonn', 'Mon', 'Dien', 'Mitt', 'Donn', 'Fre', 'Sams'],
+                        // shortest day names
+                        namesShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
+                    },
+                    months: {
+                        // full month names (13 months for lunar calendards -- 13th month should be '' if not lunar)
+                        names: ['Januar', 'Februar', 'Mrz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember', ''],
+                        // abbreviated month names
+                        namesAbbr: ['Jan', 'Feb', 'Mr', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dez', '']
+                    },
+                    // AM and PM designators in one of these forms:
+                    // The usual view, and the upper and lower case versions
+                    //      [standard,lowercase,uppercase]
+                    // The culture does not use AM or PM (likely all standard date formats use 24 hour time)
+                    //      null
+                    AM: ['AM', 'am', 'AM'],
+                    PM: ['PM', 'pm', 'PM'],
+                    eras: [
+                        // eras in reverse chronological order.
+                        // name: the name of the era in this culture (e.g. A.D., C.E.)
+                        // start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.
+                        // offset: offset in years from gregorian calendar
+                        { 'name': 'A.D.', 'start': null, 'offset': 0 }
+                    ],
+                    twoDigitYearMax: 2029,
+                    patterns: {
+                        // short date pattern
+                        d: 'M/d/yyyy',
+                        // long date pattern
+                        D: 'dddd, MMMM dd, yyyy',
+                        // short time pattern
+                        t: 'h:mm tt',
+                        // long time pattern
+                        T: 'h:mm:ss tt',
+                        // long date, short time pattern
+                        f: 'dddd, MMMM dd, yyyy h:mm tt',
+                        // long date, long time pattern
+                        F: 'dddd, MMMM dd, yyyy h:mm:ss tt',
+                        // month/day pattern
+                        M: 'MMMM dd',
+                        // month/year pattern
+                        Y: 'yyyy MMMM',
+                        // S is a sortable format that does not lety by culture
+                        S: 'yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss',
+                        // formatting of dates in MySQL DataBases
+                        ISO: 'yyyy-MM-dd hh:mm:ss',
+                        ISO2: 'yyyy-MM-dd HH:mm:ss',
+                        d1: 'dd.MM.yyyy',
+                        d2: 'dd-MM-yyyy',
+                        d3: 'dd-MMMM-yyyy',
+                        d4: 'dd-MM-yy',
+                        d5: 'H:mm',
+                        d6: 'HH:mm',
+                        d7: 'HH:mm tt',
+                        d8: 'dd/MMMM/yyyy',
+                        d9: 'MMMM-dd',
+                        d10: 'MM-dd',
+                        d11: 'MM-dd-yyyy'
+                    },
+                    backString: 'Vorhergehende',
+                    forwardString: 'Nchster',
+                    toolBarPreviousButtonString: 'Vorhergehende',
+                    toolBarNextButtonString: 'Nchster',
+                    emptyDataString: 'Nokeine Daten angezeigt',
+                    loadString: 'Loading...',
+                    clearString: 'Lschen',
+                    todayString: 'Heute',
+                    dayViewString: 'Tag',
+                    weekViewString: 'Woche',
+                    monthViewString: 'Monat',
+                    timelineDayViewString: 'Zeitleiste Day',
+                    timelineWeekViewString: 'Zeitleiste Woche',
+                    timelineMonthViewString: 'Zeitleiste Monat',
+                    loadingErrorMessage: 'Die Daten werden noch geladen und Sie knnen eine Eigenschaft nicht festgelegt oder eine Methode aufrufen . Sie knnen tun, dass, sobald die Datenbindung abgeschlossen ist. jqxScheduler wirft die \' bindingComplete \' Ereignis, wenn die Bindung abgeschlossen ist.',
+                    editRecurringAppointmentDialogTitleString: 'Bearbeiten Sie wiederkehrenden Termin',
+                    editRecurringAppointmentDialogContentString: 'Wollen Sie nur dieses eine Vorkommen oder die Serie zu bearbeiten ?',
+                    editRecurringAppointmentDialogOccurrenceString: 'Vorkommen bearbeiten',
+                    editRecurringAppointmentDialogSeriesString: 'Bearbeiten Die Serie',
+                    editDialogTitleString: 'Termin bearbeiten',
+                    editDialogCreateTitleString: 'Erstellen Sie Neuer Termin',
+                    contextMenuEditAppointmentString: 'Termin bearbeiten',
+                    contextMenuCreateAppointmentString: 'Erstellen Sie Neuer Termin',
+                    editDialogSubjectString: 'Subjekt',
+                    editDialogLocationString: 'Ort',
+                    editDialogFromString: 'Von',
+                    editDialogToString: 'Bis',
+                    editDialogAllDayString: 'Den ganzen Tag',
+                    editDialogExceptionsString: 'Ausnahmen',
+                    editDialogResetExceptionsString: 'Zurcksetzen auf Speichern',
+                    editDialogDescriptionString: 'Bezeichnung',
+                    editDialogResourceIdString: 'Kalender',
+                    editDialogStatusString: 'Status',
+                    editDialogColorString: 'Farbe',
+                    editDialogColorPlaceHolderString: 'Farbe whlen',
+                    editDialogTimeZoneString: 'Zeitzone',
+                    editDialogSelectTimeZoneString: 'Whlen Sie Zeitzone',
+                    editDialogSaveString: 'Sparen',
+                    editDialogDeleteString: 'Lschen',
+                    editDialogCancelString: 'Abbrechen',
+                    editDialogRepeatString: 'Wiederholen',
+                    editDialogRepeatEveryString: 'Wiederholen alle',
+                    editDialogRepeatEveryWeekString: 'woche(n)',
+                    editDialogRepeatEveryYearString: 'Jahr (en)',
+                    editDialogRepeatEveryDayString: 'Tag (e)',
+                    editDialogRepeatNeverString: 'Nie',
+                    editDialogRepeatDailyString: 'Tglich',
+                    editDialogRepeatWeeklyString: 'Wchentlich',
+                    editDialogRepeatMonthlyString: 'Monatlich',
+                    editDialogRepeatYearlyString: 'Jhrlich',
+                    editDialogRepeatEveryMonthString: 'Monate (n)',
+                    editDialogRepeatEveryMonthDayString: 'Day',
+                    editDialogRepeatFirstString: 'erste',
+                    editDialogRepeatSecondString: 'zweite',
+                    editDialogRepeatThirdString: 'dritte',
+                    editDialogRepeatFourthString: 'vierte',
+                    editDialogRepeatLastString: 'letzte',
+                    editDialogRepeatEndString: 'Ende',
+                    editDialogRepeatAfterString: 'Nach',
+                    editDialogRepeatOnString: 'Am',
+                    editDialogRepeatOfString: 'von',
+                    editDialogRepeatOccurrencesString: 'Eintritt (e)',
+                    editDialogRepeatSaveString: 'Vorkommen Speichern',
+                    editDialogRepeatSaveSeriesString: 'Save Series',
+                    editDialogRepeatDeleteString: 'Vorkommen lschen',
+                    editDialogRepeatDeleteSeriesString: 'Series lschen',
+                    editDialogStatuses:
+                    {
+                        free: 'Frei',
+                        tentative: 'Versuchsweise',
+                        busy: 'Beschftigt',
+                        outOfOffice: 'Ausserhaus'
+                    }
+                }
+            }
+        },
+        beforeCreate: function () {
+            const generateAppointments = function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: '',
+                    location: '',
+                    subject: 'Projektsitzung',
+                    calendar: 'Zimmer 1',
+                    start: new Date(2016, 10, 23, 9, 0, 0),
+                    end: new Date(2016, 10, 23, 16, 0, 0)
+                }
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'IT Gruppentreffen',
+                    calendar: 'Zimmer 2',
+                    start: new Date(2016, 10, 24, 10, 0, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                }
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Soziale Treffen',
+                    calendar: 'Zimmer 3',
+                    start: new Date(2016, 10, 27, 11, 0, 0),
+                    end: new Date(2016, 10, 27, 13, 0, 0)
+                }
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'Projekte Planung',
+                    calendar: 'Zimmer 2',
+                    start: new Date(2016, 10, 23, 16, 0, 0),
+                    end: new Date(2016, 10, 23, 18, 0, 0)
+                }
+                let appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Interveiw mit Jan',
+                    calendar: 'Zimmer 1',
+                    start: new Date(2016, 10, 25, 15, 0, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                }
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Interveiw mit Alberta',
+                    calendar: 'Zimmer 4',
+                    start: new Date(2016, 10, 26, 14, 0, 0),
+                    end: new Date(2016, 10, 26, 16, 0, 0)
+                }
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            };
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+        },
+        methods: {
+            editDialogCreate: function (dialog, fields, editAppointment) {
+                fields.timeZoneContainer.hide();
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/localization/main.js b/scheduler/localization/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/localization/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/localization/package.json b/scheduler/localization/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/localization/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/monthviewweeknumbers/App.vue b/scheduler/monthviewweeknumbers/App.vue
new file mode 100644
index 00000000..5a36c543
--- /dev/null
+++ b/scheduler/monthviewweeknumbers/App.vue
@@ -0,0 +1,133 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date" :view="'monthView'" :resources="resources" 
+        :appointmentDataFields="appointmentDataFields" :views="views" :showLegend="true"
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'place',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources:
+                {
+                    colorScheme: 'scheme05',
+                    dataField: 'calendar',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [        
+                    'dayView',
+                    'weekView',
+                    { type: 'monthView', showWeekNumbers: true }
+                ]
+            }
+        },
+        beforeCreate: function () { 
+            const generateAppointments = function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: 'George brings projector for presentations.',
+                    location: '',
+                    subject: 'Quarterly Project Review Meeting',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 23, 9, 0, 0),
+                    end: new Date(2016, 10, 23, 16, 0, 0)
+                }
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'IT Group Mtg.',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 24, 10, 0, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                }
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Course Social Media',
+                    calendar: 'Room 3',
+                    start: new Date(2016, 10, 27, 11, 0, 0),
+                    end: new Date(2016, 10, 27, 13, 0, 0)
+                }
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'New Projects Planning',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 23, 16, 0, 0),
+                    end: new Date(2016, 10, 23, 18, 0, 0)
+                }
+                const appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with James',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 25, 15, 0, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                }
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with Nancy',
+                    calendar: 'Room 4',
+                    start: new Date(2016, 10, 26, 14, 0, 0),
+                    end: new Date(2016, 10, 26, 16, 0, 0)
+                }
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            };
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/monthviewweeknumbers/main.js b/scheduler/monthviewweeknumbers/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/monthviewweeknumbers/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/monthviewweeknumbers/package.json b/scheduler/monthviewweeknumbers/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/monthviewweeknumbers/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/monthviewwithautorowheight/App.vue b/scheduler/monthviewwithautorowheight/App.vue
new file mode 100644
index 00000000..d8ffd810
--- /dev/null
+++ b/scheduler/monthviewwithautorowheight/App.vue
@@ -0,0 +1,133 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date" :view="'monthView'" :resources="resources" 
+        :appointmentDataFields="appointmentDataFields" :views="views" :showLegend="true"
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'place',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources:
+                {
+                    colorScheme: 'scheme05',
+                    dataField: 'calendar',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [        
+                    'dayView',
+                    'weekView',
+                    { type: 'monthView', monthRowAutoHeight: true }
+                ]
+            }
+        },
+        beforeCreate: function () { 
+            const generateAppointments = function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: 'George brings projector for presentations.',
+                    location: '',
+                    subject: 'Quarterly Project Review Meeting',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 23, 9, 0, 0),
+                    end: new Date(2016, 10, 23, 16, 0, 0)
+                }
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'IT Group Mtg.',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 24, 10, 0, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                }
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Course Social Media',
+                    calendar: 'Room 3',
+                    start: new Date(2016, 10, 23, 11, 0, 0),
+                    end: new Date(2016, 10, 26, 13, 0, 0)
+                }
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'New Projects Planning',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 23, 16, 0, 0),
+                    end: new Date(2016, 10, 27, 18, 0, 0)
+                }
+                const appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with James',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 24, 15, 0, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                }
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with Nancy',
+                    calendar: 'Room 4',
+                    start: new Date(2016, 10, 24, 14, 0, 0),
+                    end: new Date(2016, 10, 30, 16, 0, 0)
+                }
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            };
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/monthviewwithautorowheight/main.js b/scheduler/monthviewwithautorowheight/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/monthviewwithautorowheight/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/monthviewwithautorowheight/package.json b/scheduler/monthviewwithautorowheight/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/monthviewwithautorowheight/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/recurringappointments/App.vue b/scheduler/recurringappointments/App.vue
new file mode 100644
index 00000000..0473f2f2
--- /dev/null
+++ b/scheduler/recurringappointments/App.vue
@@ -0,0 +1,119 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date"  :view="'weekView'" :showLegend="true"
+        :appointmentDataFields="appointmentDataFields" :views="views" 
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'from',
+                    to: 'to',
+                    id: 'id',
+                    description: 'description',
+                    location: 'place',
+                    style: 'style',
+                    subject: 'subject',
+                    resourceId: 'calendar',
+                    recurrencePattern: 'recurrenceRule',
+                    recurrenceException: 'recurrenceException'
+                },
+                views:
+                [        
+                    'dayView',
+                    'weekView',
+                    'monthView'
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const generateAppointments =  function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id4',
+                    description: '',
+                    style: '#AA4643',
+                    location: '',
+                    subject: 'New Projects Planning',
+                    calendar: 'Room 2',
+                    from: new Date(2016, 10, 22, 8, 0, 0),
+                    to: new Date(2016, 10, 22, 13, 0, 0)
+                }
+                const appointment2 = {
+                    id: 'id5',
+                    description: '',
+                    style: '#89A54E',
+                    location: '',
+                    subject: 'Interview with James',
+                    calendar: 'Room 1',
+                    from: new Date(2016, 10, 25, 13, 0, 0),
+                    to: new Date(2016, 10, 25, 15, 0, 0)
+                }
+                const appointment3 = {
+                    id: 'id6',
+                    description: '',
+                    style: '#71588F',
+                    location: '',
+                    subject: 'Interview with Nancy',
+                    calendar: 'Room 2',
+                    from: new Date(2016, 10, 26, 14, 0, 0),
+                    to: new Date(2016, 10, 26, 16, 0, 0)
+                }
+                const appointment4 = {
+                    id: 'id7',
+                    description: '',
+                    style: '#307DD7',
+                    location: '',
+                    subject: 'Daily Meeting',
+                    calendar: 'Room 1',
+                    recurrenceRule: 'FREQ=DAILY;',
+                    recurrenceException: '2016-11-24 09:00:00,2016-11-26 12:00:00',
+                    from: new Date(2016, 10, 23, 10, 0, 0),
+                    to: new Date(2016, 10, 23, 11, 0, 0)
+                }
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+
+                return appointments;
+            }
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'recurrenceRule', type: 'string' },
+                        { name: 'recurrenceException', type: 'string' },
+                        { name: 'style', type: 'string' },
+                        { name: 'from', type: 'date' },
+                        { name: 'to', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id7');    
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/recurringappointments/main.js b/scheduler/recurringappointments/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/recurringappointments/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/recurringappointments/package.json b/scheduler/recurringappointments/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/recurringappointments/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/resources/App.vue b/scheduler/resources/App.vue
new file mode 100644
index 00000000..62ed9f9e
--- /dev/null
+++ b/scheduler/resources/App.vue
@@ -0,0 +1,134 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date" :view="'weekView'" :resources="resources" 
+        :appointmentDataFields="appointmentDataFields" :views="views" :showLegend="true" :dayNameFormat="'abbr'"
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'place',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources:
+                {
+                    colorScheme: 'scheme05',
+                    dataField: 'calendar',
+                    orientation: 'horizontal',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [        
+                    { type: 'dayView', showWeekends: false },
+                    { type: 'weekView', showWeekends: false },
+                    { type: 'monthView' }
+                ]
+            }
+        },
+        beforeCreate: function () { 
+            const generateAppointments = function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: 'George brings projector for presentations.',
+                    location: '',
+                    subject: 'Quarterly Project Review Meeting',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 23, 9, 0, 0),
+                    end: new Date(2016, 10, 23, 16, 0, 0)
+                };
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'IT Group Mtg.',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 24, 10, 0, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                };
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Course Social Media',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 27, 11, 0, 0),
+                    end: new Date(2016, 10, 27, 13, 0, 0)
+                };
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'New Projects Planning',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 23, 0, 0, 0),
+                    end: new Date(2016, 10, 25, 23, 59, 59)
+                };
+                const appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with James',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 25, 15, 0, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                };
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with Nancy',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 26, 14, 0, 0),
+                    end: new Date(2016, 10, 26, 16, 0, 0)
+                };
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            };
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/resources/main.js b/scheduler/resources/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/resources/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/resources/package.json b/scheduler/resources/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/resources/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/resourceswithcustomcolumnwidths/App.vue b/scheduler/resourceswithcustomcolumnwidths/App.vue
new file mode 100644
index 00000000..abfbac54
--- /dev/null
+++ b/scheduler/resourceswithcustomcolumnwidths/App.vue
@@ -0,0 +1,133 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date" :view="'0'" :resources="resources"
+        :appointmentDataFields="appointmentDataFields" :views="views" :dayNameFormat="'abbr'" :showLegend="true"
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'place',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources: 
+                {
+                    colorScheme: 'scheme02',
+                    dataField: 'calendar',
+                    orientation: 'horizontal',
+                    resourceColumnWidth: 'auto',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [        
+                    'monthView'
+                ]
+            }
+        },
+        beforeCreate: function () { 
+            const generateAppointments = function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: 'George brings projector for presentations.',
+                    location: '',
+                    subject: 'Quarterly Project Review Meeting',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 23, 9, 0, 0),
+                    end: new Date(2016, 10, 23, 16, 0, 0)
+                }
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'IT Group Mtg.',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 24, 10, 0, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                }
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Course Social Media',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 27, 11, 0, 0),
+                    end: new Date(2016, 10, 27, 13, 0, 0)
+                }
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'New Projects Planning',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 23, 0, 0, 0),
+                    end: new Date(2016, 10, 25, 23, 59, 59)
+                }
+                const appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with James',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 25, 15, 0, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                }
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with Nancy',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 26, 14, 0, 0),
+                    end: new Date(2016, 10, 26, 16, 0, 0)
+                }
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            };
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+        }        
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/resourceswithcustomcolumnwidths/main.js b/scheduler/resourceswithcustomcolumnwidths/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/resourceswithcustomcolumnwidths/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/resourceswithcustomcolumnwidths/package.json b/scheduler/resourceswithcustomcolumnwidths/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/resourceswithcustomcolumnwidths/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/righttoleft/App.vue b/scheduler/righttoleft/App.vue
new file mode 100644
index 00000000..f74e300f
--- /dev/null
+++ b/scheduler/righttoleft/App.vue
@@ -0,0 +1,67 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date" :view="'weekView'" :ready="ready"
+        :appointmentDataFields="appointmentDataFields" :views="views" :showLegend="true" :rtl="true"
+    /> 
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'about',
+                    location: 'address',
+                    subject: 'name',
+                    style: 'style',
+                    status: 'status'
+                },
+                views:
+                [        
+                    'dayView',
+                    'weekView',
+                    'monthView'
+                ],
+
+            }
+        },
+        beforeCreate: function () {   
+            this.source =
+                {
+                    dataType: 'json',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'status', type: 'string' },
+                        { name: 'about', type: 'string' },
+                        { name: 'address', type: 'string' },
+                        { name: 'company', type: 'string' },
+                        { name: 'name', type: 'string' },
+                        { name: 'style', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
+                        { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
+                    ],
+                    id: 'id',
+                    url: '../sampledata/appointments.txt'
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myScheduler.scrollTop(400);
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/righttoleft/main.js b/scheduler/righttoleft/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/righttoleft/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/righttoleft/package.json b/scheduler/righttoleft/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/righttoleft/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/rowheight/App.vue b/scheduler/rowheight/App.vue
new file mode 100644
index 00000000..4067499c
--- /dev/null
+++ b/scheduler/rowheight/App.vue
@@ -0,0 +1,65 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date"  :view="'weekView'" :ready="ready"
+        :appointmentDataFields="appointmentDataFields" :views="views" :rowsHeight="40"
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'about',
+                    location: 'address',
+                    subject: 'name',
+                    style: 'style',
+                    status: 'status'
+                },
+                views:
+                [        
+                    'dayView',
+                    'weekView'
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    dataType: 'json',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'status', type: 'string' },
+                        { name: 'about', type: 'string' },
+                        { name: 'address', type: 'string' },
+                        { name: 'company', type: 'string' },
+                        { name: 'name', type: 'string' },
+                        { name: 'style', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
+                        { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
+                    ],
+                    id: 'id',
+                    url: '../sampledata/appointments.txt'
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myScheduler.scrollTop(700);
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/rowheight/main.js b/scheduler/rowheight/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/rowheight/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/rowheight/package.json b/scheduler/rowheight/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/rowheight/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/rowheightconfiguration/App.vue b/scheduler/rowheightconfiguration/App.vue
new file mode 100644
index 00000000..abd20534
--- /dev/null
+++ b/scheduler/rowheightconfiguration/App.vue
@@ -0,0 +1,65 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date" :view="'weekView'"
+        :appointmentDataFields="appointmentDataFields" :views="views" :ready="ready" :rowsHeight="40"
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: "start",
+                    to: "end",
+                    id: "id",
+                    description: "about",
+                    location: "address",
+                    subject: "name",
+                    style: "style",
+                    status: "status"
+                },
+                views:
+                [        
+                    'dayView',
+                    'weekView'
+                ]
+            }
+        },
+        beforeCreate: function () {          
+            this.source =
+                {
+                    dataType: 'json',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'status', type: 'string' },
+                        { name: 'about', type: 'string' },
+                        { name: 'address', type: 'string' },
+                        { name: 'company', type: 'string' },
+                        { name: 'name', type: 'string' },
+                        { name: 'style', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
+                        { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
+                    ],
+                    id: 'id',
+                    url: '../sampledata/appointments.txt'
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myScheduler.scrollTop(600);
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/rowheightconfiguration/main.js b/scheduler/rowheightconfiguration/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/rowheightconfiguration/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/rowheightconfiguration/package.json b/scheduler/rowheightconfiguration/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/rowheightconfiguration/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/timelineviews/App.vue b/scheduler/timelineviews/App.vue
new file mode 100644
index 00000000..adfc8030
--- /dev/null
+++ b/scheduler/timelineviews/App.vue
@@ -0,0 +1,133 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date" :showLegend="true" :view="'timelineWeekView'"
+        :appointmentDataFields="appointmentDataFields" :resources="resources" :views="views" :dayNameFormat="'abbr'"
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'location',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources:
+                {
+                    colorScheme: 'scheme04',
+                    dataField: 'calendar',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [
+                    { type: 'timelineDayView', appointmentHeight: 50 },
+                    { type: 'timelineWeekView', appointmentHeight: 50 },
+                    { type: 'timelineMonthView', appointmentHeight: 50 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const generateAppointments =  function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: 'George brings projector for presentations.',
+                    location: '',
+                    subject: 'Quarterly Project Review Meeting',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 23, 9, 0, 0),
+                    end: new Date(2016, 10, 23, 16, 0, 0)
+                };
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'IT Group Mtg.',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 24, 10, 0, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                };
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Course Social Media',
+                    calendar: 'Room 3',
+                    start: new Date(2016, 10, 27, 11, 0, 0),
+                    end: new Date(2016, 10, 27, 13, 0, 0)
+                };
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'New Projects Planning',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 23, 16, 0, 0),
+                    end: new Date(2016, 10, 23, 18, 0, 0)
+                };
+                const appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with James',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 25, 15, 0, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                };
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with Nancy',
+                    calendar: 'Room 4',
+                    start: new Date(2016, 10, 26, 14, 0, 0),
+                    end: new Date(2016, 10, 26, 16, 0, 0)
+                };
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            }
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/timelineviews/main.js b/scheduler/timelineviews/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/timelineviews/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/timelineviews/package.json b/scheduler/timelineviews/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/timelineviews/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/timelineviewswithcustomslotwidth/App.vue b/scheduler/timelineviewswithcustomslotwidth/App.vue
new file mode 100644
index 00000000..8629b75b
--- /dev/null
+++ b/scheduler/timelineviewswithcustomslotwidth/App.vue
@@ -0,0 +1,134 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date"  :view="'timelineWeekView'" :showLegend="true"
+        :appointmentDataFields="appointmentDataFields" :views="views" :resources="resources" :dayNameFormat="'full'"  
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'place',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources:
+                {
+                    colorScheme: 'scheme04',
+                    dataField: 'calendar',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [        
+                    { type: 'timelineDayView', appointmentHeight: 50, timeSlotWidth: 30, timeRuler: { formatString: 'HH:mm' } },
+                    { type: 'timelineWeekView', appointmentHeight: 50, timeSlotWidth: 30, timeRuler: { formatString: 'HH:mm' } },
+                    { type: 'timelineMonthView', appointmentHeight: 50, timeSlotWidth: 30, timeRuler: { formatString: 'dd' } }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            const generateAppointments = function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: 'George brings projector for presentations.',
+                    location: '',
+                    subject: 'Quarterly Project Review Meeting',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 23, 9, 0, 0),
+                    end: new Date(2016, 10, 23, 16, 0, 0)
+                }
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'IT Group Mtg.',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 24, 10, 0, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                }
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Course Social Media',
+                    calendar: 'Room 3',
+                    start: new Date(2016, 10, 27, 11, 0, 0),
+                    end: new Date(2016, 10, 27, 13, 0, 0)
+                }
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'New Projects Planning',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 23, 16, 0, 0),
+                    end: new Date(2016, 10, 23, 18, 0, 0)
+                }
+                const appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with James',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 25, 15, 0, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                }
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with Nancy',
+                    calendar: 'Room 4',
+                    start: new Date(2016, 10, 26, 14, 0, 0),
+                    end: new Date(2016, 10, 26, 16, 0, 0)
+                }
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            };
+
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/timelineviewswithcustomslotwidth/main.js b/scheduler/timelineviewswithcustomslotwidth/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/timelineviewswithcustomslotwidth/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/timelineviewswithcustomslotwidth/package.json b/scheduler/timelineviewswithcustomslotwidth/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/timelineviewswithcustomslotwidth/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/timelineviewswithresources/App.vue b/scheduler/timelineviewswithresources/App.vue
new file mode 100644
index 00000000..76b34482
--- /dev/null
+++ b/scheduler/timelineviewswithresources/App.vue
@@ -0,0 +1,134 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date" :view="'timelineWeekView'" :resources="resources"
+        :appointmentDataFields="appointmentDataFields" :views="views" :dayNameFormat="'abbr'" :showLegend="true"
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'place',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources: 
+                {
+                    colorScheme: 'scheme04',
+                    dataField: 'calendar',
+                    orientation: 'vertical',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [        
+                    { type: 'timelineDayView', appointmentHeight: 30 },
+                    { type: 'timelineWeekView', appointmentHeight: 30 },
+                    { type: 'timelineMonthView', appointmentHeight: 30 }
+                ]
+            }
+        },
+        beforeCreate: function () { 
+            const generateAppointments = function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: 'George brings projector for presentations.',
+                    location: '',
+                    subject: 'Quarterly Project Review Meeting',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 23, 9, 0, 0),
+                    end: new Date(2016, 10, 23, 16, 0, 0)
+                }
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'IT Group Mtg.',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 24, 10, 0, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                }
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Course Social Media',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 27, 11, 0, 0),
+                    end: new Date(2016, 10, 27, 13, 0, 0)
+                }
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'New Projects Planning',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 23, 0, 0, 0),
+                    end: new Date(2016, 10, 25, 23, 59, 59)
+                }
+                const appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with James',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 25, 15, 0, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                }
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with Nancy',
+                    calendar: 'Room 3',
+                    start: new Date(2016, 10, 26, 14, 0, 0),
+                    end: new Date(2016, 10, 26, 16, 0, 0)
+                }
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            };
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+        }        
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/timelineviewswithresources/main.js b/scheduler/timelineviewswithresources/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/timelineviewswithresources/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/timelineviewswithresources/package.json b/scheduler/timelineviewswithresources/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/timelineviewswithresources/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/timescalesconfiguration/App.vue b/scheduler/timescalesconfiguration/App.vue
new file mode 100644
index 00000000..bc8b640b
--- /dev/null
+++ b/scheduler/timescalesconfiguration/App.vue
@@ -0,0 +1,62 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date"  :view="'weekView'" :showLegend="true"
+        :appointmentDataFields="appointmentDataFields" :views="views" 
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'about',
+                    location: 'address',
+                    subject: 'name',
+                    style: 'style',
+                    status: 'status'
+                },
+                views:
+                [        
+                    { type: 'dayView', showWeekends: true, timeRuler: { scaleStartHour: 7, scaleEndHour: 21 } },
+                    { type: 'weekView', showWeekends: true, timeRuler: { scaleStartHour: 7, scaleEndHour: 21 } },
+                    { type: 'timelineDayView', showWeekends: true, timeRuler: { scaleStartHour: 7, scaleEndHour: 21 } },
+                    { type: 'timelineWeekView', showWeekends: true, timeRuler: { scaleStartHour: 7, scaleEndHour: 21 } }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    dataType: 'json',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'status', type: 'string' },
+                        { name: 'about', type: 'string' },
+                        { name: 'address', type: 'string' },
+                        { name: 'company', type: 'string' },
+                        { name: 'name', type: 'string' },
+                        { name: 'style', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
+                        { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
+                    ],
+                    id: 'id',
+                    url: '../sampledata/appointments.txt'
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/timescalesconfiguration/main.js b/scheduler/timescalesconfiguration/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/timescalesconfiguration/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/timescalesconfiguration/package.json b/scheduler/timescalesconfiguration/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/timescalesconfiguration/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/timescaleszooming/App.vue b/scheduler/timescaleszooming/App.vue
new file mode 100644
index 00000000..80bdbc63
--- /dev/null
+++ b/scheduler/timescaleszooming/App.vue
@@ -0,0 +1,65 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date"  :view="'weekView'" :ready="ready"
+        :appointmentDataFields="appointmentDataFields" :views="views" 
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'about',
+                    location: 'address',
+                    subject: 'name',
+                    style: 'style',
+                    status: 'status'
+                },
+                views:
+                [        
+                    { type: 'dayView', showWeekends: true, timeRuler: { scale: 'quarterHour' } },
+                    { type: 'weekView', showWeekends: true, timeRuler: { scale: 'quarterHour' } }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    dataType: 'json',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'status', type: 'string' },
+                        { name: 'about', type: 'string' },
+                        { name: 'address', type: 'string' },
+                        { name: 'company', type: 'string' },
+                        { name: 'name', type: 'string' },
+                        { name: 'style', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
+                        { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
+                    ],
+                    id: 'id',
+                    url: '../sampledata/appointments.txt'
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myScheduler.scrollTop(700);
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/timescaleszooming/main.js b/scheduler/timescaleszooming/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/timescaleszooming/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/timescaleszooming/package.json b/scheduler/timescaleszooming/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/timescaleszooming/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/timezones/App.vue b/scheduler/timezones/App.vue
new file mode 100644
index 00000000..c2fe49f9
--- /dev/null
+++ b/scheduler/timezones/App.vue
@@ -0,0 +1,61 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date"  :view="'weekView'" :showLegend="true"
+        :appointmentDataFields="appointmentDataFields" :views="views" 
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'about',
+                    location: 'address',
+                    subject: 'name',
+                    style: 'style',
+                    status: 'status'
+                },
+                views:
+                [        
+                    { type: 'dayView', showWeekends: true, timeRuler: { hidden: false, timeZones: [{ id: 'UTC', text: 'UTC' }, { id: 'Pacific Standard Time', text: 'PST' }] } },
+                    { type: 'weekView', showWeekends: true, timeRuler: { hidden: false, timeZones: [{ id: 'UTC', text: 'UTC' }, { id: 'Pacific Standard Time', text: 'PST' }] } },
+                    'monthView'
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source =
+                {
+                    dataType: 'json',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'status', type: 'string' },
+                        { name: 'about', type: 'string' },
+                        { name: 'address', type: 'string' },
+                        { name: 'company', type: 'string' },
+                        { name: 'name', type: 'string' },
+                        { name: 'style', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
+                        { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
+                    ],
+                    id: 'id',
+                    url: '../sampledata/appointments.txt'
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/timezones/main.js b/scheduler/timezones/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/timezones/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/timezones/package.json b/scheduler/timezones/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/timezones/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/verticalresources/App.vue b/scheduler/verticalresources/App.vue
new file mode 100644
index 00000000..fbc45bb0
--- /dev/null
+++ b/scheduler/verticalresources/App.vue
@@ -0,0 +1,134 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date" :view="'monthView'" :resources="resources"
+        :appointmentDataFields="appointmentDataFields" :views="views" :dayNameFormat="'abbr'" :showLegend="true"
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: 'start',
+                    to: 'end',
+                    id: 'id',
+                    description: 'description',
+                    location: 'place',
+                    subject: 'subject',
+                    resourceId: 'calendar'
+                },
+                resources: 
+                {
+                    colorScheme: 'scheme05',
+                    dataField: 'calendar',
+                    orientation: 'vertical',
+                    source: new jqx.dataAdapter(this.source)
+                },
+                views:
+                [        
+                    'dayView',
+                    'weekView',
+                    'monthView'
+                ]
+            }
+        },
+        beforeCreate: function () { 
+            const generateAppointments = function () {
+                const appointments = new Array();
+                const appointment1 = {
+                    id: 'id1',
+                    description: 'George brings projector for presentations.',
+                    location: '',
+                    subject: 'Quarterly Project Review Meeting',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 23, 9, 0, 0),
+                    end: new Date(2016, 10, 23, 16, 0, 0)
+                }
+                const appointment2 = {
+                    id: 'id2',
+                    description: '',
+                    location: '',
+                    subject: 'IT Group Mtg.',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 24, 10, 0, 0),
+                    end: new Date(2016, 10, 24, 15, 0, 0)
+                }
+                const appointment3 = {
+                    id: 'id3',
+                    description: '',
+                    location: '',
+                    subject: 'Course Social Media',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 27, 11, 0, 0),
+                    end: new Date(2016, 10, 27, 13, 0, 0)
+                }
+                const appointment4 = {
+                    id: 'id4',
+                    description: '',
+                    location: '',
+                    subject: 'New Projects Planning',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 23, 0, 0, 0),
+                    end: new Date(2016, 10, 25, 23, 59, 59)
+                }
+                const appointment5 = {
+                    id: 'id5',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with James',
+                    calendar: 'Room 1',
+                    start: new Date(2016, 10, 25, 15, 0, 0),
+                    end: new Date(2016, 10, 25, 17, 0, 0)
+                }
+                const appointment6 = {
+                    id: 'id6',
+                    description: '',
+                    location: '',
+                    subject: 'Interview with Nancy',
+                    calendar: 'Room 2',
+                    start: new Date(2016, 10, 26, 14, 0, 0),
+                    end: new Date(2016, 10, 26, 16, 0, 0)
+                }
+
+                appointments.push(appointment1);
+                appointments.push(appointment2);
+                appointments.push(appointment3);
+                appointments.push(appointment4);
+                appointments.push(appointment5);
+                appointments.push(appointment6);
+
+                return appointments;
+            };
+
+            this.source =
+                {
+                    dataType: 'array',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'description', type: 'string' },
+                        { name: 'location', type: 'string' },
+                        { name: 'subject', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date' },
+                        { name: 'end', type: 'date' }
+                    ],
+                    id: 'id',
+                    localData: generateAppointments()
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        mounted: function () {
+            this.$refs.myScheduler.ensureAppointmentVisible('id1');
+        }        
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/verticalresources/main.js b/scheduler/verticalresources/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/verticalresources/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/verticalresources/package.json b/scheduler/verticalresources/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/verticalresources/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scheduler/worktime/App.vue b/scheduler/worktime/App.vue
new file mode 100644
index 00000000..6904144d
--- /dev/null
+++ b/scheduler/worktime/App.vue
@@ -0,0 +1,73 @@
+<template>
+    <JqxScheduler ref="myScheduler"
+        :width="getWidth" :height="600" :source="dataAdapter" :date="date" :view="'weekView'"
+        :appointmentDataFields="appointmentDataFields" :views="views" :ready="ready"
+    />
+</template>
+
+<script>
+    import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
+
+    export default {
+        components: {
+            JqxScheduler
+        },
+        data: function () {
+            return {
+				getWidth: getWidth('scheduler'),
+                date: new jqx.date(2016, 11, 23),
+                appointmentDataFields: 
+                {
+                    from: "start",
+                    to: "end",
+                    id: "id",
+                    description: "about",
+                    location: "address",
+                    subject: "name",
+                    style: "style",
+                    status: "status"
+                },
+                views:
+                [        
+                    { type: "dayView", showWeekends: false, timeRuler: { hidden: false } },
+                    {
+                        type: "weekView", workTime:
+                        {
+                            fromDayOfWeek: 1,
+                            toDayOfWeek: 5,
+                            fromHour: 7,
+                            toHour: 19
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {          
+            this.source =
+                {
+                    dataType: 'json',
+                    dataFields: [
+                        { name: 'id', type: 'string' },
+                        { name: 'status', type: 'string' },
+                        { name: 'about', type: 'string' },
+                        { name: 'address', type: 'string' },
+                        { name: 'company', type: 'string' },
+                        { name: 'name', type: 'string' },
+                        { name: 'style', type: 'string' },
+                        { name: 'calendar', type: 'string' },
+                        { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
+                        { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
+                    ],
+                    id: 'id',
+                    url: '../sampledata/appointments.txt'
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(this.source);
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myScheduler.scrollTop(400);
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scheduler/worktime/main.js b/scheduler/worktime/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scheduler/worktime/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scheduler/worktime/package.json b/scheduler/worktime/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scheduler/worktime/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scrollbar/defaultfunctionality/App.vue b/scrollbar/defaultfunctionality/App.vue
new file mode 100644
index 00000000..28d81c36
--- /dev/null
+++ b/scrollbar/defaultfunctionality/App.vue
@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <div style="margin-bottom: 10px;" ref="verticalLabel">Vertical</div>
+        <JqxScrollBar @valueChanged="onValueChangedVertical($event)"
+            :width="18" :height="280" :min="0" :max="1000" :vertical="true"
+        />
+
+        <div style="margin: 10px 0;" ref="horizontalLabel">Horizontal</div>
+        <JqxScrollBar @valueChanged="onValueChangedHorizontal($event)"
+            :width="280" :height="18" :min="0" :max="1000"
+        />
+    </div>
+</template>
+
+<script>
+    import JqxScrollBar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue";
+
+    export default {
+        components: {
+            JqxScrollBar
+        },
+        methods: {
+            onValueChangedVertical: function (event) {
+                this.$refs.verticalLabel.innerHTML = 'Vertical (' + parseInt(event.currentValue) + ')';
+            },
+            onValueChangedHorizontal: function (event) {
+                this.$refs.horizontalLabel.innerHTML = 'Horizontal (' + parseInt(event.currentValue) + ')';
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scrollbar/defaultfunctionality/main.js b/scrollbar/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scrollbar/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scrollbar/defaultfunctionality/package.json b/scrollbar/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scrollbar/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scrollbar/righttoleft/App.vue b/scrollbar/righttoleft/App.vue
new file mode 100644
index 00000000..1e3d6320
--- /dev/null
+++ b/scrollbar/righttoleft/App.vue
@@ -0,0 +1,23 @@
+<template>
+    <div>
+        <div style="margin-bottom: 10px;" ref="horizontalLabel">Horizontal</div>
+        <JqxScrollBar @valueChanged="valueChanged($event)"
+            :width="280" :height="18" :min="0" :max="1000" :rtl="true"
+        />
+    </div>
+</template>
+
+<script>
+    import JqxScrollBar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue";
+
+    export default {
+        components: {
+            JqxScrollBar
+        },
+        methods: {
+            valueChanged: function (event) {
+                this.$refs.horizontalLabel.innerHTML = 'Horizontal (' + parseInt(event.currentValue) + ')';
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/scrollbar/righttoleft/main.js b/scrollbar/righttoleft/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scrollbar/righttoleft/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scrollbar/righttoleft/package.json b/scrollbar/righttoleft/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scrollbar/righttoleft/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/scrollview/defaultfunctionality/App.vue b/scrollview/defaultfunctionality/App.vue
new file mode 100644
index 00000000..22aa6180
--- /dev/null
+++ b/scrollview/defaultfunctionality/App.vue
@@ -0,0 +1,56 @@
+<template>
+    <div>
+        <JqxScrollView ref="myScrollView" :width="600" :height="450" :buttonsOffset="[0, 0]">
+            <div><div class="photo" style="background-image: url(../../../images/imageNature1.jpg)"></div></div>
+            <div><div class="photo" style="background-image: url(../../../images/imageNature2.jpg)"></div></div>
+            <div><div class="photo" style="background-image: url(../../../images/imageNature3.jpg)"></div></div>
+            <div><div class="photo" style="background-image: url(../../../images/imageNature4.jpg)"></div></div>
+            <div><div class="photo" style="background-image: url(../../../images/imageNature5.jpg)"></div></div>
+        </JqxScrollView>
+
+        <div style="margin-top: 2em"></div>
+
+        <JqxButton @click="onStartClicked()" :width="120">
+            Start SlideShow
+        </JqxButton>
+
+        <JqxButton @click="onStopClicked()" :width="120">
+            Stop SlideShow
+        </JqxButton>
+    </div>
+</template>
+
+<script>
+    import JqxScrollView from "jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxScrollView,
+            JqxButton
+        },
+        methods: {
+            onStartClicked : function (event) {
+                this.$refs.myScrollView.slideShow = true;
+            },
+            onStopClicked: function (event) {
+                this.$refs.myScrollView.slideShow = false;
+            }
+        }
+    }
+</script>
+
+<style>
+    .photo {
+        width: 600px;
+        height: 450px;
+        background-color: #000;
+        background-position: center;
+        background-repeat: no-repeat;
+    }
+
+    .jqx-button {
+        display: inline-block;
+        margin-right: 10px;
+    }
+</style>
\ No newline at end of file
diff --git a/scrollview/defaultfunctionality/main.js b/scrollview/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/scrollview/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/scrollview/defaultfunctionality/package.json b/scrollview/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/scrollview/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/slider/defaultfunctionality/App.vue b/slider/defaultfunctionality/App.vue
new file mode 100644
index 00000000..39cb8234
--- /dev/null
+++ b/slider/defaultfunctionality/App.vue
@@ -0,0 +1,120 @@
+<template>
+    <div style="width: 550px">
+        <div style="height: 180px;">
+            <div style="float: left">
+
+                <span style="font-style: italic;">Red</span>
+                <JqxSlider ref="redSlider" @change="setColor()"
+                    :height="60" :min="0" :max="255" :tickLabelFormatFunction="tickLabelFormatFunction"
+                    :value="0" :step="25.5" :mode="'fixed'" :tooltipFormatFunction="tooltipFormatFunction"
+                    :showTickLabels="true" :tooltip="true" :ticksFrequency="25.5">
+                </JqxSlider>
+
+                <span style="font-style: italic;">Green</span>
+                <JqxSlider ref="greenSlider" @change="setColor()"
+                    :height="60" :min="0" :max="255" :tickLabelFormatFunction="tickLabelFormatFunction"
+                    :value="0" :step="25.5" :mode="'fixed'" :tooltipFormatFunction="tooltipFormatFunction"
+                    :showTickLabels="true" :tooltip="true" :ticksFrequency="25.5">
+                </JqxSlider>
+
+                <span style="font-style: italic;">Blue</span>
+                <JqxSlider ref="blueSlider" @change="setColor()"
+                    :height="60" :min="0" :max="255" :tickLabelFormatFunction="tickLabelFormatFunction"
+                    :value="255" :step="25.5" :mode="'fixed'" :tooltipFormatFunction="tooltipFormatFunction"
+                    :showTickLabels="true" :tooltip="true" :ticksFrequency="25.5">
+                </JqxSlider>
+
+            </div>
+            <div class="jqx-rc-all colorBlock" id="colorBlock">
+                <div id="colorLabel"></div>
+            </div>
+        </div>
+
+        <JqxCheckBox @change="checkBoxOnChange($event)" :width="200" :checked="false">
+            Smooth Thumb Drag
+        </JqxCheckBox>
+    </div>
+</template>
+
+<script>
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+    import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
+
+    export default {
+        components: {
+            JqxSlider,
+            JqxCheckBox
+        },
+        mounted: function () {
+            this.setColor();
+        },
+        methods: {
+            checkBoxOnChange: function (event) {
+                const checked = event.args.checked;
+                const value = checked ? 'default' : 'fixed';
+
+                this.$refs.redSlider.mode = value;
+                this.$refs.greenSlider.mode = value;
+                this.$refs.blueSlider.mode = value;
+            },
+            setColor: function () {
+                const red = this.fixHex(Math.round(this.$refs.redSlider.value).toString(16)),
+                    green = this.fixHex(Math.round(this.$refs.greenSlider.value).toString(16)),
+                    blue = this.fixHex(Math.round(this.$refs.blueSlider.value).toString(16));
+
+                document.querySelector('#colorBlock').style.backgroundColor = '#' + red + green + blue;
+                document.querySelector('#colorLabel').innerHTML = ('#' + red + green + blue).toUpperCase();
+
+                const color = this.getTextElement({ r: parseInt(red, 16), g: parseInt(green, 16), b: parseInt(blue, 16) });
+                document.querySelector('#colorLabel').style.color = color;
+            },
+            fixHex: function (hex) {
+                return (hex.length < 2) ? '0' + hex : hex;
+            },
+            getTextElement: function (color) {
+                const nThreshold = 105;
+                const bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
+                const foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White';
+                return foreColor;
+            },
+            tickLabelFormatFunction: function (value) {
+                if (value == 0) return value;
+                if (value == 255) return value;
+                return "";
+            },
+            tooltipFormatFunction: function (value) {
+                if (this.$refs.redSlider.mode === 'default') {
+                    if (value < 10) return new Number(value.toPrecision(3));
+                    if (value > 10 && value < 100) return new Number(value.toPrecision(4));
+                    else return new Number(value.toPrecision(5));
+                }
+                else {
+                    if (value < 10) return new Number(value.toPrecision(3));
+                    if (value > 10 && value < 256) return new Number(value.toPrecision(4));
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .colorBlock {
+        border: 1px solid #aaa;
+        width: 200px;
+        height: 200px;
+        float: right;
+        -moz-border-radius: 5px;
+        -webkit-border-radius: 5px;
+        border-radius: 5px;
+    }
+
+    .colorLabel {
+        padding: 6px;
+    }
+
+    .jqx-checkbox {
+        position: relative;
+        left: 45px;
+        top: 20px;
+    }
+</style>
\ No newline at end of file
diff --git a/slider/defaultfunctionality/main.js b/slider/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/slider/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/slider/defaultfunctionality/package.json b/slider/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/slider/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/slider/events/App.vue b/slider/events/App.vue
new file mode 100644
index 00000000..578cfb30
--- /dev/null
+++ b/slider/events/App.vue
@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <JqxSlider :mode="'fixed'" @change="displayEvent($event)" />
+
+        <br />
+
+        <div style="font-family: Verdana; font-size: 12px;">
+            Events:
+        </div>
+
+        <JqxPanel ref="myPanel" style="border-width: 0px;" :width="450" :height="50" />
+    </div>
+</template>
+
+<script>
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxSlider,
+            JqxPanel
+        },
+        methods: {
+            displayEvent : function (event) {
+                const eventType = event.type;
+                const eventData = ': ' + event.args.value;
+                this.$refs.myPanel.clearcontent();
+                this.$refs.myPanel.prepend('<div class="item" style="margin-top: 5px;">' + eventType + eventData + '</div>');
+            }
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/slider/events/main.js b/slider/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/slider/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/slider/events/package.json b/slider/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/slider/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/slider/fluidsize/App.vue b/slider/fluidsize/App.vue
new file mode 100644
index 00000000..4825f1b5
--- /dev/null
+++ b/slider/fluidsize/App.vue
@@ -0,0 +1,26 @@
+<template>
+    <JqxSlider
+        :width="'90%'" :height="70"  :value="5" :mode="'fixed'"
+        :showTickLabels="true" :showButtons="true" :tooltip="true">
+    </JqxSlider>
+</template>
+
+<script>
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+
+    export default {
+        components: {
+            JqxSlider
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 50px;
+        overflow: hidden;
+    }
+</style>
\ No newline at end of file
diff --git a/slider/fluidsize/main.js b/slider/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/slider/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/slider/fluidsize/package.json b/slider/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/slider/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/slider/keyboardnavigation/App.vue b/slider/keyboardnavigation/App.vue
new file mode 100644
index 00000000..e7d6ed00
--- /dev/null
+++ b/slider/keyboardnavigation/App.vue
@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <JqxSlider ref="mySlider" :width="400" :mode="'fixed'" :min="0" :ticksFrequency="1" />
+
+        <div class="legend">
+            <ul>
+                <li><b>Tab</b> - Like other widgets, the jqxSlider widget receives focus by tabbing into it. Once focus is received, users will be able to use the keyboard to change the slider's value. A second tab will take the user out of the widget.</li>
+                <li><b>Shift+Tab</b> - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous focusable element in the tab order.</li>
+                <li><b>Right Arrow</b> and <b>Up Arrow</b> - increase the value of the slider.</li>
+                <li><b>Left Arrow</b> and <b>Down Arrow</b> - decrease the value of the slider.</li>
+                <li><b>Home</b> - move to the minimum value of the slider.</li>
+                <li><b>End</b> - move to the maximum value of the slider.</li>
+            </ul>
+        </div>
+    </div>
+
+</template>
+
+<script>
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+
+    export default {
+        components: {
+            JqxSlider
+        },
+        mounted: function () {
+            this.$refs.mySlider.focus();
+        }
+    }
+</script>
+
+<style>
+    .jqx-slider {
+        margin-top: 50px;
+        margin-bottom: 50px;
+    }
+
+    .legend {
+        font-family: Verdana;
+        font-size: 12px;
+        width: 400px;
+        margin-left: 20px;
+        float: left;
+    }
+</style>
\ No newline at end of file
diff --git a/slider/keyboardnavigation/main.js b/slider/keyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/slider/keyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/slider/keyboardnavigation/package.json b/slider/keyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/slider/keyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/slider/layout/App.vue b/slider/layout/App.vue
new file mode 100644
index 00000000..599b120a
--- /dev/null
+++ b/slider/layout/App.vue
@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <div class="left-container">
+            <div class="label">Default Layout</div>
+            <JqxSlider :width="300" :height="50" />
+            <JqxSlider :width="50" :height="300" :orientation="'vertical'" />
+        </div>
+
+        <div class="right-container">
+            <div class="label">Reversed Layout</div>
+            <JqxSlider :width="300" :height="50" :layout="'reverse'" />
+            <JqxSlider :width="50" :height="300" :layout="'reverse'" :orientation="'vertical'" style="float: right" />
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+
+    export default {
+        components: {
+            JqxSlider
+        }
+    }
+</script>
+
+<style>
+    .left-container {
+        float: left;
+    }
+
+    .right-container {
+        float: right;
+    }
+
+    .label {
+        margin: 10px 0px;
+    }
+</style>
\ No newline at end of file
diff --git a/slider/layout/main.js b/slider/layout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/slider/layout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/slider/layout/package.json b/slider/layout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/slider/layout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/slider/rangeslider/App.vue b/slider/rangeslider/App.vue
new file mode 100644
index 00000000..6c7ebfb7
--- /dev/null
+++ b/slider/rangeslider/App.vue
@@ -0,0 +1,324 @@
+<template>
+    <div class="main-container Jqx-rc-all">
+        <div style="float: left">
+            <div id="catalogue" class="catalogue Jqx-rc-all"></div>
+        </div>
+        <div id="options" class="options Jqx-rc-all">
+            <div id="options-container" class="options-container">
+                <div class="label">Price</div>
+                <div class="options-value">
+                    <div style="float: left" id="priceMin"></div>
+                    <div style="float: right" id="priceMax"></div>
+                </div>
+                <br />
+                <JqxSlider filter="price" ref="priceSlider"
+                    @change="priceSliderChange($event)"
+                    :width="180" :height="30" 
+                    :min="500" :max="4000" :step="350"
+                    :values="[500, 4000]" :showButtons="true"
+                    :mode="'fixed'" :rangeSlider="true"
+                    :ticksFrequency="350">
+                </JqxSlider>
+                <div class="label">Screen Size</div>
+                <div class="options-value">
+                    <div style="float: left" id="displayMin"></div>
+                    <div style="float: right" id="displayMax"></div>
+                </div>
+                <br />
+                <JqxSlider filter="display" ref="displaySlider"
+                    @change="displaySliderChange($event)"
+                    :width="180" :height="30" 
+                    :min="9" :max="19" :step="1"
+                    :values="[9, 19]" :showButtons="true"
+                    :mode="'fixed'" :rangeSlider="true"
+                    :ticksFrequency="1">
+                </JqxSlider>
+                <div class="label">RAM</div>
+                <div class="options-value">
+                    <div style="float: left" id="ramMin"></div>
+                    <div style="float: right" id="ramMax"></div>
+                </div>
+                <br />
+                <JqxSlider filter="ram" ref="ramSlider"
+                    @change="ramSliderChange($event)"
+                    :width="180" :height="30" 
+                    :min="2" :max="12" :step="1"
+                    :values="[2, 12]" :showButtons="true"  
+                    :mode="'fixed'" :rangeSlider="true"
+                    :ticksFrequency="1">
+                </JqxSlider>
+                <div class="label">HDD</div>
+                <div class="options-value">
+                    <div style="float: left" id="hddMin"></div>
+                    <div style="float: right" id="hddMax"></div>
+                </div>
+                <br />
+                <JqxSlider filter="hdd" ref="hddSlider"
+                    @change="hddSliderChange($event)"
+                    :width="180" :height="30" 
+                    :min="150" :max="1500" :step="135"
+                    :values="[150, 1500]" :showButtons="true"            
+                    :mode="'fixed'" :rangeSlider="true"
+                    :ticksFrequency="135">                          
+                </JqxSlider>
+                <JqxButton ref="resetButton" @click="clickResetButton()" class="resetButton">Reset filters</JqxButton>
+            </div>
+        </div>
+        <div style="clear: both;"></div>
+    </div>
+</template>
+
+<script>
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
+
+    export default {
+        components: {
+            JqxSlider,
+            JqxButton
+        },
+        data: function () {
+            return {
+                laptops: {
+                    'l-1': { ram: 2, price: 510, display: 15.6, hdd: 320, model: 'Toshiba Satellite C660', marked: false },
+                    'l-2': { ram: 6, price: 594, display: 15.6, hdd: 500, model: 'TOSHIBA Satellite L675', marked: false },
+                    'l-3': { ram: 4, price: 918, display: 14.5, hdd: 500, model: 'HP Envy 14-1190', marked: false },
+                    'l-4': { ram: 4, price: 1165, display: 15.6, hdd: 500, model: 'Dell Vostro 3500', marked: false },
+                    'l-5': { ram: 12, price: 1306, display: 15.6, hdd: 750, model: 'ASUS N73JQ-A2', marked: false },
+                    'l-6': { ram: 8, price: 3732, display: 17, hdd: 1280, model: 'Alienware M17X', marked: false },
+                    'l-7': { ram: 4, price: 800, display: 17, hdd: 500, model: 'Toshiba Satellite P300-21E', marked: false },
+                    'l-8': { ram: 12, price: 3595, display: 18.4, hdd: 1024, model: 'ASUS NX90JQ', visible: false },
+                    'l-9': { ram: 2, price: 631, display: 14.1, hdd: 500, model: 'Packard Bell EasyNote', marked: false },
+                    'l-10': { ram: 2, price: 550, display: 13.3, hdd: 320, model: 'Lenovo ThinkPad Edge', marked: false },
+                    'l-11': { ram: 3, price: 529, display: 15.6, hdd: 320, model: 'Fujitsu Lifebook A531', marked: false },
+                    'l-12': { ram: 8, price: 2401, display: 16.5, hdd: 500, model: 'SONY VAIO F', marked: false }
+                },
+                collectFilters: {},
+                priceSlider: null,
+                displaySlider: null,
+                hddSlider: null,
+                ramSlider: null
+            }
+        },
+        mounted: function () {
+            this.priceSlider = this.$refs.priceSlider;
+            this.displaySlider = this.$refs.displaySlider;
+            this.hddSlider = this.$refs.hddSlider;
+            this.ramSlider = this.$refs.ramSlider;
+
+            this.init();
+        },
+        methods: {
+            init: function () {
+                this.drawTable();
+                this.buildFilter();
+                this.setLabelValue(this.priceSlider, 'price', this.priceSlider.value);
+                this.setLabelValue(this.displaySlider, 'display', this.displaySlider.value);
+                this.setLabelValue(this.ramSlider, 'ram', this.ramSlider.value);
+                this.setLabelValue(this.hddSlider, 'hdd', this.hddSlider.value);
+            },
+            drawTable: function () {
+                let catalogue = '<table class="demo-laptop-catalog-table"><tr>';
+                let counter = 0;
+
+                for (let laptop in this.laptops) {
+                    if (this.laptops.hasOwnProperty(laptop)) {
+                        counter += 1;
+                        if (counter % 3 === 1 && counter !== 1) {
+                            catalogue += '</tr><tr>';
+                        }
+                        catalogue += '<td class="demo-laptop-cell jqx-rc-all" id="' + laptop + '">' +
+                            '<div class="demo-laptop-cell-header"><div class="demo-laptop-cell-header-content">' + this.laptops[laptop].model + '</div></div>' +
+                            '<div class="demo-laptop-cell-content"><img src="../../../images/' + laptop + '.jpg" alt="' + this.laptops[laptop].model + '" title="' + this.laptops[laptop].model + '" /></div>' +
+                            '<div class="demo-laptop-cell-price jqx-rc-all">$ ' + this.laptops[laptop].price + '</div>' +
+                            '</td>';
+                    }
+                }
+                catalogue += '</tr></table>';
+                document.querySelector('#catalogue').innerHTML = catalogue;
+            },
+            setLabelValue: function (slider, option, value) {
+                let label;
+                switch (option) {
+                    case 'price':
+                        label = 'USD';
+                        break;
+                    case 'hdd':
+                        label = 'GB';
+                        break;
+                    case 'display':
+                        label = 'inches';
+                        break;
+                    case 'ram':
+                        label = 'GB';
+                        break;
+                }
+                document.querySelector('#' + option + 'Max').innerHTML = value.rangeEnd + ' ' + label;
+                document.querySelector('#' + option + 'Min').innerHTML = value.rangeStart + ' ' + label;
+            },
+            handleSlide: function (option, value) {
+                const updateFilter = this.updateFilter(option, value);
+                this.filterItems(updateFilter);
+                this.setLabelValue(this[option + 'Slider'], option, value);
+            },
+            filterItems: function (filter) {
+                let failed = false;
+                for (let laptop in this.laptops) {
+                    for (let property in filter) {
+                        if (filter[property].max < this.laptops[laptop][property] || filter[property].min > this.laptops[laptop][property]) {
+                            failed = true;
+                        }
+                    }
+                    if (failed) {
+                        if (!this.laptops[laptop].marked) {
+                            this.markItem(laptop);
+                        }
+                    } else {
+                        if (this.laptops[laptop].marked) {
+                            this.unmarkItem(laptop);
+                        }
+                    }
+                    failed = false;
+                }
+            },
+            resetFilters: function () {
+                this.priceSlider.setValue([this.priceSlider.min, this.priceSlider.max]);
+                this.displaySlider.setValue([this.displaySlider.min, this.displaySlider.max]);
+                this.hddSlider.setValue([this.hddSlider.min, this.hddSlider.max]);
+                this.ramSlider.setValue([this.ramSlider.min, this.ramSlider.max]);
+            },
+            buildFilter: function () {
+                const priceValue = this.priceSlider.value,
+                    displayValue = this.displaySlider.value,
+                    ramValue = this.ramSlider.value,
+                    hddValue = this.hddSlider.value;
+
+                this.collectFilters = {
+                    price: {
+                        max: priceValue.rangeEnd,
+                        min: priceValue.rangeStart
+                    },
+                    display: {
+                        max: displayValue.rangeEnd,
+                        min: displayValue.rangeStart
+                    },
+                    hdd: {
+                        max: hddValue.rangeEnd,
+                        min: hddValue.rangeStart
+                    },
+                    ram: {
+                        max: ramValue.rangeEnd,
+                        min: ramValue.rangeStart
+                    }
+                };
+            },
+            updateFilter: function (option, value) {
+                this.collectFilters[option].min = value.rangeStart;
+                this.collectFilters[option].max = value.rangeEnd;
+                return this.collectFilters;
+            },
+            unmarkItem: function (laptop) {
+                document.querySelector('#' + laptop).style.opacity = '1';
+                this.laptops[laptop].marked = false;
+            },
+            markItem: function (laptop) {
+                document.querySelector('#' + laptop).style.opacity = '0.5';
+                this.laptops[laptop].marked = true;
+            },
+            priceSliderChange: function (event) {
+                this.handleSlide('price', event.args.value);
+            },
+            displaySliderChange: function (event) {
+                this.handleSlide('display', event.args.value);
+            },
+            ramSliderChange: function (event) {
+                this.handleSlide('ram', event.args.value);
+            },
+            hddSliderChange: function (event) {
+                this.handleSlide('hdd', event.args.value);
+            },
+            clickResetButton() {
+                this.resetFilters();
+            }
+        }
+    }
+</script>
+
+<style>
+    .demo-laptop-catalog-table {
+        table-layout: fixed;
+        border-collapse: separate;
+    }
+
+    .demo-laptop-cell {
+        border: 1px solid #ccc;
+    }
+
+    .demo-laptop-cell-header-content {
+        top: 5px;
+        position: relative;
+    }
+
+    .demo-laptop-cell-header {
+        border: 0px solid #ccc;
+        border-bottom-width: 1px;
+        height: 20px;
+        font-size: 10px;
+        text-align: center;
+        font-weight: bold;
+        vertical-align: middle;
+        background: #e3e3e3;
+    }
+
+    .demo-laptop-cell-content {
+        padding-top: 5px;
+    }
+
+    .demo-laptop-cell-price {
+        padding: 2px 3px 2px 3px;
+        color: #fff;
+        float: right;
+        background: #000;
+        font-weight: bold;
+    }
+
+    .catalogue {
+        border: 1px solid #bbb;
+        padding: 3px;
+        background: #fff;
+    }
+
+    .options {
+        width: 200px;
+        margin-left: 5px;
+        float: left;
+    }
+
+    .main-container {
+        padding: 2px;
+    }
+
+    .label {
+        font-size: 13px;
+        font-family: Arial;
+        color: #333;
+        font-weight: bold;
+        margin-bottom: 5px;
+        margin-top: 15px;
+        width: 100%;
+        text-align: left;
+    }
+
+    .options-value {
+        font-size: 11px;
+    }
+
+    .options-container {
+        padding: 10px;
+        text-align: center;
+    }
+
+    .resetButton {
+        margin-top: 35px;
+    }
+</style>
\ No newline at end of file
diff --git a/slider/rangeslider/main.js b/slider/rangeslider/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/slider/rangeslider/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/slider/rangeslider/package.json b/slider/rangeslider/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/slider/rangeslider/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/slider/righttoleft/App.vue b/slider/righttoleft/App.vue
new file mode 100644
index 00000000..6a2fec02
--- /dev/null
+++ b/slider/righttoleft/App.vue
@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <JqxSlider @change="displayEvent($event)" :width="400" :mode="'fixed'" :rtl="true" />
+
+        <JqxPanel ref="myPanel" :width="300" :height="400" />
+    </div>
+
+</template>
+
+<script>
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxSlider,
+            JqxPanel
+        },
+        methods: {
+            displayEvent : function (event) {
+                let eventData = event.type;
+                eventData += ': ' + event.args.value;
+                this.$refs.myPanel.clearcontent();
+                this.$refs.myPanel.prepend('<div class="item" style="margin-top: 5px;">' + eventData + '</div>');
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-slider {
+        margin-top: 50px;
+        margin-bottom: 20px;
+    }
+
+    .jqx-panel {
+        border: none;
+    }
+</style>
\ No newline at end of file
diff --git a/slider/righttoleft/main.js b/slider/righttoleft/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/slider/righttoleft/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/slider/righttoleft/package.json b/slider/righttoleft/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/slider/righttoleft/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/slider/sliderlabels/App.vue b/slider/sliderlabels/App.vue
new file mode 100644
index 00000000..c891bcc8
--- /dev/null
+++ b/slider/sliderlabels/App.vue
@@ -0,0 +1,23 @@
+<template>
+    <JqxSlider
+         :width="400"  :height="60"  :min="0" :max="20"
+         :value="7"  :ticksFrequency="5"  :showMinorTicks="true" 
+         :showTickLabels="true"  :minorTicksFrequency="1"
+    />
+</template>
+
+<script>
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+
+    export default {
+        components: {
+            JqxSlider
+        }
+    }
+</script>
+
+<style>
+    .jqx-slider {
+        margin-top: 50px;
+    }
+</style>
\ No newline at end of file
diff --git a/slider/sliderlabels/main.js b/slider/sliderlabels/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/slider/sliderlabels/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/slider/sliderlabels/package.json b/slider/sliderlabels/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/slider/sliderlabels/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/slider/slidertooltip/App.vue b/slider/slidertooltip/App.vue
new file mode 100644
index 00000000..65343d13
--- /dev/null
+++ b/slider/slidertooltip/App.vue
@@ -0,0 +1,19 @@
+<template>
+    <JqxSlider :tooltip="true" :mode="'fixed'" />
+</template>
+
+<script>
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+
+    export default {
+        components: {
+            JqxSlider
+        }
+    }
+</script>
+
+<style>
+    .jqx-slider {
+        margin-top: 50px;
+    }
+</style>
\ No newline at end of file
diff --git a/slider/slidertooltip/main.js b/slider/slidertooltip/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/slider/slidertooltip/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/slider/slidertooltip/package.json b/slider/slidertooltip/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/slider/slidertooltip/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/slider/templates/App.vue b/slider/templates/App.vue
new file mode 100644
index 00000000..572f23b2
--- /dev/null
+++ b/slider/templates/App.vue
@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <div class="label">Default</div>
+        <JqxSlider :tooltip="true" :mode="'fixed'" />
+
+        <div class="label">Primary</div>
+        <JqxSlider :template="'primary'" :tooltip="true" :mode="'fixed'" />
+
+        <div class="label">Success</div>
+        <JqxSlider :template="'success'" :tooltip="true" :mode="'fixed'" />
+
+        <div class="label">Info</div>
+        <JqxSlider :template="'info'" :tooltip="true" :mode="'fixed'" />
+
+        <div class="label">Warning</div>
+        <JqxSlider :template="'warning'"  :tooltip="true" :mode="'fixed'" />
+
+        <div class="label">Danger</div>
+        <JqxSlider :template="'danger'" :tooltip="true" :mode="'fixed'" />
+    </div>
+</template>
+
+<script>
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+
+    export default {
+        components: {
+            JqxSlider
+        }
+    }
+</script>
+
+<style>
+    .label {
+        margin: 10px 0px;
+    }
+</style>
\ No newline at end of file
diff --git a/slider/templates/main.js b/slider/templates/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/slider/templates/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/slider/templates/package.json b/slider/templates/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/slider/templates/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/slider/twowaydatabinding/App.vue b/slider/twowaydatabinding/App.vue
new file mode 100644
index 00000000..363bc7ff
--- /dev/null
+++ b/slider/twowaydatabinding/App.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <div>The value is: {{ value }}</div><br />
+
+        <JqxSlider v-model="value" :width="200" :height="25" />
+    </div>
+</template>
+
+<script>
+    import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
+
+    export default {
+        components: {
+            JqxSlider
+        },
+        data: function () {
+            return {
+                value: 5
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/slider/twowaydatabinding/main.js b/slider/twowaydatabinding/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/slider/twowaydatabinding/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/slider/twowaydatabinding/package.json b/slider/twowaydatabinding/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/slider/twowaydatabinding/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/slider/verticalslider/App.vue b/slider/verticalslider/App.vue
new file mode 100644
index 00000000..d274b5c7
--- /dev/null
+++ b/slider/verticalslider/App.vue
@@ -0,0 +1,327 @@
+<template>
+    <div class="jqx-rc-all slider-demo-main">
+        <div id="slider-demo-header" class="jqx-rc-t slider-demo-header">
+            <div class="slider-demo-header-content">
+                Precious Cars
+            </div>
+        </div>
+        <div class="jqx-rc-b slider-demo-content">
+            <div class="jqx-rc-all slider-demo-content-inner">
+                <div class="jqx-rc-all slider-demo-content-container">
+                    <div id="navigationContainer" class="slider-demo-content-navigation">
+                        <img src="../../../images/previous.png" class="slider-demo-navigation-item" alt="Previous"
+                             title="Previous" id="previousButton" />
+                        <img src="../../../images/play.png" class="slider-demo-navigation-item" alt="Play" title="Play"
+                             id="playButton" />
+                        <img src="../../../images/stop.png" class="slider-demo-navigation-item" alt="Stop" title="Stop"
+                             id="stopButton" />
+                        <img src="../../../images/next.png" class="slider-demo-navigation-item" alt="Next" title="Next"
+                             style="margin-right: 3px" id="nextButton" />
+                    </div>
+                    <div id="slider-demo-content-0" style="display: block">
+                        <div class="slider-demo-content-image-border">
+                            <img src="../../../images/mercedes.jpg" alt="Mercedes" />
+                        </div>
+                        <div class="slider-demo-content-info">
+                            <span class="slider-demo-info-header">Brabus Black Baron</span>
+                            <div class="slider-demo-info-content">
+                                Brabus will show its Black Baron E V12, based on the 2010 Mercedes-Benz E63 AMG,
+                                at the 2009 Frankfurt Motor Show next week. Visually, Brabus Black Baron E V12
+                                gets a new engine ventilation system, new front quarter panels, an upgraded front
+                                bumper, new side skirts, a trunk mounted spoiler, new front quarter panels and awkward
+                                looking rear-wheel covers.
+                            </div>
+                        </div>
+                    </div>
+                    <div id="slider-demo-content-1" style="display: none">
+                        <div class="slider-demo-content-image-border">
+                            <img src="../../../images/jaguar.jpg" alt="Jaguar" />
+                        </div>
+                        <div class="slider-demo-content-info">
+                            <span class="slider-demo-info-header">Jaguar XFR</span>
+                            <div class="slider-demo-info-content">
+                                The Jaguar XF (type (X250) is a mid-size luxury car / sports saloon produced by
+                                British car manufacturer Jaguar. The car, which replaced the Jaguar S-Type, was
+                                launched at the 2007 Frankfurt Motor Show following the public showing of the C-XF
+                                concept in January 2007 at the North American International Auto Show.
+                            </div>
+                        </div>
+                    </div>
+                    <div id="slider-demo-content-2" style="display: none">
+                        <div class="slider-demo-content-image-border">
+                            <img src="../../../images/ferrari.jpg" alt="Ferrari" />
+                        </div>
+                        <div class="slider-demo-content-info">
+                            <span class="slider-demo-info-header">Ferrari Enzo</span>
+                            <div class="slider-demo-info-content">
+                                The Enzo was designed by Japanese Pininfarina head Ken Okuyama was initially introduced
+                                at the 2002 Motor Show in Paris and had a limited number of units priced at $ 659,330.
+                                Pininfarina wanted a car the will be entirely different from the usual approach
+                                used for its predecessors (GTO, F40 and 50).
+                            </div>
+                        </div>
+                    </div>
+                    <div id="slider-demo-content-3" style="display: none">
+                        <div class="slider-demo-content-image-border">
+                            <img src="../../../images/lamborgini.jpg" alt="Lamborgini" />
+                        </div>
+                        <div class="slider-demo-content-info">
+                            <span class="slider-demo-info-header">Lamborghini Gallardo</span>
+                            <div class="slider-demo-info-content">
+                                The Lamborghini Gallardo is a sports car built by Lamborghini. The Gallardo is Lamborghini's
+                                most-produced model to date, with over 10,000 built in its first seven years of
+                                production. The Gallardo offers two choices of transmissions, H-Box and an advanced
+                                six-speed electro-hydraulically controlled semi-automatic robotized manual.
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="slider-demo-slider-container">
+                <JqxSlider ref="mySlider"
+                    @change="change($event)"
+                    :height="250" :width="36" :min="0" :max="3"
+                    :orientation="'vertical'" :ticksFrequency="1"           
+                    :value="0" :tooltip="false" :mode="'fixed'">                        
+                </JqxSlider>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxSlider from "jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue";
+
+    export default {
+        components: {
+            JqxSlider
+        },
+        data: function () {
+            return {
+                config:
+                {
+                    currentSlide: 0, 
+                    timeOut: null,     
+                    locked: false,
+                    contentContainerSelector: 'slider-demo-content-'
+                }
+            }
+        },
+        mounted: function () {
+            this.init();
+        },
+        methods: {
+            init: function () {
+                this.attachEventListeners();
+                this.startupConfig();
+            },
+            attachEventListeners: function () {
+                const navigationContainer = document.querySelector('#navigationContainer');
+                const nextButton = document.querySelector('#nextButton');
+                const previousButton = document.querySelector('#previousButton');
+                const playButton = document.querySelector('#playButton');
+                const stopButton = document.querySelector('#stopButton');
+
+                navigationContainer.addEventListener('mouseenter', () => {
+                    let loop = 0;
+                    const interval = setInterval(() => {
+                        navigationContainer.style.opacity = String(loop);
+                        loop += 0.2;
+                        if (loop >= 1) {
+                            clearInterval(interval);
+                            navigationContainer.style.opacity = String(1);
+                        }
+                    }, 50);
+                });
+
+                navigationContainer.addEventListener('mouseleave', () => {
+                    let loop = 1;
+                    const interval = setInterval(() => {
+                        navigationContainer.style.opacity = String(loop);
+                        loop -= 0.2;
+                        if (loop <= 0.3) {
+                            clearInterval(interval);
+                            navigationContainer.style.opacity = String(0.1);
+                        }
+                    }, 50);
+                });
+
+                nextButton.addEventListener('click', () => {
+                    this.$refs.mySlider.incrementValue();
+                });
+
+                previousButton.addEventListener('click', () => {
+                    this.$refs.mySlider.decrementValue();
+                });
+
+                playButton.addEventListener('click', () => {
+                    if (!this.config.timeOut) {
+                        this.startSlideShow();
+                    }
+                });
+
+                stopButton.addEventListener('click', () => {
+                    this.stopSlideShow();
+                });
+            },
+            startupConfig: function () {
+                const navigationContainer = document.querySelector('#navigationContainer');
+                navigationContainer.style.opacity = String(0.1);
+            },
+            startSlideShow : function () {
+                this.config.timeOut = setTimeout(() => {
+                    this.startSlideShow();
+                    const slider = this.$refs.mySlider;
+                    const currentValue = slider.value,
+                        max = slider.max,
+                        min = slider.min;
+                    if (currentValue < max) {
+                        slider.incrementValue();
+                    } else {
+                        slider.setValue(min);
+                    }
+                }, 2000);
+            },
+            stopSlideShow : function () {
+                clearTimeout(this.config.timeOut);
+                this.config.timeOut = null;
+            },
+            hideCurrentSlide: function () {
+                const selector = '#' + this.config.contentContainerSelector + this.config.currentSlide;
+                document.querySelector(selector).style.display = 'none';
+            },
+            showSlide: function (id) {
+                this.hideCurrentSlide();
+
+                const selector = '#' + this.config.contentContainerSelector + id;
+                document.querySelector(selector).style.display = 'block';
+                document.querySelector(selector).style.opacity = String(0.5);
+                setTimeout(_=> { document.querySelector(selector).style.opacity = String(1); }, 100);
+                this.config.currentSlide = id;
+            },
+            change: function (event) {
+                this.showSlide(event.args.value);
+            }
+        }
+    }
+</script>
+
+<style>
+    .slider-demo-navigation-item {
+        margin-left: 3px;
+        cursor: pointer;
+    }
+
+    .slider-demo-info-header {
+        font-size: 20px;
+        font-family: Impact;
+        color: #aaa;
+    }
+
+    .slider-demo-info-content {
+        padding-top: 5px;
+        font-size: 11px;
+        width: 210px;
+        text-align: left;
+        font-family: Verdana, Arial;
+    }
+
+    .slider-demo-main {
+        width: 665px;
+        text-align: center;
+        border: 1px solid #ccc;
+        height: 376px;
+        padding: 3px;
+        -moz-border-radius: 10px;
+        -webkit-border-radius: 10px;
+        border-radius: 10px;
+        background: #332f2f;
+    }
+
+    .slider-demo-header {
+        background-image: url(../../../images/slider-demo-header-background.png);
+        width: 665px;
+        height: 76px;
+    }
+
+    .slider-demo-header-content {
+        position: relative;
+        right: 25px;
+        top: 15px;
+        color: #eee;
+        font-family: Times New Roman, Verdana;
+        font-size: 35px;
+        text-align: right;
+    }
+
+    .slider-demo-content {
+        width: 663px;
+        height: 300px;
+        border: 1px solid #fbfbfb;
+        border-top-width: 0px;
+        background: #fafafa;
+        position: relative;
+    }
+
+    .slider-demo-content-inner {
+        position: relative;
+        width: 550px;
+        background-color: #fff;
+        height: 250px;
+        float: right;
+        right: 25px;
+        top: 25px;
+        border: 1px solid #ccc;
+        background-color: #fbfbfb;
+    }
+
+    .slider-demo-content-container {
+        position: relative;
+        left: 9px;
+        top: 9px;
+        width: 530px;
+        background-color: #fff;
+        height: 230px;
+        border: 1px solid #F5F5F5;
+    }
+
+    .slider-demo-content-navigation {
+        z-index: 50;
+        position: absolute;
+        top: 200px;
+        left: 200px;
+        height: 26px;
+        width: 130px;
+        background-color: #555;
+        -moz-border-radius: 10px;
+        -webkit-border-radius: 10px;
+        border-radius: 10px;
+    }
+
+    .slider-demo-content-image-border {
+        background-color: #eee;
+        padding: 5px;
+        border: 1px solid #ccc;
+        width: 231px;
+        height: 154px;
+        position: relative;
+        top: 30px;
+        left: 15px;
+        float: left;
+    }
+
+    .slider-demo-content-info {
+        position: relative;
+        top: 30px;
+        left: 50px;
+        float: left;
+    }
+
+    .slider-demo-slider-container {
+        position: relative;
+        top: 25px;
+        left: 20px;
+        text-align: left;
+        float: left;
+    }
+</style>
\ No newline at end of file
diff --git a/slider/verticalslider/main.js b/slider/verticalslider/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/slider/verticalslider/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/slider/verticalslider/package.json b/slider/verticalslider/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/slider/verticalslider/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/sortable/connectedlist/App.vue b/sortable/connectedlist/App.vue
new file mode 100644
index 00000000..d1876f40
--- /dev/null
+++ b/sortable/connectedlist/App.vue
@@ -0,0 +1,88 @@
+<template>
+    <div>
+
+        <JqxSortable ref="mySortable1" :autoCreate="false"></JqxSortable>
+       
+        <JqxSortable ref="mySortable2" :autoCreate="false"></JqxSortable>
+
+    </div>
+</template>
+
+<script>
+    import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
+
+    export default {
+        components: {
+            JqxSortable
+        },
+        data: function () {
+            return {
+                options: { connectWith: '.sortable', opacity: 0.5 },
+                firstNames: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne'],
+                lastNames: ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth'],
+                titles: ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager', 'Sales Representative', 'Sales Representative', 'Inside Sales Coordinator', 'Sales Representative']
+            }
+        },
+        mounted: function () {
+            this.loadInfo();
+
+            this.$refs.mySortable1.createComponent(this.options);
+            this.$refs.mySortable2.createComponent(this.options);
+        },
+        methods: {
+            loadInfo: function () {
+                let sortableList1 = '';
+                let sortableList2 = '';
+
+                const firstNamesHalf = Math.floor(this.firstNames.length / 2);
+
+                for (let i = 0; i < this.firstNames.length; i++) {
+                    const imgurl = '../../../images/' + this.firstNames[i].toLowerCase() + '.png';
+                    const img = '<img height="50" width="40" src="' + imgurl + '"/>';
+                    const element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + this.firstNames[i] + ' ' + this.lastNames[i] + '</td></tr><tr><td>' + this.titles[i] + '</td></tr></table></div>';
+
+
+                    if (i < firstNamesHalf) {
+                        sortableList1 = sortableList1 + element;
+                    } else {
+                        sortableList2 = sortableList2 + element;
+                    }
+                }
+
+                const mySortable1 = this.$refs.mySortable1.$el;
+                const mySortable2 = this.$refs.mySortable2.$el;
+
+                mySortable1.classList.add('sortable');
+                mySortable2.classList.add('sortable');
+
+                mySortable1.innerHTML = sortableList1;
+                mySortable2.innerHTML = sortableList2;
+
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-sortable {
+        margin: 2px;
+        padding: 5px;
+        float: left;
+        width: 200px;
+        border: lightblue solid 1px;
+        margin-right: 30px;
+    }
+
+    .jqx-sortable div {
+        border-radius: 5px;
+        padding: 5px;
+        cursor: pointer;
+        background-color: white;
+        color: black;
+        border: 1px solid transparent;
+    }
+
+    .jqx-sortable div:hover {
+        border: 1px solid #356AA0;
+    }
+</style>
\ No newline at end of file
diff --git a/sortable/connectedlist/main.js b/sortable/connectedlist/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/sortable/connectedlist/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/sortable/connectedlist/package.json b/sortable/connectedlist/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/sortable/connectedlist/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/sortable/defaultfunctionality/App.vue b/sortable/defaultfunctionality/App.vue
new file mode 100644
index 00000000..d68ddafb
--- /dev/null
+++ b/sortable/defaultfunctionality/App.vue
@@ -0,0 +1,57 @@
+<template>
+    <JqxSortable ref="mySortable"></JqxSortable>
+</template>
+
+<script>
+    import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
+
+    export default {
+        components: {
+            JqxSortable
+        },
+        data: function () {
+            return {
+                firstNames: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven'],
+                lastNames: ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan'],
+                titles: ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager']
+            }
+        },
+        mounted: function () {
+            this.loadInfo();
+        },
+        methods: {
+            loadInfo: function () { 
+                for (let i = 0; i < this.firstNames.length; i++) {
+                    const element = document.createElement('div');
+                    const imgurl = '../../../images/' + this.firstNames[i].toLowerCase() + '.png';
+                    const img = '<img height="50" width="40" src="' + imgurl + '"/>';
+                    element.innerHTML = '<table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + this.firstNames[i] + ' ' + this.lastNames[i] + '</td></tr><tr><td>' + this.titles[i] + '</td></tr></table>';
+                    this.$refs.mySortable.$el.appendChild(element);
+                }   
+            }      
+        }
+    }
+</script>
+
+<style>
+    .jqx-sortable {
+        margin: 2px;
+        padding: 5px;
+        float: left;
+        width: 200px;
+        border: lightblue solid 1px;
+    }
+
+    .jqx-sortable > div {
+        border-radius: 5px;
+        padding: 5px;
+        cursor: pointer;
+        background-color: white;
+        color: black;
+        border: 1px solid transparent;
+    }
+
+    .jqx-sortable div:hover {
+        border: 1px solid #356AA0;
+    }
+</style>
\ No newline at end of file
diff --git a/sortable/defaultfunctionality/main.js b/sortable/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/sortable/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/sortable/defaultfunctionality/package.json b/sortable/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/sortable/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/sortable/displayastable/App.vue b/sortable/displayastable/App.vue
new file mode 100644
index 00000000..aefa5284
--- /dev/null
+++ b/sortable/displayastable/App.vue
@@ -0,0 +1,47 @@
+<template>
+    <JqxSortable>
+        <div class="inner-div">1</div>
+        <div class="inner-div">2</div>
+        <div class="inner-div">3</div>
+        <div class="inner-div">4</div>
+        <div class="inner-div">5</div>
+        <div class="inner-div">6</div>
+        <div class="inner-div">7</div>
+        <div class="inner-div">8</div>
+        <div class="inner-div">9</div>
+    </JqxSortable>
+</template>
+
+<script>
+    import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
+
+    export default {
+        components: {
+            JqxSortable
+        }
+    }
+</script>
+
+<style>
+    .jqx-sortable {
+        padding: 5px;
+        float: left;
+        width: 312px;
+        border: lightblue solid 2px;
+    }
+
+    .inner-div {
+        margin: 1px;
+        display: inline-block;
+        background-color: lightblue;
+        border: DodgerBlue solid 1px;
+        padding: 0;
+        float: left;
+        padding-left: 0;
+        text-align: center;
+        cursor: pointer;
+        font-size: 5.2em;
+        width: 100px;
+        height: 100px;
+    }
+</style>
\ No newline at end of file
diff --git a/sortable/displayastable/main.js b/sortable/displayastable/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/sortable/displayastable/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/sortable/displayastable/package.json b/sortable/displayastable/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/sortable/displayastable/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/sortable/events/App.vue b/sortable/events/App.vue
new file mode 100644
index 00000000..16cb8a43
--- /dev/null
+++ b/sortable/events/App.vue
@@ -0,0 +1,91 @@
+<template>
+    <div>
+        <JqxSortable ref="mySortable"
+             @activate="eventLog($event)"
+             @beforeStop="eventLog($event)"
+             @change="eventLog($event)"
+             @deactivate="eventLog($event)"
+             @out="eventLog($event)"
+             @over="eventLog($event)"
+             @receive="eventLog($event)"
+             @remove="eventLog($event)"
+             @start="eventLog($event)"
+             @stop="eventLog($event)"
+             @update="eventLog($event)"
+             @create="eventLog($event)"
+             :opacity="0.5">
+        </JqxSortable>
+
+        <span>Events:</span>
+        <JqxPanel ref="myPanel" :width="200" :height="330"></JqxPanel>
+    </div>
+</template>
+
+<script>
+    import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
+    import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
+
+    export default {
+        components: {
+            JqxSortable,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                firstNames: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven'],
+                lastNames: ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan'],
+                titles: ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager']
+            }
+        },
+        mounted: function () {
+            this.loadInfo();
+        },
+        methods: {
+            loadInfo: function () { 
+                for (let i = 0; i < this.firstNames.length; i++) {
+                    const element = document.createElement('div');
+                    const imgurl = '../../../images/' + this.firstNames[i].toLowerCase() + '.png';
+                    const img = '<img height="50" width="40" src="' + imgurl + '"/>';
+                    element.innerHTML = '<table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + this.firstNames[i] + ' ' + this.lastNames[i] + '</td></tr><tr><td>' + this.titles[i] + '</td></tr></table>';
+                    this.$refs.mySortable.$el.appendChild(element);
+                }   
+            },
+            eventLog: function (event) {
+                this.$refs.myPanel.prepend('<div style="margin-top: 5px;">' + event.type + '</div>');
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-sortable {
+        margin: 2px;
+        padding: 5px;
+        float: left;
+        width: 200px;
+        border: lightblue solid 1px;
+        margin-right: 30px;
+    }
+
+    .jqx-sortable > div {
+        border-radius: 5px;
+        padding: 5px;
+        cursor: pointer;
+        background-color: white;
+        color: black;
+        border: 1px solid transparent;
+    }
+
+    .jqx-sortable div:hover {
+        border: 1px solid #356AA0;
+    }
+
+    .jqx-panel {
+        margin-top: 20px;
+        border: none !important;
+    }
+
+    span {
+        font-weight: bold;
+    }
+</style>
\ No newline at end of file
diff --git a/sortable/events/main.js b/sortable/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/sortable/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/sortable/events/package.json b/sortable/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/sortable/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/splitter/api/App.vue b/splitter/api/App.vue
new file mode 100644
index 00000000..32247396
--- /dev/null
+++ b/splitter/api/App.vue
@@ -0,0 +1,87 @@
+<template>
+    <div>
+        <JqxButton ref="orientationButton" @click="orientationButtonClick()" :width="90">Orientation</JqxButton>
+
+        <JqxButton ref="expandFirstButton" @click="expandFirstButtonClick()" :width="90">Expand first</JqxButton>
+
+        <JqxButton ref="expandLastButton" @click="expandLastButtonClick()" :width="90">Expand last</JqxButton>
+
+        <JqxButton ref="collapseFirstButton" @click="collapseFirstButtonClick()" :width="97">Collapse first</JqxButton>
+
+        <JqxButton ref="collapseLastButton" @click="collapseLastButtonClick()" :width="97">Collapse last</JqxButton>
+
+        <JqxButton ref="enableButton" @click="enableButtonClick()" :width="90">Enable</JqxButton>
+
+        <JqxButton ref="disableButton" @click="disableButtonClick()" :width="90">Disable</JqxButton>
+
+        <br /><br />
+
+        <JqxSplitter ref="mySplitter" :height="600" :width="850" :panels="[{ size: 250 }]">
+            <div style="background-color:#F5FFF2;"></div>
+            <div style="background-color:#EBF1FF;"></div>
+        </JqxSplitter>
+    </div>
+</template>
+
+<script>
+    import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxSplitter,
+            JqxButton
+        },
+        methods: {
+            orientationButtonClick: function () {
+                const currentOrientation = this.$refs.mySplitter.orientation;
+                if (currentOrientation === 'vertical') {
+                    this.$refs.mySplitter.orientation = 'horizontal';
+                } else {
+                    this.$refs.mySplitter.orientation = 'vertical';
+                }
+            },
+            expandFirstButtonClick: function () {
+                const panels = this.$refs.mySplitter.panels;
+                panels[0].collapsible = true;
+                panels[1].collapsible = false;
+                this.$refs.mySplitter.panels = panels;
+                this.$refs.mySplitter.expand();
+            },
+            expandLastButtonClick: function () {
+                const panels = this.$refs.mySplitter.panels;
+                panels[0].collapsible = false;
+                panels[1].collapsible = true;
+                this.$refs.mySplitter.panels = panels;
+                this.$refs.mySplitter.expand();
+            },
+            collapseFirstButtonClick: function () {
+                const panels = this.$refs.mySplitter.panels;
+                panels[0].collapsible = true;
+                panels[1].collapsible = false;
+                this.$refs.mySplitter.panels = panels;
+                this.$refs.mySplitter.collapse();
+            },
+            collapseLastButtonClick: function () {
+                const panels = this.$refs.mySplitter.panels;
+                panels[0].collapsible = false;
+                panels[1].collapsible = true;
+                this.$refs.mySplitter.panels = panels;
+                this.$refs.mySplitter.collapse();
+            },
+            enableButtonClick: function () {
+                this.$refs.mySplitter.enable();
+            },
+            disableButtonClick: function () {
+                this.$refs.mySplitter.disable();
+            }      
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        display: inline-block;
+        margin-right: 5px;
+    }
+</style>
\ No newline at end of file
diff --git a/splitter/api/main.js b/splitter/api/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/splitter/api/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/splitter/api/package.json b/splitter/api/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/splitter/api/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/splitter/defaultfunctionality/App.vue b/splitter/defaultfunctionality/App.vue
new file mode 100644
index 00000000..61e43e61
--- /dev/null
+++ b/splitter/defaultfunctionality/App.vue
@@ -0,0 +1,207 @@
+<!-- axios used for HTTP queries -> https://github.com/axios/axios -->
+
+<template>
+    <JqxSplitter :width="850" :height="600"
+                 :panels="[{ size: 200, min: 100 },{ min: 200, size: 400 }]">
+        <div>
+            <JqxExpander style="border: none;" ref="feedExpander"
+                         :width="'100%'" :height="'100%'"
+                         :toggleMode="'none'" :showArrow="false">
+                <div class="jqx-hideborder">
+                    Feeds
+                </div>
+                <div class="jqx-hideborder jqx-hidescrollbars">
+                    <JqxTree ref="myTree" @select="onTreeSelect($event)"
+                             :width="'100%'" :height="'100%'">
+                        <ul>
+                            <li item-expanded="true" id="t1">
+                                <img src="../../../images/contactsIcon.png" /><span item-title="true">News and Blogs</span>
+                                <ul>
+                                    <li>
+                                        <img src="../../../images/favorites.png" /><span item-title="true">Favorites</span>
+                                        <ul>
+                                            <li>
+                                                <img src="../../../images/folder.png" /><span item-title="true">ScienceDaily</span>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                    <li>
+                                        <img src="../../../images/folder.png" /><span item-title="true">Geek.com</span>
+                                    </li>
+                                    <li>
+                                        <img src="../../../images/folder.png" /><span item-title="true">CNN.com</span>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </JqxTree>
+                </div>
+            </JqxExpander>
+        </div>
+        <div>
+            <JqxSplitter ref="horizontalSplitter"
+                         :width="'100%'" :height="'100%'" :orientation="'horizontal'"
+                         :panels="[{ size: 400, min: 100, collapsible: false },{ min: 100, collapsible: true }]">
+                <div class="feed-item-list-container" id="feedUpperPanel">
+                    <JqxExpander class="jqx-hideborder" ref="feedListExpander"
+                                 :width="'100%'" :height="'100%'"
+                                 :toggleMode="'none'" :showArrow="false">
+                        <div class="jqx-hideborder" id="feedHeader"></div>
+                        <div class="jqx-hideborder jqx-hidescrollbars">
+                            <JqxListBox ref="myListBox" class="jqx-hideborder"
+                                        @select="onListBoxSelect($event)"
+                                        :width="'100%'" :height="'100%'" :source="['1']">
+                            </JqxListBox>
+                        </div>
+                    </JqxExpander>
+                </div>
+                <div id="feedContentArea">
+                    <JqxExpander class="jqx-hideborder" ref="feedContentExpander"
+                                 :width="'100%'" :height="'100%'"
+                                 :toggleMode="'none'" :showArrow="false">
+                        <div class="jqx-hideborder" id="feedItemHeader"></div>
+                        <div class="jqx-hideborder jqx-hidescrollbars">
+                            <JqxPanel ref="myPanel" class="jqx-hideborder"
+                                      :width="'100%'" :height="'100%'">
+                                Select a news item to see it"s content
+                            </JqxPanel>
+                        </div>
+                    </JqxExpander>
+                </div>
+            </JqxSplitter>
+        </div>
+    </JqxSplitter>
+</template>
+
+<script>
+    import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
+    import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
+    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
+    import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
+    import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
+
+    export default {
+        components: {
+            JqxSplitter,
+            JqxExpander,
+            JqxTree,
+            JqxListBox,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                config: {
+                    feeds: { 'CNN.com': 'cnn', 'Geek.com': 'geek', 'ScienceDaily': 'sciencedaily' },
+                    format: 'txt',
+                    dataDir: '../sampledata',
+                    feedTree: document.querySelectorAll('angularTree')[0],
+                    feedItemHeader: document.querySelector('#feedItemHeader'),
+                    feedUpperPanel: document.querySelector('#feedUpperPanel'),
+                    feedHeader: document.querySelector('#feedHeader'),
+                    feedContentArea: document.querySelector('#feedContentArea'),
+                    selectedIndex: -1,
+                    currentFeed: '',
+                    currentFeedContent: {}
+                }
+            }
+        },
+        mounted: function () {
+            this.getFeed('sciencedaily');
+        },
+        methods: {
+            onTreeSelect: function (event) {
+                const item = this.$refs.myTree.getItem(event.args.element);
+                this.getFeed(this.config['feeds'][item.label]);
+            },
+            onListBoxSelect: function (event) {
+                this.loadContent(event.args.index);
+            },
+            selectFirst: function () {
+                this.$refs.myListBox.selectIndex(0);
+                this.loadContent(0);
+            },
+            getFeed: function (feed) {
+                this.config['currentFeed'] = feed;
+                if (feed !== undefined) {
+                    feed = this.config['dataDir'] + '/' + feed + '.' + this.config['format'];
+                    this.loadFeed(feed);
+                }
+            },
+            loadFeed: function (feed, callback) {
+                axios.get(feed)
+                    .then(response => {
+                        const data = response.data.rss.channel;
+
+                        this.config['currentFeedContent'] = data.item;
+                        this.displayFeedList(this.config['currentFeedContent']);
+                        this.displayFeedHeader(data.title);
+                        this.selectFirst();
+                    })
+                    .catch(err => {
+                        console.log(err)
+                    })
+            },
+            displayFeedHeader: function (header) {
+                this.$refs.feedListExpander.setHeaderContent(header);
+            },
+            displayFeedList: function (items) {
+                const headers = this.getHeaders(items);
+                this.$refs.myListBox.source = headers;
+            },
+            getHeaders: function (items) {
+                let headers = [], header;
+                for (let i = 0; i < items.length; i += 1) {
+                    header = items[i].title;
+                    headers.push(header);
+                }
+                return headers
+            },
+            loadContent: function (index) {
+                const item = this.config['currentFeedContent'][index];
+                if (item != null) {
+                    this.$refs.myPanel.clearcontent();
+                    this.$refs.myPanel.prepend('<div style="padding: 1px;"><span>' + item.description + '</span></div>');
+                    this.addContentHeaderData(item);
+                    this.config['selectedIndex'] = index;
+                }
+            },
+            addContentHeaderData: function (item) {
+                const link = document.createElement('a');
+                link.style.whiteSpace = 'nowrap';
+                link.style.marginLeft = '15px';
+                link.target = '_blank';
+
+                const text = document.createTextNode('Source');
+                link.appendChild(text);
+
+                const date = document.createElement('div');
+                date.style.whiteSpace = 'nowrap';
+                date.style.marginLeft = '30px';
+                date.appendChild(document.createTextNode(item.pubDate));
+
+                const container = document.createElement('table');
+                container.style.height = '100%';
+
+                const element1 = document.createElement('tr');
+                container.appendChild(element1);
+                container.appendChild(document.createElement('td'));
+                container.appendChild(document.createElement('td'));
+
+                link.href = item.link;
+
+                document.querySelector('#feedItemHeader').innerHTML = null;
+                document.querySelector('#feedItemHeader').appendChild(container);
+                container.querySelectorAll('td')[0].appendChild(link);
+                container.querySelector('td:last-child').appendChild(date);
+
+                this.$refs.feedContentExpander.setHeaderContent(container.outerHTML);
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-expander-content {
+        height: 100% !important;
+    }
+</style>
\ No newline at end of file
diff --git a/splitter/defaultfunctionality/main.js b/splitter/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/splitter/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/splitter/defaultfunctionality/package.json b/splitter/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/splitter/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/splitter/events/App.vue b/splitter/events/App.vue
new file mode 100644
index 00000000..de51f25c
--- /dev/null
+++ b/splitter/events/App.vue
@@ -0,0 +1,60 @@
+<template>
+    <div>
+        <JqxSplitter 
+            @resize="resize($event)"
+            @expanded="expanded($event)"
+            @collapsed="collapsed($event)"
+            height="480" :width="850" :panels="[{ size: 200 }]">
+            <div class="splitter-panel" style="background-color:#F5FFF2;"><span style="margin: 5px;">Panel 1</span></div>
+            <div class="splitter-panel" style="background-color:#F5FFF2;"><span style="margin: 5px;">Panel 2</span></div>
+        </JqxSplitter>
+
+        <br />
+
+        <div style="font-family: Verdana; font-size: 13px;">
+            Events:
+        </div>
+
+        <JqxPanel ref="myPanel"
+            :height="250" :width="450">
+        </JqxPanel>
+    </div>
+</template>
+
+<script>
+    import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
+    import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
+
+    export default {
+        components: {
+            JqxSplitter,
+            JqxPanel
+        },
+        methods: {
+            capitaliseFirstLetter: function (string) {
+                return string.charAt(0).toUpperCase() + string.slice(1);
+            },
+            displayEvent: function (event) {
+                let eventData = 'Event:' + this.capitaliseFirstLetter(event.type);
+                eventData += ', Panel 1: ' + event.args.panels[0].size;
+                eventData += ', Panel 2: ' + event.args.panels[1].size;
+                this.$refs.myPanel.prepend('<div class="item" style="margin-top: 5px;">' + eventData + '</div>');
+            },
+            resize(event) {
+                this.displayEvent(event);
+            },
+            expanded(event) {
+                this.displayEvent(event);
+            },
+            collapsed(event) {
+                this.displayEvent(event);
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-panel {
+        border: none;
+    }
+</style>
\ No newline at end of file
diff --git a/splitter/events/main.js b/splitter/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/splitter/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/splitter/events/package.json b/splitter/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/splitter/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/splitter/fluidsize/App.vue b/splitter/fluidsize/App.vue
new file mode 100644
index 00000000..460d55e4
--- /dev/null
+++ b/splitter/fluidsize/App.vue
@@ -0,0 +1,52 @@
+<template>
+    <JqxSplitter 
+        :height="'100%'" :width="'100%'" 
+        :panels="[{ size: '50%', min: '10%', collapsible: false }, { size: '50%', min: '5%' }]">
+        <div>
+            <JqxSplitter 
+                :height="'100%'" :width="'100%'" 
+                :panels="[{ size: 200}]">
+                <div>
+                    Nested 2.1
+                </div>
+                <div>
+                    Nested 2.2
+                </div>
+            </JqxSplitter>
+        </div>
+
+        <div>
+            <JqxSplitter 
+                :height="'100%'" :width="'100%'"
+                :panels="[{ size: '60%'}]"  :orientation="'horizontal'">
+                <div>
+                    Nested 1.1
+                </div>
+                <div>
+                    Nested 1.2
+                </div>
+            </JqxSplitter>
+        </div>
+    </JqxSplitter>
+</template>
+
+<script>
+    import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
+
+    export default {
+        components: {
+            JqxSplitter
+        }
+    }
+</script>
+
+<style>
+    body, html {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        padding: 3px;
+        box-sizing: border-box;
+        margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/splitter/fluidsize/main.js b/splitter/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/splitter/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/splitter/fluidsize/package.json b/splitter/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/splitter/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/splitter/horizontalsplitter/App.vue b/splitter/horizontalsplitter/App.vue
new file mode 100644
index 00000000..6ff81c2d
--- /dev/null
+++ b/splitter/horizontalsplitter/App.vue
@@ -0,0 +1,22 @@
+<template>
+    <JqxSplitter 
+        :width="850" :height="400" :orientation="'horizontal'"
+        :panels="[{ size: 100 }, { size: 300 }]">
+        <div class="splitter-panel">
+            Panel 1
+        </div>
+        <div class="splitter-panel">
+            Panel 2
+        </div>
+    </JqxSplitter>
+</template>
+
+<script>
+    import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
+
+    export default {
+        components: {
+            JqxSplitter
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/splitter/horizontalsplitter/main.js b/splitter/horizontalsplitter/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/splitter/horizontalsplitter/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/splitter/horizontalsplitter/package.json b/splitter/horizontalsplitter/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/splitter/horizontalsplitter/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/splitter/integrationwithjqxgrid/App.vue b/splitter/integrationwithjqxgrid/App.vue
new file mode 100644
index 00000000..6fb850b7
--- /dev/null
+++ b/splitter/integrationwithjqxgrid/App.vue
@@ -0,0 +1,122 @@
+<template>
+    <JqxSplitter
+        @expanded="expanded($event)"
+        :height="400" :width="850"
+        :panels="[{ min: 150, size: 330 }, { min: 250 }]">
+        <div>
+            <JqxGrid ref="myGrid"
+                @rowselect="rowselect($event)"
+                :height="'100%'" :width="'100%'"
+                :source="dataAdapter"
+                :columnsresize="true"
+                :columns="columns">
+            </JqxGrid>
+        </div>
+        <div>
+            <form>
+                <table style="margin-top: 20px; width: 100%;">
+                    <tr>
+                        <td style="text-align: right;">Company Name:</td>
+                        <td style="text-align: left;"><JqxInput ref="CompanyName" :height="23"></JqxInput></td>
+                    </tr>
+                    <tr>
+                        <td style="text-align: right;">Contact Name:</td>
+                        <td style="text-align: left;"><JqxInput  ref="ContactName" :height="23"></JqxInput> </td>
+                    </tr>
+                    <tr>
+                        <td style="text-align: right;">Contact Title:</td>
+                        <td style="text-align: left;"><JqxInput ref="ContactTitle" :height="23"></JqxInput></td>
+                    </tr>
+                    <tr>
+                        <td style="text-align: right;">City:</td>
+                        <td style="text-align: left;"><JqxInput ref="City" :height="23"></JqxInput></td>
+                    </tr>
+                    <tr>
+                        <td style="text-align: right;">Country:</td>
+                        <td style="text-align: left;"><JqxInput ref="Country" :height="23"></JqxInput></td>
+                    </tr>
+                    <tr>
+                        <td></td>
+                        <td style="padding-left: 35px; text-align: left;">
+                            <JqxButton ref="Save" @click="saveClick()" :width="70" :height="23">Save</JqxButton>
+                        </td>
+                    </tr>
+                </table>
+            </form>
+        </div>
+    </JqxSplitter>
+
+</template>
+
+<script>
+    import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
+    import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
+    import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxSplitter,
+            JqxGrid,
+            JqxInput,
+            JqxButton
+        },
+        beforeCreate: function () {
+            const data =  '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';
+
+            const source =
+                {
+                    datatype: 'json',
+                    datafields: [
+                        { name: 'CompanyName', type: 'string' },
+                        { name: 'ContactName', type: 'string' },
+                        { name: 'ContactTitle', type: 'string' },
+                        { name: 'Address', type: 'string' },
+                        { name: 'City', type: 'string' },
+                        { name: 'Country', type: 'string' }
+                    ],
+                    localdata: data,
+                    updaterow: (rowid, rowdata, commit) => {
+                        commit(true);
+                    }
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(source);
+
+            this.columns =
+                [
+                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
+                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
+                    { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
+                    { text: 'City', datafield: 'City', width: 120 },
+                    { text: 'Country', datafield: 'Country' }
+                ]   
+        },
+        methods: {
+            rowselect: function (event) { 
+                const row = event.args.row;
+                // update inputs.
+                this.$refs.CompanyName.val(row.CompanyName);
+                this.$refs.ContactName.val(row.ContactName);
+                this.$refs.ContactTitle.val(row.ContactTitle);
+                this.$refs.City.val(row.City);
+                this.$refs.Country.val(row.Country);
+            },
+            saveClick: function () {
+                const row = this.$refs.myGrid.getselectedrowindex();
+                const rowid = this.$refs.myGrid.getrowid(row);
+                const data = {
+                    CompanyName: this.$refs.CompanyName.val(),
+                    ContactName: this.$refs.ContactName.val(),
+                    ContactTitle: this.$refs.ContactTitle.val(),
+                    City: this.$refs.City.val(),
+                    Country: this.$refs.Country.val()
+                };
+                this.$refs.myGrid.updaterow(rowid, data);
+            },
+            expanded: function () {
+                this.$refs.myGrid.refresh();
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/splitter/integrationwithjqxgrid/main.js b/splitter/integrationwithjqxgrid/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/splitter/integrationwithjqxgrid/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/splitter/integrationwithjqxgrid/package.json b/splitter/integrationwithjqxgrid/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/splitter/integrationwithjqxgrid/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/splitter/integrationwithjqxtabs/App.vue b/splitter/integrationwithjqxtabs/App.vue
new file mode 100644
index 00000000..09208f73
--- /dev/null
+++ b/splitter/integrationwithjqxtabs/App.vue
@@ -0,0 +1,46 @@
+<template>
+    <JqxSplitter 
+        :panels="[{ size: '20%' }, { size: '80%' }]"
+        :orientation="'horizontal'"
+        :height="850" :width="850">
+        <div>
+            Top Panel
+        </div>
+        <div>
+            <JqxSplitter
+                :width="'100%'" :height="'100%'"
+                :panels="[{ size: 200 }, { size: 200}]">
+                <div>
+                    Left Panel
+                </div>
+                <div>
+                    <JqxTabs class="jqx-hideborder jqx-hidescrollbars"
+                        :width="'100%'" :height="'100%'">
+                        <ul>
+                            <li style="margin-left: 30px;">Tab 1</li>
+                            <li>Tab 2</li>
+                        </ul>
+                        <div>
+                            Content 1
+                        </div>
+                        <div>
+                            Content 2
+                        </div>
+                    </JqxTabs>
+                </div>
+            </JqxSplitter>
+        </div>
+    </JqxSplitter>
+</template>
+
+<script>
+    import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+
+    export default {
+        components: {
+            JqxSplitter,
+            JqxTabs
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/splitter/integrationwithjqxtabs/main.js b/splitter/integrationwithjqxtabs/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/splitter/integrationwithjqxtabs/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/splitter/integrationwithjqxtabs/package.json b/splitter/integrationwithjqxtabs/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/splitter/integrationwithjqxtabs/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/splitter/integrationwithjqxtree/App.vue b/splitter/integrationwithjqxtree/App.vue
new file mode 100644
index 00000000..e7454e52
--- /dev/null
+++ b/splitter/integrationwithjqxtree/App.vue
@@ -0,0 +1,97 @@
+<template>
+    <JqxSplitter
+        :width="850" :height="400" :panels="[{ size: 250 }]">
+        <div>
+
+            <JqxTree
+                @select="select($event)"
+                :width="'100%'" :height="'100%'">
+                <ul>
+                    <li id="Mail" item-expanded='true'>
+                        <img style='float: left; margin-right: 5px;' src='../../../images/mailIcon.png' /><span item-title="true">Mail</span>
+                        <ul>
+                            <li id="Calendar" item-expanded='true'>
+                                <img style='float: left; margin-right: 5px;' src='../../../images/calendarIcon.png' /><span item-title="true">Calendar</span>
+                            </li>
+                            <li id="Contacts">
+                                <img style='float: left; margin-right: 5px;' src='../../../images/contactsIcon.png' /><span item-title="true">Contacts</span>
+                            </li>
+                            <li id="Inbox">
+                                <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true"><span>Inbox</span><span style='color: Blue;'> (3)</span></span>
+                                <ul>
+                                    <li id="jQWidgets">
+                                        <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">jQWidgets</span>
+                                        <ul>
+                                            <li id="Admin">
+                                                <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">Admin</span>
+                                            </li>
+                                            <li id="Corporate">
+                                                <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">Corporate</span>
+                                            </li>
+                                            <li id="Finance">
+                                                <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">Finance</span>
+                                            </li>
+                                            <li id="Other">
+                                                <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">Other</span>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                    <li id="Personal">
+                                        <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">Personal</span>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li id="Deleted Items" item-expanded='true'>
+                                <img style='float: left; margin-right: 5px;' src='../../../images/recycle.png' /><span item-title="true"><span>Deleted Items</span><span style='color: Blue;'> (10)</span></span>
+                                <ul>
+                                    <li id="Today">
+                                        <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">Today</span>
+                                    </li>
+                                    <li id="Last Week">
+                                        <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">Last Week</span>
+                                    </li>
+                                    <li id="Last Month">
+                                        <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">Last Month</span>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li id="Notes">
+                                <img style='float: left; margin-right: 5px;' src='../../../images/notesIcon.png' /><span item-title="true">Notes</span>
+                            </li>
+                            <li id="Settings">
+                                <img style='float: left; margin-right: 5px;' src='../../../images/settings.png' /><span item-title="true">Settings</span>
+                            </li>
+                            <li id="Favorites">
+                                <img style='float: left; margin-right: 5px;' src='../../../images/favorites.png' /><span item-title="true">Favorites</span>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </JqxTree>
+        </div>
+        <div ref="ContentPanel"></div>
+    </JqxSplitter>
+</template>
+
+<script>
+    import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
+    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
+
+    export default {
+        components: {
+            JqxSplitter,
+            JqxTree
+        },
+        methods: {
+            select: function (event) {
+                this.$refs.ContentPanel.innerHTML = '<div style="margin: 10px;">' + event.args.element.id + '</div>';
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-tree {
+        border: none;
+    }
+</style>
\ No newline at end of file
diff --git a/splitter/integrationwithjqxtree/main.js b/splitter/integrationwithjqxtree/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/splitter/integrationwithjqxtree/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/splitter/integrationwithjqxtree/package.json b/splitter/integrationwithjqxtree/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/splitter/integrationwithjqxtree/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/splitter/multiplesplitpanelswithjqxtabs/App.vue b/splitter/multiplesplitpanelswithjqxtabs/App.vue
new file mode 100644
index 00000000..ea17f206
--- /dev/null
+++ b/splitter/multiplesplitpanelswithjqxtabs/App.vue
@@ -0,0 +1,69 @@
+<template>
+    <JqxSplitter 
+        :width="850" :height="600" :orientation="'horizontal'"
+        :panels="[{ size: '50%', collapsible: false }, { size: '50%' }]">
+        <div>
+            <JqxTabs ref="myTabs1" class="jqx-hideborder jqx-hidescrollbars"
+                :width="'100%'" :height="'100%'">
+                <ul>
+                    <li style="margin-left: 30px;">Tab 1</li>
+                    <li>Tab 2</li>
+                </ul>
+                <div>
+                    Content 1
+                </div>
+                <div>
+                    Content 2
+                </div>
+            </JqxTabs>
+        </div>
+        <div>
+            <JqxSplitter 
+                :width="'100%'" :height="300"
+                :panels="[{ size: '50%' }]">
+                <div>
+                    <JqxTabs ref="myTabs2" class="jqx-hideborder jqx-hidescrollbars" 
+                        :width="'100%'" :height="'100%'">
+                        <ul>
+                            <li style="margin-left: 30px;">Tab 1</li>
+                            <li>Tab 2</li>
+                        </ul>
+                        <div>
+                            Content 1
+                        </div>
+                        <div>
+                            Content 2
+                        </div>
+                    </JqxTabs>
+                </div>
+                <div>
+                    <JqxTabs ref="myTabs3" class="jqx-hideborder jqx-hidescrollbars"
+                        :width="'100%'" :height="'100%'">
+                        <ul>
+                            <li style="margin-left: 30px;">Tab 1</li>
+                            <li>Tab 2</li>
+                        </ul>
+                        <div>
+                            Content 1
+                        </div>
+                        <div>
+                            Content 2
+                        </div>
+                    </JqxTabs>
+                </div>
+            </JqxSplitter>
+        </div>
+    </JqxSplitter>
+</template>
+
+<script>
+    import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+
+    export default {
+        components: {
+            JqxSplitter,
+            JqxTabs
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/splitter/multiplesplitpanelswithjqxtabs/main.js b/splitter/multiplesplitpanelswithjqxtabs/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/splitter/multiplesplitpanelswithjqxtabs/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/splitter/multiplesplitpanelswithjqxtabs/package.json b/splitter/multiplesplitpanelswithjqxtabs/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/splitter/multiplesplitpanelswithjqxtabs/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/splitter/nestedsidesplitters/App.vue b/splitter/nestedsidesplitters/App.vue
new file mode 100644
index 00000000..db11bf81
--- /dev/null
+++ b/splitter/nestedsidesplitters/App.vue
@@ -0,0 +1,39 @@
+<template>
+    <JqxSplitter 
+        :width="850" :height="850" :orientation="'vertical'"
+        :panels="[{ size: '50%' }, { size: '50%' }]">
+        <div>
+            <JqxSplitter :width="'100%'" :height="'100%'" :orientation="'horizontal'"
+                         :panels="[{ size: '50%' }, { size: '50%' }]">
+                <div>
+                    West - North
+                </div>
+                <div>
+                    West - South
+                </div>
+            </JqxSplitter>
+        </div>
+        <div>
+            <JqxSplitter 
+                :width="'100%'" :height="'100%'" :orientation="'horizontal'"
+                :panels="[{ size: '50%' }, { size: '50%' }]">
+                <div>
+                    East - North
+                </div>
+                <div>
+                    East - South
+                </div>
+            </JqxSplitter>
+        </div>
+    </JqxSplitter>
+</template>
+
+<script>
+    import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
+
+    export default {
+        components: {
+            JqxSplitter
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/splitter/nestedsidesplitters/main.js b/splitter/nestedsidesplitters/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/splitter/nestedsidesplitters/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/splitter/nestedsidesplitters/package.json b/splitter/nestedsidesplitters/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/splitter/nestedsidesplitters/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/splitter/nestedsplitters/App.vue b/splitter/nestedsplitters/App.vue
new file mode 100644
index 00000000..a650dd4e
--- /dev/null
+++ b/splitter/nestedsplitters/App.vue
@@ -0,0 +1,55 @@
+<template>
+    <JqxSplitter
+        :width="850" :height="850" :orientation="'horizontal'"
+        :panels="[{ size: '50%' }, { size: '50%' }]">
+        <div>
+            <JqxSplitter class="jqx-splitter-nested"
+                :width="'100%'" :height="'100%'" :orientation="'vertical'"
+                :panels="[{ size: 300, collapsible: false }]">
+                <div>
+                    <JqxSplitter class="jqx-splitter-nested"
+                        :width="'100%'" :height="'100%'" :orientation="'horizontal'"
+                        :panels="[{ size: 150 }]">
+                        <div>
+                            <span>Panel 1</span>
+                        </div>
+                        <div>
+                            <span>Panel 2</span>
+                        </div>
+                    </JqxSplitter>
+                </div>
+                <div>
+                    <span>Panel 3</span>
+                </div>
+            </JqxSplitter>
+        </div>
+        <div>
+            <JqxSplitter class="jqx-splitter-nested"
+                :width="'100%'" :height="'100%'" :orientation="'horizontal'"
+                :panels="[{ size: 150, collapsible: false }]">
+                <div>
+                    <span>Panel 4</span>
+                </div>
+                <div>
+                    <span>Panel 5</span>
+                </div>
+            </JqxSplitter>
+        </div>
+    </JqxSplitter>
+</template>
+
+<script>
+    import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
+
+    export default {
+        components: {
+            JqxSplitter
+        }
+    }
+</script>
+
+<style>
+    .jqx-splitter-nested {
+        border: none !important;
+    }
+</style>
\ No newline at end of file
diff --git a/splitter/nestedsplitters/main.js b/splitter/nestedsplitters/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/splitter/nestedsplitters/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/splitter/nestedsplitters/package.json b/splitter/nestedsplitters/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/splitter/nestedsplitters/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/splitter/simplecontainer/App.vue b/splitter/simplecontainer/App.vue
new file mode 100644
index 00000000..ba339890
--- /dev/null
+++ b/splitter/simplecontainer/App.vue
@@ -0,0 +1,31 @@
+<template>
+    <JqxSplitter 
+        :width="850" :height="850" :orientation="'horizontal'"
+        :panels="[{ size: '20%' }, { size: '80%' }]">
+        <div>
+            North
+        </div>
+        <div>
+            <JqxSplitter 
+                :width="'100%'" :height="'100%'"
+                :panels="[{ size: '30%' }, { size: '60%' }]">
+                <div>
+                    West
+                </div>
+                <div>
+                    East
+                </div>
+            </JqxSplitter>
+        </div>
+    </JqxSplitter>
+</template>
+
+<script>
+    import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
+
+    export default {
+        components: {
+            JqxSplitter
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/splitter/simplecontainer/main.js b/splitter/simplecontainer/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/splitter/simplecontainer/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/splitter/simplecontainer/package.json b/splitter/simplecontainer/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/splitter/simplecontainer/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/splitter/splitterwithinjqxtabs/App.vue b/splitter/splitterwithinjqxtabs/App.vue
new file mode 100644
index 00000000..11a31bda
--- /dev/null
+++ b/splitter/splitterwithinjqxtabs/App.vue
@@ -0,0 +1,59 @@
+<template>
+    <JqxTabs :height="850" :width="850" :initTabContent="initTabContent">
+        <ul>
+            <li style="margin-left: 30px;">Tab 1</li>
+            <li>Tab 2</li>
+        </ul>
+        <div class="jqx-hidescrollbars">
+            <div class="jqx-hideborder" ref="mySplitter1">
+                <div>
+                    Content 1.1
+                </div>
+                <div>
+                    Content 1.2
+                </div>
+            </div>
+        </div>
+        <div class="jqx-hidescrollbars">
+            <div class="jqx-hideborder" ref="mySplitter2">
+                <div>
+                    Content 2.1
+                </div>
+                <div>
+                    Content 2.2
+                </div>
+            </div>
+        </div>
+    </JqxTabs>
+</template>
+
+<script>
+    import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+
+    export default {
+        components: {
+            JqxSplitter,
+            JqxTabs
+        },
+        methods: {
+            initTabContent: function (tab) {
+                if (tab == 0) {
+                    jqwidgets.createInstance(this.$refs.mySplitter1, 'jqxSplitter', {
+                        height: '100%',
+                        width: '100%',
+                        panels: [{ size: '50%' }]
+                    });
+                }
+                else {
+                    jqwidgets.createInstance(this.$refs.mySplitter2, 'jqxSplitter', {
+                        orientation: 'horizontal',
+                        height: '100%',
+                        width: '100%',
+                        panels: [{ size: '50%' }]
+                    });
+                }
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/splitter/splitterwithinjqxtabs/main.js b/splitter/splitterwithinjqxtabs/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/splitter/splitterwithinjqxtabs/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/splitter/splitterwithinjqxtabs/package.json b/splitter/splitterwithinjqxtabs/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/splitter/splitterwithinjqxtabs/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/splitter/togglebottompanel/App.vue b/splitter/togglebottompanel/App.vue
new file mode 100644
index 00000000..73baa9b0
--- /dev/null
+++ b/splitter/togglebottompanel/App.vue
@@ -0,0 +1,22 @@
+<template>
+    <JqxSplitter 
+        :width="850" :height="400" :orientation="'horizontal'"
+        :panels="[{ size: 300, collapsible: false }, { size: 100}]">
+        <div class="splitter-panel">
+            Panel 1
+        </div>
+        <div class="splitter-panel">
+            Panel 2
+        </div>
+    </JqxSplitter>
+</template>
+
+<script>
+    import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
+
+    export default {
+        components: {
+            JqxSplitter
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/splitter/togglebottompanel/main.js b/splitter/togglebottompanel/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/splitter/togglebottompanel/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/splitter/togglebottompanel/package.json b/splitter/togglebottompanel/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/splitter/togglebottompanel/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/splitter/togglerightpanel/App.vue b/splitter/togglerightpanel/App.vue
new file mode 100644
index 00000000..7a84a8ff
--- /dev/null
+++ b/splitter/togglerightpanel/App.vue
@@ -0,0 +1,22 @@
+<template>
+    <JqxSplitter 
+        :width="850" :height="850"
+        :panels="[{ size: 400, collapsible: false }]">
+        <div class="splitter-panel">
+            Panel 1
+        </div>
+        <div class="splitter-panel">
+            Panel 2
+        </div>
+    </JqxSplitter>
+</template>
+
+<script>
+    import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
+
+    export default {
+        components: {
+            JqxSplitter
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/splitter/togglerightpanel/main.js b/splitter/togglerightpanel/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/splitter/togglerightpanel/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/splitter/togglerightpanel/package.json b/splitter/togglerightpanel/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/splitter/togglerightpanel/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/splitter/verticalsplitter/App.vue b/splitter/verticalsplitter/App.vue
new file mode 100644
index 00000000..dec9ebf8
--- /dev/null
+++ b/splitter/verticalsplitter/App.vue
@@ -0,0 +1,21 @@
+<template>
+    <JqxSplitter 
+        :width="850" :height="400" :panels="[{ size: 300 }]">
+        <div class="splitter-panel">
+            Panel 1
+        </div>
+        <div class="splitter-panel">
+            Panel 2
+        </div>
+    </JqxSplitter>
+</template>
+
+<script>
+    import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
+
+    export default {
+        components: {
+            JqxSplitter
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/splitter/verticalsplitter/main.js b/splitter/verticalsplitter/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/splitter/verticalsplitter/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/splitter/verticalsplitter/package.json b/splitter/verticalsplitter/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/splitter/verticalsplitter/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/switchbutton/defaultfunctionality/App.vue b/switchbutton/defaultfunctionality/App.vue
new file mode 100644
index 00000000..4f759414
--- /dev/null
+++ b/switchbutton/defaultfunctionality/App.vue
@@ -0,0 +1,181 @@
+<template>
+    <div>
+        <div id="settings-panel">
+            <div class="sections-top-shadow"></div>
+            <div class="settings-section-top settings-section">
+                <div class="settings-label">Ringtone</div>
+                <div class="settings-setter">
+                    <div class="settings-melody">Marimba</div>
+                </div>
+            </div>
+            <div class="settings-section">
+                <div class="settings-label">New Mail</div>
+                <div class="settings-setter">
+                    <JqxSwitchButton 
+                        @checked="onChecked(1)" @unchecked="onUnchecked(1)"
+                        :width="81" :height="27" :checked="true">
+                    </JqxSwitchButton>
+                </div>
+            </div>
+            <div class="settings-section">
+                <div class="settings-label">Sent Mail</div>
+                <div class="settings-setter">
+                    <JqxSwitchButton
+                        @checked="onChecked(2)" @unchecked="onUnchecked(2)"
+                        :width="81" :height="27" :checked="true">
+                    </JqxSwitchButton>
+                </div>
+            </div>
+            <div class="settings-section">
+                <div class="settings-label">Calendar Alerts</div>
+                <div class="settings-setter">
+                    <JqxSwitchButton 
+                        @checked="onChecked(3)" @unchecked="onUnchecked(3)"
+                        :width="81" :height="27" :checked="true">
+                    </JqxSwitchButton>
+                </div>
+            </div>
+            <div class="settings-section">
+                <div class="settings-label">Lock Sounds</div>
+                <div class="settings-setter">
+                    <JqxSwitchButton 
+                        @checked="onChecked(4)" @unchecked="onUnchecked(4)"
+                        :width="81" :height="27" :checked="true">
+                    </JqxSwitchButton>
+                </div>
+            </div>
+            <div class="sections-section-bottom settings-section">
+                <div class="settings-label">Keyboard Clicks</div>
+                <div class="settings-setter">
+                    <JqxSwitchButton 
+                        @checked="onChecked(5)" @unchecked="onUnchecked(5)"
+                        :width="81" :height="27" :checked="false">
+                    </JqxSwitchButton>
+                </div>
+            </div>
+        </div>
+
+        <div class="events-container">
+            <div>Events:</div>
+            <div ref="events"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
+
+    export default {
+        components: {
+            JqxSwitchButton
+        },
+        data: function () {
+            return {
+                label: {
+                    '1': 'New Mail',
+                    '2': 'Sent Mail',
+                    '3': 'Calendar Alerts',
+                    '4': 'Lock Sounds',
+                    '5': 'Keyboard clicks'
+                }
+            }
+        },
+        methods: {
+            onChecked: function (buttonNumber) {
+                this.$refs.events.innerHTML = this.label[buttonNumber] + ': Unchecked';
+            },
+            onUnchecked: function (buttonNumber) {
+                this.$refs.events.innerHTML = this.label[buttonNumber] + ': Checked';
+            }
+        }
+    }
+</script>
+
+<style>
+    #settings-panel {
+        background-color: #fff;
+        padding: 20px;
+        display: inline-block;
+        -moz-border-radius: 10px;
+        -webkit-border-radius: 10px;
+        border-radius: 10px;
+        position: relative;
+    }
+
+    .settings-section {
+        background-color: #f7f7f7;
+        height: 45px;
+        width: 500px;
+        border: 1px solid #b4b7bc;
+        border-bottom-width: 0px;
+    }
+
+    .settings-section-top {
+        border-bottom-width: 0px;
+        -moz-border-radius-topleft: 10px;
+        -webkit-border-top-left-radius: 10px;
+        border-top-left-radius: 10px;
+        -moz-border-radius-topright: 10px;
+        -webkit-border-top-right-radius: 10px;
+        border-top-right-radius: 10px;
+    }
+
+    .sections-section-bottom {
+        border-bottom-width: 1px;
+        -moz-border-radius-bottomleft: 10px;
+        -webkit-border-bottom-left-radius: 10px;
+        border-bottom-left-radius: 10px;
+        -moz-border-radius-bottomright: 10px;
+        -webkit-border-bottom-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+    }
+
+    .sections-top-shadow {
+        width: 500px;
+        height: 1px;
+        position: absolute;
+        top: 21px;
+        left: 21px;
+        height: 30px;
+        border-top: 1px solid #e4e4e4;
+        -moz-border-radius-topleft: 10px;
+        -webkit-border-top-left-radius: 10px;
+        border-top-left-radius: 10px;
+        -moz-border-radius-topright: 10px;
+        -webkit-border-top-right-radius: 10px;
+        border-top-right-radius: 10px;
+    }
+
+    .settings-label {
+        font-weight: bold;
+        font-family: Sans-Serif;
+        font-size: 14px;
+        margin-left: 14px;
+        margin-top: 15px;
+        float: left;
+    }
+
+    .settings-melody {
+        color: #385487;
+        font-family: Sans-Serif;
+        font-size: 14px;
+        display: inline-block;
+        margin-top: 7px;
+    }
+
+    .settings-setter {
+        float: right;
+        margin-right: 14px;
+        margin-top: 8px;
+    }
+
+    .events-container {
+        margin-left: 20px;
+    }
+
+    #theme {
+        margin-left: 20px;
+        margin-bottom: 20px;
+    }
+
+</style>
\ No newline at end of file
diff --git a/switchbutton/defaultfunctionality/main.js b/switchbutton/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/switchbutton/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/switchbutton/defaultfunctionality/package.json b/switchbutton/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/switchbutton/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/switchbutton/twowaydatabinding/App.vue b/switchbutton/twowaydatabinding/App.vue
new file mode 100644
index 00000000..468109de
--- /dev/null
+++ b/switchbutton/twowaydatabinding/App.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <div>The state is: {{ state }}</div><br />
+
+        <JqxSwitchButton v-model="state" :width="80" :height="30" />
+    </div>
+</template>
+
+<script>
+    import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
+
+    export default {
+        components: {
+            JqxSwitchButton
+        },
+        data: function () {
+            return {
+                state: false
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/switchbutton/twowaydatabinding/main.js b/switchbutton/twowaydatabinding/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/switchbutton/twowaydatabinding/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/switchbutton/twowaydatabinding/package.json b/switchbutton/twowaydatabinding/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/switchbutton/twowaydatabinding/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tabs/closebuttons/App.vue b/tabs/closebuttons/App.vue
new file mode 100644
index 00000000..1a800212
--- /dev/null
+++ b/tabs/closebuttons/App.vue
@@ -0,0 +1,55 @@
+<template>
+    <JqxTabs ref="myTabs"  @tabclick="tabClick($event)"
+        :width="getWidth" :height="250" :showCloseButtons="true">
+        <ul style="margin-left: 30px;" ref="unorderedList">
+            <li>Node.js</li>
+            <li>Active Server Pages</li>
+            <li canselect='false' hasclosebutton='false'>Add New Tab</li>
+        </ul>
+        <div>
+            Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
+            is intended for writing scalable network programs such as web servers. It was created
+            by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
+            Similar environments written in other programming languages include Twisted for
+            Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
+            Unlike most JavaScript, it is not executed in a web browser, but is instead a form
+            of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js
+            includes a REPL environment for interactive testing.
+        </div>
+        <div>
+            ASP.NET is a web application framework developed and marketed by Microsoft to allow
+            programmers to build dynamic web sites, web applications and web services. It was
+            first released in January 2002 with version 1.0 of the .NET Framework, and is the
+            successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built
+            on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code
+            using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET
+            components to process SOAP messages.
+        </div>
+        <div></div>
+    </JqxTabs>
+</template>
+
+<script>
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+
+    export default {
+        components: {
+            JqxTabs
+        },     
+        data: function () {
+            return {
+                getWidth: getWidth('tabs'),
+                index: 0
+            }
+        },
+        methods: {
+            tabClick: function (event) {
+                const childrenLength = this.$refs.unorderedList.children.length;
+                if (event.args.item == childrenLength - 1) {
+                    this.$refs.myTabs.addAt(event.args.item, 'Sample title ' + this.index, 'Sample content number: ' + this.index);
+                    this.index++;
+                }
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tabs/closebuttons/main.js b/tabs/closebuttons/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tabs/closebuttons/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tabs/closebuttons/package.json b/tabs/closebuttons/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tabs/closebuttons/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tabs/collapsible/App.vue b/tabs/collapsible/App.vue
new file mode 100644
index 00000000..542d483b
--- /dev/null
+++ b/tabs/collapsible/App.vue
@@ -0,0 +1,81 @@
+<template>
+    <JqxTabs
+        :width="getWidth" :position="'top'" :collapsible="true">
+        <ul>
+            <li style="margin-left: 30px;">Node.js</li>
+            <li>JavaServer Pages</li>
+            <li>Active Server Pages</li>
+            <li>Python</li>
+            <li>Perl</li>
+        </ul>
+        <div>
+            Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
+            is intended for writing scalable network programs such as web servers. It was created
+            by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
+            Similar environments written in other programming languages include Twisted for
+            Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
+            Unlike most JavaScript, it is not executed in a web browser, but is instead a form
+            of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js
+            includes a REPL environment for interactive testing.
+        </div>
+        <div>
+            JavaServer Pages (JSP) is a Java technology that helps software developers serve
+            dynamically generated web pages based on HTML, XML, or other document types. Released
+            in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address
+            the perception that the Java programming environment didn't provide developers with
+            enough support for the Web. To deploy and run, a compatible web server with servlet
+            container is required. The Java Servlet and the JavaServer Pages (JSP) specifications
+            from Sun Microsystems and the JCP (Java Community Process) must both be met by the
+            container.
+        </div>
+        <div>
+            ASP.NET is a web application framework developed and marketed by Microsoft to allow
+            programmers to build dynamic web sites, web applications and web services. It was
+            first released in January 2002 with version 1.0 of the .NET Framework, and is the
+            successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built
+            on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code
+            using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET
+            components to process SOAP messages.
+        </div>
+        <div>
+            Python is a general-purpose, high-level programming language[5] whose design philosophy
+            emphasizes code readability. Python claims to "[combine] remarkable power with very
+            clear syntax",[7] and its standard library is large and comprehensive. Its use of
+            indentation for block delimiters is unique among popular programming languages.
+            Python supports multiple programming paradigms, primarily but not limited to object-oriented,
+            imperative and, to a lesser extent, functional programming styles. It features a
+            fully dynamic type system and automatic memory management, similar to that of Scheme,
+            Ruby, Perl, and Tcl. Like other dynamic languages, Python is often used as a scripting
+            language, but is also used in a wide range of non-scripting contexts. Using third-party
+            tools, Python code can be packaged into standalone executable programs. Python interpreters
+            are available for many operating systems.
+        </div>
+        <div>
+            Perl is a high-level, general-purpose, interpreted, dynamic programming language.
+            Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting
+            language to make report processing easier. Since then, it has undergone many changes
+            and revisions and become widely popular amongst programmers. Larry Wall continues
+            to oversee development of the core language, and its upcoming version, Perl 6. Perl
+            borrows features from other programming languages including C, shell scripting (sh),
+            AWK, and sed.[5] The language provides powerful text processing facilities without
+            the arbitrary data length limits of many contemporary Unix tools, facilitating easy
+            manipulation of text files. Perl gained widespread popularity in the late 1990s
+            as a CGI scripting language, in part due to its parsing abilities.
+        </div>
+    </JqxTabs>
+</template>
+
+<script>
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+
+    export default {
+        components: {
+            JqxTabs
+        },     
+        data: function () {
+            return {
+                getWidth: getWidth('tabs')
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tabs/collapsible/main.js b/tabs/collapsible/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tabs/collapsible/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tabs/collapsible/package.json b/tabs/collapsible/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tabs/collapsible/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tabs/defaultfunctionality/App.vue b/tabs/defaultfunctionality/App.vue
new file mode 100644
index 00000000..0c44e8e9
--- /dev/null
+++ b/tabs/defaultfunctionality/App.vue
@@ -0,0 +1,104 @@
+<template>
+    <div>
+        <JqxTabs ref="myTabs"
+                 :width="getWidth" :height='200' :position="'top'"
+                 :animationType="'none'" :selectionTracker='false'>
+            <ul>
+                <li style="margin-left: 30px;">Node.js</li>
+                <li>JavaServer Pages</li>
+                <li>Active Server Pages</li>
+                <li>Python</li>
+                <li>Perl</li>
+            </ul>
+            <div>
+                Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
+                is intended for writing scalable network programs such as web servers. It was created
+                by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
+                Similar environments written in other programming languages include Twisted for
+                Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
+                Unlike most JavaScript, it is not executed in a web browser, but is instead a form
+                of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js
+                includes a REPL environment for interactive testing.
+            </div>
+            <div>
+                JavaServer Pages (JSP) is a Java technology that helps software developers serve
+                dynamically generated web pages based on HTML, XML, or other document types. Released
+                in 1999 as Sun's answer to ASP and PHP,:citation needed JSP was designed to address
+                the perception that the Java programming environment didn't provide developers with
+                enough support for the Web. To deploy and run, a compatible web server with servlet
+                container is required. The Java Servlet and the JavaServer Pages (JSP) specifications
+                from Sun Microsystems and the JCP (Java Community Process) must both be met by the
+                container.
+            </div>
+            <div>
+                ASP.NET is a web application framework developed and marketed by Microsoft to allow
+                programmers to build dynamic web sites, web applications and web services. It was
+                first released in January 2002 with version 1.0 of the .NET Framework, and is the
+                successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built
+                on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code
+                using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET
+                components to process SOAP messages.
+            </div>
+            <div>
+                Python is a general-purpose, high-level programming language:5 whose design philosophy
+                emphasizes code readability. Python claims to ":combine remarkable power with very
+                clear syntax",:7 and its standard library is large and comprehensive. Its use of
+                indentation for block delimiters is unique among popular programming languages.
+                Python supports multiple programming paradigms, primarily but not limited to object-oriented,
+                imperative and, to a lesser extent, functional programming styles. It features a
+                fully dynamic type system and automatic memory management, similar to that of Scheme,
+                Ruby, Perl, and Tcl. Like other dynamic languages, Python is often used as a scripting
+                language, but is also used in a wide range of non-scripting contexts.
+            </div>
+            <div>
+                Perl is a high-level, general-purpose, interpreted, dynamic programming language.
+                Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting
+                language to make report processing easier. Since then, it has undergone many changes
+                and revisions and become widely popular amongst programmers. Larry Wall continues
+                to oversee development of the core language, and its upcoming version, Perl 6. Perl
+                borrows features from other programming languages including C, shell scripting (sh),
+                AWK, and sed.:5 The language provides powerful text processing facilities without
+                the arbitrary data length limits of many contemporary Unix tools, facilitating easy
+                manipulation of text files.
+            </div>
+        </JqxTabs>
+  
+        <JqxCheckBox @change="onChangeAnimation($event)">Enable Select Animation</JqxCheckBox>
+
+        <JqxCheckBox @change="onChangeContentAnimation($event)">Enable Content Animation</JqxCheckBox>
+    </div>
+</template>
+
+<script>
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+
+    export default {
+        components: {
+            JqxTabs,
+            JqxCheckBox
+        },     
+        data: function () {
+            return {
+                getWidth: getWidth('tabs')
+            }
+        },
+        methods: {
+            onChangeAnimation: function (event) {
+                const checked = event.args.checked;
+                this.$refs.myTabs.selectionTracker = checked;
+            },
+            onChangeContentAnimation: function (event) {
+                const checked = event.args.checked;
+                const animationType = checked ? 'fade' : 'none';
+                this.$refs.myTabs.animationType = animationType
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-checkbox {
+        margin-top: 10px;
+    }
+</style>
\ No newline at end of file
diff --git a/tabs/defaultfunctionality/main.js b/tabs/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tabs/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tabs/defaultfunctionality/package.json b/tabs/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tabs/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tabs/draganddrop/App.vue b/tabs/draganddrop/App.vue
new file mode 100644
index 00000000..1c2b5107
--- /dev/null
+++ b/tabs/draganddrop/App.vue
@@ -0,0 +1,43 @@
+<template>
+    <JqxTabs :width="getWidth" :position="'top'" :reorder="true">
+        <ul style='margin-left: 30px;'>
+            <li>Node.js</li>
+            <li>JavaServer Pages</li>
+            <li>Active Server Pages</li>
+        </ul>
+        <div>
+            Node.js is an event-driven I/O server-side JavaScript environment based on V8. It is intended for writing scalable network programs such as web servers.
+            It was created by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
+            Similar environments written in other programming languages include Twisted for Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
+            Unlike most JavaScript, it is not executed in a web browser, but is instead a form of server-side JavaScript. Node.js implements some CommonJS specifications.
+            Node.js includes a REPL environment for interactive testing.
+        </div>
+        <div>
+            JavaServer Pages (JSP) is a Java technology that helps software developers serve dynamically generated web pages based on HTML, XML, or other document types.
+            Released in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address the perception that the Java programming environment didn't provide developers with enough support for the Web.
+            To deploy and run, a compatible web server with servlet container is required. The Java Servlet and the JavaServer Pages (JSP) specifications from Sun Microsystems and the JCP
+            (Java Community Process) must both be met by the container.
+        </div>
+        <div>
+            ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.
+            It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages (ASP) technology.
+            ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language.
+            The ASP.NET SOAP extension framework allows ASP.NET components to process SOAP messages.
+        </div>
+    </JqxTabs>
+</template>
+
+<script>
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+
+    export default {
+        components: {
+            JqxTabs
+        },     
+        data: function () {
+            return {
+                getWidth: getWidth('tabs')
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tabs/draganddrop/main.js b/tabs/draganddrop/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tabs/draganddrop/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tabs/draganddrop/package.json b/tabs/draganddrop/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tabs/draganddrop/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tabs/events/App.vue b/tabs/events/App.vue
new file mode 100644
index 00000000..f8dc6b07
--- /dev/null
+++ b/tabs/events/App.vue
@@ -0,0 +1,86 @@
+<template>
+    <div>
+        <JqxTabs ref="myTabs" 
+            @selected="displayEvent($event)" 
+            @tabclick="displayEvent($event)" @unselected="displayEvent($event)"
+            @dragStart="displayEvent($event)" @dragEnd="displayEvent($event)"
+            :width="getWidth" :reorder="true" :enableDropAnimation="false">
+            <ul style='margin-left: 30px;'>
+                <li>Node.js</li>
+                <li>JavaServer Pages</li>
+                <li>Active Server Pages</li>
+            </ul>
+            <div>
+                Node.js is an event-driven I/O server-side JavaScript environment based on V8. It is intended for writing scalable network programs such as web servers.
+                It was created by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
+                Similar environments written in other programming languages include Twisted for Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
+                Unlike most JavaScript, it is not executed in a web browser, but is instead a form of server-side JavaScript. Node.js implements some CommonJS specifications.
+                Node.js includes a REPL environment for interactive testing.
+            </div>
+            <div>
+                JavaServer Pages (JSP) is a Java technology that helps software developers serve dynamically generated web pages based on HTML, XML, or other document types.
+                Released in 1999 as Sun's answer to ASP and PHP,:citation needed JSP was designed to address the perception that the Java programming environment didn't provide developers with enough support for the Web.
+                To deploy and run, a compatible web server with servlet container is required. The Java Servlet and the JavaServer Pages (JSP) specifications from Sun Microsystems and the JCP
+                (Java Community Process) must both be met by the container.
+            </div>
+            <div>
+                ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.
+                It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages (ASP) technology.
+                ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language.
+                The ASP.NET SOAP extension framework allows ASP.NET components to process SOAP messages.
+            </div>
+        </JqxTabs>
+
+        <br />
+
+        <div style="font-family: Verdana; font-size: 13px">Events:</div>
+
+        <JqxPanel ref="myPanel" :width="450" :height="250"></JqxPanel>
+    </div>
+</template>
+
+<script>
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+    import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
+
+    export default {
+        components: {
+            JqxTabs,
+            JqxPanel
+        },     
+        data: function () {
+            return {
+                getWidth: getWidth('tabs')
+            }
+        },
+        methods: {
+            displayEvent: function (event) {
+                const myTabs = this.$refs.myTabs;
+                const myPanel = this.$refs.myPanel;
+                let eventData = this.capitaliseFirstLetter(event.type);
+
+                if (event.type !== 'removed') {
+                    if (event.args !== undefined) {
+                        eventData += ': ' + myTabs.getTitleAt(event.args.item);
+                    }
+                    if (event.type === 'dragEnd') {
+                        eventData += ', Drop index: ' + myTabs.getTitleAt(event.args.dropIndex);
+                    }
+                } else {
+                    eventData += ': ' + event.args.title;
+                }
+
+                myPanel.prepend('<div style="margin-top: 5px;">' + eventData + '</div>');
+            },
+            capitaliseFirstLetter: function (string) {
+                return string.charAt(0).toUpperCase() + string.slice(1);
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-panel {
+        border: none;
+    }
+</style>
\ No newline at end of file
diff --git a/tabs/events/main.js b/tabs/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tabs/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tabs/events/package.json b/tabs/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tabs/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tabs/fluidsize/App.vue b/tabs/fluidsize/App.vue
new file mode 100644
index 00000000..2165578f
--- /dev/null
+++ b/tabs/fluidsize/App.vue
@@ -0,0 +1,50 @@
+<template>
+    <JqxTabs
+        :width="'100%'" :hight="'100%'">
+        <ul style='margin-left: 30px;'>
+            <li>Node.js</li>
+            <li>JavaServer Pages</li>
+            <li>Active Server Pages</li>
+        </ul>
+        <div>
+            Node.js is an event-driven I/O server-side JavaScript environment based on V8. It is intended for writing scalable network programs such as web servers.
+            It was created by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
+            Similar environments written in other programming languages include Twisted for Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
+            Unlike most JavaScript, it is not executed in a web browser, but is instead a form of server-side JavaScript. Node.js implements some CommonJS specifications.
+            Node.js includes a REPL environment for interactive testing.
+        </div>
+        <div>
+            JavaServer Pages (JSP) is a Java technology that helps software developers serve dynamically generated web pages based on HTML, XML, or other document types.
+            Released in 1999 as Sun's answer to ASP and PHP,:citation needed JSP was designed to address the perception that the Java programming environment didn't provide developers with enough support for the Web.
+            To deploy and run, a compatible web server with servlet container is required. The Java Servlet and the JavaServer Pages (JSP) specifications from Sun Microsystems and the JCP
+            (Java Community Process) must both be met by the container.
+        </div>
+        <div>
+            ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.
+            It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages (ASP) technology.
+            ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language.
+            The ASP.NET SOAP extension framework allows ASP.NET components to process SOAP messages.
+        </div>
+    </JqxTabs>
+</template>
+
+<script>
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+
+    export default {
+        components: {
+            JqxTabs
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100%;
+        height: 90%;
+        padding: 3px;
+        box-sizing: border-box;
+        margin: 0;
+        overflow: hidden;
+    }
+</style>
\ No newline at end of file
diff --git a/tabs/fluidsize/main.js b/tabs/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tabs/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tabs/fluidsize/package.json b/tabs/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tabs/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tabs/integrationwithotherwidgets/App.vue b/tabs/integrationwithotherwidgets/App.vue
new file mode 100644
index 00000000..b84a47e8
--- /dev/null
+++ b/tabs/integrationwithotherwidgets/App.vue
@@ -0,0 +1,164 @@
+<template>
+    <JqxTabs ref="myTabs"
+        :width="getWidth" :height="560" :initTabContent="initWidgets">
+        <ul>
+            <li style="margin-left: 30px;">
+                <div style="height: 20px; margin-top: 5px;">
+                    <div style="float: left;">
+                        <img width="16" height="16" src="../../../images/catalogicon.png" />
+                    </div>
+                    <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
+                        US Indexes
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div style="height: 20px; margin-top: 5px;">
+                    <div style="float: left;">
+                        <img width="16" height="16" src="../../../images/pieicon.png" />
+                    </div>
+                    <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
+                        NASDAQ compared to S&P 500
+                    </div>
+                </div>
+            </li>
+        </ul>
+        <div style="overflow: hidden;">
+            <JqxGrid ref="myGrid" :autoCreate="false"></JqxGrid>
+            <div style="margin-top: 10px; height: 15%;">
+                The S&P 500 index finished 2011 less than a point away from where it ended 2010
+                -- 0.04 points down to be exact. That's the smallest annual change in history. At
+                its peak in April, the S&P had climbed more than 8%. But by October, at the lowest
+                levels of the year, it was down more than 12%. The Nasdaq, meanwhile, lost 1.8%
+                for the year.
+            </div>
+        </div>
+        <div style="overflow: hidden;">
+            <JqxChart ref="myChart" :autoCreate="false" style="width: 100%; height: 100%"></JqxChart>
+        </div>
+    </JqxTabs>
+</template>
+
+<script>
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+    import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
+    import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
+
+    export default {
+        components: {
+            JqxTabs,
+            JqxChart,
+            JqxGrid
+        },     
+        data: function () {
+            return {
+                getWidth: getWidth('tabs')
+            }
+        },
+        methods: {
+            initWidgets: function (tab) {
+                switch (tab) {
+                    case 0:
+                        this.initGrid();
+                        break;
+                    case 1:
+                        this.initChart();
+                        break;
+                }
+            },
+            initGrid: function () {
+                const source =
+                    {
+                        datatype: 'csv',
+                        datafields: [
+                            { name: 'Date' },
+                            { name: 'S&P 500' },
+                            { name: 'NASDAQ' }
+                        ],
+                        url: '../sampledata/nasdaq_vs_sp500.txt'
+                    };
+
+                const dataAdapter = new jqx.dataAdapter(source);
+
+                const settings = {
+                    width: '100%',
+                    height: '84%',
+                    source: dataAdapter,
+                    columns: [
+                        { text: 'Date', datafield: 'Date', cellsformat: 'd', width: 250 },
+                        { text: 'S&P 500', datafield: 'S&P 500', width: 150 },
+                        { text: 'NASDAQ', datafield: 'NASDAQ' }
+                    ]
+                };
+
+                const myGrid = this.$refs.myGrid.createComponent(settings);
+            },
+            initChart: function () {
+                const source =
+                    {
+                        datatype: 'csv',
+                        datafields: [
+                            { name: 'Date' },
+                            { name: 'S&P 500' },
+                            { name: 'NASDAQ' }
+                        ],
+                        url: '../sampledata/nasdaq_vs_sp500.txt'
+                    };
+
+                const dataAdapter = new jqx.dataAdapter(source);
+
+                const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+                const settings = {
+                    title: 'U.S. Stock Market Index Performance (2011)',
+                    description: 'NASDAQ Composite compared to S&P 500',
+                    enableAnimations: true,
+                    showLegend: true,
+                    padding: { left: 10, top: 5, right: 10, bottom: 5 },
+                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+                    source: dataAdapter,
+                    categoryAxis:
+                    {
+                        dataField: 'Date',
+                        formatFunction: (value) => {
+                            return months[value.getMonth()];
+                        },
+                        toolTipFormatFunction: (value) => {
+                            return value.getDate() + '-' + months[value.getMonth()];
+                        },
+                        type: 'date',
+                        baseUnit: 'month',
+                        showTickMarks: true,
+                        tickMarksInterval: 1,
+                        tickMarksColor: '#888888',
+                        unitInterval: 1,
+                        showGridLines: true,
+                        gridLinesInterval: 3,
+                        gridLinesColor: '#888888',
+                        valuesOnTicks: false
+                    },
+                    colorScheme: 'scheme04',
+                    seriesGroups:
+                    [
+                        {
+                            type: 'line',
+                            valueAxis:
+                            {
+                                displayValueAxis: true,
+                                description: 'Daily Closing Price',
+                                axisSize: 'auto',
+                                tickMarksColor: '#888888'
+                            },
+                            series: [
+                                { dataField: 'S&P 500', displayText: 'S&P 500' },
+                                { dataField: 'NASDAQ', displayText: 'NASDAQ' }
+                            ]
+                        }
+                    ]
+                };
+
+                const myChart = this.$refs.myChart.createComponent(settings);
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tabs/integrationwithotherwidgets/main.js b/tabs/integrationwithotherwidgets/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tabs/integrationwithotherwidgets/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tabs/integrationwithotherwidgets/package.json b/tabs/integrationwithotherwidgets/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tabs/integrationwithotherwidgets/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tabs/keyboardnavigation/App.vue b/tabs/keyboardnavigation/App.vue
new file mode 100644
index 00000000..63efb6aa
--- /dev/null
+++ b/tabs/keyboardnavigation/App.vue
@@ -0,0 +1,102 @@
+<template>
+    <div>
+        <JqxTabs ref="myTabs"
+            :width="getWidth" :hight="250" :position="'top'">
+            <ul style="margin-left: 30px;">
+                <li>Avatar</li>
+                <li>End Game</li>
+                <li>Twilight</li>
+                <li>Unstoppable</li>
+                <li>Priest</li>
+            </ul>
+            <div>
+                <img src="../../../images/avatar.png" style="float: left; margin: 10px;" alt="" />
+                Avatar is a 2009 American[6][7] epic science fiction film written and directed by
+                James Cameron, and starring Sam Worthington, Zoe Saldana, Stephen Lang, Michelle
+                Rodriguez, Joel David Moore, Giovanni Ribisi and Sigourney Weaver. The film is set
+                in the mid-22nd century, when humans are mining a precious mineral called unobtanium
+                on Pandora , a lush habitable moon of a gas giant in the Alpha Centauri star system.
+                The expansion of the mining colony threatens the continued existence of a local
+                tribe of Na'via humanoid species indigenous to Pandora. The film's title refers
+                to the genetically engineered Na'vi-human hybrid bodies used by a team of researchers
+                to interact with the natives of Pandora.
+            </div>
+            <div>
+                <img src="../../../images/endgame.png" style="float: left; margin: 10px;" alt="" />
+                End Game is a 2006 action/thriller film, written and directed by Andy Cheng. The
+                film stars Cuba Gooding, Jr. as Secret Service agent Alex Thomas, who is shot in
+                the hand, while unsuccessfully trying to protect the President (played by Jack Scalia)
+                from an assassin's bullet. Later, with the help of a persistent newspaper reporter
+                named Kate Crawford (played by Angie Harmon), he uncovers a vast conspiracy behind
+                what initially appeared to be a lone gunman. James Woods, Burt Reynolds, and Anne
+                Archer costar in this film that was originally set to be shown in cinemas by MGM
+                in 2005, but was delayed by the takeover from Sony and eventually sent direct to
+                DVD.
+            </div>
+            <div>
+                <img src="../../../images/twilight.png" style="float: left; margin: 10px;" alt="" />
+                The project was in development for approximately three years at Paramount Pictures,
+                during which time a screen adaptation that differed significantly from the novel
+                was written. Summit Entertainment acquired the rights to the novel after three years
+                of the project's stagnant development. Melissa Rosenberg wrote a new adaptation
+                of the novel shortly before the 20072008 Writers Guild of America strike and sought
+                to be faithful to the novel's storyline. Principal photography took 44 days, and
+                completed on May 2, 2008; the film was primarily shot in Oregon
+            </div>
+            <div>
+                <img src="../../../images/unstoppable.png" style="float: left; margin: 10px;" alt="" />
+                Meanwhile, in a rail yard within the northern town of Fuller, two AWVR hostlers,
+                Dewey (Ethan Suplee) and Gilleece (T.J. Miller), are ordered by Fuller operations
+                dispatcher Bunny (Kevin Chapman) to move a freight train led by locomotive #777
+                (nicknamed "Triple Seven") off its current track to clear the track for an excursion
+                train carrying schoolchildren. Dewey attempts to take shortcuts, instructing Gilleece
+                to leave the hoses for the air brakes disconnected for the short trip. Dewey later
+                leaves the moving cab to throw a misaligned rail switch along the train's path,
+                but is unable to climb back on, as the train's throttle jumps from idle, to full
+                power. He is forced to report the train as a "coaster" to Fuller yardmaster Connie
+                Hooper (Rosario Dawson)...
+            </div>
+            <div>
+                <img src="../../../images/priest.png" style="float: left; margin: 10px;" alt="" />
+                Priest is a 2011 American post-apocalyptic sci-fi western and supernatural action
+                film starring Paul Bettany as the title character. The film, directed by Scott Stewart,
+                is based on the Korean comic of the same name. In an alternate world, humanity and
+                vampires have warred for centuries. After the last Vampire War, the veteran Warrior
+                Priest (Bettany) lives in obscurity with other humans inside one of the Church's
+                walled cities. When the Priest's niece (Lily Collins) is kidnapped by vampires,
+                the Priest breaks his vows to hunt them down. He is accompanied by the niece's boyfriend
+                (Cam Gigandet), who is a wasteland sheriff, and a former Warrior Priestess (Maggie
+                Q).
+            </div>
+        </JqxTabs>
+
+        <div style="font-family: Verdana; font-size: 12px; width: 600px; float: left;">
+            <ul>
+                <li><b>Tab</b> - Like other widgets, the jqxTabs widget receives focus by tabbing into it. Once focus is received, users will be able to use the keyboard to change the active tab page. A second tab will take the user out of the widget.</li>
+                <li><b>Shift+Tab</b> - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous focusable element in the tab order.</li>
+                <li><b>Right Arrow</b> - selects next tab.</li>
+                <li><b>Left Arrow</b> - selects previous tab.</li>
+                <li><b>Home</b> - selects first tab.</li>
+                <li><b>End</b> - selects last tab.</li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+
+    export default {
+        components: {
+            JqxTabs
+        },     
+        data: function () {
+            return {
+                getWidth: getWidth('tabs')
+            }
+        },
+        mounted: function () {
+            this.$refs.myTabs.focus();
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tabs/keyboardnavigation/main.js b/tabs/keyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tabs/keyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tabs/keyboardnavigation/package.json b/tabs/keyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tabs/keyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tabs/loadingtabcontentswithajax/App.vue b/tabs/loadingtabcontentswithajax/App.vue
new file mode 100644
index 00000000..b407c496
--- /dev/null
+++ b/tabs/loadingtabcontentswithajax/App.vue
@@ -0,0 +1,53 @@
+<template>
+    <JqxTabs 
+        @selected="selected($event)"
+        :width="getWidth" :height="200">
+        <ul>
+            <li style="margin-left: 30px;">Node.js</li>
+            <li>JavaServer Pages</li>
+            <li>Active Server Pages</li>
+        </ul>
+        <div id="content1">
+            <img src='../../../images/ajax-loader.gif' />
+        </div>
+        <div id="content2">
+            <img src='../../../images/ajax-loader.gif' />
+        </div>
+        <div id="content3">
+            <img src='../../../images/ajax-loader.gif' />
+        </div>
+    </JqxTabs>
+</template>
+
+<script>
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+
+    export default {
+        components: {
+            JqxTabs
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('tabs')
+            }
+        },
+        mounted: function () {
+            this.loadPage('pages/ajax1.htm', 1);
+        },
+        methods: {
+            selected: function (event) {
+                const pageIndex = event.args.item + 1;
+                this.loadPage('pages/ajax' + pageIndex + '.htm', pageIndex);
+            },
+            loadPage: function (url, tabIndex) {
+                axios.get(url)
+                    .then(response => {
+                        document.querySelector('#content' + tabIndex).innerHTML = response.data;
+                    })
+                    .catch(e => {
+                        this.errors.push(e)
+                    })
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tabs/loadingtabcontentswithajax/main.js b/tabs/loadingtabcontentswithajax/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tabs/loadingtabcontentswithajax/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tabs/loadingtabcontentswithajax/package.json b/tabs/loadingtabcontentswithajax/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tabs/loadingtabcontentswithajax/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tabs/mapinsidetab/App.vue b/tabs/mapinsidetab/App.vue
new file mode 100644
index 00000000..2ad2cf3b
--- /dev/null
+++ b/tabs/mapinsidetab/App.vue
@@ -0,0 +1,50 @@
+<template>
+    <JqxTabs
+        :width="getWidth" :height="400" :initTabContent="initTabContent">
+        <ul style='margin-left: 20px;'>
+            <li>Map</li>
+            <li>Information</li>
+        </ul>
+        <div>
+            <div ref="map" style="width: 100%; height: 100%;"></div>
+        </div>
+        <div>
+            The Great Pyramid of Giza (also known as the Pyramid of Khufu or the Pyramid of
+            Cheops) is the oldest and largest of the three pyramids in the Giza Necropolis bordering
+            what is now El Giza, Egypt. It is the oldest of the Seven Wonders of the Ancient
+            World, and the only one to remain largely intact.
+        </div>
+    </JqxTabs>
+</template>
+
+<script>
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+
+    export default {
+        components: {
+            JqxTabs
+        },     
+        data: function () {
+            return {
+                getWidth: getWidth('tabs')
+            }
+        },
+        methods: {
+            initTabContent: function (tab) {
+                if (tab === 0) {
+                    google.maps.event.addDomListener(window, 'load', this.initialize);
+                }
+            },
+            initialize: function () {
+                const directionsService = new google.maps.DirectionsService;
+                const directionsDisplay = new google.maps.DirectionsRenderer;
+                const map = new google.maps.Map(this.$refs.map, {
+                    zoom: 17,
+                    center: { lat: 29.979234, lng: 31.134202 },
+                    mapTypeId: google.maps.MapTypeId.ROADMAP
+                });
+                directionsDisplay.setMap(map);
+            } 
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tabs/mapinsidetab/main.js b/tabs/mapinsidetab/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tabs/mapinsidetab/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tabs/mapinsidetab/package.json b/tabs/mapinsidetab/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tabs/mapinsidetab/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tabs/righttoleftlayout/App.vue b/tabs/righttoleftlayout/App.vue
new file mode 100644
index 00000000..b23cb0b8
--- /dev/null
+++ b/tabs/righttoleftlayout/App.vue
@@ -0,0 +1,85 @@
+<template>
+    <JqxTabs :width="getWidth" :hight="250" :position="'top'" :rtl="true">
+        <ul style="margin-left: 30px;">
+            <li>Avatar</li>
+            <li>End Game</li>
+            <li>Twilight</li>
+            <li>Unstoppable</li>
+            <li>Priest</li>
+        </ul>
+        <div>
+            <img src="../../../images/avatar.png" style="float: left; margin: 10px;" alt="" />
+            Avatar is a 2009 American[6][7] epic science fiction film written and directed by
+            James Cameron, and starring Sam Worthington, Zoe Saldana, Stephen Lang, Michelle
+            Rodriguez, Joel David Moore, Giovanni Ribisi and Sigourney Weaver. The film is set
+            in the mid-22nd century, when humans are mining a precious mineral called unobtanium
+            on Pandora , a lush habitable moon of a gas giant in the Alpha Centauri star system.
+            The expansion of the mining colony threatens the continued existence of a local
+            tribe of Na'via humanoid species indigenous to Pandora. The film's title refers
+            to the genetically engineered Na'vi-human hybrid bodies used by a team of researchers
+            to interact with the natives of Pandora.
+        </div>
+        <div>
+            <img src="../../../images/endgame.png" style="float: left; margin: 10px;" alt="" />
+            End Game is a 2006 action/thriller film, written and directed by Andy Cheng. The
+            film stars Cuba Gooding, Jr. as Secret Service agent Alex Thomas, who is shot in
+            the hand, while unsuccessfully trying to protect the President (played by Jack Scalia)
+            from an assassin's bullet. Later, with the help of a persistent newspaper reporter
+            named Kate Crawford (played by Angie Harmon), he uncovers a vast conspiracy behind
+            what initially appeared to be a lone gunman. James Woods, Burt Reynolds, and Anne
+            Archer costar in this film that was originally set to be shown in cinemas by MGM
+            in 2005, but was delayed by the takeover from Sony and eventually sent direct to
+            DVD.
+        </div>
+        <div>
+            <img src="../../../images/twilight.png" style="float: left; margin: 10px;" alt="" />
+            The project was in development for approximately three years at Paramount Pictures,
+            during which time a screen adaptation that differed significantly from the novel
+            was written. Summit Entertainment acquired the rights to the novel after three years
+            of the project's stagnant development. Melissa Rosenberg wrote a new adaptation
+            of the novel shortly before the 20072008 Writers Guild of America strike and sought
+            to be faithful to the novel's storyline. Principal photography took 44 days, and
+            completed on May 2, 2008; the film was primarily shot in Oregon
+        </div>
+        <div>
+            <img src="../../../images/unstoppable.png" style="float: left; margin: 10px;" alt="" />
+            Meanwhile, in a rail yard within the northern town of Fuller, two AWVR hostlers,
+            Dewey (Ethan Suplee) and Gilleece (T.J. Miller), are ordered by Fuller operations
+            dispatcher Bunny (Kevin Chapman) to move a freight train led by locomotive #777
+            (nicknamed "Triple Seven") off its current track to clear the track for an excursion
+            train carrying schoolchildren. Dewey attempts to take shortcuts, instructing Gilleece
+            to leave the hoses for the air brakes disconnected for the short trip. Dewey later
+            leaves the moving cab to throw a misaligned rail switch along the train's path,
+            but is unable to climb back on, as the train's throttle jumps from idle, to full
+            power. He is forced to report the train as a "coaster" to Fuller yardmaster Connie
+            Hooper (Rosario Dawson)...
+        </div>
+        <div>
+            <img src="../../../images/priest.png" style="float: left; margin: 10px;" alt="" />
+            Priest is a 2011 American post-apocalyptic sci-fi western and supernatural action
+            film starring Paul Bettany as the title character. The film, directed by Scott Stewart,
+            is based on the Korean comic of the same name. In an alternate world, humanity and
+            vampires have warred for centuries. After the last Vampire War, the veteran Warrior
+            Priest (Bettany) lives in obscurity with other humans inside one of the Church's
+            walled cities. When the Priest's niece (Lily Collins) is kidnapped by vampires,
+            the Priest breaks his vows to hunt them down. He is accompanied by the niece's boyfriend
+            (Cam Gigandet), who is a wasteland sheriff, and a former Warrior Priestess (Maggie
+            Q).
+        </div>
+    </JqxTabs>
+</template>
+
+<script>
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+
+    export default {
+        components: {
+            JqxTabs
+        },     
+        data: function () {
+            return {
+                getWidth: getWidth('tabs')
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tabs/righttoleftlayout/main.js b/tabs/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tabs/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tabs/righttoleftlayout/package.json b/tabs/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tabs/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tabs/saveloadselectionusingcookies/App.vue b/tabs/saveloadselectionusingcookies/App.vue
new file mode 100644
index 00000000..a122e106
--- /dev/null
+++ b/tabs/saveloadselectionusingcookies/App.vue
@@ -0,0 +1,54 @@
+<template>
+    <JqxTabs ref="myTabs" @selected="selected($event)"
+        :width="getWidth" :position="'top'">
+        <ul style='margin-left: 30px;'>
+            <li>Node.js</li>
+            <li>JavaServer Pages</li>
+            <li>Active Server Pages</li>
+        </ul>
+        <div>
+            Node.js is an event-driven I/O server-side JavaScript environment based on V8. It is intended for writing scalable network programs such as web servers.
+            It was created by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
+            Similar environments written in other programming languages include Twisted for Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
+            Unlike most JavaScript, it is not executed in a web browser, but is instead a form of server-side JavaScript. Node.js implements some CommonJS specifications.
+            Node.js includes a REPL environment for interactive testing.
+        </div>
+        <div>
+            JavaServer Pages (JSP) is a Java technology that helps software developers serve dynamically generated web pages based on HTML, XML, or other document types.
+            Released in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address the perception that the Java programming environment didn't provide developers with enough support for the Web.
+            To deploy and run, a compatible web server with servlet container is required. The Java Servlet and the JavaServer Pages (JSP) specifications from Sun Microsystems and the JCP
+            (Java Community Process) must both be met by the container.
+        </div>
+        <div>
+            ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.
+            It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages (ASP) technology.
+            ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language.
+            The ASP.NET SOAP extension framework allows ASP.NET components to process SOAP messages.
+        </div>
+    </JqxTabs>
+</template>
+
+<script>
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+
+    export default {
+        components: {
+            JqxTabs
+        },     
+        data: function () {
+            return {
+                getWidth: getWidth('tabs'),
+                index: 0
+            }
+        },
+        mounted: function () {
+            this.index = jqx.cookie.cookie('jqxTabs_Vue.js_Cookie');
+            this.$refs.myTabs.selectedItem = this.index;
+        },
+        methods: {
+            selected: function (event) {
+                jqx.cookie.cookie('jqxTabs_Vue.js_Cookie', event.args.item);
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tabs/saveloadselectionusingcookies/main.js b/tabs/saveloadselectionusingcookies/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tabs/saveloadselectionusingcookies/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tabs/saveloadselectionusingcookies/package.json b/tabs/saveloadselectionusingcookies/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tabs/saveloadselectionusingcookies/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tabs/scrolling/App.vue b/tabs/scrolling/App.vue
new file mode 100644
index 00000000..58fd4360
--- /dev/null
+++ b/tabs/scrolling/App.vue
@@ -0,0 +1,172 @@
+<template>
+    <div>
+        <JqxTabs ref="myTabs" :width="getWidth" style="float: left;">
+            <ul style="margin-left: 30px;">
+                <li>Node.js</li>
+                <li>JavaServer Pages</li>
+                <li>Active Server Pages</li>
+                <li>Python</li>
+                <li>Perl</li>
+                <li>Ruby on Rails</li>
+                <li>Haskell</li>
+                <li>Scala</li>
+                <li>Clojure</li>
+                <li>Objective-C</li>
+            </ul>
+            <div>
+                Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
+                is intended for writing scalable network programs such as web servers. It was created
+                by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
+                Similar environments written in other programming languages include Twisted for
+                Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
+                Unlike most JavaScript, it is not executed in a web browser, but is instead a form
+                of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js
+                includes a REPL environment for interactive testing.
+            </div>
+            <div>
+                JavaServer Pages (JSP) is a Java technology that helps software developers serve
+                dynamically generated web pages based on HTML, XML, or other document types. Released
+                in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address
+                the perception that the Java programming environment didn't provide developers with
+                enough support for the Web. To deploy and run, a compatible web server with servlet
+                container is required. The Java Servlet and the JavaServer Pages (JSP) specifications
+                from Sun Microsystems and the JCP (Java Community Process) must both be met by the
+                container.
+            </div>
+            <div>
+                ASP.NET is a web application framework developed and marketed by Microsoft to allow
+                programmers to build dynamic web sites, web applications and web services. It was
+                first released in January 2002 with version 1.0 of the .NET Framework, and is the
+                successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built
+                on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code
+                using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET
+                components to process SOAP messages.
+            </div>
+            <div>
+                Python is a general-purpose, high-level programming language[5] whose design philosophy
+                emphasizes code readability. Python claims to "[combine] remarkable power with very
+                clear syntax",[7] and its standard library is large and comprehensive. Its use of
+                indentation for block delimiters is unique among popular programming languages.
+                Python supports multiple programming paradigms, primarily but not limited to object-oriented,
+                imperative and, to a lesser extent, functional programming styles. It features a
+                fully dynamic type system and automatic memory management, similar to that of Scheme,
+                Ruby, Perl, and Tcl. Like other dynamic languages, Python is often used as a scripting
+                language, but is also used in a wide range of non-scripting contexts. Using third-party
+                tools, Python code can be packaged into standalone executable programs. Python interpreters
+                are available for many operating systems.
+            </div>
+            <div>
+                Perl is a high-level, general-purpose, interpreted, dynamic programming language.
+                Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting
+                language to make report processing easier. Since then, it has undergone many changes
+                and revisions and become widely popular amongst programmers. Larry Wall continues
+                to oversee development of the core language, and its upcoming version, Perl 6. Perl
+                borrows features from other programming languages including C, shell scripting (sh),
+                AWK, and sed.[5] The language provides powerful text processing facilities without
+                the arbitrary data length limits of many contemporary Unix tools, facilitating easy
+                manipulation of text files. Perl gained widespread popularity in the late 1990s
+                as a CGI scripting language, in part due to its parsing abilities.
+            </div>
+            <div>
+                Ruby on Rails was extracted by David Heinemeier Hansson from his work on Basecamp,
+                a project management tool by 37signals (now a web application company). Hansson
+                first released Ruby on Rails as open source in July 2004, but did not share commit
+                rights to the project until February 2005. In August 2006 the framework reached
+                a milestone when Apple announced that it would ship Ruby on Rails with Mac OS X
+                v10.5 "Leopard", which was released in October 2007. Ruby on Rails version 2.3 was
+                released on March 15, 2009. Major new developments in Ruby on Rails include templates,
+                engines, Rack and nested model forms.
+            </div>
+            <div>
+                Following the release of Miranda by Research Software Ltd, in 1985, interest in
+                lazy functional languages grew: by 1987, more than a dozen non-strict, purely functional
+                programming languages existed. Of these, Miranda was the most widely used, but was
+                not in the public domain. At the conference on Functional Programming Languages
+                and Computer Architecture (FPCA '87) in Portland, Oregon, a meeting was held during
+                which participants formed a strong consensus that a committee should be formed to
+                define an open standard for such languages. The committee's purpose was to consolidate
+                the existing functional languages into a common one that would serve as a basis
+                for future research in functional-language design.
+            </div>
+            <div>
+                The design of Scala started in 2001 at the cole Polytechnique Federale de Lausanne
+                (EPFL) by Martin Odersky, following on from work on Funnel, a programming language
+                combining ideas from functional programming and Petri nets.[not in citation given]
+                Odersky had previously worked on Generic Java and javac, Sun's Java compiler. Scala
+                was released late 2003 / early 2004 on the Java platform, and on the .NET platform
+                in June 2004. A second version of the language, v2.0, was released in March 2006.
+                On 17 January 2011 Scala team won a 5 year research grant of over 2.3 million from
+                European Research Council. On 12 May 2011, Odersky and collaborators launched Typesafe,
+                a company to provide commercial support, training, and services for Scala. Typesafe
+                received $3 million investment from Greylock Partners.
+            </div>
+            <div>
+                Rich Hickey is the creator of the Clojure programming language. Before Clojure,
+                he developed dotLisp, a similar project based on the .NET platform. Hickey is an
+                independent software developer and a consultant with over 20 years of experience
+                in many facets of software development. He has worked on scheduling systems, broadcast
+                automation, audio analysis and fingerprinting, database design, yield management,
+                exit poll systems, and machine listening. He spent about 2 years working on Clojure
+                before releasing it to the world, much of that time working exclusively on Clojure
+                without external funding. When he finally announced it, the announcement consisted
+                of one email to some friends in the Common Lisp community.
+            </div>
+            <div>
+                Objective-C was created primarily by Brad Cox and Tom Love in the early 1980s at
+                their company Stepstone. Both had been introduced to Smalltalk while at ITT Corporation's
+                Programming Technology Center in 1981. The earliest work on Objective C traces back
+                to around that time. Cox was intrigued by problems of true reusability in software
+                design and programming. He realized that a language like Smalltalk would be invaluable
+                in building development environments for system developers at ITT. However, he and
+                Tom Love also recognized that backward compatibility with C was critically important
+                in ITT's telecom engineering milieu. Cox began writing a pre-processor for C to
+                add some of the capabilities of Smalltalk. He soon had a working implementation
+                of an object-oriented extension to the C language, which he called "OOPC" for Object-Oriented
+                Pre-Compiler.
+            </div>
+        </JqxTabs>
+    
+        <div style='float: left; margin-left: 20px;'>
+            <div style='margin-top: 10px; margin-bottom: 10px;'>
+                <b>Scroll Buttons Position:</b>
+            </div>
+            <JqxRadioButton @checked="checkedLeft($event)" :height="25" :width="100" ref="leftButton">
+                Left
+            </JqxRadioButton>
+            <JqxRadioButton @checked="checkedRight($event)" :height="25" :width="100" :checked="true" ref="rightButton">
+                Right
+            </JqxRadioButton>
+            <JqxRadioButton @checked="checkedBoth($event)" :height="25" :width="100" ref="bothButton">
+                Both
+            </JqxRadioButton>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+    import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
+
+    export default {
+        components: {
+            JqxTabs,
+            JqxRadioButton
+        },     
+        data: function () {
+            return {
+                getWidth: getWidth('tabs')
+            }
+        },
+        methods: {
+            checkedRight: function () {
+                this.$refs.myTabs.scrollPosition = 'right';
+            },
+            checkedLeft: function () {
+                this.$refs.myTabs.scrollPosition = 'left';
+            },
+            checkedBoth: function () {
+                this.$refs.myTabs.scrollPosition = 'both';
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tabs/scrolling/main.js b/tabs/scrolling/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tabs/scrolling/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tabs/scrolling/package.json b/tabs/scrolling/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tabs/scrolling/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tabs/settings/App.vue b/tabs/settings/App.vue
new file mode 100644
index 00000000..c1c3f51c
--- /dev/null
+++ b/tabs/settings/App.vue
@@ -0,0 +1,94 @@
+<template>
+    <div>
+        <JqxTabs ref="myTabs" style="float: left;"
+            :width="getWidth" :hight="220">
+            <ul style='margin-left: 30px;'>
+                <li>Node.js</li>
+                <li>JavaServer Pages</li>
+                <li>Active Server Pages</li>
+            </ul>
+            <div>
+                Node.js is an event-driven I/O server-side JavaScript environment based on V8. It is intended for writing scalable network programs such as web servers.
+                It was created by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
+                Similar environments written in other programming languages include Twisted for Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
+                Unlike most JavaScript, it is not executed in a web browser, but is instead a form of server-side JavaScript. Node.js implements some CommonJS specifications.
+                Node.js includes a REPL environment for interactive testing.
+            </div>
+            <div>
+                JavaServer Pages (JSP) is a Java technology that helps software developers serve dynamically generated web pages based on HTML, XML, or other document types.
+                Released in 1999 as Sun's answer to ASP and PHP,:citation needed JSP was designed to address the perception that the Java programming environment didn't provide developers with enough support for the Web.
+                To deploy and run, a compatible web server with servlet container is required. The Java Servlet and the JavaServer Pages (JSP) specifications from Sun Microsystems and the JCP
+                (Java Community Process) must both be met by the container.
+            </div>
+            <div>
+                ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.
+                It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages (ASP) technology.
+                ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language.
+                The ASP.NET SOAP extension framework allows ASP.NET components to process SOAP messages.
+            </div>
+        </JqxTabs>
+
+        <div style="margin-left: 20px; float: left;">
+            <JqxButton :width="100" ref="Add"        @click="Add()">Add</JqxButton>
+            <JqxButton :width="100" ref="Remove"     @click="Remove()">Remove</JqxButton>
+            <JqxButton :width="100" ref="Disable"    @click="Disable()">Disable</JqxButton>
+            <JqxButton :width="100" ref="Enable"     @click="Enable()">Enable</JqxButton>
+            <JqxButton :width="100" ref="EnableAll"  @click="EnableAll()">Enable All</JqxButton>
+            <JqxButton :width="100" ref="DisableAll" @click="DisableAll()">Disable All</JqxButton>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxTabs,
+            JqxButton
+        },     
+        data: function () {
+            return {
+                getWidth: getWidth('tabs')
+            }
+        },
+        methods: {
+            Add: function () {
+                this.$refs.myTabs.addLast('Sample title', 'Sample content');
+                this.$refs.myTabs.ensureVisible(-1);
+            },
+            Remove: function () {
+                const selectedItem = this.$refs.myTabs.selectedItem;
+                const disabledItems = this.$refs.myTabs.getDisabledTabsCount();
+                const items = this.$refs.myTabs.length();
+                if (items > disabledItems + 1) {
+                    this.$refs.myTabs.removeAt(selectedItem);
+                }
+            },
+            Disable: function () {
+                const selectedItem = this.$refs.myTabs.selectedItem;
+                this.$refs.myTabs.disableAt(selectedItem);
+            },
+            Enable: function () {
+                const selectedItem = this.$refs.myTabs.selectedItem;
+                this.$refs.myTabs.enableAt(selectedItem);
+            },
+            EnableAll: function () {
+                this.$refs.myTabs.enable();
+            },
+            DisableAll: function () {
+                this.$refs.myTabs.disable();
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        margin-top: 10px;
+    }
+    .jqx-button:first-of-type {
+        margin-top: 0px;
+    }
+</style>
\ No newline at end of file
diff --git a/tabs/settings/main.js b/tabs/settings/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tabs/settings/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tabs/settings/package.json b/tabs/settings/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tabs/settings/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tabs/tabswithimages/App.vue b/tabs/tabswithimages/App.vue
new file mode 100644
index 00000000..70bb8bb7
--- /dev/null
+++ b/tabs/tabswithimages/App.vue
@@ -0,0 +1,165 @@
+<template>
+    <JqxTabs ref="myTabs"
+        :width="getWidth" :selectionTracker="true" :animationType="'fade'">
+        <ul style="margin-left: 40px;">
+            <li>
+                <div style="height: 40px;">
+                    <img style='float: left;' width='32' height='32' src="../../../images/building_small.jpg" alt="" class="small-image" />
+                    <div style="float: left; margin-left: 6px; text-align: center; margin-top: 5px; font-size: 13px;">
+                        30 St Mary<br />
+                        Axe
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div style="height: 40px;">
+                    <img style='float: left;' width='32' height='32' src="../../../images/building2_small.jpg" alt="" class="small-image" />
+                    <div style="float: left; margin-left: 6px; text-align: center; margin-top: 5px; font-size: 13px;">
+                        Burj Al Arab
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div style="height: 40px;">
+                    <img style='float: left;' width='32' height='32' src="../../../images/building3_small.jpg" alt="" class="small-image" />
+                    <div style="float: left; margin-left: 6px; text-align: center; margin-top: 5px; font-size: 13px;">
+                        The Willis
+                        <br />
+                        Tower
+                    </div>
+                </div>
+            </li>
+        </ul>
+        <div class="content-container">
+            <div style="height: 400px">
+                <img src="../../../images/building_big.jpg" alt="" class="big-image" />
+                <h3>
+                    30 St Mary Axe
+                </h3>
+                <p class="important-text">
+                    the Swiss Re Building (colloquially referred to as the Gherkin), is a skyscraper
+                    in London's main financial district, the City of London, completed in December 2003
+                    and opened at the end of May 2004. With 40 floors, the tower is 180 metres (591
+                    ft) tall, and stands on the former site of the Baltic Exchange building, which was
+                    severely damaged on 10 April 1992 by the explosion of a bomb placed by the Provisional
+                    IRA.
+                </p>
+                <div class="more-text">
+                    The building is on the former site of the Baltic Exchange building, the headquarters
+                    of a global marketplace for ship sales and shipping information. On 10 April 1992
+                    the Provisional IRA detonated a bomb close to the Exchange, severely damaging the
+                    historic Exchange building and neighbouring structures. The UK government's statutory
+                    adviser on the historic environment, English Heritage, and the City of London governing
+                    body, the City of London Corporation, were keen that any redevelopment must restore
+                    the building's old faade onto St Mary Axe. The Exchange Hall was a celebrated fixture
+                    of the ship trading company.
+                </div>
+            </div>
+        </div>
+        <div class="content-container">
+            <div style="height: 400px">
+                <img src="../../../images/building2_big.jpg" alt="" class="big-image" />
+                <h3>
+                    Burj Al Arab
+                </h3>
+                <p class="important-text">
+                    is a 5-star luxury hotel located in Dubai, United Arab Emirates. At 321 m (1,053
+                    ft), it is the fourth tallest hotel in the world. Burj Al Arab stands on an artificial
+                    island 280 m (920 ft) out from Jumeirah beach, and is connected to the mainland
+                    by a private curving bridge. It is an iconic structure whose shape mimics the sail
+                    of a ship.
+                </p>
+                <div class="more-text">
+                    The beachfront area where Burj Al Arab and Jumeirah Beach Hotel are located was
+                    previously called Chicago Beach. The hotel is located on an island of reclaimed
+                    land 280 meters offshore of the beach of the former Chicago Beach Hotel. The locale's
+                    name had its origins in the Chicago Bridge & Iron Company which at one time welded
+                    giant floating oil storage tankers on the site. The old name persisted after the
+                    old Hotel was demolished in 1997. Dubai Chicago Beach Hotel remained as the Public
+                    Project Name for the construction phase of Burj Al Arab Hotel until Sheikh Mohammed
+                    bin Rashid Al Maktoum announced the new name.
+                </div>
+            </div>
+        </div>
+        <div class="content-container">
+            <div style="height: 400px">
+                <img src="../../../images/building3_big.jpg" alt="" class="big-image" />
+                <h3>
+                    The Willis Tower
+                </h3>
+                <p class="important-text">
+                    (formerly named, and still commonly referred to as, the Sears Tower) is a 108-story,
+                    1,451-foot (442 m) skyscraper in Chicago, Illinois. At the time of its completion
+                    in 1973, it was the tallest building in the world, surpassing the World Trade Center
+                    towers in New York, and it held this rank for nearly 25 years. The Willis Tower
+                    is the tallest building in the United States and the fifth-tallest freestanding
+                    structure in the world, as well as the fifth-tallest building in the world to the
+                    roof.
+                </p>
+                <div class="more-text">
+                    Although Sears's naming rights expired in 2003, the building continued to be called
+                    the Sears Tower for several years. In March 2009, London-based insurance broker
+                    Willis Group Holdings agreed to lease a portion of the building, and obtained the
+                    building's naming rights. On July 16, 2009, the building was officially renamed
+                    the Willis Tower.
+                </div>
+            </div>
+        </div>
+    </JqxTabs>
+</template>
+
+<script>
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+
+    export default {
+        components: {
+            JqxTabs
+        },     
+        data: function () {
+            return {
+                getWidth: getWidth('tabs')
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    .big-image {
+        float: left;
+        margin-right: 15px;
+        margin-bottom: 15px;
+        border: 1px solid #999;
+        background: #fff;
+        padding: 3px;
+    }
+
+    .small-image {
+        border: 1px solid #ccc;
+        background: #fff;
+        padding: 3px;
+    }
+
+    .content-container {
+        padding-left: 15px;
+        padding-top: 15px;
+        padding-right: 15px;
+    }
+
+    .important-text {
+        font-size: 13px;
+        color: #000;
+    }
+
+    .more-text {
+        color: #444;
+        font-size: 11px;
+        font-style: italic;
+    }
+</style>
\ No newline at end of file
diff --git a/tabs/tabswithimages/main.js b/tabs/tabswithimages/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tabs/tabswithimages/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tabs/tabswithimages/package.json b/tabs/tabswithimages/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tabs/tabswithimages/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tabs/wizard/App.vue b/tabs/wizard/App.vue
new file mode 100644
index 00000000..6482f490
--- /dev/null
+++ b/tabs/wizard/App.vue
@@ -0,0 +1,318 @@
+<template>
+    <JqxTabs ref="myTabs"
+        :width="getWidth" :height="230" :keyboardNavigation="false">
+        <ul>
+            <li style="margin-left: 30px;">Personal info</li>
+            <li>Shopping basket</li>
+            <li>Review order</li>
+        </ul>
+        <div class="section">
+            <div id="form">
+                <div class="inputContainer">
+                    Username:
+                    <input class="formInput" type="text" id="usernameInput" ref="usernameInput" />
+                </div>
+                <div class="inputContainer">
+                    Password:
+                    <input class="formInput" type="password" id="passwordInput" ref="passwordInput" />
+                </div>
+            </div>
+            <div id="hintWrapper">
+                <div id="hintSection" class="hint"></div>
+            </div>
+            <div id="checkBoxWrapper">
+                <JqxCheckBox ref="acceptCheckBox" :width="250" @change="acceptCheckBoxChange($event)">
+                    I accept the terms and conditions
+                </JqxCheckBox>
+            </div>
+            <div id="sectionButtonsWrapper">
+                <JqxButton :width="50" ref="nextButtonInfo" class="nextButton">Next</JqxButton>
+            </div>
+        </div>
+        <div class="section">
+            <JqxListBox ref="products"
+                @change="productsChange($event)" @unselect="productsUnselect($event)"
+                :width="'99%'" :height="'70%'" :multiple="true" :source="source">
+            </JqxListBox>
+            <div class="hint" id="hintBasket"></div>
+            <div id="basketButtonsWrapper">
+                <JqxButton :width="50" ref="backButtonBasket" class="backButton">Back</JqxButton>
+                <JqxButton :width="50" ref="nextButtonBasket" class="nextButton">Next</JqxButton>
+            </div>
+        </div>
+        <div class="section">
+            <div id="selectedProductsHeader">
+                <h4>Selected products</h4>
+                <div id="orderContainer" ref="orderContainer"></div>
+            </div>
+            <div id="selectedProductsButtonsWrapper">
+                <JqxButton :width="50" ref="backButtonReview" class="backButton">Back</JqxButton>
+            </div>
+        </div>
+    </JqxTabs>
+</template>
+
+<script>
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+    import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
+
+    export default {
+        components: {
+            JqxTabs,
+            JqxButton,
+            JqxCheckBox,
+            JqxListBox
+        },     
+        data: function () {
+            return {
+                source: this.getSource(),
+                getWidth: getWidth('tabs')
+            }
+        },
+        mounted: function () {
+            this.validate(true);
+            this.addHandlers();
+        },
+        methods: {
+            addHandlers: function () {
+                this.$refs.usernameInput.addEventListener('keyup', () => {
+                    this.validate(true);
+                });
+
+                this.$refs.usernameInput.addEventListener('change', () => {
+                    this.validate(true);
+                });
+
+                this.$refs.passwordInput.addEventListener('keyup', () => {
+                    this.validate(true);
+                });
+
+                const nextButtonClass = document.querySelectorAll('.nextButton');
+                for (let i = 0; i < nextButtonClass.length; i++) {
+                    const currentNextButton = nextButtonClass[i];
+                    currentNextButton.addEventListener('click', () => {
+                        this.validate(true);
+                        this.$refs.myTabs.next;
+                    });
+                }
+
+                const backButtonClass = document.querySelectorAll('.backButton');
+                for (let i = 0; i < backButtonClass.length; i++) {
+                    const currentBackButton = backButtonClass[i];
+                    currentBackButton.addEventListener('click', () => {
+                        this.validate(true);
+                        this.$refs.myTabs.previous;
+                    });
+                }
+            },
+            acceptCheckBoxChange: function (event)  {
+                this.validate(true);
+            },
+            productsChange: function (event)  {
+                this.validate(true);
+
+                const selectedItems = this.$refs.products.selectedIndexes;
+                let count = selectedItems.length;
+                const parent = this.$refs.orderContainer;
+
+                while (parent.firstChild) {
+                    parent.removeChild(parent.firstChild);
+                }
+
+                while (count) {
+                    count--;
+                    if (typeof selectedItems[count] !== 'undefined' &&
+                        selectedItems[count] !== -1) {
+                        const currentHtmlContent = parent.innerHTML;
+                        parent.innerHTML = currentHtmlContent + '<div style="width: 190px; height: 20px;">' + (this.getSource()[selectedItems[count]].html) + '</div>';
+                    }
+                }
+            },
+            productsUnselect: function (event)  {
+                this.validate(true);
+            },
+            isItemSelected: function (array) {
+                let count = array.length;
+                if (count === 0) {
+                    return false;
+                }
+                while (count) {
+                    count -= 1;
+                    if (array[count] !== -1 &&
+                        typeof array[count] !== 'undefined') {
+                        return true;
+                    }
+                }
+                return false;
+            },
+            validate: function (notify) {
+                const myTabs = this.$refs.myTabs;
+                if (!this.firstTab(notify)) {
+                    myTabs.disableAt(1);
+                    myTabs.disableAt(2);
+                    return;
+                } else {
+                    myTabs.enableAt(1);
+                }
+
+                if (!this.secondTab(notify)) {
+                    myTabs.disableAt(2);
+                    return;
+                } else {
+                    myTabs.enableAt(2);
+                }
+
+            },
+            showHint: function (message, selector) {
+                if (typeof selector === 'undefined') {
+                    selector = '.hint';
+                }
+
+                if (message === '') {
+                    message = 'You can continue.';
+                }
+
+                if (selector.indexOf('.') == 0) {
+                    document.getElementsByClassName(selector.slice(1))[0].innerHTML = '<strong>' + message + '</strong>';
+                } else {
+                    document.getElementById(selector.slice(1)).innerHTML = '<strong>' + message + '</strong>';
+                }
+            },
+            firstTab: function (notify) {
+                const username = this.$refs.usernameInput.value,
+                    password = this.$refs.passwordInput.value;
+                let message = '';
+
+                if (username.length < 3) {
+                    message += 'You have to enter valid username. <br /><br />';
+                }
+
+                if (password.length < 3) {
+                    message += 'You have to enter valid password. <br /><br />';
+                }
+
+                if (!this.$refs.acceptCheckBox.checked) {
+                    message += 'You have to accept the terms. <br /><br />';
+                }
+
+                if (message !== '') {
+                    if (notify) {
+                        this.showHint(message, '#hintSection');
+                    }
+                    return false;
+                }
+
+                this.showHint('You can continue.', '#hintSection');
+                return true;
+            },
+            secondTab: function (notify) {
+                const products = this.$refs.products.selectedIndex;
+                if (!this.isItemSelected(this.$refs.products.selectedIndexes)) {
+                    this.showHint('You have to select at least one item.', '#hintBasket');
+                    return false;
+                } else {
+                    this.showHint('You can continue.', '#hintBasket');
+                }
+                return true;
+            },
+            getSource: function () {
+                return [
+                    { html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/numberinput.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxNumberInput</span></div>", title: 'jqxNumberInput' },
+                    { html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/progressbar.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxProgressBar</span></div>", title: 'jqxProgressBar' },
+                    { html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/calendar.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxCalendar</span></div>", title: 'jqxCalendar' },
+                    { html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/button.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxButton</span></div>", title: 'jqxButton' },
+                    { html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/dropdownlist.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxDropDownList</span></div>", title: 'jqxDropDownList' },
+                    { html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/listbox.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxListBox</span></div>", title: 'jqxListBox' },
+                    { html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/tooltip.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxTooltip</span></div>", title: 'jqxTooltip' }
+                ];
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    #form {
+        width: 50%;
+        height: 70%;
+        float: left;
+    }
+    .inputContainer {
+        width: 130px;
+        margin-left: 30px;
+        margin-top: 10px;
+    }
+    .inputContainer:first-of-type {
+        margin-top: 40px;
+    }
+    .formInput {
+        width: 130px;
+        height: 20px;
+        outline: none;
+    }
+
+    #hintWrapper {
+        width: 40%;
+        height: 70%;
+        display: inline-block;
+    }
+    #hintSection {     
+        margin-top: 40px;
+    }
+    #hintBasket {
+        width: 40%;
+        margin-left: 20px;
+        margin-top: 20px;
+        padding: 5px;
+        float: left;
+    }
+
+    #checkBoxWrapper {
+        width: 50%;
+        display: inline-block;
+    }
+    #checkBoxWrapper .jqx-checkbox {
+        padding-left: 30px;
+        padding-top: 20px;
+    }
+
+    #sectionButtonsWrapper {
+        width: 40%;
+        text-align: center;
+        display: inline-block;
+    }
+    #basketButtonsWrapper {
+        width: 40%;
+        display: inline-block;
+        margin-top: 20px;
+    }
+    #basketButtonsWrapper .jqx-button {
+        display: inline-block;
+    }
+    #basketButtonsWrapper .jqx-button:first-child {
+        margin-right: 10px;
+    }
+    #selectedProductsButtonsWrapper {
+        width: 40%;
+        display: inline-block;
+        margin-top: 160px;
+    }
+
+    #selectedProductsHeader {
+        margin-left: 20px;
+        float: left;
+        width: 50%;
+    }
+
+    #products {
+        border: none;
+    }
+</style>
\ No newline at end of file
diff --git a/tabs/wizard/main.js b/tabs/wizard/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tabs/wizard/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tabs/wizard/package.json b/tabs/wizard/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tabs/wizard/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tagcloud/addremoveupdatetags/App.vue b/tagcloud/addremoveupdatetags/App.vue
new file mode 100644
index 00000000..dd61c9cd
--- /dev/null
+++ b/tagcloud/addremoveupdatetags/App.vue
@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <p>This demo demonstrates how to add a tag in first position or update/remove the tag in first position.</p>
+
+        <JqxTagCloud ref="myTagCloud"
+            :width="600" :source="dataAdapter" :urlBase="'http://localhost/'"
+            :displayMember="'productname'" :valueMember="'price'"
+            :fontSizeUnit="'px'" :minFontSize="12" :maxFontSize="20"
+            :minColor="'#00AA99'" :maxColor="'#FF0000'">
+        </JqxTagCloud>
+
+        <br />
+        <br />
+
+        <JqxButton :width="120" @click="addItemBtnOnClick()">Add Item</JqxButton>
+        <JqxButton :width="120" @click="deleteItemBtnOnClick()">Delete First Item</JqxButton>
+        <JqxButton :width="120" @click="updateItemBtnOnClick()">Update First Item</JqxButton>
+    </div>
+</template>
+
+<script>
+    import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxTagCloud,
+            JqxButton
+        },
+        beforeCreate: function () {
+            const data = generatedata(50);
+
+            const source = 
+                {
+                    datatype: 'array',
+                    localdata: data,
+                    datafields: [
+                        { name: 'productname' },
+                        { name: 'price' }
+                    ]
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(source);
+        },
+        methods: {
+            addItemBtnOnClick: function () {
+                const row = generatedata(1)[0];
+                this.$refs.myTagCloud.insertAt(0, row);
+            },
+            deleteItemBtnOnClick: function () {
+                this.$refs.myTagCloud.removeAt(0);
+            },
+            updateItemBtnOnClick: function () {
+                const row = generatedata(1)[0];
+                this.$refs.myTagCloud.updateAt(0, row);
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        display: inline-block;
+        margin-left: 10px;
+        user-select: none;
+    }
+</style>
\ No newline at end of file
diff --git a/tagcloud/addremoveupdatetags/main.js b/tagcloud/addremoveupdatetags/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tagcloud/addremoveupdatetags/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tagcloud/addremoveupdatetags/package.json b/tagcloud/addremoveupdatetags/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tagcloud/addremoveupdatetags/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tagcloud/bindingtojson/App.vue b/tagcloud/bindingtojson/App.vue
new file mode 100644
index 00000000..0df2afcd
--- /dev/null
+++ b/tagcloud/bindingtojson/App.vue
@@ -0,0 +1,29 @@
+<template>
+    <JqxTagCloud ref="myTagCloud"
+        :width="600" :source="dataAdapter"
+        :displayMember="'name'" :valueMember="'calories'">
+    </JqxTagCloud>
+</template>
+
+<script>
+    import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
+
+    export default {
+        components: {
+            JqxTagCloud
+        },
+        beforeCreate: function () {
+            const source =
+                {
+                    datatype: 'json',
+                    datafields: [
+                        { name: 'calories' },
+                        { name: 'name' }
+                    ],
+                    url: '../sampledata/beverages.txt'
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(source);
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tagcloud/bindingtojson/main.js b/tagcloud/bindingtojson/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tagcloud/bindingtojson/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tagcloud/bindingtojson/package.json b/tagcloud/bindingtojson/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tagcloud/bindingtojson/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tagcloud/colorselection/App.vue b/tagcloud/colorselection/App.vue
new file mode 100644
index 00000000..d74f175c
--- /dev/null
+++ b/tagcloud/colorselection/App.vue
@@ -0,0 +1,133 @@
+<template>
+    <div>
+        <JqxTagCloud ref="myTagCloud"
+            :width="600" :source="dataAdapter" :urlBase="'http://localhost/'"
+            :displayMember="'country'" :valueMember="'rate'"
+            :fontSizeUnit="'px'" :minFontSize="12" :maxFontSize="20"
+            :minColor="'#00AA99'" :maxColor="'#FF0000'">
+        </JqxTagCloud>
+
+        <div style="float: left; margin-right: 10px;">
+            <label style="margin-left: 5px; font-size: 12px; font-family: Verdana">Select Min Color</label>
+
+            <JqxDropDownButton ref="myDropDownButton1"
+                               :width="150" :height="22">
+                <div style="padding: 3px">
+
+                    <JqxColorPicker @colorchange="myColorPickerOnColorChange($event)"
+                                    :width="220" :height="220" :color="'00AA99'" :colorMode="'hue'">
+                    </JqxColorPicker>
+
+                </div>
+            </JqxDropDownButton>
+        </div>
+    
+        <div style="float: left;">
+            <label style="margin-left: 5px; font-size: 12px; font-family: Verdana">Select Max Color</label>
+
+            <JqxDropDownButton ref="myDropDownButton2"
+                               :width="150" :height="22">
+                <div style="padding: 3px">
+
+                    <JqxColorPicker @colorchange="myColorPicker2OnColorChange($event)"
+                                    :width="220" :height="220" :color="'FF0000'" :colorMode="'hue'">
+                    </JqxColorPicker>
+
+                </div>
+            </JqxDropDownButton>
+        </div>
+     
+    </div>
+</template>
+
+<script>
+    import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
+    import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
+    import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcolorpicker.vue';
+
+    export default {
+        components: {
+            JqxTagCloud,
+            JqxDropDownButton,
+            JqxColorPicker
+        },
+        beforeCreate: function () {
+            const unemploymentRate =
+                [
+                    { 'country': 'Namibia', 'rate': 37.6 },
+                    { 'country': 'Macedonia, FYR', 'rate': 32.0 },
+                    { 'country': 'Latvia', 'rate': 18.7 },
+                    { 'country': 'Lithuania', 'rate': 17.8 },
+                    { 'country': 'Estonia', 'rate': 16.9 },
+                    { 'country': 'Serbia', 'rate': 16.6 },
+                    { 'country': 'Georgia', 'rate': 16.5 },
+                    { 'country': 'Yemen, Rep.', 'rate': 14.6 },
+                    { 'country': 'Slovak Republic', 'rate': 14.4 },
+                    { 'country': 'Dominican Republic', 'rate': 14.2 },
+                    { 'country': 'Tunisia', 'rate': 14.2 },
+                    { 'country': 'Armenia', 'rate': 28.6 },
+                    { 'country': 'Bosnia and Herzegovina', 'rate': 27.2 },
+                    { 'country': 'Lesotho', 'rate': 25.3 },
+                    { 'country': 'South Africa', 'rate': 24.7 },
+                    { 'country': 'Spain', 'rate': 20.1 },
+                    { 'country': 'Albania', 'rate': 13.8 },
+                    { 'country': 'Ireland', 'rate': 13.6 },
+                    { 'country': 'Jordan', 'rate': 12.9 },
+                    { 'country': 'Greece', 'rate': 12.5 }
+                ];
+
+            const source = 
+                {
+                    datatype: 'array',
+                    localdata: unemploymentRate,
+                    datafields: [
+                        { name: 'country' },
+                        { name: 'rate' }
+                    ]
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(source);
+        },
+        mounted: function () {
+            this.$refs.myDropDownButton1.setContent(this.getTextElementByColor(new jqx.color({ hex: '00AA99' })));
+            this.$refs.myDropDownButton2.setContent(this.getTextElementByColor(new jqx.color({ hex: 'FF0000' })));
+        },
+        methods: {
+            getTextElementByColor: function (color) {
+                const colorContainer = document.createElement('div');
+                colorContainer.setAttribute('style', 'text-shadow: none; position: relative; padding-bottom: 2px; margin-top: 2px;');
+
+                if (color == 'transparent' || color.hex == '') {
+                    return colorContainer.innerText = 'transparent';
+                }
+
+                colorContainer.innerText = '#' + color.hex;
+                const nThreshold = 105;
+                const bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
+                const foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White';
+
+                colorContainer.style.color = foreColor;
+                colorContainer.style.backgroundColor = '#' + color.hex;
+                colorContainer.className += ' jqx-rc-all';
+
+                return colorContainer;
+            },
+            myColorPickerOnColorChange: function (event) {
+                this.$refs.myDropDownButton1.setContent(this.getTextElementByColor(event.args.color));
+                this.$refs.myTagCloud.minColor = '#' + event.args.color.hex;
+            },
+            myColorPicker2OnColorChange: function (event) {
+                this.$refs.myDropDownButton2.setContent(this.getTextElementByColor(event.args.color));
+                this.$refs.myTagCloud.maxColor = '#' + event.args.color.hex;
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        display: inline-block;
+        margin-left: 10px;
+        user-select: none;
+    }
+</style>
\ No newline at end of file
diff --git a/tagcloud/colorselection/main.js b/tagcloud/colorselection/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tagcloud/colorselection/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tagcloud/colorselection/package.json b/tagcloud/colorselection/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tagcloud/colorselection/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tagcloud/customtags/App.vue b/tagcloud/customtags/App.vue
new file mode 100644
index 00000000..6c3f6bc1
--- /dev/null
+++ b/tagcloud/customtags/App.vue
@@ -0,0 +1,65 @@
+<template>
+    <JqxTagCloud ref="myTagCloud"
+        :width="600" :source="dataAdapter" :tagRenderer="tagRenderer"
+        :displayMember="'countryName'" :valueMember="'technologyRating'">
+    </JqxTagCloud>
+</template>
+
+<script>
+    import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
+
+    export default {
+        components: {
+            JqxTagCloud
+        },
+        beforeCreate: function () {
+            const unemploymentRate =
+                [
+                    { countryName: 'Australia', technologyRating: 35, url: 'test' },
+                    { countryName: 'United States', technologyRating: 60 },
+                    { countryName: 'Germany', technologyRating: 55 },
+                    { countryName: 'Brasil', technologyRating: 20 },
+                    { countryName: 'United Kingdom', technologyRating: 50 },
+                    { countryName: 'Japan', technologyRating: 80 }
+                ];
+
+            const source =
+                {
+                    localdata: unemploymentRate,
+                    datatype: 'array',
+                    datafields: [
+                        { name: 'countryName' },
+                        { name: 'technologyRating' }
+                    ]
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(source);
+        },
+        methods: {
+            tagRenderer: function (record, minValue, range) {
+                const el = document.createElement('span');
+                el.innerText = record.countryName;
+
+                const img = document.createElement('img');
+                img.setAttribute('style', 'width: 20px; height: 20px; margin-right: 10px; margin-left: 3px;');
+                img.src = '../../../images/cut-26.png';
+
+                img.addEventListener('click', (event) => {
+                    const liElements = this.$refs.myTagCloud.$el.querySelectorAll('li');
+
+                    for (let i = 0; i < liElements.length; i++) {
+                        if (liElements[i].innerText === (event.target).parentElement.innerText) {
+                            this.$refs.myTagCloud.removeAt(i);
+                        }
+                    }
+
+                    event.preventDefault();
+                    event.stopPropagation();
+                });
+
+                el.appendChild(img);
+                return el;
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tagcloud/customtags/main.js b/tagcloud/customtags/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tagcloud/customtags/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tagcloud/customtags/package.json b/tagcloud/customtags/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tagcloud/customtags/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tagcloud/defaultfunctionality/App.vue b/tagcloud/defaultfunctionality/App.vue
new file mode 100644
index 00000000..c036888c
--- /dev/null
+++ b/tagcloud/defaultfunctionality/App.vue
@@ -0,0 +1,39 @@
+<template>
+    <JqxTagCloud 
+        :width="600" :source="dataAdapter" 
+        :displayMember="'countryName'" :valueMember="'technologyRating'">
+    </JqxTagCloud>
+</template>
+
+<script>
+    import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
+
+    export default {
+        components: {
+            JqxTagCloud
+        },
+        beforeCreate: function () {
+            const data =
+                [
+                    { countryName: 'Australia', technologyRating: 35 },
+                    { countryName: 'United States', technologyRating: 60 },
+                    { countryName: 'Germany', technologyRating: 55 },
+                    { countryName: 'Brasil', technologyRating: 20 },
+                    { countryName: 'United Kingdom', technologyRating: 50 },
+                    { countryName: 'Japan', technologyRating: 80 }
+                ];
+
+            const source = 
+                {
+                    localdata: data,
+                    datatype: 'array',
+                    datafields: [
+                        { name: 'countryName' },
+                        { name: 'technologyRating' }
+                    ]
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(source);
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tagcloud/defaultfunctionality/main.js b/tagcloud/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tagcloud/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tagcloud/defaultfunctionality/package.json b/tagcloud/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tagcloud/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tagcloud/fontsize/App.vue b/tagcloud/fontsize/App.vue
new file mode 100644
index 00000000..e7ac8d30
--- /dev/null
+++ b/tagcloud/fontsize/App.vue
@@ -0,0 +1,104 @@
+<template>
+    <div>
+        <JqxTagCloud ref="myTagCloud"
+                     :width="600" :source="dataAdapter" :fontSizeUnit="'px'"
+                     :displayMember="'country'" :valueMember="'rate'"
+                     :minFontSize="12" :maxFontSize="30" :urlBase="'http://localhost/'"
+                     :minColor="'#00AA99'" :maxColor="'#FF0000'">
+        </JqxTagCloud>
+
+        <div class="text">
+            <p>minFontSize:</p>
+            <p>maxFontSize:</p>
+            <p>fontSizeUnit:</p>
+        </div>
+
+        <JqxInput ref="myInput1"
+            :width="200" :height="25" :value="12">
+        </JqxInput>
+
+        <JqxInput ref="myInput2"
+            :width="200" :height="25" :value="20">
+        </JqxInput>
+
+        <JqxInput ref="myInput3"
+            :width="200" :height="25" :value="'px'" :minLength="1" :source="['em','px','%']">
+        </JqxInput>
+
+        <JqxButton :width="100" @click="setFontSizeBtnOnClick()">Set Font</JqxButton>
+    </div>
+</template>
+
+<script>
+    import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+    import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
+
+    export default {
+        components: {
+            JqxTagCloud,
+            JqxButton,
+            JqxInput
+        },
+        beforeCreate: function () {
+            const unemploymentRate =
+                [
+                    { 'country': 'Namibia', 'rate': 37.6 },
+                    { 'country': 'Macedonia, FYR', 'rate': 32.0 },
+                    { 'country': 'Latvia', 'rate': 18.7 },
+                    { 'country': 'Lithuania', 'rate': 17.8 },
+                    { 'country': 'Estonia', 'rate': 16.9 },
+                    { 'country': 'Serbia', 'rate': 16.6 },
+                    { 'country': 'Georgia', 'rate': 16.5 },
+                    { 'country': 'Yemen, Rep.', 'rate': 14.6 },
+                    { 'country': 'Slovak Republic', 'rate': 14.4 },
+                    { 'country': 'Dominican Republic', 'rate': 14.2 },
+                    { 'country': 'Tunisia', 'rate': 14.2 },
+                    { 'country': 'Armenia', 'rate': 28.6 },
+                    { 'country': 'Bosnia and Herzegovina', 'rate': 27.2 },
+                    { 'country': 'Lesotho', 'rate': 25.3 },
+                    { 'country': 'South Africa', 'rate': 24.7 },
+                    { 'country': 'Spain', 'rate': 20.1 },
+                    { 'country': 'Albania', 'rate': 13.8 },
+                    { 'country': 'Ireland', 'rate': 13.6 },
+                    { 'country': 'Jordan', 'rate': 12.9 },
+                    { 'country': 'Greece', 'rate': 12.5 }
+                ];
+
+            const source =
+                {
+                    datatype: 'array',
+                    localdata: unemploymentRate,
+                    datafields: [
+                        { name: 'country' },
+                        { name: 'rate' }
+                    ]
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(source);
+        },
+        methods: {
+            setFontSizeBtnOnClick: function () {
+                this.$refs.myTagCloud.setOptions({
+                    minFontSize: this.$refs.myInput1.val(),
+                    maxFontSize: this.$refs.myInput2.val(),
+                    fontSizeUnit: this.$refs.myInput3.val()
+                });
+            }
+        }
+    }
+</script>
+
+<style>
+    .text p {
+        display: inline-block;
+        width: 210px;
+        text-align: center;
+    }
+    .jqx-input {
+        margin-right: 10px !important;
+    }
+    .jqx-button {
+        margin-top: 10px;
+    }
+</style>
\ No newline at end of file
diff --git a/tagcloud/fontsize/main.js b/tagcloud/fontsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tagcloud/fontsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tagcloud/fontsize/package.json b/tagcloud/fontsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tagcloud/fontsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tagcloud/showhidetags/App.vue b/tagcloud/showhidetags/App.vue
new file mode 100644
index 00000000..6f02c79f
--- /dev/null
+++ b/tagcloud/showhidetags/App.vue
@@ -0,0 +1,82 @@
+<template>
+    <div>
+        <JqxTagCloud ref="myTagCloud"
+            :width="600" :source="dataAdapter"
+            :displayMember="'countryName'" :valueMember="'technologyRating'">
+        </JqxTagCloud>
+
+        <br />
+        <br />
+
+        <JqxButton :width="100" ref="hideItemBtn" @click="hideItemClickBtn()">Hide Item</JqxButton>
+        <JqxButton :width="100" ref="showItemBtn" @click="showItemClickBtn()">Show Item</JqxButton>
+    </div>
+</template>
+
+<script>
+    import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxTagCloud,
+            JqxButton
+        },
+        beforeCreate: function () {
+            const data =
+                [
+                    { countryName: 'Australia', technologyRating: 35 },
+                    { countryName: 'United States', technologyRating: 60 },
+                    { countryName: 'Germany', technologyRating: 55 },
+                    { countryName: 'Brasil', technologyRating: 20 },
+                    { countryName: 'United Kingdom', technologyRating: 50 },
+                    { countryName: 'Japan', technologyRating: 80 }
+                ];
+
+            const source =
+                {
+                    localdata: data,
+                    datatype: 'array',
+                    datafields: [
+                        { name: 'countryName' },
+                        { name: 'technologyRating' }
+                    ]
+                };
+
+            this.dataAdapter = new jqx.dataAdapter(source);
+        },
+        mounted: function () {
+            this.$refs.myTagCloud.hideItem(1);
+        },
+        methods: {
+            hideItemClickBtn: function () {
+                const myTagCloud = this.$refs.myTagCloud;
+                const records = myTagCloud.getTagsList();
+                const hiddenTagsList = myTagCloud.getHiddenTagsList();
+
+                for (let i = 0; i < records.length; i++) {
+                    if (hiddenTagsList.indexOf(records[i].index) == -1) {
+                        myTagCloud.hideItem(records[i].index);
+                        return;
+                    }
+                }
+            },
+            showItemClickBtn: function () {
+                const myTagCloud = this.$refs.myTagCloud;
+                const hiddenTagsList = myTagCloud.getHiddenTagsList();
+
+                if (hiddenTagsList[0] !== undefined) {
+                    const tagId = hiddenTagsList[0];
+                    myTagCloud.showItem(tagId);
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        display: inline-block;
+        margin-right: 10px;
+    }
+</style>
\ No newline at end of file
diff --git a/tagcloud/showhidetags/main.js b/tagcloud/showhidetags/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tagcloud/showhidetags/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tagcloud/showhidetags/package.json b/tagcloud/showhidetags/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tagcloud/showhidetags/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tagcloud/sortingfiltering/App.vue b/tagcloud/sortingfiltering/App.vue
new file mode 100644
index 00000000..3f122af9
--- /dev/null
+++ b/tagcloud/sortingfiltering/App.vue
@@ -0,0 +1,163 @@
+<template>
+    <div>
+        <JqxTagCloud ref="myTagCloud"
+            :width="600" :height="150" :source="dataAdapter"
+            :displayMember="'country'" :valueMember="'rate'"
+            fontSizeUnit="'px'" :minFontSize="12" :maxFontSize="20"
+            minColor="'#00AA99'" :maxColor="'#FF0000'"  urlBase="'http://localhost/'">
+        </JqxTagCloud>
+
+        <div>
+            <div class="text">
+                <p>Sort by:</p>
+                <p> Sort Direction:</p>
+            </div>
+            
+            <JqxDropDownList ref="sortByList"
+                @select="sortByListSelect($event)"
+                :selectedIndex="0" :width="200" :height="25"
+                :source="['none', 'label', 'value']" :autoDropDownHeight="true">
+            </JqxDropDownList>
+  
+            <JqxDropDownList ref="sortDirection"
+                @select="sortDirectionListSelect($event)"
+                :selectedIndex="0" :width="200" :height="25"
+                :source="['ascending', 'descending']" :autoDropDownHeight="true">
+            </JqxDropDownList>
+        </div>
+
+        <div>
+            <div class="text">
+                <p>Minimal Weight(value) Allowed:</p>
+                <p>Max number of tags:</p>
+            </div>
+
+            <JqxDropDownList ref="minValueList"
+                @select="minValueListSelect($event)"
+                :selectedIndex="0" :width="200" :height="25"
+                :source="['0', '5', '15', '25']" :autoDropDownHeight="true">
+            </JqxDropDownList>
+     
+            <JqxDropDownList ref="maxTagsList"
+                @select="maxTagsListSelect($event)"
+                :selectedIndex="0" :width="200" :height="25"
+                :source="['0', '10', '15', '20']" :autoDropDownHeight="true">
+            </JqxDropDownList>
+        </div>
+
+
+        <JqxCheckBox ref="displayTagValueCheckbox" style="margin-top: 5px"
+            @change="displayTagValueCheckboxChange($event)"
+            :width="200" :height="25">
+            Display Tag Value
+        </JqxCheckBox>
+
+        <JqxCheckBox ref="takeTopWeightedItems"
+            @change="takeTopWeightedItemsChange($event)"
+            :width="200" :height="25">
+            takeTopWeightedItems
+        </JqxCheckBox>
+    </div>
+</template>
+
+<script>
+    import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
+    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+
+    export default {
+        components: {
+            JqxTagCloud,
+            JqxDropDownList,
+            JqxCheckBox
+        },
+        beforeCreate: function () {
+            const unemploymentRate =
+                [
+                    { 'country': 'Namibia', 'rate': 37.6 },
+                    { 'country': 'Macedonia, FYR', 'rate': 32.0 },
+                    { 'country': 'Latvia', 'rate': 18.7 },
+                    { 'country': 'Lithuania', 'rate': 17.8 },
+                    { 'country': 'Estonia', 'rate': 16.9 },
+                    { 'country': 'Serbia', 'rate': 16.6 },
+                    { 'country': 'Georgia', 'rate': 16.5 },
+                    { 'country': 'Yemen', 'rate': 14.6 },
+                    { 'country': 'Slovak Republic', 'rate': 14.4 },
+                    { 'country': 'Dominican Republic', 'rate': 14.2 },
+                    { 'country': 'Tunisia', 'rate': 14.2 },
+                    { 'country': 'Armenia', 'rate': 28.6 },
+                    { 'country': 'Bosnia and Herzegovina', 'rate': 27.2 },
+                    { 'country': 'Lesotho', 'rate': 25.3 },
+                    { 'country': 'South Africa', 'rate': 24.7 },
+                    { 'country': 'Spain', 'rate': 20.1 },
+                    { 'country': 'Albania', 'rate': 13.8 },
+                    { 'country': 'Ireland', 'rate': 13.6 },
+                    { 'country': 'Jordan', 'rate': 12.9 },
+                    { 'country': 'Greece', 'rate': 12.5 }
+                ];
+
+            const source =
+                {
+                    datatype: 'array',
+                    localdata: unemploymentRate,
+                    datafields: [
+                        { name: 'country' },
+                        { name: 'rate' }
+                    ]
+                };
+                
+            this.dataAdapter = new jqx.dataAdapter(source);
+        },
+        methods: {
+            sortByListSelect: function (event) {
+                const item = this.$refs.sortByList.getItem(event.args.index);
+                if (item != null) {
+                    this.$refs.myTagCloud.sortBy = item.label;
+                }
+            },
+            sortDirectionListSelect: function (event) {
+                const item = this.$refs.sortDirection.getItem(event.args.index);
+                if (item != null) {
+                    this.$refs.myTagCloud.sortOrder = item.label;
+                }
+            },
+            minValueListSelect: function (event) {
+                const item = this.$refs.minValueList.getItem(event.args.index);
+                if (item != null) {
+                    this.$refs.myTagCloud.minValueToDisplay = item.label;
+                }
+            },
+            maxTagsListSelect: function (event) {
+                const item = this.$refs.maxTagsList.getItem(event.args.index);
+                if (item != null) {
+                    if (item.label == 0) {
+                        this.$refs.myTagCloud.displayLimit = null;
+                    } else {
+                        this.$refs.myTagCloud.displayLimit = item.label;
+                    }
+                }
+            },
+            displayTagValueCheckboxChange: function (event) {
+                const checked = event.args.checked;
+                this.$refs.myTagCloud.displayValue = checked;
+            },
+            takeTopWeightedItemsChange: function (event) {
+                const checked = event.args.checked;
+                this.$refs.myTagCloud.takeTopWeightedItems = checked;
+            }
+        }
+    }
+</script>
+
+<style>
+    .text p {
+        width: 210px;
+        display: inline-block;
+        text-align: center;
+        margin-bottom: 3px;
+    }
+    .jqx-widget {
+        display: inline-block;
+        margin-right: 10px;
+    }
+</style>
\ No newline at end of file
diff --git a/tagcloud/sortingfiltering/main.js b/tagcloud/sortingfiltering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tagcloud/sortingfiltering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tagcloud/sortingfiltering/package.json b/tagcloud/sortingfiltering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tagcloud/sortingfiltering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/textarea/bindingtojsondata/App.vue b/textarea/bindingtojsondata/App.vue
new file mode 100644
index 00000000..6c8bc8fd
--- /dev/null
+++ b/textarea/bindingtojsondata/App.vue
@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <JqxTextArea ref="myTextArea" @change="change($event)"
+            :width="300" :height="100" :source="dataAdapter" :placeHolder="'Contact Name:'"
+            :displayMember="'ContactName'" :valueMember="'CompanyName'" 
+        />
+
+        <label style="font-family: Verdana; font-size: 10px;">
+            ex: Ana
+        </label>
+
+        <div style="font-family: Verdana; font-size: 13px;" ref="selectionLog"></div>
+    </div>
+</template>
+
+<script>
+    import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
+
+    export default {
+        components: {
+            JqxTextArea
+        },
+        data: function () {
+            return {  
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'CompanyName' },
+                    { name: 'ContactName' }
+                ],
+                url: '../sampledata/customers.txt'
+            }
+        },
+        methods: {
+            change: function (event) {
+                const item = event.args.owner.selectedItem;
+                this.$refs.selectionLog.innerHTML = '<div>Value: ' + item.value + '</div><div>Label: ' + item.label + '</div>';    
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/textarea/bindingtojsondata/main.js b/textarea/bindingtojsondata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/textarea/bindingtojsondata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/textarea/bindingtojsondata/package.json b/textarea/bindingtojsondata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/textarea/bindingtojsondata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/textarea/defaultfunctionality/App.vue b/textarea/defaultfunctionality/App.vue
new file mode 100644
index 00000000..528fdd08
--- /dev/null
+++ b/textarea/defaultfunctionality/App.vue
@@ -0,0 +1,32 @@
+<template>
+    <JqxTextArea 
+        :width="300" :height="100" :source="generateSource" 
+        :placeHolder="'Enter a Sentence'" :minLength="1" 
+    />
+</template>
+
+<script>
+    import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
+
+    export default {
+        components: {
+            JqxTextArea
+        },
+        methods: {
+            generateSource: function () {
+                const quotes = [];
+
+                quotes.push('Life is a dream for the wise, a game for the fool, a comedy for the rich, a tragedy for the poor.');
+                quotes.push('Yesterday is not ours to recover, but tomorrow is ours to win or lose.');
+                quotes.push('It does not matter how slowly you go as long as you do not stop.');
+                quotes.push('Success depends upon previous preparation, and without such preparation there is sure to be failure.');
+                quotes.push('Better a diamond with a flaw than a pebble without.');
+                quotes.push('To succeed in life, you need two things: ignorance and confidence.');
+                quotes.push('A successful man is one who can lay a firm foundation with the bricks others have thrown at him.');
+                quotes.push('Sleep is the best meditation.');
+
+                return quotes;
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/textarea/defaultfunctionality/main.js b/textarea/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/textarea/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/textarea/defaultfunctionality/package.json b/textarea/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/textarea/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/textarea/fluidsize/App.vue b/textarea/fluidsize/App.vue
new file mode 100644
index 00000000..ba9f2453
--- /dev/null
+++ b/textarea/fluidsize/App.vue
@@ -0,0 +1,31 @@
+<template>
+    <JqxTextArea
+        :width="'30%'" :height="100" :source="dataAdapter" :placeHolder="'Contact Name:'"
+        :displayMember="'ContactName'" :valueMember="'CompanyName'" 
+    />
+</template>
+
+<script>
+    import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
+
+    export default {
+        components: {
+            JqxTextArea
+        },
+        data: function () {
+            return {  
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'CompanyName' },
+                    { name: 'ContactName' }
+                ],
+                url: '../sampledata/customers.txt'
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/textarea/fluidsize/main.js b/textarea/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/textarea/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/textarea/fluidsize/package.json b/textarea/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/textarea/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/textarea/multiplevalues/App.vue b/textarea/multiplevalues/App.vue
new file mode 100644
index 00000000..87c1f408
--- /dev/null
+++ b/textarea/multiplevalues/App.vue
@@ -0,0 +1,41 @@
+<template>
+    <JqxTextArea ref="myTextArea"
+        :width="300" :height="100" :source="source" 
+        :placeHolder="'Enter a Country'" :renderer="renderer" 
+    />
+</template>
+
+<script>
+    import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
+
+    export default {
+        components: {
+            JqxTextArea
+        },
+        data: function () {
+            return {
+                countries: ['Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Antarctica', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', 'Botswana', 'Brazil', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burma', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Central African Republic', 'Chad', 'Chile', 'China', 'Colombia', 'Comoros', 'Congo, Democratic Republic', 'Congo, Republic of the', 'Costa Rica', 'Cote d\'Ivoire', 'Croatia', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic', 'East Timor', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Fiji', 'Finland', 'France', 'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Greece', 'Greenland', 'Grenada', 'Guatemala', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jordan', 'Kazakhstan', 'Kenya', 'Kiribati', 'Korea, North', 'Korea, South', 'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macedonia', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Mauritania', 'Mauritius', 'Mexico', 'Micronesia', 'Moldova', 'Mongolia', 'Morocco', 'Monaco', 'Mozambique', 'Namibia', 'Nauru', 'Nepal', 'Netherlands', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Norway', 'Oman', 'Pakistan', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Poland', 'Portugal', 'Qatar', 'Romania', 'Russia', 'Rwanda', 'Samoa', 'San Marino', ' Sao Tome', 'Saudi Arabia', 'Senegal', 'Serbia and Montenegro', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'Spain', 'Sri Lanka', 'Sudan', 'Suriname', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', 'Togo', 'Tonga', 'Trinidad and Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'Uruguay', 'Uzbekistan', 'Vanuatu', 'Venezuela', 'Vietnam', 'Yemen', 'Zambia', 'Zimbabwe']
+            }
+        },
+        methods: {
+            source: function (query, response) {
+                const item = query.split(/,\s*/).pop();
+                // update the search query.
+                this.$refs.myTextArea.query = item;
+                response(this.countries);
+            },
+            renderer: function (itemValue, inputValue) {
+                const terms = inputValue.split(/,\s*/);
+
+                // remove the current input
+                terms.pop();
+                // add the selected item
+                terms.push(itemValue);
+                // add placeholder to get the comma-and-space at the end
+                terms.push('');
+
+                return terms.join(', ');
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/textarea/multiplevalues/main.js b/textarea/multiplevalues/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/textarea/multiplevalues/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/textarea/multiplevalues/package.json b/textarea/multiplevalues/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/textarea/multiplevalues/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/textarea/righttoleftlayout/App.vue b/textarea/righttoleftlayout/App.vue
new file mode 100644
index 00000000..2ac13fec
--- /dev/null
+++ b/textarea/righttoleftlayout/App.vue
@@ -0,0 +1,23 @@
+<template>
+    <JqxTextArea ref="myTextArea"
+        :width="300" :height="100" :rtl="true" 
+    />
+</template>
+
+<script>
+    import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
+
+    export default {
+        components: {
+            JqxTextArea
+        },
+        data: function () {
+            return {  
+                text: 'jQWidgets is a comprehensive and innovative widget library built on top of the jQuery JavaScript Library. It empowers developers to deliver professional, cross-browser compatible web applications, while significantly minimizing their development time. jQWidgets contains more than 60 UI widgets and is one of the fastest growing JavaScript UI frameworks on the Web.'
+            }
+        },
+        mounted: function () {
+            this.$refs.myTextArea.val(this.text);
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/textarea/righttoleftlayout/main.js b/textarea/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/textarea/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/textarea/righttoleftlayout/package.json b/textarea/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/textarea/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/textarea/twowaydatabinding/App.vue b/textarea/twowaydatabinding/App.vue
new file mode 100644
index 00000000..6bc870e8
--- /dev/null
+++ b/textarea/twowaydatabinding/App.vue
@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <div style="white-space: pre-line;">The value is: {{ value }}</div><br />
+
+        <JqxTextArea v-model="value" 
+            :width="200" :height="100" :placeHolder="'Enter Something'" 
+        />
+    </div>
+</template>
+
+<script>
+    import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
+
+    export default {
+        components: {
+            JqxTextArea
+        },
+        data: function () {
+            return {
+                value: ''
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/textarea/twowaydatabinding/main.js b/textarea/twowaydatabinding/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/textarea/twowaydatabinding/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/textarea/twowaydatabinding/package.json b/textarea/twowaydatabinding/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/textarea/twowaydatabinding/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/togglebutton/defaultfunctionality/App.vue b/togglebutton/defaultfunctionality/App.vue
new file mode 100644
index 00000000..27599fc1
--- /dev/null
+++ b/togglebutton/defaultfunctionality/App.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="container">
+        <JqxToggleButton ref="myToggleButton"
+            @click="click()"
+            :width="200" :toggled="true">
+            Toggled On
+        </JqxToggleButton>
+
+        <JqxToggleButton 
+            :width="200" :disabled="true">
+            Disabled
+        </JqxToggleButton>
+    </div>
+</template>
+
+<script>
+    import JqxToggleButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtogglebutton.vue';
+
+    export default {
+        components: {
+            JqxToggleButton
+        },
+        methods: {
+            click: function () {
+                const button = this.$refs.myToggleButton;
+
+                button.toggled ? button.val('Toggled On') : button.val('Toggled Off');       
+            }
+        }
+    }
+</script>
+
+<style>
+    .container {
+        margin-left: 25px;
+    }
+    .jqx-button {
+        display: inline-block;
+        user-select: none;
+    }
+    .jqx-button:last-of-type {
+        margin-left: 20px;
+    }
+</style>
\ No newline at end of file
diff --git a/togglebutton/defaultfunctionality/main.js b/togglebutton/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/togglebutton/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/togglebutton/defaultfunctionality/package.json b/togglebutton/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/togglebutton/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/toolbar/buttongroupsintoolbar/App.vue b/toolbar/buttongroupsintoolbar/App.vue
new file mode 100644
index 00000000..4cbd801b
--- /dev/null
+++ b/toolbar/buttongroupsintoolbar/App.vue
@@ -0,0 +1,85 @@
+<template>
+    <JqxToolbar 
+        :width="getWidth" :height="35"
+        :tools="tools" :initTools="initTools">
+    </JqxToolbar>
+</template>
+
+<script>
+    import JqxToolbar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtoolbar.vue';
+
+    export default {
+        components: {
+            JqxToolbar
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('toolbar'),
+                tools: 'button button button | button button button | button button | button'
+            }
+        },
+        methods: {
+            initTools: function (type, index, tool, menuToolIninitialization) {
+                const icon = document.createElement('div');
+                if (type == 'button') {
+                    icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
+                }
+                switch (index) {
+                    case 0:
+                        icon.className += 'jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-' + this.theme;
+                        icon.setAttribute('title', 'Bold');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 1:
+                        icon.className += 'jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-' + this.theme;
+                        icon.setAttribute('title', 'Italic');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 2:
+                        icon.className += 'jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-' + this.theme;
+                        icon.setAttribute('title', 'Underline');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 3:
+                        icon.className += 'jqx-editor-toolbar-icon-justifyleft jqx-editor-toolbar-icon-justifyleft-' + this.theme;
+                        icon.setAttribute('title', 'Align Text Left');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 4:
+                        icon.className += 'jqx-editor-toolbar-icon-justifycenter jqx-editor-toolbar-icon-justifycenter-' + this.theme;
+                        icon.setAttribute('title', 'Center');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 5:
+                        icon.className += 'jqx-editor-toolbar-icon-justifyright jqx-editor-toolbar-icon-justifyright-' + this.theme;
+                        icon.setAttribute('title', 'Align Text Right');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 6:
+                        icon.className += 'jqx-editor-toolbar-icon-outdent jqx-editor-toolbar-icon-outdent-' + this.theme;
+                        icon.setAttribute('title', 'Decrease Indent');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 7:
+                        icon.className += 'jqx-editor-toolbar-icon-indent jqx-editor-toolbar-icon-indent-' + this.theme;
+                        icon.setAttribute('title', 'Increase Indent');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 8:
+                        icon.className += 'jqx-editor-toolbar-icon-insertimage jqx-editor-toolbar-icon-insertimage-' + this.theme;
+                        icon.setAttribute('title', 'Insert Image');
+                        tool[0].appendChild(icon);
+                        break;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .buttonIcon {
+        margin: -5px 0 0 -3px;
+        width: 16px;
+        height: 17px;
+    }
+</style>
\ No newline at end of file
diff --git a/toolbar/buttongroupsintoolbar/main.js b/toolbar/buttongroupsintoolbar/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/toolbar/buttongroupsintoolbar/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/toolbar/buttongroupsintoolbar/package.json b/toolbar/buttongroupsintoolbar/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/toolbar/buttongroupsintoolbar/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/toolbar/cascadingcomboboxesintoolbar/App.vue b/toolbar/cascadingcomboboxesintoolbar/App.vue
new file mode 100644
index 00000000..c14457a4
--- /dev/null
+++ b/toolbar/cascadingcomboboxesintoolbar/App.vue
@@ -0,0 +1,82 @@
+<template>
+    <JqxToolbar 
+        :width="getWidth" :height="35"
+        :tools="tools" :initTools="initTools">
+    </JqxToolbar>
+</template>
+
+<script>
+    import JqxToolbar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtoolbar.vue';
+
+    export default {
+        components: {
+            JqxToolbar
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('toolbar'),
+                tools: 'combobox | combobox',
+                countries: ['Japan', 'UK', 'USA'],
+                JapaneseCities: ['Kobe', 'Kyoto', 'Tokyo'],
+                UKCities: ['Brighton', 'Glasgow', 'London'],
+                USACities: ['Boston', 'Los Angeles', 'Minneapolis'],
+                myComboBox1: null,
+                myComboBox1Min: null,
+                myComboBox2: null,
+                myComboBox2Min: null
+            }
+        },
+        mounted: function () {
+            console.log(this.myComboBox1)
+            this.myComboBox1.on('select', (event) => {
+                if (event.args) {
+                    const country = event.args.item.label;
+                    let source;
+
+                    if (country === 'Japan') {
+                        source = this.JapaneseCities;
+                    } else if (country === 'UK') {
+                        source = this.UKCities;
+                    } else {
+                        source = this.USACities;
+                    }
+
+                    this.myComboBox2.jqxComboBox({ source: source });
+                    this.myComboBox2Min.jqxComboBox({ source: source });
+                }
+            });
+        },
+        methods: {
+            initTools: function (type, index, tool, menuToolIninitialization) {
+                switch (index) {
+                    case 0:
+                        tool.jqxComboBox({
+                            width: 150,
+                            source: this.countries,
+                            selectedIndex: 0,
+                            promptText: 'Select a country...'
+                        });
+                        if (menuToolIninitialization === false) {
+                            this.myComboBox1 = tool;
+                        } else {
+                            this.myComboBox1Min = tool;
+                        }
+                        break;
+                    case 1:
+                        tool.jqxComboBox({
+                            width: 150,
+                            source: this.JapaneseCities,
+                            selectedIndex: 0,
+                            promptText: 'Select a city...'
+                        });
+                        if (menuToolIninitialization === false) {
+                            this.myComboBox2 = tool;
+                        } else {
+                            this.myComboBox2Min = tool;
+                        }
+                        break;
+                }
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/toolbar/cascadingcomboboxesintoolbar/main.js b/toolbar/cascadingcomboboxesintoolbar/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/toolbar/cascadingcomboboxesintoolbar/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/toolbar/cascadingcomboboxesintoolbar/package.json b/toolbar/cascadingcomboboxesintoolbar/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/toolbar/cascadingcomboboxesintoolbar/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/toolbar/defaultfunctionality/App.vue b/toolbar/defaultfunctionality/App.vue
new file mode 100644
index 00000000..4bb2462a
--- /dev/null
+++ b/toolbar/defaultfunctionality/App.vue
@@ -0,0 +1,85 @@
+<template>
+    <JqxToolbar 
+        :width="getWidth" :height="35"
+        :tools="tools" :initTools="initTools">
+    </JqxToolbar>
+</template>
+
+<script>
+    import JqxToolbar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtoolbar.vue';
+
+    export default {
+        components: {
+            JqxToolbar
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('toolbar'),
+                tools: 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'
+            }
+        },
+        methods: {
+            initTools: function (type, index, tool, menuToolIninitialization) {
+                const icon = document.createElement('div');
+                if (type == 'toggleButton') {
+                    icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
+                }
+                switch (index) {
+                    case 0:
+                        icon.className += 'jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic';
+                        icon.setAttribute('title', 'Bold');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 1:
+                        icon.className += 'jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic';
+                        icon.setAttribute('title', 'Italic');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 2:
+                        icon.className += 'jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic';
+                        icon.setAttribute('title', 'Underline');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 3:
+                        tool.jqxToggleButton({ width: 80, toggled: true });
+                        tool.text('Enabled');
+                        tool.on('click', () => {
+                            const toggled = tool.jqxToggleButton('toggled');
+                            if (toggled) {
+                                tool.text('Enabled');
+                            } else {
+                                tool.text('Disabled');
+                            }
+                        });
+                        break;
+                    case 4:
+                        tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
+                        break;
+                    case 5:
+                        tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
+                        break;
+                    case 6:
+                        tool.jqxInput({ width: 200, placeHolder: 'Type here to search...' });
+                        break;
+                    case 7:
+                        const button = document.createElement('div');
+                        const img = document.createElement('img');
+                        img.src = '../../../images/administrator.png'
+                        img.title = 'Custom tool';
+                        button.appendChild(img);
+                        tool[0].appendChild(button);
+                        tool.jqxButton({ height: 15 });
+                        break;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .buttonIcon {
+        margin: -5px 0 0 -3px;
+        width: 16px;
+        height: 17px;
+    }
+</style>
\ No newline at end of file
diff --git a/toolbar/defaultfunctionality/main.js b/toolbar/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/toolbar/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/toolbar/defaultfunctionality/package.json b/toolbar/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/toolbar/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/toolbar/fluidsize/App.vue b/toolbar/fluidsize/App.vue
new file mode 100644
index 00000000..018ecc5d
--- /dev/null
+++ b/toolbar/fluidsize/App.vue
@@ -0,0 +1,80 @@
+<template>
+    <JqxToolbar
+        :width="'50%'" :height="35"
+        :tools="tools" :initTools="initTools">
+    </JqxToolbar>
+</template>
+
+<script>
+    import JqxToolbar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtoolbar.vue';
+    import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcolorpicker.vue';
+
+    export default {
+        components: {
+            JqxToolbar,
+            JqxColorPicker
+        },
+        data: function () {
+            return {
+                tools: 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input'
+            }
+        },
+        methods: {
+            initTools: function (type, index, tool, menuToolIninitialization) {
+                let icon = document.createElement('div');
+                if (type == 'toggleButton') {
+                    icon.className = 'jqx-editor-toolbar-icon buttonIcon ';
+                }
+                switch (index) {
+                    case 0:
+                        icon.className += 'jqx-editor-toolbar-icon-bold';
+                        icon.setAttribute('title', 'Bold');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 1:
+                        icon.className += 'jqx-editor-toolbar-icon-italic';
+                        icon.setAttribute('title', 'Italic');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 2:
+                        icon.className += 'jqx-editor-toolbar-icon-underline';
+                        icon.setAttribute('title', 'Underline');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 3:
+                        tool.jqxToggleButton({ width: 80, toggled: true });
+                        tool[0].innerText = 'Enabled';
+                        tool.on('click', () => {
+                            let toggled = tool.jqxToggleButton('toggled');
+                            if (toggled) {
+                                tool.text('Enabled');
+                            } else {
+                                tool.text('Disabled');
+                            }
+                        });
+                        break;
+                    case 4:
+                        tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
+                        break;
+                    case 5:
+                        tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
+                        break;
+                    case 6:
+                        tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
+                        break;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .buttonIcon {
+        margin: -5px 0 0 -3px;
+        width: 16px;
+        height: 17px;
+    }
+    .jqx-listbox {
+        z-index: 999999 !important;
+    }
+</style>
\ No newline at end of file
diff --git a/toolbar/fluidsize/main.js b/toolbar/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/toolbar/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/toolbar/fluidsize/package.json b/toolbar/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/toolbar/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/toolbar/nonminimizabletools/App.vue b/toolbar/nonminimizabletools/App.vue
new file mode 100644
index 00000000..8aa6274e
--- /dev/null
+++ b/toolbar/nonminimizabletools/App.vue
@@ -0,0 +1,113 @@
+<template>
+    <div style="font-size: small; font-family: Verdana">
+        <div>
+            Resize the window to minimize or restore tools. The <span style="color: #CC0000">combobox</span>
+            is non-minimizable and the <span style="color: #EE8D4D">input</span> does not appear
+            in the pop-up menu when minimized.
+        </div>
+
+        <div>Resize the window to minimize or restore tools.</div>
+        <JqxWindow :width="700" :height="250" :minWidth="250" :position="{ x: 5, y: 90 }">
+            <div>
+                Resizable jqxToolBar
+            </div>
+            <div style="overflow: hidden">
+                <JqxToolbar 
+                    :width="'100%'" :height="35" :minimizeWidth="200"
+                    :tools="tools" :initTools="initTools">
+                </JqxToolbar>
+            </div>
+        </JqxWindow>
+    </div>
+</template>
+
+<script>
+    import JqxToolbar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtoolbar.vue';
+    import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
+
+    export default {
+        components: {
+            JqxToolbar,
+            JqxWindow
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('toolbar'),
+                tools: 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input'
+            }
+        },
+        methods: {
+            initTools: function (type, index, tool, menuToolIninitialization) {
+                const icon = document.createElement('div');
+                if (type == 'toggleButton') {
+                    icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
+                }
+                switch (index) {
+                    case 0:
+                        icon.className += 'jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-' + this.theme;
+                        icon.setAttribute('title', 'Bold');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 1:
+                        icon.className += 'jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-' + this.theme;
+                        icon.setAttribute('title', 'Italic');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 2:
+                        icon.className += 'jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-' + this.theme;
+                        icon.setAttribute('title', 'Underline');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 3:
+                        tool.jqxToggleButton({ width: 80, toggled: true });
+                        tool[0].innerText = 'Enabled';
+                        tool.on('click', () => {
+                            let toggled = tool.jqxToggleButton('toggled');
+                            if (toggled) {
+                                tool.text('Enabled');
+                            } else {
+                                tool.text('Disabled');
+                            }
+                        });
+                        break;
+                    case 4:
+                        let dropDownListWidth;
+                        if (menuToolIninitialization) {
+                            dropDownListWidth = '95%';
+                        } else {
+                            dropDownListWidth = 130;
+                        }
+                        tool.jqxDropDownList({
+                            width: dropDownListWidth, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1
+                        });
+                        break;
+                    case 5:
+                        let comboBoxWidth;
+                        if (menuToolIninitialization) {
+                            comboBoxWidth = '95%';
+                        } else {
+                            comboBoxWidth = 50;
+                        }
+                        tool.jqxComboBox({ width: comboBoxWidth, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
+                        tool[0].style.borderColor = '#CC0000';
+                        return { minimizable: false };
+                    case 6:
+                        tool.jqxInput({ width: 185, placeHolder: 'Type here to search...' });
+                        tool[0].style.borderColor = '#EE8D4D';
+                        return { menuTool: false };
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .buttonIcon {
+        margin: -5px 0 0 -3px;
+        width: 16px;
+        height: 17px;
+    }
+    .jqx-listbox {
+        z-index: 999999 !important;
+    }
+</style>
\ No newline at end of file
diff --git a/toolbar/nonminimizabletools/main.js b/toolbar/nonminimizabletools/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/toolbar/nonminimizabletools/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/toolbar/nonminimizabletools/package.json b/toolbar/nonminimizabletools/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/toolbar/nonminimizabletools/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/toolbar/resizabletoolbar/App.vue b/toolbar/resizabletoolbar/App.vue
new file mode 100644
index 00000000..200b3be6
--- /dev/null
+++ b/toolbar/resizabletoolbar/App.vue
@@ -0,0 +1,106 @@
+<template>
+    <div style="font-size: small; font-family: Verdana">
+        <div>Resize the window to minimize or restore tools.</div>
+        <JqxWindow :width="700" :height="250" :minWidth="250" :position="{ x: 5, y: 90 }">
+            <div>
+                Resizable jqxToolBar
+            </div>
+            <div style="overflow: hidden">
+                <JqxToolbar 
+                    :width="'100%'" :height="35" :minimizeWidth="200"
+                    :tools="tools" :initTools="initTools">
+                </JqxToolbar>
+            </div>
+        </JqxWindow>
+    </div>
+</template>
+
+<script>
+    import JqxToolbar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtoolbar.vue';
+    import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
+
+    export default {
+        components: {
+            JqxToolbar,
+            JqxWindow
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('toolbar'),
+                tools: 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input'
+            }
+        },
+        methods: {
+            initTools: function (type, index, tool, menuToolIninitialization) {
+                const icon = document.createElement('div');
+                if (type == 'toggleButton') {
+                    icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
+                }
+                switch (index) {
+                    case 0:
+                        icon.className += 'jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-' + this.theme;
+                        icon.setAttribute('title', 'Bold');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 1:
+                        icon.className += 'jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-' + this.theme;
+                        icon.setAttribute('title', 'Italic');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 2:
+                        icon.className += 'jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-' + this.theme;
+                        icon.setAttribute('title', 'Underline');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 3:
+                        tool.jqxToggleButton({ width: 80, toggled: true });
+                        tool[0].innerText = 'Enabled';
+                        tool.on('click', () => {
+                            let toggled = tool.jqxToggleButton('toggled');
+                            if (toggled) {
+                                tool.text('Enabled');
+                            } else {
+                                tool.text('Disabled');
+                            }
+                        });
+                        break;
+                    case 4:
+                        let dropDownListWidth;
+                        if (menuToolIninitialization) {
+                            dropDownListWidth = '95%';
+                        } else {
+                            dropDownListWidth = 130;
+                        }
+                        tool.jqxDropDownList({
+                            width: dropDownListWidth, selectedIndex: 1,
+                            source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"]
+                        });
+                        break;
+                    case 5:
+                        let comboBoxWidth;
+                        if (menuToolIninitialization) {
+                            comboBoxWidth = '95%';
+                        } else {
+                            comboBoxWidth = 50;
+                        }
+                        tool.jqxComboBox({ width: comboBoxWidth, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
+                        break;
+                    case 6:
+                        tool.jqxInput({ width: 185, placeHolder: 'Type here to search...' });
+                        break;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .buttonIcon {
+        margin: -5px 0 0 -3px;
+        width: 16px;
+        height: 17px;
+    }
+    .jqx-listbox {
+        z-index: 999999 !important;
+    }
+</style>
\ No newline at end of file
diff --git a/toolbar/resizabletoolbar/main.js b/toolbar/resizabletoolbar/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/toolbar/resizabletoolbar/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/toolbar/resizabletoolbar/package.json b/toolbar/resizabletoolbar/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/toolbar/resizabletoolbar/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/toolbar/righttoleftlayout/App.vue b/toolbar/righttoleftlayout/App.vue
new file mode 100644
index 00000000..1343643d
--- /dev/null
+++ b/toolbar/righttoleftlayout/App.vue
@@ -0,0 +1,81 @@
+<template>
+    <JqxToolbar
+        :width="getWidth" :height="35" :rtl="true"
+        :tools="tools" :initTools="initTools">
+    </JqxToolbar>
+</template>
+
+<script>
+    import JqxToolbar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtoolbar.vue';
+    import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcolorpicker.vue';
+
+    export default {
+        components: {
+            JqxToolbar,
+            JqxColorPicker
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('toolbar'),
+                tools: 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input'
+            }
+        },
+        methods: {
+            initTools: function (type, index, tool, menuToolIninitialization) {
+                let icon = document.createElement('div');
+                if (type == 'toggleButton') {
+                    icon.className = 'jqx-editor-toolbar-icon buttonIcon ';
+                }
+                switch (index) {
+                    case 0:
+                        icon.className += 'jqx-editor-toolbar-icon-bold';
+                        icon.setAttribute('title', 'Bold');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 1:
+                        icon.className += 'jqx-editor-toolbar-icon-italic';
+                        icon.setAttribute('title', 'Italic');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 2:
+                        icon.className += 'jqx-editor-toolbar-icon-underline';
+                        icon.setAttribute('title', 'Underline');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 3:
+                        tool.jqxToggleButton({ width: 80, toggled: true });
+                        tool[0].innerText = 'Enabled';
+                        tool.on('click', () => {
+                            let toggled = tool.jqxToggleButton('toggled');
+                            if (toggled) {
+                                tool.text('Enabled');
+                            } else {
+                                tool.text('Disabled');
+                            }
+                        });
+                        break;
+                    case 4:
+                        tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
+                        break;
+                    case 5:
+                        tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
+                        break;
+                    case 6:
+                        tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
+                        break;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .buttonIcon {
+        margin: -5px 0 0 -3px;
+        width: 16px;
+        height: 17px;
+    }
+    .jqx-listbox {
+        z-index: 999999 !important;
+    }
+</style>
\ No newline at end of file
diff --git a/toolbar/righttoleftlayout/main.js b/toolbar/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/toolbar/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/toolbar/righttoleftlayout/package.json b/toolbar/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/toolbar/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/toolbar/settings/App.vue b/toolbar/settings/App.vue
new file mode 100644
index 00000000..43d1f163
--- /dev/null
+++ b/toolbar/settings/App.vue
@@ -0,0 +1,161 @@
+<template>
+    <div>
+        <JqxToolbar ref="myToolbar"
+            :width="getWidth" :height="35"
+            :tools="tools" :initTools="initTools">
+        </JqxToolbar>
+
+        <div style="margin-top: 50px"></div>
+
+        <JqxButton @click="addToggleBtnOnClick()" :width="150">Add a Toggle Button</JqxButton>
+        <JqxButton @click="addCustomToolBtnOnClick()" :width="150">Add a Custom Tool</JqxButton>
+        
+        <div style="margin-top: 10px; margin-bottom: 2px">
+            Insert position:
+        </div>
+
+        <JqxDropDownList ref="myDropDownList"
+            :width="150" :height="22" :source="['first','last']"
+            :selectedIndex="1" :autoDropDownHeight="true">
+        </JqxDropDownList>
+
+        <div style="margin-top: 50px"></div>
+
+        <JqxButton @click="disableToolBtnOnClick()" :width="150">Disable Tool</JqxButton>
+        <JqxButton @click="enableToolBtnOnClick()" :width="150">Enable Tool</JqxButton>
+        <JqxButton @click="destroyToolBtnOnClick()" :width="150">Destroy Tool</JqxButton>  
+
+        <div style="margin-top: 10px; margin-bottom: 2px">
+            Tool index:
+        </div>
+
+        <JqxNumberInput ref="myNumberInput"
+            :width="50" :height="25" :decimal="0"
+            :decimalDigits="0" :inputMode="'simple'">
+        </JqxNumberInput>
+    </div>
+</template>
+
+<script>
+    import JqxToolbar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtoolbar.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+    import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
+    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
+
+    export default {
+        components: {
+            JqxToolbar,
+            JqxButton,
+            JqxNumberInput,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('toolbar'),
+                tools: 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input',
+                countries: ['Argentina', 'Austria', 'Canada', 'China', 'France', 'Germany', 'Japan', 'Mexico', 'Spain', 'Sweden', 'Switzerland', 'UK', 'USA']
+            }
+        },
+        methods: {
+            initTools: function (type, index, tool, menuToolIninitialization) {
+                const icon = document.createElement('div');
+                if (type == 'toggleButton') {
+                    icon.className = 'jqx-editor-toolbar-icon buttonIcon ';
+                }
+                switch (index) {
+                    case 0:
+                        icon.className += 'jqx-editor-toolbar-icon-bold';
+                        icon.setAttribute('title', 'Bold');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 1:
+                        icon.className += 'jqx-editor-toolbar-icon-italic';
+                        icon.setAttribute('title', 'Italic');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 2:
+                        icon.className += 'jqx-editor-toolbar-icon-underline';
+                        icon.setAttribute('title', 'Underline');
+                        tool[0].appendChild(icon);
+                        break;
+                    case 3:
+                        tool.jqxToggleButton({ width: 80, toggled: true });
+                        tool[0].innerText = 'Enabled';
+                        tool.on('click', () => {
+                            let toggled = tool.jqxToggleButton('toggled');
+                            if (toggled) {
+                                tool.text('Enabled');
+                            } else {
+                                tool.text('Disabled');
+                            }
+                        });
+                        break;
+                    case 4:
+                        tool.jqxDropDownList({
+                            width: 130, source: ['<span style="font-family: Courier New;">Courier New</span>', '<span style="font-family: Times New Roman;">Times New Roman</span>', '<span style="font-family: Verdana;">Verdana</span>'], selectedIndex: 1
+                        });
+                        break;
+                    case 5:
+                        tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
+                        break;
+                    case 6:
+                        tool.jqxInput({ width: 200, placeHolder: 'Type here to search...' });
+                        break;
+                }
+            },
+            addToggleBtnOnClick: function () {
+                const position = this.$refs.myDropDownList.val();
+                this.$refs.myToolbar.addTool('toggleButton', position, false, (type, tool, menuToolIninitialization) => {              
+                    const width = menuToolIninitialization ? '95%' : 50;
+                    tool.jqxToggleButton({ width: width, toggled: false });
+                    tool.text('Off');
+                    tool.on('click', () => {
+                        const toggled = tool.jqxToggleButton('toggled');
+                        toggled ? tool.text('On') : tool.text('Off');
+                    });
+                });
+            },
+            addCustomToolBtnOnClick: function () {
+                const position = this.$refs.myDropDownList.val();
+                const country = this.countries[Math.floor(Math.random() * this.countries.length)];
+                this.$refs.myToolbar.addTool('custom', position, false, (type, tool, menuToolIninitialization) => {
+                    tool.append('<img src="../../../images/' + country + '.png" style="float: left; clear: both;" />');
+                    if (menuToolIninitialization) {
+                        tool.find('img').css('margin-right', '10px');
+                        tool.find('img').css('margin-top', '4px');
+                        tool.append('<div style="float: left; height: 100%; vertical-align: middle;">' + country + '</div>');
+                    } else {
+                        tool.attr('title', 'Flag of ' + country);
+                    }
+                });
+            },
+            disableToolBtnOnClick: function () {
+                const toolIndex = this.$refs.myNumberInput.val();
+                this.$refs.myToolbar.disableTool(toolIndex, true);
+            },
+            enableToolBtnOnClick: function () {
+                const toolIndex = this.$refs.myNumberInput.val();
+                this.$refs.myToolbar.disableTool(toolIndex, false);
+            },
+            destroyToolBtnOnClick: function () {
+                const toolIndex = this.$refs.myNumberInput.val();
+                this.$refs.myToolbar.destroyTool(toolIndex);
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button:not(.jqx-toolbar-tool) {
+        display: inline-block;
+        margin-right: 5px;
+    }
+    .buttonIcon {
+        margin: -5px 0 0 -3px;
+        width: 16px;
+        height: 17px;
+    }
+    .jqx-listbox {
+        z-index: 999999 !important;
+    }
+</style>
\ No newline at end of file
diff --git a/toolbar/settings/main.js b/toolbar/settings/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/toolbar/settings/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/toolbar/settings/package.json b/toolbar/settings/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/toolbar/settings/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/toolbar/toolevents/App.vue b/toolbar/toolevents/App.vue
new file mode 100644
index 00000000..1c84fe95
--- /dev/null
+++ b/toolbar/toolevents/App.vue
@@ -0,0 +1,105 @@
+<template>
+    <div>
+        <JqxToolbar ref="myToolbar"
+            :width="getWidth" :height="35"
+            :tools="tools" :initTools="initTools">
+        </JqxToolbar>
+
+        <div class="text">
+            Modify the shape by changing the options in the toolbar
+        </div>
+
+        <div ref="shape" class="shape"></div>
+    </div>
+</template>
+
+<script>
+    import JqxToolbar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtoolbar.vue';
+    import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcolorpicker.vue';
+
+    export default {
+        components: {
+            JqxToolbar,
+            JqxColorPicker
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('toolbar'),
+                tools: 'input | input | dropdownlist | custom'
+            }
+        },
+        methods: {
+            initTools: function (type, index, tool, menuToolIninitialization) {
+                switch (index) {
+                    case 0:
+                        tool.jqxInput({ width: 130, placeHolder: 'Enter width...' });
+                        tool.on('change', () => {
+                            this.$refs.shape.style.width = tool.val() + 'px';
+                        });
+                        break;
+                    case 1:
+                        tool.jqxInput({ width: 130, placeHolder: 'Enter height...' });
+                        tool.on('change', () => {
+                            this.$refs.shape.style.height = tool.val() + 'px';
+                        });
+                        break;
+                    case 2:
+                        tool.jqxDropDownList({ width: 130, source: ['square', 'circle'], placeHolder: 'Choose shape...' });
+                        tool.on('change', (event) => {
+                            const args = event.args;
+                            if (args) {
+                                let label = args.item.label;
+                                if (label == 'square') {
+                                    this.$refs.shape.style.borderRadius = 0;
+                                } else {
+                                    this.$refs.shape.style.borderRadius = '50%';
+                                }
+                            }
+                        });
+                        break;
+                    case 3:
+                        tool.append("<div style='padding: 3px;'><div></div></div>");
+                        const colorPicker = tool.children().children();
+                        colorPicker.on('colorchange', (event) => {
+                            tool.jqxDropDownButton('setContent', this.getTextElementByColor(event.args.color));
+                            this.$refs.shape.style.backgroundColor = '#' + event.args.color.hex;
+                        });
+                        colorPicker.jqxColorPicker({ color: '0F2B70', colorMode: 'hue', width: 220, height: 220 });
+                        tool.jqxDropDownButton({ width: 130, height: 21 });
+                        tool.jqxDropDownButton('setContent', this.getTextElementByColor(new jqx.color({ hex: '0F2B70' })));
+                        break;
+                }
+            },
+            getTextElementByColor: function (color) {
+                if (color == 'transparent' || color.hex == '') {
+                    return $("<div style='text-shadow: none; position: relative; padding-bottom: 2px; margin-top: 2px;'>transparent</div>");
+                }
+                const element = $("<div style='text-shadow: none; position: relative; padding-bottom: 2px; margin-top: 2px;'>#" + color.hex + "</div>");
+                const nThreshold = 105;
+                const bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
+                const foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White';
+                element.css('color', foreColor);
+                element.css('background', '#' + color.hex);
+                element.addClass('jqx-rc-all');
+
+                return element;
+            }
+        }
+    }
+</script>
+
+<style>
+    .text {
+        margin-top: 20px;
+        margin-bottom: 50px;
+        font-size: small;
+        font-family: Verdana;
+    }
+    .shape {
+        width: 200px;
+        height: 200px;
+        border: 1px solid #222222;
+        border-radius: 50%;
+        background-color: #0F2B70;
+    }
+</style>
\ No newline at end of file
diff --git a/toolbar/toolevents/main.js b/toolbar/toolevents/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/toolbar/toolevents/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/toolbar/toolevents/package.json b/toolbar/toolevents/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/toolbar/toolevents/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tooltip/closeonclick/App.vue b/tooltip/closeonclick/App.vue
new file mode 100644
index 00000000..eb5ee678
--- /dev/null
+++ b/tooltip/closeonclick/App.vue
@@ -0,0 +1,40 @@
+<template>
+    <div id="container">
+        <JqxTooltip 
+            :autoHide="false" :position="'bottom'" :name="'movieTooltip'"
+            :content="'The Amazing Spider-Man'">
+            <img src='../../../images/The_Amazng_Spider_Man.jpeg' />
+        </JqxTooltip>
+        <JqxTooltip 
+            :autoHide="false" :position="'bottom'" :name="'movieTooltip'"
+            :content="'The Avengers'">
+            <img src='../../../images/The_Avengers.jpg' />
+        </JqxTooltip>
+        <JqxTooltip 
+            :autoHide="false" :position="'bottom'" :name="'movieTooltip'"
+            :content="'The Dark Knight Rise'">
+            <img src='../../../images/The_Dark_Knight_Rises.jpg' />
+        </JqxTooltip>
+    </div>
+</template>
+
+<script>
+    import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
+
+    export default {
+        components: {
+            JqxTooltip
+        }
+    }
+</script>
+
+<style>
+    #container {
+        width: 400px;   
+        margin-left: 200px;
+    }
+    #container div {
+        margin: 8px 8px 0 8px;
+        float: left;
+    }
+</style>
\ No newline at end of file
diff --git a/tooltip/closeonclick/main.js b/tooltip/closeonclick/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tooltip/closeonclick/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tooltip/closeonclick/package.json b/tooltip/closeonclick/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tooltip/closeonclick/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tooltip/defaultfunctionality/App.vue b/tooltip/defaultfunctionality/App.vue
new file mode 100644
index 00000000..f5278ef1
--- /dev/null
+++ b/tooltip/defaultfunctionality/App.vue
@@ -0,0 +1,70 @@
+<template>
+    <div id="container">
+        <JqxTooltip 
+            :position="'mouse'" :name="'movieTooltip'"
+            :content="'<b>Title:</b> <i>The Amazing Spider-man</i><br /><b>Year:</b> 2012'">
+            <img src='../../../images/The_Amazng_Spider_Man.jpeg' />
+        </JqxTooltip>
+        <JqxTooltip 
+            :position="'mouse'" :name="'movieTooltip'"
+            :content="'<b>Title:</b> <i>The Avengers</i><br /><b>Year:</b> 2012'">
+            <img src='../../../images/The_Avengers.jpg' />
+        </JqxTooltip>
+        <JqxTooltip 
+            :position="'mouse'" :name="'movieTooltip'"
+            :content="'<b>Title:</b> <i>The Dark Knight Rises</i> <br /><b>Year:</b> 2012'">
+            <img src='../../../images/The_Dark_Knight_Rises.jpg' />
+        </JqxTooltip>
+        <JqxTooltip 
+            :position="'mouse'" :name="'movieTooltip'"
+            :content="'<b>Title:</b> <i>Harry Potter and the Deathly Hallows - Part 1</i><br /><b>Year:</b> 2010'">
+            <img src='../../../images/Harry_Potter_7_Part_1.jpg' />
+        </JqxTooltip>
+        <JqxTooltip 
+            :position="'mouse'" :name="'movieTooltip'"
+            :content="'<b>Title:</b> <i>Harry Potter and the Deathly Hallows - Part 2</i><br /><b>Year:</b> 2011'">
+            <img src='../../../images/Harry_Potter_7_Part_2.jpg' />
+        </JqxTooltip>
+        <JqxTooltip 
+            :position="'mouse'" :name="'movieTooltip'"
+            :content="'<b>Title:</b> <i>Inception</i><br /><b>Year:</b> 2010'">
+            <img src='../../../images/Inception.jpg' />
+        </JqxTooltip>
+        <JqxTooltip 
+            :position="'mouse'" :name="'movieTooltip'"
+            :content="'<b>Title:</b> <i>Star Trek</i><br /><b>Year:</b> 2009 '">
+            <img src='../../../images/Star_Trek.jpg' />
+        </JqxTooltip>
+        <JqxTooltip 
+            :position="'mouse'" :name="'movieTooltip'"
+            :content="'<b>Title:</b> <i>Star Wars</i> Episode III: <i>Revenge of the Sith</i><br /><b>Year:</b> 2005'">
+            <img src='../../../images/Star_Wars_Episode_III.jpg' />
+        </JqxTooltip>
+        <JqxTooltip 
+            :position="'mouse'" :name="'movieTooltip'"
+            :content="'<b>Title:</b> <i>Thor</i><br /><b>Year:</b> 2011'">
+            <img src='../../../images/Thor.jpg' />
+        </JqxTooltip>
+    </div>
+</template>
+
+<script>
+    import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
+
+    export default {
+        components: {
+            JqxTooltip
+        }
+    }
+</script>
+
+<style>
+    #container {
+        width: 400px;
+    }
+    #container div {
+        margin: 8px 8px 0 8px;
+        float: left;
+        height: 162px;
+    }
+</style>
\ No newline at end of file
diff --git a/tooltip/defaultfunctionality/main.js b/tooltip/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tooltip/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tooltip/defaultfunctionality/package.json b/tooltip/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tooltip/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tooltip/popover/App.vue b/tooltip/popover/App.vue
new file mode 100644
index 00000000..8ea73857
--- /dev/null
+++ b/tooltip/popover/App.vue
@@ -0,0 +1,56 @@
+<template>
+    <div id="container">
+        <JqxButton @click="click()"
+            :width="100" :height="25">
+            Toggle tooltip
+        </JqxButton>
+
+        <JqxTooltip ref="myTooltip"
+            :autoHide="false" :position="'bottom'" :name="'movieTooltip'"
+            :closeOnClick="false" :trigger="'none'" :content="'The Amazing Spider-Man'">
+            <img src='../../../images/The_Amazng_Spider_Man.jpeg' />
+        </JqxTooltip>
+    </div>
+</template>
+
+<script>
+    import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxTooltip,
+            JqxButton
+        },
+        data: function () {
+            return {
+                toggle: false
+            }
+        },
+        methods: {
+            click: function () {
+                if (!this.toggle) {
+                    this.$refs.myTooltip.open();
+                    this.toggle = true;
+                } else {
+                    this.$refs.myTooltip.close();
+                    this.toggle = false;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    #container {
+        text-align: center;
+    }
+    .jqx-button {
+        display: inline-block;
+        margin-bottom: 10px;
+    }
+    .jqx-tooltip {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+</style>
\ No newline at end of file
diff --git a/tooltip/popover/main.js b/tooltip/popover/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tooltip/popover/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tooltip/popover/package.json b/tooltip/popover/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tooltip/popover/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tooltip/tooltippositions/App.vue b/tooltip/tooltippositions/App.vue
new file mode 100644
index 00000000..cdd30962
--- /dev/null
+++ b/tooltip/tooltippositions/App.vue
@@ -0,0 +1,36 @@
+<template>
+    <div id="container">
+        <JqxTooltip 
+            :position="'left'" :name="'movieTooltip'"
+            :content="'The Amazing Spider-Man'">
+            <img src='../../../images/The_Amazng_Spider_Man.jpeg' />
+        </JqxTooltip>
+        <JqxTooltip 
+            :position="'right'" :name="'movieTooltip'"
+            :content="'The Avengers'">
+            <img src='../../../images/The_Avengers.jpg' />
+        </JqxTooltip>
+        <JqxTooltip 
+            :position="'bottom'" :name="'movieTooltip'"
+            :content="'The Dark Knight Rise'">
+            <img src='../../../images/The_Dark_Knight_Rises.jpg' />
+        </JqxTooltip>
+    </div>
+</template>
+
+<script>
+    import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
+
+    export default {
+        components: {
+            JqxTooltip
+        }
+    }
+</script>
+
+<style>
+    #container {
+        width: 110px;   
+        margin-left: 200px;
+    }
+</style>
\ No newline at end of file
diff --git a/tooltip/tooltippositions/main.js b/tooltip/tooltippositions/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tooltip/tooltippositions/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tooltip/tooltippositions/package.json b/tooltip/tooltippositions/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tooltip/tooltippositions/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tree/checkboxes/App.vue b/tree/checkboxes/App.vue
new file mode 100644
index 00000000..40e2e3c2
--- /dev/null
+++ b/tree/checkboxes/App.vue
@@ -0,0 +1,119 @@
+<template>
+    <div>
+        <JqxTree ref="myTree" style="float: left"  
+            :width="300" :height="450" :hasThreeStates="true" :checkboxes="true">
+            <ul>
+                <li id='home'>Home</li>
+                <li id='solutions'>
+                    Solutions
+                    <ul>
+                        <li>Education</li>
+                        <li>Financial services</li>
+                        <li>Government</li>
+                        <li id='manufacturing'>Manufacturing</li>
+                        <li>
+                            Solutions
+                            <ul>
+                                <li>Consumer photo and video</li>
+                                <li>Mobile</li>
+                                <li>Rich Internet applications</li>
+                                <li>Technical communication</li>
+                                <li>Training and eLearning</li>
+                                <li>Web conferencing</li>
+                            </ul>
+                        </li>
+                        <li>All industries and solutions</li>
+                    </ul>
+                </li>
+                <li>
+                    Products
+                    <ul>
+                        <li>PC products</li>
+                        <li>Mobile products</li>
+                        <li>All products</li>
+                    </ul>
+                </li>
+                <li>
+                    Support
+                    <ul>
+                        <li>Support home</li>
+                        <li>Customer Service</li>
+                        <li>Knowledge base</li>
+                        <li>Books</li>
+                        <li>Training and certification</li>
+                        <li>Support programs</li>
+                        <li>Forums</li>
+                        <li>Documentation</li>
+                        <li>Updates</li>
+                    </ul>
+                </li>
+                <li>
+                    Communities
+                    <ul>
+                        <li>Designers</li>
+                        <li>Developers</li>
+                        <li>Educators and students</li>
+                        <li>Partners</li>
+                        <li>
+                            By resource
+                            <ul>
+                                <li>Labs</li>
+                                <li>TV</li>
+                                <li>Forums</li>
+                                <li>Exchange</li>
+                                <li>Blogs</li>
+                                <li>Experience Design</li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Company
+                    <ul>
+                        <li>About Us</li>
+                        <li>Press</li>
+                        <li>Investor Relations</li>
+                        <li>Corporate Affairs</li>
+                        <li>Careers</li>
+                        <li>Showcase</li>
+                        <li>Events</li>
+                        <li>Contact Us</li>
+                        <li>Become an affiliate</li>
+                    </ul>
+                </li>
+            </ul>
+        </JqxTree>
+
+        <div style="margin-left: 60px; float: left">
+            <div style="margin-top: 10px">
+                <JqxCheckBox @change="change($event)" :checked="true">Three Check States</JqxCheckBox>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+
+    export default {
+        components: {
+            JqxTree,
+            JqxCheckBox
+        },
+        mounted: function () {
+            const solutionsItem = document.querySelector('#solutions');
+
+            this.$refs.myTree.selectItem(document.querySelector('#home'));
+            this.$refs.myTree.expandItem(solutionsItem);
+            this.$refs.myTree.checkItem(solutionsItem, true);
+            this.$refs.myTree.uncheckItem(document.querySelector('#manufacturing'));
+        },
+        methods: {
+            change: function (event) {
+                const checked = event.args.checked;
+                this.$refs.myTree.hasThreeStates = checked;
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tree/checkboxes/main.js b/tree/checkboxes/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tree/checkboxes/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tree/checkboxes/package.json b/tree/checkboxes/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tree/checkboxes/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tree/contextmenu/App.vue b/tree/contextmenu/App.vue
new file mode 100644
index 00000000..68fe491b
--- /dev/null
+++ b/tree/contextmenu/App.vue
@@ -0,0 +1,144 @@
+<template>
+    <div>
+        <JqxTree ref="myTree"
+            :width="300" :height="400">
+            <ul>
+                <li id="home">Home</li>
+                <li id="solutions">
+                    Solutions
+                    <ul>
+                        <li>Education</li>
+                        <li>Financial services</li>
+                        <li>Government</li>
+                        <li id="manufacturing">Manufacturing</li>
+                        <li>
+                            Solutions
+                            <ul>
+                                <li>Consumer photo and video</li>
+                                <li>Mobile</li>
+                                <li>Rich Internet applications</li>
+                                <li>Technical communication</li>
+                                <li>Training and eLearning</li>
+                                <li>Web conferencing</li>
+                            </ul>
+                        </li>
+                        <li>All industries and solutions</li>
+                    </ul>
+                </li>
+                <li>
+                    Products
+                    <ul>
+                        <li>PC products</li>
+                        <li>Mobile products</li>
+                        <li>All products</li>
+                    </ul>
+                </li>
+                <li>
+                    Support
+                    <ul>
+                        <li>Support home</li>
+                        <li>Customer Service</li>
+                        <li>Knowledge base</li>
+                        <li>Books</li>
+                        <li>Training and certification</li>
+                        <li>Support programs</li>
+                        <li>Forums</li>
+                        <li>Documentation</li>
+                        <li>Updates</li>
+                    </ul>
+                </li>
+                <li>
+                    Communities
+                    <ul>
+                        <li>Designers</li>
+                        <li>Developers</li>
+                        <li>Educators and students</li>
+                        <li>Partners</li>
+                        <li>
+                            By resource
+                            <ul>
+                                <li>Labs</li>
+                                <li>TV</li>
+                                <li>Forums</li>
+                                <li>Exchange</li>
+                                <li>Blogs</li>
+                                <li>Experience Design</li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Company
+                    <ul>
+                        <li>About Us</li>
+                        <li>Press</li>
+                        <li>Investor Relations</li>
+                        <li>Corporate Affairs</li>
+                        <li>Careers</li>
+                        <li>Showcase</li>
+                        <li>Events</li>
+                        <li>Contact Us</li>
+                        <li>Become an affiliate</li>
+                    </ul>
+                </li>
+            </ul>
+        </JqxTree>
+
+        <JqxMenu ref="myMenu" @itemclick="itemClick($event)"
+                 :width="120" :height="56" :autoOpenPopup="false" :mode="'popup'">
+            <ul>
+                <li>Add Item</li>
+                <li>Remove Item</li>
+            </ul>
+        </JqxMenu>
+
+    </div>
+</template>
+
+<script>
+    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
+    import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
+
+    export default {
+        components: {
+            JqxTree,
+            JqxMenu
+        },
+        mounted: function () {
+            this.$refs.myTree.selectItem(document.querySelector('#home'));
+            this.$refs.myTree.expandItem(document.querySelector('#solutions'));
+
+            document.addEventListener('contextmenu', event => {
+                event.preventDefault();
+                if ((event.target).classList.contains('jqx-tree-item')) {
+                    this.$refs.myTree.selectItem(event.target.parentNode);
+                    const scrollTop = window.scrollY;
+                    const scrollLeft = window.scrollX;
+                    this.$refs.myMenu.open(event.clientX + 5 + scrollLeft, event.clientY + 5 + scrollTop);
+                    return false;
+                } else {
+                    this.$refs.myMenu.close();
+                }
+            });
+        },
+        methods: {
+            itemClick: function (event) {
+                const item = event.args.innerText;
+                const selectedItem = this.$refs.myTree.getSelectedItem();
+
+                switch (item) {
+                    case 'Add Item':
+                        if (selectedItem != null) 
+                            this.$refs.myTree.addTo({ label: 'Item' }, selectedItem.element);
+                        break;
+                    case 'Remove Item':
+                        if (selectedItem != null) 
+                            this.$refs.myTree.removeItem(selectedItem.element);
+                        break;
+                }
+            }
+        }
+    }
+        
+    
+</script>
\ No newline at end of file
diff --git a/tree/contextmenu/main.js b/tree/contextmenu/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tree/contextmenu/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tree/contextmenu/package.json b/tree/contextmenu/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tree/contextmenu/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tree/defaultfunctionality/App.vue b/tree/defaultfunctionality/App.vue
new file mode 100644
index 00000000..a9a6f62b
--- /dev/null
+++ b/tree/defaultfunctionality/App.vue
@@ -0,0 +1,57 @@
+<template>
+    <div>
+        <JqxExpander 
+            :width="300" :height="370" :showArrow="false" :toggleMode="'none'">
+            <div>Folders</div>
+            <div style="overflow: hidden;">
+                <JqxTree ref="myTree"
+                    :width="'100%'" :height="'100%'" :source="treeSource">
+                </JqxTree>
+            </div>
+        </JqxExpander>
+    </div>
+</template>
+
+<script>
+    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
+    import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
+
+    export default {
+        components: {
+            JqxTree,
+            JqxExpander
+        },
+        data: function () {
+            return {
+                treeSource:
+                [
+                    {
+                        icon: '../../../images/mailIcon.png', label: 'Mail', expanded: true,
+                        items:
+                        [
+                            { icon: '../../../images/calendarIcon.png', label: 'Calendar' },
+                            { icon: '../../../images/contactsIcon.png', label: 'Contacts', selected: true }
+                        ]
+                    },
+                    {
+                        icon: '../../../images/folder.png', label: 'Inbox', expanded: true,
+                        items:
+                        [
+                            { icon: '../../../images/folder.png', label: 'Admin' },
+                            { icon: '../../../images/folder.png', label: 'Corporate' },
+                            { icon: '../../../images/folder.png', label: 'Finance' },
+                            { icon: '../../../images/folder.png', label: 'Other' },
+                        ]
+                    },
+                    { icon: '../../../images/recycle.png', label: 'Deleted Items' },
+                    { icon: '../../../images/notesIcon.png', label: 'Notes' },
+                    { icon: '../../../images/settings.png', label: 'Settings', iconsize: 14 },
+                    { icon: '../../../images/favorites.png', label: 'Favorites' }
+                ]
+            }
+        },
+        mounted: function () {
+            this.$refs.myTree.selectItem(null);
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tree/defaultfunctionality/main.js b/tree/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tree/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tree/defaultfunctionality/package.json b/tree/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tree/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tree/draganddrop/App.vue b/tree/draganddrop/App.vue
new file mode 100644
index 00000000..b6a1b954
--- /dev/null
+++ b/tree/draganddrop/App.vue
@@ -0,0 +1,122 @@
+<template>
+    <div>
+        <div>
+            <JqxTree ref="myTreeA" style="float: left;"
+                     @dragStart="dragStartTreeA($event)" @dragEnd="dragEndTreeA($event)"
+                     :width="220" :height="330" :dragStart="dragStart" 
+                     :allowDrop="true" :allowDrag="true">
+                <ul>
+                    <li item-selected="true">Home</li>
+                    <li item-expanded="true">
+                        Solutions
+                        <ul>
+                            <li>Education</li>
+                        </ul>
+                    </li>
+                    <li>Financial services</li>
+                    <li>Community</li>
+                </ul>
+            </JqxTree>
+
+            <JqxTree ref="myTreeB" style="float: left; margin-left: 20px;"
+                     @dragStart="dragStartTreeB($event)" @dragEnd="dragEndTreeB($event)"
+                     :width="220" :height="330" :dragEnd="dragEnd"
+                     :allowDrag="true" :allowDrop="true">
+                <ul>
+                    <li>
+                        Products
+                    </li>
+                    <li item-expanded="true">
+                        Support
+                        <ul>
+                            <li>Support home</li>
+                            <li>Customer Service</li>
+                        </ul>
+                    </li>
+                    <li>Knowledge base</li>
+                    <li>Forum</li>
+                </ul>
+            </JqxTree>
+
+            <div style="width: 200px; height: 200px; float: left; margin-left: 20px;">
+                <textarea rows="5" ref="myTextArea"></textarea>
+            </div>
+        </div>
+
+        <div style="font-size: 13px; font-family: Verdana; padding-top: 20px; clear: both;">
+            <b>Events Log:</b>
+            <div ref="dragStartLog">
+            </div>
+            <div ref="dragEndLog">
+            </div>
+            <br />
+            <b>Note:</b>
+            <br />
+            Dragging of "Community" is disabled.
+            <br />
+            Dropping of "Forum" is disabled.
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
+
+    export default {
+        components: {
+            JqxTree
+        },    
+        methods: {
+            onDragStart: function (event) {
+                this.$refs.dragStartLog.innerText = 'Drag Start: ' + event.args.label;
+                this.$refs.dragEndLog.innerText = '';
+            },
+            onDragEnd: function (event) {
+                this.$refs.dragEndLog.innerText = 'Drag End';
+                if (event.args.label) {
+                    const ev = event.args.originalEvent;
+                    let x = ev.pageX;
+                    let y = ev.pageY;
+
+                    if (ev && ev.originalEvent && ev.originalEvent.touches) {
+                        const touch = ev.originalEvent.changedTouches[0];
+                        x = touch.pageX;
+                        y = touch.pageY;
+                    }
+
+                    const myTextArea = this.$refs.myTextArea;
+                    const width = myTextArea.clientWidth;
+                    const height = myTextArea.clientHeight;
+                    const right = myTextArea.offsetLeft + width;
+                    const bottom = myTextArea.offsetTop + height;
+
+                    if (x >= myTextArea.offsetLeft && x <= right) {
+                        if (y >= myTextArea.offsetTop && y <= bottom) {
+                            myTextArea.value = event.args.label;
+                        }
+                    }
+                }
+            },
+            dragStartTreeA: function (event) {
+                this.onDragStart(event);
+            },
+            dragEndTreeA: function (event) {
+                this.onDragEnd(event);
+            },
+            dragStartTreeB: function (event) {
+                this.onDragStart(event);
+            },
+            dragEndTreeB: function (event) {
+                this.onDragEnd(event);
+            },
+            dragStart: function (item) {
+                if (item.label == 'Community')
+                    return false;
+            },
+            dragEnd: function (item, dropItem, args, dropPosition, tree) {
+                if (item.label == 'Forum')
+                    return false;
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tree/draganddrop/main.js b/tree/draganddrop/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tree/draganddrop/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tree/draganddrop/package.json b/tree/draganddrop/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tree/draganddrop/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tree/dropdowntree/App.vue b/tree/dropdowntree/App.vue
new file mode 100644
index 00000000..c8d27630
--- /dev/null
+++ b/tree/dropdowntree/App.vue
@@ -0,0 +1,60 @@
+<template>
+    <JqxDropDownButton ref="myDropDownButton" :width="150" :height="25">
+        <JqxTree ref="myTree" @select="select($event)"
+            :width="200" :height="220">
+            <ul>
+                <li item-selected='true'>Home</li>
+                <li item-expanded='true'>
+                    Solutions
+                    <ul>
+                        <li>Education</li>
+                        <li>Financial services</li>
+                        <li>Government</li>
+                        <li>Manufacturing</li>
+                        <li>
+                            Solutions
+                            <ul>
+                                <li>eLearning</li>
+                                <li>Mobile</li>
+                                <li>RIA</li>
+                                <li>Training</li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Products
+                    <ul>
+                        <li>PC products</li>
+                        <li>Mobile products</li>
+                        <li>All products</li>
+                    </ul>
+                </li>
+            </ul>
+        </JqxTree>
+    </JqxDropDownButton>
+</template>
+
+<script>
+    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
+    import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
+
+    export default {
+        components: {
+            JqxTree,
+            JqxDropDownButton
+        },
+        mounted: function () {
+            this.$refs.myDropDownButton.setContent('<div style="position: relative; margin-left: 3px; margin-top: 4px;">Home</div>');
+        },
+        methods: {
+            select: function (event) {
+                const item = this.$refs.myTree.getItem(event.args.element);
+                const dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 4px;">' + item.label + '</div>';
+                this.$refs.myDropDownButton.setContent(dropDownContent);
+            }
+        }
+    }
+        
+    
+</script>
\ No newline at end of file
diff --git a/tree/dropdowntree/main.js b/tree/dropdowntree/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tree/dropdowntree/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tree/dropdowntree/package.json b/tree/dropdowntree/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tree/dropdowntree/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tree/events/App.vue b/tree/events/App.vue
new file mode 100644
index 00000000..faf26f44
--- /dev/null
+++ b/tree/events/App.vue
@@ -0,0 +1,74 @@
+<template>
+    <div>
+        <JqxTree style="float: left;" ref="myTree"
+                 @select="select($event)" @expand="expand($event)" @collapse="collapse($event)"
+                 :width="250" :source="source">
+        </JqxTree>
+
+        <div style="margin-left: 20px; float: left;">
+            <div>
+                <span>Events:</span>
+
+                <JqxPanel ref="myPanel" :width="250" :height="200"></JqxPanel>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
+
+    export default {
+        components: {
+            JqxTree
+        },
+        data: function () {
+            return {
+                source:
+                [
+                    {
+                        icon: '../../../images/mailIcon.png', label: 'Mail', expanded: true,
+                        items:
+                        [
+                            { icon: '../../../images/calendarIcon.png', label: 'Calendar' },
+                            { icon: '../../../images/contactsIcon.png', label: 'Contacts', selected: true }
+                        ]
+                    },
+                    {
+                        icon: '../../../images/folder.png', label: 'Inbox', expanded: true,
+                        items:
+                        [
+                            { icon: '../../../images/folder.png', label: 'Admin' },
+                            { icon: '../../../images/folder.png', label: 'Corporate' },
+                            { icon: '../../../images/folder.png', label: 'Finance' },
+                            { icon: '../../../images/folder.png', label: 'Other' },
+                        ]
+                    },
+                    { icon: '../../../images/recycle.png', label: 'Deleted Items' },
+                    { icon: '../../../images/notesIcon.png', label: 'Notes' },
+                    { icon: '../../../images/settings.png', label: 'Settings', iconsize: 14 },
+                    { icon: '../../../images/favorites.png', label: 'Favorites' },
+                ]
+            }
+        },
+        methods: {
+            select: function (event) {
+                this.buildElement(event, 'Selected: ');
+            },
+            expand: function (event) {
+                this.buildElement(event, 'Expanded: ');
+            },
+            collapse: function (event) {
+                this.buildElement(event, 'Collapsed: ');
+            },
+            buildElement: function (event, text) {
+                const item = this.$refs.myTree.getItem(event.args.element);
+                const el = document.createElement('div');
+                el.innerHTML = text + item.label;
+                el.style.marginTop = '5px';
+
+                this.$refs.myPanel.prepend(el);
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tree/events/main.js b/tree/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tree/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tree/events/package.json b/tree/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tree/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tree/fluidsize/App.vue b/tree/fluidsize/App.vue
new file mode 100644
index 00000000..f51aa2ba
--- /dev/null
+++ b/tree/fluidsize/App.vue
@@ -0,0 +1,53 @@
+<template>
+    <JqxTree :width="'50%'" :height="'50%'">
+        <ul>
+            <li item-selected='true'>Home</li>
+            <li item-expanded='true'>
+                Solutions
+                <ul>
+                    <li>Education</li>
+                    <li>Financial services</li>
+                    <li>Government</li>
+                    <li>Manufacturing</li>
+                    <li>
+                        Solutions
+                        <ul>
+                            <li>eLearning</li>
+                            <li>Mobile</li>
+                            <li>RIA</li>
+                            <li>Training</li>
+                        </ul>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                Products
+                <ul>
+                    <li>PC products</li>
+                    <li>Mobile products</li>
+                    <li>All products</li>
+                </ul>
+            </li>
+        </ul>
+    </JqxTree>
+</template>
+
+<script>
+    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
+
+    export default {
+        components: {
+            JqxTree
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+    }
+</style>
\ No newline at end of file
diff --git a/tree/fluidsize/main.js b/tree/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tree/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tree/fluidsize/package.json b/tree/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tree/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tree/jsontree/App.vue b/tree/jsontree/App.vue
new file mode 100644
index 00000000..02a5c25e
--- /dev/null
+++ b/tree/jsontree/App.vue
@@ -0,0 +1,119 @@
+<template>
+    <JqxTree :width="300" :source="records"></JqxTree>
+</template>
+
+<script>
+    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
+
+    export default {
+        components: {
+            JqxTree
+        },    
+        beforeCreate: function () {
+            const data =
+                [
+                    {
+                        'id': '2',
+                        'parentid': '1',
+                        'text': 'Hot Chocolate',
+                        'value': '$2.3'
+                    }, {
+                        'id': '3',
+                        'parentid': '1',
+                        'text': 'Peppermint Hot Chocolate',
+                        'value': '$2.3'
+                    }, {
+                        'id': '4',
+                        'parentid': '1',
+                        'text': 'Salted Caramel Hot Chocolate',
+                        'value': '$2.3'
+                    }, {
+                        'id': '5',
+                        'parentid': '1',
+                        'text': 'White Hot Chocolate',
+                        'value': '$2.3'
+                    }, {
+                        'text': 'Chocolate Beverage',
+                        'id': '1',
+                        'parentid': '-1',
+                        'value': '$2.3'
+                    }, {
+                        'id': '6',
+                        'text': 'Espresso Beverage',
+                        'parentid': '-1',
+                        'value': '$2.3'
+                    }, {
+                        'id': '7',
+                        'parentid': '6',
+                        'text': 'Caffe Americano',
+                        'value': '$2.3'
+                    }, {
+                        'id': '8',
+                        'text': 'Caffe Latte',
+                        'parentid': '6',
+                        'value': '$2.3'
+                    }, {
+                        'id': '9',
+                        'text': 'Caffe Mocha',
+                        'parentid': '6',
+                        'value': '$2.3'
+                    }, {
+                        'id': '10',
+                        'text': 'Cappuccino',
+                        'parentid': '6',
+                        'value': '$2.3'
+                    }, {
+                        'id': '11',
+                        'text': 'Pumpkin Spice Latte',
+                        'parentid': '6',
+                        'value': '$2.3'
+                    }, {
+                        'id': '12',
+                        'text': 'Frappuccino',
+                        'parentid': '-1'
+                    }, {
+                        'id': '13',
+                        'text': 'Caffe Vanilla Frappuccino',
+                        'parentid': '12',
+                        'value': '$2.3'
+                    }, {
+                        'id': '15',
+                        'text': '450 calories',
+                        'parentid': '13',
+                        'value': '$2.3'
+                    }, {
+                        'id': '16',
+                        'text': '16g fat',
+                        'parentid': '13',
+                        'value': '$2.3'
+                    }, {
+                        'id': '17',
+                        'text': '13g protein',
+                        'parentid': '13',
+                        'value': '$2.3'
+                    }, {
+                        'id': '14',
+                        'text': 'Caffe Vanilla Frappuccino Light',
+                        'parentid': '12',
+                        'value': '$2.3'
+                    }
+                ];
+
+            const source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'id' },
+                    { name: 'parentid' },
+                    { name: 'text' },
+                    { name: 'value' }
+                ],
+                id: 'id',
+                localdata: data
+            };
+
+            const dataAdapter = new jqx.dataAdapter(source, { autoBind: true });
+    
+            this.records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tree/jsontree/main.js b/tree/jsontree/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tree/jsontree/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tree/jsontree/package.json b/tree/jsontree/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tree/jsontree/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tree/keyboardnavigation/App.vue b/tree/keyboardnavigation/App.vue
new file mode 100644
index 00000000..b6308640
--- /dev/null
+++ b/tree/keyboardnavigation/App.vue
@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <JqxTree style="float: left;" ref="myTree" 
+            :width="250" :height="350" :source="source">
+        </JqxTree>
+
+        <div style="font-family: Verdana; font-size: 12px; width: 400px; margin-left: 20px; float: left;">
+            <ul>
+                <li><b>Tab</b> - Like other widgets, the jqxTree widget receives focus by tabbing into it. Once focus is received, users will be able to use the keyboard to change the selection. A second tab will take the user out of the widget.</li>
+                <li><b>Shift+Tab</b> - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous focusable element in the tab order.</li>
+                <li><b>Up and Down</b> arrow keys - move between visible items.</li>
+                <li><b>Left Arrow</b> key - on an expanded item, collapses the item.</li>
+                <li><b>Left Arrow</b> key - on a collapsed or end item moves focus to the item's parent item.</li>
+                <li><b>Right Arrow</b> key - on a collapsed item expands the item.</li>
+                <li><b>Right Arrow</b> key - on an expanded item, moves to the first child item, or does nothing on an end item.</li>
+                <li><b>Home</b> key - moves to the top item in the tree view.</li>
+                <li><b>End</b> key - moves to the last item in the tree view.</li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
+
+    export default {
+        components: {
+            JqxTree
+        },
+        data: function () {
+            return {
+                source:
+                [
+                    {
+                        icon: '../../../images/mailIcon.png', label: 'Mail', expanded: true,
+                        items:
+                        [
+                            { icon: '../../../images/calendarIcon.png', label: 'Calendar' },
+                            { icon: '../../../images/contactsIcon.png', label: 'Contacts', selected: true }
+                        ]
+                    },
+                    {
+                        icon: '../../../images/folder.png', label: 'Inbox', expanded: true,
+                        items:
+                        [
+                            { icon: '../../../images/folder.png', label: 'Admin' },
+                            { icon: '../../../images/folder.png', label: 'Corporate' },
+                            { icon: '../../../images/folder.png', label: 'Finance' },
+                            { icon: '../../../images/folder.png', label: 'Other' },
+                        ]
+                    },
+                    { icon: '../../../images/recycle.png', label: 'Deleted Items' },
+                    { icon: '../../../images/notesIcon.png', label: 'Notes' },
+                    { icon: '../../../images/settings.png', label: 'Settings', iconsize: 14 },
+                    { icon: '../../../images/favorites.png', label: 'Favorites' },
+                ]
+            }
+        },
+        mounted: function () {
+            this.$refs.myTree.focus();
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tree/keyboardnavigation/main.js b/tree/keyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tree/keyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tree/keyboardnavigation/package.json b/tree/keyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tree/keyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tree/navigation/App.vue b/tree/navigation/App.vue
new file mode 100644
index 00000000..55f2d95c
--- /dev/null
+++ b/tree/navigation/App.vue
@@ -0,0 +1,88 @@
+<template>
+    <JqxSplitter ref="mySplitter"
+        :width="650" :height="400" :panels="[{ size: 250 }]">
+        <div>
+            <JqxTree ref="myTree" style="border: none;" 
+                     @select="select($event)"
+                     :width="'100%'" :height="'100%'">
+                <ul>
+                    <li id="Mail" item-expanded='true'>
+                        <img style='float: left; margin-right: 5px;' src='../../../images/mailIcon.png' /><span item-title="true">Mail</span>
+                    <li id="Calendar" item-expanded='true'>
+                        <img style='float: left; margin-right: 5px;' src='../../../images/calendarIcon.png' /><span item-title="true">Calendar</span>
+                    </li>
+                    <li id="Contacts">
+                        <img style='float: left; margin-right: 5px;' src='../../../images/contactsIcon.png' /><span item-title="true">Contacts</span>
+                    </li>
+                    <li id="Inbox">
+                        <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true"><span>Inbox</span></span>
+                        <ul>
+                            <li id="jQWidgets">
+                                <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">jQWidgets</span>
+                                <ul>
+                                    <li id="Admin">
+                                        <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">Admin</span>
+                                    </li>
+                                    <li id="Corporate">
+                                        <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">Corporate</span>
+                                    </li>
+                                    <li id="Finance">
+                                        <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">Finance</span>
+                                    </li>
+                                    <li id="Other">
+                                        <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">Other</span>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li id="Personal">
+                                <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">Personal</span>
+                            </li>
+                        </ul>
+                    </li>
+                    <li id="Deleted Items" item-expanded='true'>
+                        <img style='float: left; margin-right: 5px;' src='../../../images/recycle.png' /><span item-title="true"><span>Deleted Items</span><span style='color: Blue;'> (10)</span></span>
+                        <ul>
+                            <li id="Today">
+                                <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">Today</span>
+                            </li>
+                            <li id="Last Week">
+                                <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">Last Week</span>
+                            </li>
+                            <li id="Last Month">
+                                <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span item-title="true">Last Month</span>
+                            </li>
+                        </ul>
+                    <li id="Notes">
+                        <img style='float: left; margin-right: 5px;' src='../../../images/notesIcon.png' /><span item-title="true">Notes</span>
+                    </li>
+                    <li id="Settings">
+                        <img style='float: left; margin-right: 5px;' src='../../../images/settings.png' /><span item-title="true">Settings</span>
+                    </li>
+                    <li id="Favorites">
+                        <img style='float: left; margin-right: 5px;' src='../../../images/favorites.png' /><span item-title="true">Favorites</span>
+                    </li>
+                </ul>
+            </JqxTree>
+        </div>
+        <div ref="contentPanel"></div>
+    </JqxSplitter>
+</template>
+
+<script>
+    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
+    import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
+
+    export default {
+        components: {
+            JqxTree,
+            JqxSplitter
+        },
+        methods: {
+            select: function (event) {
+                this.$refs.contentPanel.innerHTML = '<div style="margin: 10px;">' + event.args.element.id + '</div>';
+            }
+        }
+    }
+        
+    
+</script>
\ No newline at end of file
diff --git a/tree/navigation/main.js b/tree/navigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tree/navigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tree/navigation/package.json b/tree/navigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tree/navigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tree/righttoleftlayout/App.vue b/tree/righttoleftlayout/App.vue
new file mode 100644
index 00000000..fd07dc16
--- /dev/null
+++ b/tree/righttoleftlayout/App.vue
@@ -0,0 +1,44 @@
+<template>
+    <JqxTree
+        :width="250" :height="350" :source="source" :rtl="true">
+    </JqxTree>
+</template>
+
+<script>
+    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
+
+    export default {
+        components: {
+            JqxTree
+        },
+        data: function () {
+            return {
+                source:
+                [
+                    {
+                        icon: '../../../images/mailIcon.png', label: 'Mail', expanded: true,
+                        items:
+                        [
+                            { icon: '../../../images/calendarIcon.png', label: 'Calendar' },
+                            { icon: '../../../images/contactsIcon.png', label: 'Contacts', selected: true }
+                        ]
+                    },
+                    {
+                        icon: '../../../images/folder.png', label: 'Inbox', expanded: true,
+                        items:
+                        [
+                            { icon: '../../../images/folder.png', label: 'Admin' },
+                            { icon: '../../../images/folder.png', label: 'Corporate' },
+                            { icon: '../../../images/folder.png', label: 'Finance' },
+                            { icon: '../../../images/folder.png', label: 'Other' },
+                        ]
+                    },
+                    { icon: '../../../images/recycle.png', label: 'Deleted Items' },
+                    { icon: '../../../images/notesIcon.png', label: 'Notes' },
+                    { icon: '../../../images/settings.png', label: 'Settings', iconsize: 14 },
+                    { icon: '../../../images/favorites.png', label: 'Favorites' },
+                ]
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tree/righttoleftlayout/main.js b/tree/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tree/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tree/righttoleftlayout/package.json b/tree/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tree/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tree/settings/App.vue b/tree/settings/App.vue
new file mode 100644
index 00000000..99dbda50
--- /dev/null
+++ b/tree/settings/App.vue
@@ -0,0 +1,233 @@
+<template>
+    <div>
+        <JqxTree ref="myTree" style="float: left"
+                 :width="300" :height="450">
+            <ul>
+                <li id="home">Home</li>
+                <li id="solutions">
+                    Solutions
+                    <ul>
+                        <li>Education</li>
+                        <li>Financial services</li>
+                        <li>Government</li>
+                        <li>Manufacturing</li>
+                        <li>
+                            Solutions
+                            <ul>
+                                <li>Consumer photo and video</li>
+                                <li>Mobile</li>
+                                <li>Rich Internet applications</li>
+                                <li>Technical communication</li>
+                                <li>Training and eLearning</li>
+                                <li>Web conferencing</li>
+                            </ul>
+                        </li>
+                        <li>All industries and solutions</li>
+                    </ul>
+                </li>
+                <li>
+                    Products
+                    <ul>
+                        <li>PC products</li>
+                        <li>Mobile products</li>
+                        <li>All products</li>
+                    </ul>
+                </li>
+                <li>
+                    Support
+                    <ul>
+                        <li>Support home</li>
+                        <li>Customer Service</li>
+                        <li>Knowledge base</li>
+                        <li>Books</li>
+                        <li>Training and certification</li>
+                        <li>Support programs</li>
+                        <li>Forums</li>
+                        <li>Documentation</li>
+                        <li>Updates</li>
+                    </ul>
+                </li>
+                <li>
+                    Communities
+                    <ul>
+                        <li>Designers</li>
+                        <li>Developers</li>
+                        <li>Educators and students</li>
+                        <li>Partners</li>
+                        <li>
+                            By resource
+                            <ul>
+                                <li>Labs</li>
+                                <li>TV</li>
+                                <li>Forums</li>
+                                <li>Exchange</li>
+                                <li>Blogs</li>
+                                <li>Experience Design</li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Company
+                    <ul>
+                        <li>About Us</li>
+                        <li>Press</li>
+                        <li>Investor Relations</li>
+                        <li>Corporate Affairs</li>
+                        <li>Careers</li>
+                        <li>Showcase</li>
+                        <li>Events</li>
+                        <li>Contact Us</li>
+                        <li>Become an affiliate</li>
+                    </ul>
+                </li>
+            </ul>
+        </JqxTree>
+
+        <div style="margin-left: 60px; float: left">
+            <div style="margin-top: 10px">
+                <JqxButton @click="AddOnClick()" :width="125" :height="25">Add</JqxButton>
+            </div>
+            <div style="margin-top: 10px">
+                <JqxButton @click="AddAfterOnClick()" :width="125" :height="25">Add After</JqxButton>
+            </div>
+            <div style="margin-top: 10px">
+                <JqxButton @click="AddBeforeOnClick()" :width="125" :height="25">Add Before</JqxButton>
+            </div>
+            <div style="margin-top: 10px">
+                <JqxButton @click="UpdateOnClick()" :width="125" :height="25">Update</JqxButton>
+            </div>
+            <div style="margin-top: 10px">
+                <JqxButton @click="RemoveOnClick()" :width="125" :height="25">Remove</JqxButton>
+            </div>
+            <div style="margin-top: 10px">
+                <JqxButton @click="DisableOnClick()" :width="125" :height="25">Disable</JqxButton>
+            </div>
+            <div style="margin-top: 10px">
+                <JqxButton @click="ExpandOnClick()" :width="125" :height="25">Expand</JqxButton>
+            </div>
+            <div style="margin-top: 10px">
+                <JqxButton @click="CollapseOnClick()" :width="125" :height="25">Collapse</JqxButton>
+            </div>
+            <div style="margin-top: 10px">
+                <JqxButton @click="ExpandAllOnClick()" :width="125" :height="25">Expand All</JqxButton>
+            </div>
+            <div style="margin-top: 10px">
+                <JqxButton @click="CollapseAllOnClick()" :width="125" :height="25">Collapse All</JqxButton>
+            </div>
+            <div style="margin-top: 10px">
+                <JqxButton @click="EnableAllOnClick()" :width="125" :height="25">Enable All</JqxButton>
+            </div>
+            <div style="margin-top: 10px">
+                <JqxButton @click="NextOnClick()" :width="125" :height="25">Next Item</JqxButton>
+            </div>
+            <div style="margin-top: 10px">
+                <JqxButton @click="PreviousOnClick()" :width="125" :height="25">Previous Item</JqxButton>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxTree,
+            JqxButton
+        },
+        mounted: function () {
+            this.$refs.myTree.selectItem(document.querySelector('#home'));
+            this.$refs.myTree.expandItem(document.querySelector('#solutions'));
+        },
+        methods: {
+            AddOnClick: function () {
+                const selectedItem = this.$refs.myTree.getSelectedItem();
+                if (selectedItem != null) {
+                    this.$refs.myTree.addTo({ label: 'Item' }, selectedItem.element);
+                    this.$refs.myTree.render();
+                }
+                else {
+                    this.$refs.myTree.addTo({ label: 'Item' }, null);
+                    this.$refs.myTree.render();
+                }
+            },
+            AddAfterOnClick: function () {
+                const selectedItem = this.$refs.myTree.getSelectedItem();
+                if (selectedItem != null) {
+                    this.$refs.myTree.addAfter({ label: 'Item' }, selectedItem.element);
+                    this.$refs.myTree.render();
+                }
+            },
+            AddBeforeOnClick: function () {
+                const selectedItem = this.$refs.myTree.getSelectedItem();
+                if (selectedItem != null) {
+                    this.$refs.myTree.addBefore({ label: 'Item' }, selectedItem.element);
+                    this.$refs.myTree.render();
+                }
+            },
+            UpdateOnClick: function () {
+                const selectedItem = this.$refs.myTree.getSelectedItem();
+                if (selectedItem != null) {
+                    this.$refs.myTree.updateItem({ label: 'Item' }, selectedItem.element);
+                    this.$refs.myTree.render();
+                }
+            },
+            RemoveOnClick: function () {
+                const selectedItem = this.$refs.myTree.getSelectedItem();
+                if (selectedItem != null) {
+                    this.$refs.myTree.removeItem(selectedItem.element);
+                    this.$refs.myTree.render();
+                }
+            },
+            DisableOnClick: function () {
+                const selectedItem = this.$refs.myTree.getSelectedItem();
+                if (selectedItem != null) {
+                    this.$refs.myTree.disableItem(selectedItem.element);
+                }
+            },
+            ExpandOnClick: function () {
+                const selectedItem = this.$refs.myTree.getSelectedItem();
+                if (selectedItem != null) {
+                    this.$refs.myTree.expandItem(selectedItem.element);
+                }
+            },
+            CollapseOnClick: function () {
+                const selectedItem = this.$refs.myTree.getSelectedItem();
+                if (selectedItem != null) {
+                    this.$refs.myTree.collapseItem(selectedItem.element);
+                }
+            },
+            ExpandAllOnClick: function () {
+                this.$refs.myTree.expandAll();
+            },
+            CollapseAllOnClick: function () {
+                this.$refs.myTree.collapseAll();
+            },
+            EnableAllOnClick: function () {
+                this.$refs.myTree.enableAll();
+            },
+            NextOnClick: function () {
+                const selectedItem = this.$refs.myTree.getSelectedItem();
+                if (selectedItem != null) {
+                    const nextItem = selectedItem.element.nextElementSibling;
+                    if (nextItem != null) {
+                        this.$refs.myTree.selectItem(nextItem);
+                        this.$refs.myTree.ensureVisible(nextItem);
+                    }
+                }
+            },
+            PreviousOnClick: function () {
+                const selectedItem = this.$refs.myTree.getSelectedItem();
+                if (selectedItem != null) {
+                    const prevItem = selectedItem.element.previousElementSibling;
+                    if (prevItem != null) {
+                        this.$refs.myTree.selectItem(prevItem);
+                        this.$refs.myTree.ensureVisible(prevItem);
+                    }
+                }
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tree/settings/main.js b/tree/settings/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tree/settings/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tree/settings/package.json b/tree/settings/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tree/settings/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/tree/xmltree/App.vue b/tree/xmltree/App.vue
new file mode 100644
index 00000000..5de3fed2
--- /dev/null
+++ b/tree/xmltree/App.vue
@@ -0,0 +1,35 @@
+<template>
+    <JqxTree :width="300" :source="records"></JqxTree>
+</template>
+
+<script>
+    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
+
+    export default {
+        components: {
+            JqxTree
+        },    
+        beforeCreate: function () {
+            const source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
+                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' },
+                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle' },
+                    { name: 'City', map: 'm\\:properties>d\\:City' },
+                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode' },
+                    { name: 'Country', map: 'm\\:properties>d\\:Country' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:CustomerID',
+                url: '../sampledata/customers.xml',
+                async: false
+            };
+
+            const dataAdapter = new jqx.dataAdapter(source, { autoBind: true });
+    
+            this.records = dataAdapter.getGroupedRecords(['Country', 'City'], 'items', 'label', [{ name: 'uid', map: 'value' }, { name: 'CompanyName', map: 'label' }], 'row', 'value');
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/tree/xmltree/main.js b/tree/xmltree/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/tree/xmltree/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/tree/xmltree/package.json b/tree/xmltree/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/tree/xmltree/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/advancedfiltering/App.vue b/treegrid/advancedfiltering/App.vue
new file mode 100644
index 00000000..5c91d45e
--- /dev/null
+++ b/treegrid/advancedfiltering/App.vue
@@ -0,0 +1,71 @@
+<template>
+    <JqxTreeGrid ref="treeGrid"
+                 :width="getWidth"
+                 :source="dataAdapter"
+                 :pageable="true"
+                 :columnsResize="true"
+                 :sortable="true"
+                 :filterable="true"
+                 :filterMode="'advanced'"
+                 :columns="columns"
+                 :ready="ready">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 180 },
+                    { text: 'LastName', dataField: 'LastName', width: 180 },
+                    { text: 'Department Name', dataField: 'DepartmentName', width: 180 },
+                    { text: 'Title', dataField: 'Title', width: 300 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 150 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 150 },
+                    { text: 'Phone', dataField: 'Phone', cellsFormat: 'd', width: 150 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                    dataType: 'csv',
+                    dataFields: [
+                        { name: 'EmployeeKey', type: 'number' },
+                        { name: 'ParentEmployeeKey', type: 'number' },
+                        { name: 'FirstName', type: 'string' },
+                        { name: 'LastName', type: 'string' },
+                        { name: 'Title', type: 'string' },
+                        { name: 'HireDate', type: 'date' },
+                        { name: 'BirthDate', type: 'date' },
+                        { name: 'Phone', type: 'string' },
+                        { name: 'Gender', type: 'string' },
+                        { name: 'DepartmentName', type: 'string' }
+                    ],
+                    hierarchy:
+                        {
+                            keyDataField: { name: 'EmployeeKey' },
+                            parentDataField: { name: 'ParentEmployeeKey' }
+                        },
+                    id: 'EmployeeKey',
+                    url: '../sampledata/employeesadv.csv'
+                };
+        },
+        methods: {
+            ready: function() {
+                this.$refs.treeGrid.expandRow(32);
+                this.$refs.treeGrid.expandRow(112);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/advancedfiltering/main.js b/treegrid/advancedfiltering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/advancedfiltering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/advancedfiltering/package.json b/treegrid/advancedfiltering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/advancedfiltering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/aggregates/App.vue b/treegrid/aggregates/App.vue
new file mode 100644
index 00000000..105d7573
--- /dev/null
+++ b/treegrid/aggregates/App.vue
@@ -0,0 +1,71 @@
+<template>
+    <JqxTreeGrid ref="treeGrid"                 
+                 :width="getWidth" 
+                 :height="400" 
+                 :source="dataAdapter"
+                 :pageable="true"
+                 :pageSize="25"
+                 :showAggregates="true"
+                 :showSubAggregates="true"
+                 :aggregatesHeight="70"
+                 :sortable="true"
+                 :columns="columns"
+                 :ready="ready">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Location Name', dataField: 'Name', align: 'center', width: '50%' },
+                    { text: 'Population', dataField: 'Population', align: 'center', width: '50%', aggregates: ['min', 'max', 'count'] }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataType: 'tab',
+                dataFields: [
+                    { name: 'Id', type: 'number' },
+                    { name: 'Name', type: 'string' },
+                    { name: 'ParentID', type: 'number' },
+                    { name: 'Population', type: 'number' }
+                ],
+                hierarchy:
+                    {
+                        keyDataField: { name: 'Id' },
+                        parentDataField: { name: 'ParentID' }
+                    },
+                id: 'Id',
+                url: '../sampledata/locations.tsv'
+                };
+        },
+        methods: {
+            ready: function() {
+                this.$refs.treeGrid.expandRow(34);
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    .jqx-grid-cell-pinned {
+        border-right: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/treegrid/aggregates/main.js b/treegrid/aggregates/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/aggregates/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/aggregates/package.json b/treegrid/aggregates/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/aggregates/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/aggregatestemplate/App.vue b/treegrid/aggregatestemplate/App.vue
new file mode 100644
index 00000000..6390034d
--- /dev/null
+++ b/treegrid/aggregatestemplate/App.vue
@@ -0,0 +1,110 @@
+<template>
+    <JqxTreeGrid ref="treeGrid"
+                 :width="getWidth"
+                 :source="dataAdapter"
+                 :altRows="true"
+                 :showSubAggregates="true"
+                 :columnsResize="true"
+                 :columns="columns"
+                 :ready="ready">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source, {
+                    loadComplete: () => {}
+                }),
+                columns: [
+                    { text: 'Name', align: 'center', dataField: 'name', width: 300 },
+                    { text: 'Location', dataField: 'location', cellsAlign: 'center', align: 'center', width: 250 },
+                    {
+                        text: 'Budget', cellsAlign: 'center', align: 'center', dataField: 'budget', cellsFormat: 'c2',
+                        aggregates: ['sum'],
+                        aggregatesRenderer: (aggregatesText, column, element, aggregates, type) => {
+                            let renderString = '';
+                            if (type == 'aggregates') {
+                                renderString = '<div style="margin: 4px; float: right;  height: 100%;">';
+                            }
+                            else {
+                                renderString = '<div style="float: right;  height: 100%;">';
+                            }
+                            let euro = this.dataAdapter.formatNumber(0.74 * aggregates.sum, 'f2');
+                            let usd = this.dataAdapter.formatNumber(aggregates.sum, 'f2');
+                            renderString += "<table><tr><td rowspan='2'><strong>Total: </strong></td><td>" + usd + " USD</td><tr><td>" + euro + " EUR</td></tr></table>";
+                            return renderString;
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const data = [{
+                'id': '1', 'name': 'Corporate Headquarters', 'budget': '1230000', 'location': 'Las Vegas',
+                'children':
+                    [
+                        {
+                            'id': '2', 'name': 'Finance Division', 'budget': '423000', 'location': 'San Antonio',
+                            'children':
+                                [
+                                    {
+                                        'id': '4', 'name': 'Investment Department', 'budget': '310000', 'location': 'San Antonio',
+                                        'children':
+                                            [
+                                                { 'id': '5', 'name': 'Banking Office', 'budget': '240000', 'location': 'San Antonio' },
+                                                { 'id': '6', 'name': 'Bonds Office', 'budget': '70000', 'location': 'San Antonio' },
+                                            ]
+                                    },
+                                    { 'id': '3', 'name': 'Accounting Department', 'budget': '113000', 'location': 'San Antonio' }
+                                ]
+                        },
+                        {
+                            'id': '7', 'name': 'Operations Division', 'budget': '600000', 'location': 'Miami',
+                            'children':
+                                [
+                                    { 'id': '8', 'name': 'Manufacturing Department', 'budget': '300000', 'location': 'Miami' },
+                                    { 'id': '9', 'name': 'Public Relations Department', 'budget': '200000', 'location': 'Miami' },
+                                    { 'id': '10', 'name': 'Sales Department', 'budget': '100000', 'location': 'Miami' }
+                                ]
+                        },
+                        { 'id': '11', 'name': 'Research Division', 'budget': '200000', 'location': 'Boston' }
+                    ]
+            }];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'name', type: 'string' },
+                    { name: 'budget', type: 'number' },
+                    { name: 'id', type: 'number' },
+                    { name: 'children', type: 'array' },
+                    { name: 'location', type: 'string' }
+                ],
+                hierarchy:
+                    {
+                        root: 'children'
+                    },
+                localData: data,
+                id: 'id'
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.treeGrid.expandRow(1);
+                this.$refs.treeGrid.expandRow(2);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/aggregatestemplate/main.js b/treegrid/aggregatestemplate/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/aggregatestemplate/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/aggregatestemplate/package.json b/treegrid/aggregatestemplate/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/aggregatestemplate/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/celledit/App.vue b/treegrid/celledit/App.vue
new file mode 100644
index 00000000..ea1dd517
--- /dev/null
+++ b/treegrid/celledit/App.vue
@@ -0,0 +1,122 @@
+<template>
+    <div>
+        <JqxTreeGrid @cellBeginEdit="treeGridOnCellBeginEdit($event)"
+                     @cellEndEdit="treeGridOnCellEndEdit($event)"
+                     :width="getWidth" :source="dataAdapter"
+                     :columns="columns" :sortable="true"
+                     :editable="true" :editSettings="editSettings">
+        </JqxTreeGrid>
+        <div style="font-size: 13px; font-family: Verdana; width: 800px; margin-top: 20px">
+            <h4>Event Log</h4>
+            <div ref="myLog" style="max-height: 300px; overflow: auto"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'FirstName', dataField: 'FirstName', width: 200 },
+                    { text: 'LastName', dataField: 'LastName', width: 200 },
+                    { text: 'City', dataField: 'City', width: 200 },
+                    { text: 'Country', dataField: 'Country' }
+                ],
+                editSettings: {
+                    saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true,
+                    cancelOnEsc: true, saveOnEnter: true, editSingleCell: true, editOnDoubleClick: true, editOnF2: true
+                }
+            }
+        },
+        beforeCreate: function () {
+
+            const employees = [{
+                'EmployeeID': 2, 'FirstName': 'Andrew', 'LastName': 'Fuller', 'Country': 'USA', 'Title': 'Vice President, Sales', 'HireDate': '1992-08-14 00:00:00', 'BirthDate': '1952-02-19 00:00:00', 'City': 'Tacoma', 'Address': '908 W. Capital Way', 'expanded': 'true',
+                children: [
+                    { 'EmployeeID': 8, 'FirstName': 'Laura', 'LastName': 'Callahan', 'Country': 'USA', 'Title': 'Inside Sales Coordinator', 'HireDate': '1994-03-05 00:00:00', 'BirthDate': '1958-01-09 00:00:00', 'City': 'Seattle', 'Address': '4726 - 11th Ave. N.E.' },
+                    { 'EmployeeID': 1, 'FirstName': 'Nancy', 'LastName': 'Davolio', 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-05-01 00:00:00', 'BirthDate': '1948-12-08 00:00:00', 'City': 'Seattle', 'Address': '507 - 20th Ave. E.Apt. 2A' },
+                    { 'EmployeeID': 3, 'FirstName': 'Janet', 'LastName': 'Leverling', 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-04-01 00:00:00', 'BirthDate': '1963-08-30 00:00:00', 'City': 'Kirkland', 'Address': '722 Moss Bay Blvd.' },
+                    { 'EmployeeID': 4, 'FirstName': 'Margaret', 'LastName': 'Peacock', 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1993-05-03 00:00:00', 'BirthDate': '1937-09-19 00:00:00', 'City': 'Redmond', 'Address': '4110 Old Redmond Rd.' },
+                    {
+                        'EmployeeID': 5, 'FirstName': 'Steven', 'LastName': 'Buchanan', 'Country': 'UK', 'Title': 'Sales Manager', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1955-03-04 00:00:00', 'City': 'London', 'Address': '14 Garrett Hill', 'expanded': 'true',
+                        children: [
+                            { 'EmployeeID': 6, 'FirstName': 'Michael', 'LastName': 'Suyama', 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1963-07-02 00:00:00', 'City': 'London', 'Address': 'Coventry House Miner Rd.' },
+                            { 'EmployeeID': 7, 'FirstName': 'Robert', 'LastName': 'King', 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-01-02 00:00:00', 'BirthDate': '1960-05-29 00:00:00', 'City': 'London', 'Address': 'Edgeham Hollow Winchester Way' },
+                            { 'EmployeeID': 9, 'FirstName': 'Anne', 'LastName': 'Dodsworth', 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-11-15 00:00:00', 'BirthDate': '1966-01-27 00:00:00', 'City': 'London', 'Address': '7 Houndstooth Rd.' }
+                        ]
+                    }
+                ]
+            }];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'children', type: 'array' },
+                    { name: 'expanded', type: 'bool' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                    {
+                        root: 'children'
+                    },
+                id: 'EmployeeID',
+                localData: employees
+            };
+        },
+        methods: {
+            treeGridOnCellBeginEdit: function(event) {
+                let args = event.args;
+                // row key
+                let rowKey = args.key;
+                // row's data.
+                let rowData = args.row;
+                // column's data field.
+                let columnDataField = args.dataField;
+                // column's display field.
+                let columnDisplayField = args.displayField;
+                // cell's value.
+                let value = args.value;
+                if (columnDataField == 'ShippedDate')
+                    value = this.dataAdapter.formatDate(value, 'dd/MM/yyyy');
+                let myLog = this.$refs.myLog;
+                myLog.innerHTML = 'cellBeginEdit - Row ID: ' + rowKey + ', Column: ' + columnDataField + ', Value: ' + value + '<br/>' + myLog.innerHTML;
+            },
+            treeGridOnCellEndEdit: function (event) {
+                let args = event.args;
+                // row key
+                let rowKey = args.key;
+                // row's data.
+                let rowData = args.row;
+                // column's data field.
+                let columnDataField = args.dataField;
+                // column's display field.
+                let columnDisplayField = args.displayField;
+                // cell's value.
+                let value = args.value;
+                if (columnDataField == 'ShippedDate')
+                    value = this.dataAdapter.formatDate(value, 'dd/MM/yyyy');
+                let myLog = this.$refs.myLog;
+                myLog.innerHTML = '<br/>cellEndEdit - Row ID: ' + rowKey + ', Column: ' + columnDataField + ', Value: ' + value + '<br/>' + myLog.innerHTML;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/celledit/main.js b/treegrid/celledit/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/celledit/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/celledit/package.json b/treegrid/celledit/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/celledit/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/columnalignment/App.vue b/treegrid/columnalignment/App.vue
new file mode 100644
index 00000000..a8747f21
--- /dev/null
+++ b/treegrid/columnalignment/App.vue
@@ -0,0 +1,151 @@
+<template>
+    <div>
+        <JqxTreeGrid ref="myTreeGrid"
+            :width="width"
+            :sortable="true"
+            :columns="columns"
+            :source="dataAdapter">
+        </JqxTreeGrid>
+        <div style="font-size: 13px; font-family: Verdana; width: 600px; margin-top: 10px;">
+            <div style="float: left; width: 300px;">
+                <h4>Column Alignment</h4>
+                <JqxDropDownList
+                    @change="columnAlignmentChange($event)"
+                    :autoDropDownHeight="true"
+                    :source="['Left', 'Center' , 'Right' ]"
+                    :height="25"
+                    :selectedIndex="0">
+                </JqxDropDownList>
+            </div>
+            <div style="float: left; width: 300px;">
+                <h4>Cells Alignment</h4>
+                <JqxDropDownList
+                    @change="cellsAlignmentChange($event)"
+                    :autoDropDownHeight="true"
+                    :source="['Left', 'Center' , 'Right' ]"
+                    :height="25"
+                    :selectedIndex="0">
+                </JqxDropDownList>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
+    
+    export default {
+        components: {
+            JqxTreeGrid,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'FirstName', dataField: 'FirstName', width: 200 },
+                    { text: 'LastName', dataField: 'LastName', width: 200 },
+                    { text: 'Title', dataField: 'Title', width: 160 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd' }
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            let employees = [
+                {
+                    "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way", "expanded": "true",
+                    "children": [
+                        { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
+                        { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
+                        { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
+                        { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
+                        {
+                            "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill", "expanded": "true",
+                            "children": [
+                                    { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
+                                    { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
+                                    { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
+                            ]
+                        }
+                    ]
+                }
+            ];
+            // prepare the data
+            this.source = {
+                dataType: "json",
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'children', type: 'array' },
+                    { name: 'expanded', type: 'bool' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                {
+                    root: 'children'
+                },
+                id: 'EmployeeID',
+                localData: employees
+            };
+        },
+        methods: {
+            columnAlignmentChange: function (event) {
+                let index = event.args.index;
+                switch (index) {
+                    case 0:
+                        this.$refs.myTreeGrid.setColumnProperty('FirstName', 'align', 'left');
+                        this.$refs.myTreeGrid.setColumnProperty('LastName', 'align', 'left');
+                        this.$refs.myTreeGrid.setColumnProperty('Title', 'align', 'left');
+                        this.$refs.myTreeGrid.setColumnProperty('BirthDate', 'align', 'left');
+                        break;
+                    case 1:
+                        this.$refs.myTreeGrid.setColumnProperty('FirstName', 'align', 'center');
+                        this.$refs.myTreeGrid.setColumnProperty('LastName', 'align', 'center');
+                        this.$refs.myTreeGrid.setColumnProperty('Title', 'align', 'center');
+                        this.$refs.myTreeGrid.setColumnProperty('BirthDate', 'align', 'center');
+                        break;
+                    case 2:
+                        this.$refs.myTreeGrid.setColumnProperty('FirstName', 'align', 'right');
+                        this.$refs.myTreeGrid.setColumnProperty('LastName', 'align', 'right');
+                        this.$refs.myTreeGrid.setColumnProperty('Title', 'align', 'right');
+                        this.$refs.myTreeGrid.setColumnProperty('BirthDate', 'align', 'right');
+                        break;
+                };
+            },
+            cellsAlignmentChange: function (event) {
+                let index = event.args.index;
+                switch (index) {
+                    case 0:
+                        this.$refs.myTreeGrid.setColumnProperty('FirstName', 'cellsAlign', 'left');
+                        this.$refs.myTreeGrid.setColumnProperty('LastName', 'cellsAlign', 'left');
+                        this.$refs.myTreeGrid.setColumnProperty('Title', 'cellsAlign', 'left');
+                        this.$refs.myTreeGrid.setColumnProperty('BirthDate', 'cellsAlign', 'left');
+                        break;
+                    case 1:
+                        this.$refs.myTreeGrid.setColumnProperty('FirstName', 'cellsAlign', 'center');
+                        this.$refs.myTreeGrid.setColumnProperty('LastName', 'cellsAlign', 'center');
+                        this.$refs.myTreeGrid.setColumnProperty('Title', 'cellsAlign', 'center');
+                        this.$refs.myTreeGrid.setColumnProperty('BirthDate', 'cellsAlign', 'center');
+                        break;
+                    case 2:
+                        this.$refs.myTreeGrid.setColumnProperty('FirstName', 'cellsAlign', 'right');
+                        this.$refs.myTreeGrid.setColumnProperty('LastName', 'cellsAlign', 'right');
+                        this.$refs.myTreeGrid.setColumnProperty('Title', 'cellsAlign', 'right');
+                        this.$refs.myTreeGrid.setColumnProperty('BirthDate', 'cellsAlign', 'right');
+                        break;
+                };
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/columnalignment/main.js b/treegrid/columnalignment/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/columnalignment/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/columnalignment/package.json b/treegrid/columnalignment/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/columnalignment/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/columncheckboxes/App.vue b/treegrid/columncheckboxes/App.vue
new file mode 100644
index 00000000..2625973e
--- /dev/null
+++ b/treegrid/columncheckboxes/App.vue
@@ -0,0 +1,92 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+        :width="width"
+        :checkboxes="true"
+        :altRows="true"
+        :ready="ready"
+        :columns="columns"
+        :source="dataAdapter">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: "Name", align: "center", dataField: "name", width: 350 },
+                    { text: "Budget", cellsAlign: "center", align: "center", dataField: "budget", cellsFormat: "c2", width: 300 },
+                    { text: "Location", dataField: "location", cellsAlign: "center", align: "center" }                
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            let data = [
+                {
+                    "id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas",
+                    "children":
+                    [
+                        {
+                            "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio",
+                            "children":
+                            [
+                                { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio" },
+                                {
+                                    "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio",
+                                    "children":
+                                    [
+                                        { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio" },
+                                        { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio" },
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami",
+                            "children":
+                            [
+                                { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami" },
+                                { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami" },
+                                { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami" }
+                            ]
+                        },
+                        { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston" }
+                    ]
+                }
+            ];
+            // prepare the data
+            this.source = {
+                dataType: "json",
+                dataFields: [
+                    { name: "name", type: "string" },
+                    { name: "budget", type: "number" },
+                    { name: "id", type: "number" },
+                    { name: "children", type: "array" },
+                    { name: "location", type: "string" }
+                ],
+                hierarchy:
+                    {
+                        root: "children"
+                    },
+                localData: data,
+                id: "id"
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(1);
+                this.$refs.myTreeGrid.expandRow(2);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/columncheckboxes/main.js b/treegrid/columncheckboxes/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/columncheckboxes/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/columncheckboxes/package.json b/treegrid/columncheckboxes/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/columncheckboxes/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/columnformatting/App.vue b/treegrid/columnformatting/App.vue
new file mode 100644
index 00000000..4076d6ad
--- /dev/null
+++ b/treegrid/columnformatting/App.vue
@@ -0,0 +1,153 @@
+<template>
+    <div>
+        <JqxTreeGrid ref="myTreeGrid"
+            :width="width"
+            :height="350"
+            :sortable="true"
+            :ready="ready"
+            :columns="columns"
+            :source="dataAdapter">
+        </JqxTreeGrid>
+        <div style="font-size: 13px; font-family: Verdana; width: 600px; margin-top: 10px;">
+            <div style="float: left; width: 300px;">
+                <h4>Shipped Date</h4>
+                <JqxDropDownList
+                    @change="dateListOnChange($event)"
+                    :autoDropDownHeight="true"
+                    :source="dateSource"
+                    :height="25"
+                    :selectedIndex="0">
+                </JqxDropDownList>
+            </div>
+            <div style="float: left; width: 300px;">
+                <h4>Price</h4>
+                <JqxDropDownList
+                    @change="priceListOnChange($event)"
+                    :autoDropDownHeight="true"
+                    :source="priceSource"
+                    :height="25"
+                    :selectedIndex="5">
+                </JqxDropDownList>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
+    
+    export default {
+        components: {
+            JqxTreeGrid,
+            JqxDropDownList
+        },
+        data: function () {
+            return {
+                dateSource: ['Short Date', 'Long Date', 'Long date, Short Time', 'Long date, Long Time', 'Month/Year', 'Month/Day', 'Custom'],
+                priceSource:  ['n', 'f1', 'f2', 'f3', 'c1', 'c2', 'c3', 'p', 'p2', 'p3'],
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),                
+                columns: [
+                    { text: 'Order Name', dataField: "name", align: 'center', width: 200 },
+                    { text: 'Customer', dataField: "customer", align: 'center', width: 200 },
+                    { text: 'Price', dataField: "price", cellsFormat: "c2", align: 'center', cellsAlign: 'right', width: 100 },
+                    {
+                        text: 'Order Date', dataField: "date", align: 'right', cellsFormat: "d", cellsAlign: 'right'
+                    }
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            // prepare the data
+            this.source = {
+                dataType: "array",
+                dataFields: [
+                    { name: "name", type: "string" },
+                    { name: "quantity", type: "number" },
+                    { name: "id", type: "number" },
+                    { name: "parentid", type: "number" },
+                    { name: "price", type: "number" },
+                    { name: "date", type: "date" },
+                    { name: "customer", type: "string" }
+                ],
+                hierarchy:
+                {
+                    keyDataField: { name: 'id' },
+                    parentDataField: { name: 'parentid' }
+                },
+                id: 'id',
+                localData: generateordersdata()
+            };         
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(2);
+            },
+            dateListOnChange: function (event) {
+                let index = event.args.index;
+                switch (index) {
+                    case 0:
+                        this.$refs.myTreeGrid.setColumnProperty('date', 'cellsFormat', 'd');
+                        break;
+                    case 1:
+                        this.$refs.myTreeGrid.setColumnProperty('date', 'cellsFormat', 'D');
+                        break;
+                    case 2:
+                        this.$refs.myTreeGrid.setColumnProperty('date', 'cellsFormat', 'f');
+                        break;
+                    case 3:
+                        this.$refs.myTreeGrid.setColumnProperty('date', 'cellsFormat', 'F');
+                        break;
+                    case 4:
+                        this.$refs.myTreeGrid.setColumnProperty('date', 'cellsFormat', 'Y');
+                        break;
+                    case 5:
+                        this.$refs.myTreeGrid.setColumnProperty('date', 'cellsFormat', 'M');
+                        break;
+                    case 6:
+                        this.$refs.myTreeGrid.setColumnProperty('date', 'cellsFormat', 'yyyy-MM-dd HH:mm:ss');
+                        break;
+                }
+            },
+            priceListOnChange: function (event) {
+                let index = event.args.index;
+                switch (index) {
+                    case 0:
+                        this.$refs.myTreeGrid.setColumnProperty('price', 'cellsFormat', 'n');
+                        break;
+                    case 1:
+                        this.$refs.myTreeGrid.setColumnProperty('price', 'cellsFormat', 'f1');
+                        break;
+                    case 2:
+                        this.$refs.myTreeGrid.setColumnProperty('price', 'cellsFormat', 'f2');
+                        break;
+                    case 3:
+                        this.$refs.myTreeGrid.setColumnProperty('price', 'cellsFormat', 'f3');
+                        break;
+                    case 4:
+                        this.$refs.myTreeGrid.setColumnProperty('price', 'cellsFormat', 'c1');
+                        break;
+                    case 5:
+                        this.$refs.myTreeGrid.setColumnProperty('price', 'cellsFormat', 'c2');
+                        break;
+                    case 6:
+                        this.$refs.myTreeGrid.setColumnProperty('price', 'cellsFormat', 'c3');
+                        break;
+                    case 7:
+                        this.$refs.myTreeGrid.setColumnProperty('price', 'cellsFormat', 'p');
+                        break;
+                    case 8:
+                        this.$refs.myTreeGrid.setColumnProperty('price', 'cellsFormat', 'p2');
+                        break;
+                    case 9:
+                        this.$refs.myTreeGrid.setColumnProperty('price', 'cellsFormat', 'p3');
+                        break;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/columnformatting/main.js b/treegrid/columnformatting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/columnformatting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/columnformatting/package.json b/treegrid/columnformatting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/columnformatting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/columnhierarchicalcheckboxes/App.vue b/treegrid/columnhierarchicalcheckboxes/App.vue
new file mode 100644
index 00000000..31ffb789
--- /dev/null
+++ b/treegrid/columnhierarchicalcheckboxes/App.vue
@@ -0,0 +1,93 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+        :width="width"
+        :checkboxes="true"
+        :hierarchicalCheckboxes="true"
+        :altRows="true"
+        :ready="ready"
+        :columns="columns"
+        :source="dataAdapter">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: "Name", align: "center", dataField: "name", width: 350 },
+                    { text: "Budget", cellsAlign: "center", align: "center", dataField: "budget", cellsFormat: "c2", width: 300 },
+                    { text: "Location", dataField: "location", cellsAlign: "center", align: "center" }                
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            let data = [
+                {
+                    "id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas",
+                    "children":
+                    [
+                        {
+                            "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio",
+                            "children":
+                            [
+                                { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio" },
+                                {
+                                    "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio",
+                                    "children":
+                                    [
+                                        { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio" },
+                                        { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio" },
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami",
+                            "children":
+                            [
+                                { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami" },
+                                { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami" },
+                                { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami" }
+                            ]
+                        },
+                        { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston" }
+                    ]
+                }
+            ];
+            // prepare the data
+            this.source = {
+                dataType: "json",
+                dataFields: [
+                    { name: "name", type: "string" },
+                    { name: "budget", type: "number" },
+                    { name: "id", type: "number" },
+                    { name: "children", type: "array" },
+                    { name: "location", type: "string" }
+                ],
+                hierarchy:
+                    {
+                        root: "children"
+                    },
+                localData: data,
+                id: "id"
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(1);
+                this.$refs.myTreeGrid.expandRow(2);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/columnhierarchicalcheckboxes/main.js b/treegrid/columnhierarchicalcheckboxes/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/columnhierarchicalcheckboxes/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/columnhierarchicalcheckboxes/package.json b/treegrid/columnhierarchicalcheckboxes/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/columnhierarchicalcheckboxes/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/columnicons/App.vue b/treegrid/columnicons/App.vue
new file mode 100644
index 00000000..dc6f1049
--- /dev/null
+++ b/treegrid/columnicons/App.vue
@@ -0,0 +1,90 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+        :width="width"
+        :icons="true"
+        :ready="ready"
+        :columns="columns"
+        :columnGroups="columnGroups"
+        :source="dataAdapter">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source, {
+                    beforeLoadComplete: (records) => {
+                        for (let i = 0; i < records.length; i++) {
+                            let imgUrl = '../../../images/' + records[i].FirstName.toLowerCase() + '.png';
+                            records[i].icon = imgUrl;
+                        }
+                        return records;
+                    }
+                }),
+                columns: [
+                    { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
+                    { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 150 },
+                    { text: 'Title', dataField: 'Title', width: 160 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Address', dataField: 'Address', width: 250 },
+                    { text: 'City', dataField: 'City', width: 120 },
+                    { text: 'Country', dataField: 'Country' }
+                ],
+                columnGroups: [
+                    { text: 'Name', name: 'Name' }
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            let employees = [{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }];
+            
+            // prepare the data
+            this.source = {
+                dataType: "json",
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'ReportsTo', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                {
+                    keyDataField: { name: 'EmployeeID' },
+                    parentDataField: { name: 'ReportsTo' }
+                },
+                id: 'EmployeeID',
+                localData: employees
+            };
+        }, 
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(2);
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-tree-grid-icon, .jqx-tree-grid-icon-size {
+        width: 40px;
+        height: 40px;
+    }
+    .jqx-tree-grid-title, .jqx-tree-grid-collapse-button, .jqx-tree-grid-expand-button {
+        height: 30px;
+        line-height: 40px;
+    }
+</style>
diff --git a/treegrid/columnicons/main.js b/treegrid/columnicons/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/columnicons/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/columnicons/package.json b/treegrid/columnicons/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/columnicons/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/columnreorder/App.vue b/treegrid/columnreorder/App.vue
new file mode 100644
index 00000000..6a34582e
--- /dev/null
+++ b/treegrid/columnreorder/App.vue
@@ -0,0 +1,92 @@
+<template>
+        <JqxTreeGrid ref="myTreeGrid"
+            :width="width"
+            :columnsReorder="true"
+            :altRows="true"
+            :ready="ready"
+            :columns="columns"
+            :source="dataAdapter">
+        </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),                
+                columns: [
+                    { text: "Name", dataField: "name", width: 250 },
+                    { text: "Budget", dataField: "budget", cellsFormat: "c2", width: 250 },
+                    { text: "Location", dataField: "location" }                
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            let data = [
+               {
+                    "id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas",
+                    "children":
+                    [
+                        {
+                            "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio",
+                            "children":
+                            [
+                                { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio" },
+                                {
+                                    "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio",
+                                    "children":
+                                    [
+                                        { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio" },
+                                        { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio" },
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami",
+                            "children":
+                            [
+                                { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami" },
+                                { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami" },
+                                { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami" }
+                            ]
+                        },
+                        { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston" }
+                    ]
+                }
+            ];
+            // prepare the data
+            this.source = {
+                dataType: "json",
+                dataFields: [
+                    { name: "name", type: "string" },
+                    { name: "budget", type: "number" },
+                    { name: "id", type: "number" },
+                    { name: "children", type: "array" },
+                    { name: "location", type: "string" }
+                ],
+                hierarchy:
+                    {
+                        root: "children"
+                    },
+                localData: data,
+                id: "id"
+            };            
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(1);
+                this.$refs.myTreeGrid.expandRow(2);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/columnreorder/main.js b/treegrid/columnreorder/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/columnreorder/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/columnreorder/package.json b/treegrid/columnreorder/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/columnreorder/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/columnresize/App.vue b/treegrid/columnresize/App.vue
new file mode 100644
index 00000000..0da0878b
--- /dev/null
+++ b/treegrid/columnresize/App.vue
@@ -0,0 +1,92 @@
+<template>
+        <JqxTreeGrid ref="myTreeGrid"
+            :width="width"
+            :columnsResize="true"
+            :altRows="true"
+            :ready="ready"
+            :columns="columns"
+            :source="dataAdapter">
+        </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: "Name", align: "center", dataField: "name", width: 300 },
+                    { text: "Budget", cellsAlign: "center", align: "center", dataField: "budget", cellsFormat: "c2", width: 300 },
+                    { text: "Location", dataField: "location", cellsAlign: "center", align: "center", resizable: false }                
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            let data = [
+               {
+                   "id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas",
+                   "children":
+                    [
+                        {
+                            "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio",
+                            "children":
+                            [
+                                { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio" },
+                                {
+                                    "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio",
+                                    "children":
+                                    [
+                                        { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio" },
+                                        { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio" },
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami",
+                            "children":
+                            [
+                                { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami" },
+                                { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami" },
+                                { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami" }
+                            ]
+                        },
+                        { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston" }
+                    ]
+               }
+            ];
+            // prepare the data
+            this.source = {
+                dataType: "json",
+                dataFields: [
+                    { name: "name", type: "string" },
+                    { name: "budget", type: "number" },
+                    { name: "id", type: "number" },
+                    { name: "children", type: "array" },
+                    { name: "location", type: "string" }
+                ],
+                hierarchy:
+                    {
+                        root: "children"
+                    },
+                localData: data,
+                id: "id"
+            };
+        },
+        methods: {            
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(1);
+                this.$refs.myTreeGrid.expandRow(2);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/columnresize/main.js b/treegrid/columnresize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/columnresize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/columnresize/package.json b/treegrid/columnresize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/columnresize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/columnshierarchy/App.vue b/treegrid/columnshierarchy/App.vue
new file mode 100644
index 00000000..d77e18fe
--- /dev/null
+++ b/treegrid/columnshierarchy/App.vue
@@ -0,0 +1,95 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+        :altRows="true"
+        :columnsResize="true"
+        :ready="ready"
+        :columns="columns"
+        :columnGroups="columnGroups"
+        :source="dataAdapter">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: "Name", columnGroup: "JSTCorp", align: "center", dataField: "name", width: 300 },
+                    { text: "Budget", columnGroup: "JSTCorp", cellsAlign: "center", align: "center", dataField: "budget", cellsFormat: "c2", width: 250 },
+                    { text: "Location", columnGroup: "JSTCorp", dataField: "location", cellsAlign: "center", align: "center", width: 250 }                
+                ],
+                columnGroups: [
+                    { text: "JST Corp.", name: "JSTCorp", align: "center" }
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            let data = [
+	            {
+	                "id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas",
+	                "children":
+                    [
+                        {
+                            "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio",
+                            "children":
+                            [
+                                { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio" },
+                                {
+                                    "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio",
+                                    "children":
+                                    [
+                                        { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio" },
+                                        { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio" },
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami",
+                            "children":
+                            [
+                                { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami" },
+                                { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami" },
+                                { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami" }
+                            ]
+                        },
+                        { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston" }
+                    ]
+	            }
+            ];
+
+            // prepare the data
+            this.source = {
+                dataType: "json",
+                 dataFields: [
+                      { name: "name", type: "string" },
+                      { name: "budget", type: "number" },
+                      { name: "id", type: "number" },
+                      { name: "children", type: "array" },
+                      { name: "location", type: "string" }
+                 ],
+                 hierarchy:
+                     {
+                         root: "children"
+                     },
+                 localData: data,
+                 id: "id"
+            };                  
+        },
+        methods: {            
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(1);
+                this.$refs.myTreeGrid.expandRow(2);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/columnshierarchy/main.js b/treegrid/columnshierarchy/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/columnshierarchy/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/columnshierarchy/package.json b/treegrid/columnshierarchy/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/columnshierarchy/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/columnsmallicons/App.vue b/treegrid/columnsmallicons/App.vue
new file mode 100644
index 00000000..db810e5a
--- /dev/null
+++ b/treegrid/columnsmallicons/App.vue
@@ -0,0 +1,116 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+        :width="width"
+        :sortable="true"
+        :icons="true"
+        :ready="ready"
+        :columns="columns"
+        :source="dataAdapter">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'FirstName', dataField: 'FirstName', width: 200 },
+                    { text: 'LastName', dataField: 'LastName', width: 200 },
+                    { text: 'Title', dataField: 'Title', width: 200 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Address', dataField: 'Address', width: 250 },
+                    { text: 'City', dataField: 'City', width: 100 },
+                    {
+                        text: 'Country', dataField: 'Country', width: 63,
+                        cellsRenderer: (rowKey, dataField, value, data) => {
+                            switch (value) {
+                                case "USA":
+                                    return "<div style='margin: 0px 20px;'><img style='margin-top: 2px;' width='16' height='16' src='../../../images/usa.png'/></div>";
+                                case "UK":
+                                    return "<div style='margin: 0px 20px;'><img style='margin-top: 2px;' width='16' height='16' src='../../../images/uk.png'/></div>";
+                            }
+                        }
+                    }
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            let employees = [
+                {
+                    "EmployeeID": 2, "icon": '../../../images/oldboss.png', "FirstName": "Andrew", "LastName": "Fuller", "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way", "expanded": "true",
+                    "children":
+                    [
+                        { "EmployeeID": 8, "icon": '../../../images/woman.png', "FirstName": "Laura", "LastName": "Callahan", "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
+                        { "EmployeeID": 1, "icon": '../../../images/woman.png', "FirstName": "Nancy", "LastName": "Davolio", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1968-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
+                        { "EmployeeID": 3, "icon": '../../../images/woman.png', "FirstName": "Janet", "LastName": "Leverling", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
+                        { "EmployeeID": 4, "icon": '../../../images/woman.png', "FirstName": "Margaret", "LastName": "Peacock", "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1967-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
+                        {
+                            "EmployeeID": 5, "icon": '../../../images/boss.png', "FirstName": "Steven", "LastName": "Buchanan", "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill", "expanded": "true",
+                            "children":
+                            [
+                                { "EmployeeID": 6, "icon": '../../../images/asian.png', "FirstName": "Michael", "LastName": "Suyama", "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
+                                { "EmployeeID": 7, "icon": '../../../images/person.png', "FirstName": "Robert", "LastName": "King", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
+                                { "EmployeeID": 9, "icon": '../../../images/woman.png', "FirstName": "Anne", "LastName": "Dodsworth", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
+                            ]
+                        },
+                        {
+                            "EmployeeID": 10, "icon": '../../../images/asian.png', "FirstName": "Fumi", "LastName": "Jinushi", "Country": "UK", "Title": "Sales Manager", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1954-02-03 00:00:00", "City": "London", "Address": "14 Garrett Hill",
+                            "children":
+                            [
+                                { "EmployeeID": 11, "icon": '../../../images/person.png', "FirstName": "Michael", "LastName": "Davidson", "Country": "UK", "Title": "Sales Representative", "HireDate": "1996-10-17 00:00:00", "BirthDate": "1973-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
+                                { "EmployeeID": 12, "icon": '../../../images/person.png', "FirstName": "Peter", "LastName": "Smith", "Country": "UK", "Title": "Sales Representative", "HireDate": "1998-01-02 00:00:00", "BirthDate": "1970-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
+                            ]
+                        },
+                        { "EmployeeID": 13, "icon": '../../../images/person.png', "FirstName": "Chris", "LastName": "Ferguson", "Country": "USA", "Title": "Sales Representative", "HireDate": "2009-05-03 00:00:00", "BirthDate": "1967-09-19 00:00:00", "City": "Redmond", "Address": "4115 Old Redmond Rd." },
+                        { "EmployeeID": 14, "icon": '../../../images/person.png', "FirstName": "Antoni", "LastName": "Brooke", "Country": "USA", "Title": "Sales Representative", "HireDate": "2010-05-03 00:00:00", "BirthDate": "1985-09-19 00:00:00", "City": "Redmond", "Address": "4210 Old Redmond Rd." },
+                    ]
+                }
+            ];
+            
+            // prepare the data
+            this.source = {
+                dataType: "json",
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'icon', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'children', type: 'array' },
+                    { name: 'expanded', type: 'bool' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                {
+                    root: 'children'
+                },
+                id: 'EmployeeID',
+                localData: employees
+            };
+        }, 
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(2);
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-tree-grid-icon, .jqx-tree-grid-icon-size {
+        width: 16px;
+        height: 16px;
+    }
+</style>
diff --git a/treegrid/columnsmallicons/main.js b/treegrid/columnsmallicons/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/columnsmallicons/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/columnsmallicons/package.json b/treegrid/columnsmallicons/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/columnsmallicons/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/commandcolumn/App.vue b/treegrid/commandcolumn/App.vue
new file mode 100644
index 00000000..b63fe5ce
--- /dev/null
+++ b/treegrid/commandcolumn/App.vue
@@ -0,0 +1,170 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid" @rowClick="rowClick($event)"
+                 :width="width" :altRows="true" :autoRowHeight="true"
+                 :editSettings="editSettings" :ready="ready" :rendered="rendered"
+                 :columns="columns" :source="dataAdapter">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                editSettings: {
+                    saveOnPageChange: true,
+                    saveOnBlur: true,
+                    saveOnSelectionChange: false,
+                    cancelOnEsc: true,
+                    saveOnEnter: true,
+                    editOnDoubleClick: false,
+                    editOnF2: false
+                },
+                columns: [
+                    { text: 'ID', editable: false, dataField: 'id', width: 150 },
+                    { text: 'Name', dataField: 'name', width: 250 },
+                    {
+                        text: 'Budget', align: 'right', cellsAlign: 'right', cellsFormat: 'c2', dataField: 'budget', width: 150
+                    },
+                    { text: 'Location', dataField: 'location', width: 130 },
+                    {
+                        text: 'Edit', cellsAlign: 'center', align: "center", columnType: 'none', editable: false, sortable: false, dataField: null, cellsRenderer: (row, column, value) => {
+                            return `<div data-row='` + row + `' class='editButton' style='margin-left: 4em; float: left'></div>
+                                    <div data-row='` + row + `' class='cancelButton' style='display: none; float: left; margin-left: 1em'></div>`;
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            let data = [
+                {
+                    "id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas",
+                    "children":
+                        [
+                            {
+                                "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio",
+                                "children":
+                                    [
+                                        { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio" },
+                                        {
+                                            "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio",
+                                            "children":
+                                                [
+                                                    { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio" },
+                                                    { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio" },
+                                                ]
+                                        }
+                                    ]
+                            },
+                            {
+                                "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami",
+                                "children":
+                                    [
+                                        { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami" },
+                                        { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami" },
+                                        { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami" }
+                                    ]
+                            },
+                            { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston" }
+                        ]
+                }
+            ];
+            // prepare the data
+            this.source = {
+                dataType: "json",
+                dataFields: [
+                    { name: "name", type: "string" },
+                    { name: "budget", type: "number" },
+                    { name: "id", type: "number" },
+                    { name: "children", type: "array" },
+                    { name: "location", type: "string" }
+                ],
+                hierarchy:
+                    {
+                        root: "children"
+                    },
+                localData: data,
+                id: "id"
+            };
+
+            this.rowKey = -1;
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandAll();
+            },
+            rendered: function () {
+                let uglyEditButtons = jqwidgets.createInstance('.editButton', 'jqxButton', { width: 60, height: 24, value: 'Edit' });
+                let flattenEditButtons = flatten(uglyEditButtons);
+
+                let uglyCancelButtons = jqwidgets.createInstance('.cancelButton', 'jqxButton', { width: 60, height: 24, value: 'Cancel' });
+                let flattenCancelButtons = flatten(uglyCancelButtons);
+
+                function flatten(arr) {
+                    if (arr.length) {
+                        return arr.reduce((flat, toFlatten) => {
+                            return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
+                        }, []);
+                    }
+                }
+
+                if (flattenEditButtons) {
+                    for (let i = 0; i < flattenEditButtons.length; i++) {
+                        flattenEditButtons[i].addEventHandler('click', (event) => {
+                            this.editClick(event);
+                        });
+                    }
+                }
+
+                if (flattenCancelButtons) {
+                    for (let i = 0; i < flattenCancelButtons.length; i++) {
+                        flattenCancelButtons[i].addEventHandler('click', (event) => {
+                            let rowKey = event.target.getAttribute('data-row');
+                            this.$refs.myTreeGrid.endRowEdit(rowKey, true);
+                        });
+                    }
+                }
+            },
+            rowClick: function (event) {
+                this.rowKey = event.args.key;
+            },
+            editClick: function (event) {
+                let editButtonsContainers = document.getElementsByClassName('editButton');
+                let cancelButtonsContainers = document.getElementsByClassName('cancelButton');
+
+                let value = event.target.innerText;
+                if (value === 'Edit') {
+                    this.$refs.myTreeGrid.beginRowEdit(this.rowKey.toString());
+
+                    for (let i = 0; i < editButtonsContainers.length; i++) {
+                        (editButtonsContainers[i]).style.marginLeft = '4em';
+                        (cancelButtonsContainers[i]).style.display = 'none';
+                    }
+
+                    (editButtonsContainers[this.rowKey - 1]).innerText = 'Save';
+                    (editButtonsContainers[this.rowKey - 1]).style.marginLeft = '1em';
+
+                    (cancelButtonsContainers[this.rowKey - 1]).style.display = 'inline-block';
+
+                } else {
+                    (editButtonsContainers[this.rowKey - 1]).innerText = 'Edit';
+                    (editButtonsContainers[this.rowKey - 1]).style.marginLeft = '4em';
+
+                    (cancelButtonsContainers[this.rowKey - 1]).style.display = 'none';
+
+                    this.$refs.myTreeGrid.endRowEdit(this.rowKey.toString());
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/commandcolumn/main.js b/treegrid/commandcolumn/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/commandcolumn/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/commandcolumn/package.json b/treegrid/commandcolumn/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/commandcolumn/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/conditionalformatting/App.vue b/treegrid/conditionalformatting/App.vue
new file mode 100644
index 00000000..3d295114
--- /dev/null
+++ b/treegrid/conditionalformatting/App.vue
@@ -0,0 +1,134 @@
+<template>
+        <JqxTreeGrid ref="treeGrid"
+                     :width="getWidth"
+                     :source="dataAdapter"
+                     :altRows="true"
+                     :selectionMode="'none'"
+                     :enableHover="false"
+                     :editable="true"
+                     :columns="columns"
+                     :ready="ready">
+        </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'ID', dataField: 'id', width: 150 },
+                    { text: 'Name', dataField: 'name', width: 250 },
+                    { text: 'Budget', align: 'right', cellClassName: this.cellClass, cellsAlign: 'right', cellsFormat: 'c2', dataField: 'budget', width: 200 },
+                    { text: 'Location', dataField: 'location' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const data = [{
+                'id': '1', 'name': 'Corporate Headquarters', 'budget': '1230000', 'location': 'Las Vegas',
+                'children':
+                    [
+                        {
+                            'id': '2', 'name': 'Finance Division', 'budget': '423000', 'location': 'San Antonio',
+                            'children':
+                                [
+                                    { 'id': '3', 'name': 'Accounting Department', 'budget': '113000', 'location': 'San Antonio' },
+                                    {
+                                        'id': '4', 'name': 'Investment Department', 'budget': '310000', 'location': 'San Antonio',
+                                        'children':
+                                            [
+                                                { 'id': '5', 'name': 'Banking Office', 'budget': '240000', 'location': 'San Antonio' },
+                                                { 'id': '6', 'name': 'Bonds Office', 'budget': '70000', 'location': 'San Antonio' },
+                                            ]
+                                    }
+                                ]
+                        },
+                        {
+                            'id': '7', 'name': 'Operations Division', 'budget': '600000', 'location': 'Miami',
+                            'children':
+                                [
+                                    { 'id': '8', 'name': 'Manufacturing Department', 'budget': '300000', 'location': 'Miami' },
+                                    { 'id': '9', 'name': 'Public Relations Department', 'budget': '200000', 'location': 'Miami' },
+                                    { 'id': '10', 'name': 'Sales Department', 'budget': '100000', 'location': 'Miami' }
+                                ]
+                        },
+                        { 'id': '11', 'name': 'Research Division', 'budget': '200000', 'location': 'Boston' }
+                    ]
+            }];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'name', type: 'string' },
+                    { name: 'budget', type: 'number' },
+                    { name: 'id', type: 'number' },
+                    { name: 'children', type: 'array' },
+                    { name: 'location', type: 'string' }
+                ],
+                hierarchy:
+                    {
+                        root: 'children'
+                    },
+                localData: data,
+                id: 'id'
+            };
+        },
+        methods: {
+            cellClass: function(row, dataField, cellText, rowData) {
+                let cellValue = rowData[dataField];
+                if (cellValue < 100000) {
+                    return 'min';
+                }
+                if (cellValue < 200000) {
+                    return 'minavg';
+                }
+                if (cellValue < 400000) {
+                    return 'avg';
+                }
+                return 'max';
+            },
+            ready: function () {
+                this.$refs.treeGrid.expandRow(1);
+                this.$refs.treeGrid.expandRow(2);
+                this.$refs.treeGrid.expandRow(7);
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    .max:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .max:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
+        color: black;
+        background-color: #63be7b;
+    }
+
+    .avg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .avg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
+        color: black;
+        background-color: #f8e984;
+    }
+
+    .minavg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .minavg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
+        color: black;
+        background-color: #f9806f;
+    }
+
+    .min:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .min:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
+        color: black;
+        background-color: #f8696b;
+    }
+</style>
\ No newline at end of file
diff --git a/treegrid/conditionalformatting/main.js b/treegrid/conditionalformatting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/conditionalformatting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/conditionalformatting/package.json b/treegrid/conditionalformatting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/conditionalformatting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/conditionalrendering/App.vue b/treegrid/conditionalrendering/App.vue
new file mode 100644
index 00000000..aafbfd75
--- /dev/null
+++ b/treegrid/conditionalrendering/App.vue
@@ -0,0 +1,137 @@
+<template>
+        <JqxTreeGrid ref="treeGrid"
+                     :width="getWidth"
+                     :source="dataAdapter"
+                     :altRows="true"                  
+                     :enableHover="false"
+                     :editable="true"
+                     :selectionMode="'none'"
+                     :columns="columns"
+                     :ready="ready">
+        </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'ID', dataField: 'id', width: 150 },
+                    { text: 'Name', dataField: 'name', width: 270 },
+                    { text: 'Location', dataField: 'location' },
+                    {
+                        text: 'Budget', align: 'right', cellsRenderer: this.cellsRendererFunction,
+                        cellsAlign: 'right', cellClassName: 'conditionalFormatting', cellsFormat: 'c2',
+                        dataField: 'budget', width: 200
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const data = [{
+                'id': '1', 'name': 'Corporate Headquarters', 'budget': '1230000', 'location': 'Las Vegas',
+                'children':
+                    [
+                        {
+                            'id': '2', 'name': 'Finance Division', 'budget': '423000', 'location': 'San Antonio',
+                            'children':
+                                [
+                                    { 'id': '3', 'name': 'Accounting Department', 'budget': '113000', 'location': 'San Antonio' },
+                                    {
+                                        'id': '4', 'name': 'Investment Department', 'budget': '310000', 'location': 'San Antonio',
+                                        'children':
+                                            [
+                                                { 'id': '5', 'name': 'Banking Office', 'budget': '240000', 'location': 'San Antonio' },
+                                                { 'id': '6', 'name': 'Bonds Office', 'budget': '70000', 'location': 'San Antonio' },
+                                            ]
+                                    }
+                                ]
+                        },
+                        {
+                            'id': '7', 'name': 'Operations Division', 'budget': '600000', 'location': 'Miami',
+                            'children':
+                                [
+                                    { 'id': '8', 'name': 'Manufacturing Department', 'budget': '300000', 'location': 'Miami' },
+                                    { 'id': '9', 'name': 'Public Relations Department', 'budget': '200000', 'location': 'Miami' },
+                                    { 'id': '10', 'name': 'Sales Department', 'budget': '100000', 'location': 'Miami' }
+                                ]
+                        },
+                        { 'id': '11', 'name': 'Research Division', 'budget': '200000', 'location': 'Boston' }
+                    ]
+            }];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'name', type: 'string' },
+                    { name: 'budget', type: 'number' },
+                    { name: 'id', type: 'number' },
+                    { name: 'children', type: 'array' },
+                    { name: 'location', type: 'string' }
+                ],
+                hierarchy:
+                    {
+                        root: 'children'
+                    },
+                localData: data,
+                id: 'id'
+            };
+        },
+        methods: {
+            cellsRendererFunction: function (row, dataField, cellValueInternal, rowData, cellText) {
+                let cellValue = rowData[dataField];
+                if (cellValue < 400000) {
+                    return "<span style='color: #e91b1b;'>" + cellText + "</span><span class='red-arrow-down'></span>";
+                }
+
+                return "<span style='color: #028b2b;'>" + cellText + "</span><span class='green-arrow-up'></span>";
+            },
+            ready: function () {
+                this.$refs.treeGrid.expandRow(1);
+                this.$refs.treeGrid.expandRow(2);
+                this.$refs.treeGrid.expandRow(7);
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    .green-arrow-up {
+        position: relative;
+        top: -10px;
+        width: 0;
+        height: 0;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-bottom: 5px solid #028b2b;
+    }
+
+    .red-arrow-down {
+        position: relative;
+        top: 10px;
+        width: 0;
+        height: 0;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 5px solid #e91b1b;
+    }
+
+    .conditionalFormatting {
+        background: white !important;
+    }
+</style>
\ No newline at end of file
diff --git a/treegrid/conditionalrendering/main.js b/treegrid/conditionalrendering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/conditionalrendering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/conditionalrendering/package.json b/treegrid/conditionalrendering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/conditionalrendering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/contextmenu/App.vue b/treegrid/contextmenu/App.vue
new file mode 100644
index 00000000..e3b3f084
--- /dev/null
+++ b/treegrid/contextmenu/App.vue
@@ -0,0 +1,108 @@
+<template>
+    <div>
+        <JqxTreeGrid ref="myTreeGrid"
+                     @contextmenu="myTreeGridOnContextmenu()" 
+                     @rowClick="myTreeGridOnRowClick($event)"
+                     :width="getWidth" 
+                     :source="dataAdapter" 
+                     :columns="columns" 
+                     :columnsResize="true" 
+                     :ready="ready">
+        </JqxTreeGrid>
+
+        <JqxMenu ref="myMenu" 
+                 @itemclick="myMenuOnItemClick($event)"
+                 :width="200" 
+                 :height="58" 
+                 :autoOpenPopup="false" 
+                 :mode="'popup'">
+            <ul>
+                <li>Edit Selected Row</li>
+                <li>Delete Selected Row</li>
+            </ul>
+        </JqxMenu>
+    </div>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid,
+            JqxMenu
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 200 },
+                    { text: 'LastName', dataField: 'LastName', width: 200 },
+                    { text: 'Department Name', dataField: 'DepartmentName', width: 200 },
+                    { text: 'Title', dataField: 'Title', width: 300 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Phone', dataField: 'Phone', cellsFormat: 'd', width: 120 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+          
+            this.source = {
+                dataType: 'csv',
+                dataFields: [
+                    { name: 'EmployeeKey', type: 'number' },
+                    { name: 'ParentEmployeeKey', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' },
+                    { name: 'Phone', type: 'string' },
+                    { name: 'Gender', type: 'string' },
+                    { name: 'DepartmentName', type: 'string' }
+                ],
+                hierarchy:
+                    {
+                        keyDataField: { name: 'EmployeeKey' },
+                        parentDataField: { name: 'ParentEmployeeKey' }
+                    },
+                id: 'EmployeeKey',
+                url: '../sampledata/employeesadv.csv'
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(32);
+                document.addEventListener('contextmenu', event => event.preventDefault());
+            },
+            myTreeGridOnContextmenu: function () {
+                return false;
+            },
+            myTreeGridOnRowClick: function(event) {
+                let args = event.args;
+                if (args.originalEvent.button == 2) {
+                    let scrollTop = window.scrollX;
+                    let scrollLeft = window.scrollY;
+                    this.$refs.myMenu.open(parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
+                    return false;
+                }
+            },
+            myMenuOnItemClick: function(event) {
+                let args = event.args;
+                let selection = this.$refs.myTreeGrid.getSelection();
+                let rowid = selection[0].uid;
+                if (args.innerHTML == 'Edit Selected Row') {
+                    this.$refs.myTreeGrid.beginRowEdit(rowid);
+                } else {
+                    this.$refs.myTreeGrid.deleteRow(rowid);
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/contextmenu/main.js b/treegrid/contextmenu/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/contextmenu/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/contextmenu/package.json b/treegrid/contextmenu/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/contextmenu/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/createComponent/App.vue b/treegrid/createComponent/App.vue
new file mode 100644
index 00000000..8398ce5b
--- /dev/null
+++ b/treegrid/createComponent/App.vue
@@ -0,0 +1,67 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid" :autoCreate="false">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        beforeCreate: function () {
+            this.source = {
+                dataType: "csv",
+                dataFields: [
+                    { name: 'EmployeeKey', type: 'number' },
+                    { name: 'ParentEmployeeKey', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' },
+                    { name: 'Phone', type: 'string' },
+                    { name: 'Gender', type: 'string' },
+                    { name: 'DepartmentName', type: 'string' }
+                ],
+                hierarchy:
+                    {
+                        keyDataField: { name: 'EmployeeKey' },
+                        parentDataField: { name: 'ParentEmployeeKey' }
+                    },
+                id: 'EmployeeKey',
+                url: '../sampledata/employeesadv.csv'
+            };
+        },
+        mounted: function () {
+            const settings = {
+                width: getWidth('treegrid'),
+                pageable: "true",
+                columnsResize: "true",
+                ready: this.ready,
+                source: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 200 },
+                    { text: 'LastName', dataField: 'LastName', width: 200 },
+                    { text: 'Department Name', dataField: 'DepartmentName', width: 150 },
+                    { text: 'Title', dataField: 'Title', width: 300 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Phone', dataField: 'Phone', cellsFormat: 'd', width: 120 }
+                ]
+            };
+
+            this.$refs.myTreeGrid.createComponent(settings);
+        },
+        methods: {
+            ready: function () {
+                // expand row with 'EmployeeKey = 32'
+                this.$refs.myTreeGrid.expandRow(32);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/createComponent/main.js b/treegrid/createComponent/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/createComponent/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/createComponent/package.json b/treegrid/createComponent/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/createComponent/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/csvdata/App.vue b/treegrid/csvdata/App.vue
new file mode 100644
index 00000000..e844ccf2
--- /dev/null
+++ b/treegrid/csvdata/App.vue
@@ -0,0 +1,68 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+        :width="width"
+        :height="300"
+        :pageable="true"
+        :columnsResize="true"
+        :ready="ready"
+        :columns="columns"
+        :source="dataAdapter">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 200 },
+                    { text: 'LastName', dataField: 'LastName', width: 200 },
+                    { text: 'Department Name', dataField: 'DepartmentName', width: 200 },
+                    { text: 'Title', dataField: 'Title'}
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            this.source = {
+                dataType: "csv",
+                dataFields: [
+                    { name: 'EmployeeKey', type: 'number' },
+                    { name: 'ParentEmployeeKey', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' },
+                    { name: 'Phone', type: 'string' },
+                    { name: 'Gender', type: 'string' },
+                    { name: 'DepartmentName', type: 'string' }
+                ],
+                hierarchy:
+                {
+                    keyDataField: { name: 'EmployeeKey' },
+                    parentDataField: { name: 'ParentEmployeeKey' }
+                },
+                id: 'EmployeeKey',
+                url: '../sampledata/employeesadv.csv'
+            };                  
+        },
+        methods: {
+            ready: function () {
+                // expand row with 'EmployeeKey = 32'
+                this.$refs.myTreeGrid.expandRow(32);
+                // expand row with 'EmployeeKey = 73'
+                this.$refs.myTreeGrid.expandRow(73);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/csvdata/main.js b/treegrid/csvdata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/csvdata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/csvdata/package.json b/treegrid/csvdata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/csvdata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/customeditors/App.vue b/treegrid/customeditors/App.vue
new file mode 100644
index 00000000..1880bc46
--- /dev/null
+++ b/treegrid/customeditors/App.vue
@@ -0,0 +1,132 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+                 :width="getWidth"
+                 :source="dataAdapter"
+                 :altRows="true"
+                 :autoRowHeight="true"
+                 :editable="true"
+                 :columns="columns"
+                 :ready="ready">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'ID', editable: false, dataField: 'id', width: 150 },
+                    {
+                        text: 'Name', dataField: 'name', width: 250, columnType: 'template',
+                        createEditor: (row, cellvalue, editor, cellText, width, height) => {
+                            // construct the editor. 
+                            let source = ['Corporate Headquarters', 'Finance Division', 'Accounting Department', 'Investment Department',
+                                'Banking Office', 'Bonds Office', 'Operations Division', 'Manufacturing Department',
+                                'Public Relations Department', 'Sales Department', 'Research Division'];
+                            editor.jqxDropDownList({ autoDropDownHeight: true, source: source, width: '100%', height: '100%' });
+                        },
+                        initEditor: (row, cellvalue, editor, celltext, width, height) => {
+                            // set the editor's current value. The callback is called each time the editor is displayed.
+                            editor.jqxDropDownList('selectItem', cellvalue);
+                        },
+                        getEditorValue: (row, cellvalue, editor) => {
+                            // return the editor's value.
+                            return editor.val();
+                        }
+                    },
+                    {
+                        text: 'Budget', align: 'right', cellsAlign: 'right', cellsFormat: 'c2', columnType: 'template', dataField: 'budget', width: 200,
+                        createEditor: (row, cellvalue, editor, cellText, width, height) => {
+                            // construct the editor. 
+                            editor.jqxSlider({
+                                showTicks: false, min: 0, max: 1250000, width: width, height: height, tooltip: true, tooltipFormatFunction: (value) => {
+                                    return jqx.formatNumber(value, 'c2');
+                                }
+                            });
+                        },
+                        initEditor: (row, cellvalue, editor, celltext, width, height) => {
+                            // set the editor's current value. The callback is called each time the editor is displayed.
+                            let value = parseInt(cellvalue);
+                            if (isNaN(value)) value = 0;
+                            editor.jqxSlider('setValue', value);
+                        },
+                        getEditorValue: (row, cellvalue, editor) => {
+                            // return the editor's value.
+                            return editor.val();
+                        }
+                    },
+                    { text: 'Location', dataField: 'location' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const data = [{
+                'id': '1', 'name': 'Corporate Headquarters', 'budget': '1230000', 'location': 'Las Vegas',
+                'children':
+                    [
+                        {
+                            'id': '2', 'name': 'Finance Division', 'budget': '423000', 'location': 'San Antonio',
+                            'children':
+                                [
+                                    { 'id': '3', 'name': 'Accounting Department', 'budget': '113000', 'location': 'San Antonio' },
+                                    {
+                                        'id': '4', 'name': 'Investment Department', 'budget': '310000', 'location': 'San Antonio',
+                                        'children':
+                                            [
+                                                { 'id': '5', 'name': 'Banking Office', 'budget': '240000', 'location': 'San Antonio' },
+                                                { 'id': '6', 'name': 'Bonds Office', 'budget': '70000', 'location': 'San Antonio' },
+                                            ]
+                                    }
+                                ]
+                        },
+                        {
+                            'id': '7', 'name': 'Operations Division', 'budget': '600000', 'location': 'Miami',
+                            'children':
+                                [
+                                    { 'id': '8', 'name': 'Manufacturing Department', 'budget': '300000', 'location': 'Miami' },
+                                    { 'id': '9', 'name': 'Public Relations Department', 'budget': '200000', 'location': 'Miami' },
+                                    { 'id': '10', 'name': 'Sales Department', 'budget': '100000', 'location': 'Miami' }
+                                ]
+                        },
+                        { 'id': '11', 'name': 'Research Division', 'budget': '200000', 'location': 'Boston' }
+                    ]
+            }];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'name', type: 'string' },
+                    { name: 'budget', type: 'number' },
+                    { name: 'id', type: 'number' },
+                    { name: 'children', type: 'array' },
+                    { name: 'location', type: 'string' }
+                ],
+                hierarchy:
+                    {
+                        root: 'children'
+                    },
+                localData: data,
+                id: 'id'
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(1);
+                this.$refs.myTreeGrid.expandRow(2);
+                this.$refs.myTreeGrid.expandRow(7);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/customeditors/main.js b/treegrid/customeditors/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/customeditors/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/customeditors/package.json b/treegrid/customeditors/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/customeditors/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/dataexport/App.vue b/treegrid/dataexport/App.vue
new file mode 100644
index 00000000..4a083aaa
--- /dev/null
+++ b/treegrid/dataexport/App.vue
@@ -0,0 +1,128 @@
+<template>
+    <div>
+        <JqxTreeGrid ref="treeGrid"
+                     :width="getWidth"
+                     :source="dataAdapter"
+                     :columns="columns"
+                     :ready="ready">
+        </JqxTreeGrid>
+
+        <div style="margin-top: 20px;">
+            <div style="float: left;">
+                <JqxButton @click="excelExportClick()">Export to Excel</JqxButton>
+                <br />
+                <br />
+                <JqxButton @click="xmlExportClick()">Export to XML</JqxButton>
+            </div>
+            <div style="float: left; margin-left: 10px;">
+                <JqxButton @click="csvExportClick()">Export to CSV</JqxButton>
+                <br />
+                <br />
+                <JqxButton @click="tsvExportClick()">Export to TSV</JqxButton>
+            </div>
+            <div style="float: left; margin-left: 10px;">
+                <JqxButton @click="htmlExportClick()">Export to HTML</JqxButton>
+                <br />
+                <br />
+                <JqxButton @click="jsonExportClick()">Export to JSON</JqxButton>
+            </div>
+            <div style="float: left; margin-left: 10px;">
+                <JqxButton @click="pdfExportClick()">Export to PDF</JqxButton>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', dataField: 'FirstName', width: 200 },
+                    { text: 'Last Name', dataField: 'LastName', width: 150 },
+                    { text: 'Title', dataField: 'Title', width: 160 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Address', dataField: 'Address', width: 250 },
+                    { text: 'City', dataField: 'City', width: 120 },
+                    { text: 'Country', dataField: 'Country', width: 120 } 
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const employees = [
+                { 'EmployeeID': 1, 'FirstName': 'Nancy', 'LastName': 'Davolio', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-05-01 00:00:00', 'BirthDate': '1948-12-08 00:00:00', 'City': 'Seattle', 'Address': '507 - 20th Ave. E.Apt. 2A' },
+                { 'EmployeeID': 2, 'FirstName': 'Andrew', 'LastName': 'Fuller', 'ReportsTo': null, 'Country': 'USA', 'Title': 'Vice President, Sales', 'HireDate': '1992-08-14 00:00:00', 'BirthDate': '1952-02-19 00:00:00', 'City': 'Tacoma', 'Address': '908 W. Capital Way' },
+                { 'EmployeeID': 3, 'FirstName': 'Janet', 'LastName': 'Leverling', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-04-01 00:00:00', 'BirthDate': '1963-08-30 00:00:00', 'City': 'Kirkland', 'Address': '722 Moss Bay Blvd.' },
+                { 'EmployeeID': 4, 'FirstName': 'Margaret', 'LastName': 'Peacock', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1993-05-03 00:00:00', 'BirthDate': '1937-09-19 00:00:00', 'City': 'Redmond', 'Address': '4110 Old Redmond Rd.' },
+                { 'EmployeeID': 5, 'FirstName': 'Steven', 'LastName': 'Buchanan', 'ReportsTo': 2, 'Country': 'UK', 'Title': 'Sales Manager', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1955-03-04 00:00:00', 'City': 'London', 'Address': '14 Garrett Hill' },
+                { 'EmployeeID': 6, 'FirstName': 'Michael', 'LastName': 'Suyama', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1963-07-02 00:00:00', 'City': 'London', 'Address': 'Coventry House Miner Rd.' },
+                { 'EmployeeID': 7, 'FirstName': 'Robert', 'LastName': 'King', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-01-02 00:00:00', 'BirthDate': '1960-05-29 00:00:00', 'City': 'London', 'Address': 'Edgeham Hollow Winchester Way' },
+                { 'EmployeeID': 8, 'FirstName': 'Laura', 'LastName': 'Callahan', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Inside Sales Coordinator', 'HireDate': '1994-03-05 00:00:00', 'BirthDate': '1958-01-09 00:00:00', 'City': 'Seattle', 'Address': '4726 - 11th Ave. N.E.' },
+                { 'EmployeeID': 9, 'FirstName': 'Anne', 'LastName': 'Dodsworth', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-11-15 00:00:00', 'BirthDate': '1966-01-27 00:00:00', 'City': 'London', 'Address': '7 Houndstooth Rd.' }
+            ];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'ReportsTo', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                    {
+                        keyDataField: { name: 'EmployeeID' },
+                        parentDataField: { name: 'ReportsTo' }
+                    },
+                id: 'EmployeeID',
+                localData: employees
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.treeGrid.expandRow(2);
+            },
+            excelExportClick: function() {
+                this.$refs.treeGrid.exportData('xls');
+            },
+            xmlExportClick: function() {
+                this.$refs.treeGrid.exportData('xml');
+            },
+            csvExportClick: function() {
+                this.$refs.treeGrid.exportData('csv');
+            },
+            tsvExportClick: function() {
+                this.$refs.treeGrid.exportData('tsv');
+            },
+            htmlExportClick: function() {
+                this.$refs.treeGrid.exportData('html');
+            },
+            jsonExportClick: function() {
+                this.$refs.treeGrid.exportData('json');
+            },
+            pdfExportClick: function() {
+                this.$refs.treeGrid.exportData('pdf');
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/dataexport/main.js b/treegrid/dataexport/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/dataexport/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/dataexport/package.json b/treegrid/dataexport/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/dataexport/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/datagrouping/App.vue b/treegrid/datagrouping/App.vue
new file mode 100644
index 00000000..a3eed980
--- /dev/null
+++ b/treegrid/datagrouping/App.vue
@@ -0,0 +1,75 @@
+<template>
+    <JqxTreeGrid ref="treeGrid"
+                 :width="getWidth"
+                 :source="dataAdapter"
+                 :pageable="true"
+                 :columnsResize="true"
+                 :altRows="true"
+                 :icons="icons"
+                 :columns="columns"
+                 :ready="ready">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';;
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'City', dataField: 'City', width: 250 },
+                    { text: 'Company Name', dataField: 'CompanyName', minWidth: 100, width: 200 },
+                    { text: 'Contact Name', dataField: 'ContactName', width: 150 },
+                    { text: 'Contact Title', dataField: 'ContactTitle', width: 300 },
+                    { text: 'Postal Code', dataField: 'PostalCode', width: 120 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
+                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' },
+                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle' },
+                    { name: 'City', map: 'm\\:properties>d\\:City' },
+                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode' },
+                    { name: 'Country', map: 'm\\:properties>d\\:Country' }
+                ],
+                hierarchy: {
+                    groupingDataFields: [
+                        { name: 'Country' }
+                    ]
+                },
+                root: 'entry',
+                record: 'content',
+                id: { name: 'CustomerID', map: 'm\\:properties>d\\:CustomerID' },
+                url: '../sampledata/customers.xml'
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.treeGrid.expandRow(0);
+            },
+            icons: function (rowKey, rowData) {
+                let level = rowData.level;
+                if (level == 0) {
+                    // each group row has a label member that contains the information displayed on the group row.
+                    let country = rowData.label;
+                    return '../images/' + $.trim(country.toLowerCase()) + '.png';
+                }
+                return false;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/datagrouping/main.js b/treegrid/datagrouping/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/datagrouping/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/datagrouping/package.json b/treegrid/datagrouping/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/datagrouping/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/dataprinting/App.vue b/treegrid/dataprinting/App.vue
new file mode 100644
index 00000000..cb431f64
--- /dev/null
+++ b/treegrid/dataprinting/App.vue
@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <JqxTreeGrid ref="treeGrid"
+                     :width="getWidth"
+                     :source="dataAdapter"
+                     :sortable="true"
+                     :exportSettings="{fileName: null}"
+                     :columns="columns"
+                     :ready="ready">
+        </JqxTreeGrid>
+        <div style="margin-top: 20px;">
+            <div style="float: left; margin-left: 10px;">
+                <JqxButton :width="80" @click="printClick()">Print</JqxButton>
+            </div>
+        </div>
+        </div>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid,
+            JqxButton
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'FirstName', dataField: 'FirstName', width: 200 },
+                    { text: 'LastName', dataField: 'LastName', width: 170 },
+                    { text: 'Title', dataField: 'Title', width: 160 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Address', dataField: 'Address', width: 250 },
+                    { text: 'City', dataField: 'City', width: 120 },
+                    { text: 'Country', dataField: 'Country' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const employees = [
+                { 'EmployeeID': 1, 'FirstName': 'Nancy', 'LastName': 'Davolio', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-05-01 00:00:00', 'BirthDate': '1948-12-08 00:00:00', 'City': 'Seattle', 'Address': '507 - 20th Ave. E.Apt. 2A' },
+                { 'EmployeeID': 2, 'FirstName': 'Andrew', 'LastName': 'Fuller', 'ReportsTo': null, 'Country': 'USA', 'Title': 'Vice President, Sales', 'HireDate': '1992-08-14 00:00:00', 'BirthDate': '1952-02-19 00:00:00', 'City': 'Tacoma', 'Address': '908 W. Capital Way' },
+                { 'EmployeeID': 3, 'FirstName': 'Janet', 'LastName': 'Leverling', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-04-01 00:00:00', 'BirthDate': '1963-08-30 00:00:00', 'City': 'Kirkland', 'Address': '722 Moss Bay Blvd.' },
+                { 'EmployeeID': 4, 'FirstName': 'Margaret', 'LastName': 'Peacock', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1993-05-03 00:00:00', 'BirthDate': '1937-09-19 00:00:00', 'City': 'Redmond', 'Address': '4110 Old Redmond Rd.' },
+                { 'EmployeeID': 5, 'FirstName': 'Steven', 'LastName': 'Buchanan', 'ReportsTo': 2, 'Country': 'UK', 'Title': 'Sales Manager', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1955-03-04 00:00:00', 'City': 'London', 'Address': '14 Garrett Hill' },
+                { 'EmployeeID': 6, 'FirstName': 'Michael', 'LastName': 'Suyama', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1963-07-02 00:00:00', 'City': 'London', 'Address': 'Coventry House Miner Rd.' },
+                { 'EmployeeID': 7, 'FirstName': 'Robert', 'LastName': 'King', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-01-02 00:00:00', 'BirthDate': '1960-05-29 00:00:00', 'City': 'London', 'Address': 'Edgeham Hollow Winchester Way' },
+                { 'EmployeeID': 8, 'FirstName': 'Laura', 'LastName': 'Callahan', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Inside Sales Coordinator', 'HireDate': '1994-03-05 00:00:00', 'BirthDate': '1958-01-09 00:00:00', 'City': 'Seattle', 'Address': '4726 - 11th Ave. N.E.' },
+                { 'EmployeeID': 9, 'FirstName': 'Anne', 'LastName': 'Dodsworth', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-11-15 00:00:00', 'BirthDate': '1966-01-27 00:00:00', 'City': 'London', 'Address': '7 Houndstooth Rd.' }
+            ];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'ReportsTo', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                    {
+                        keyDataField: { name: 'EmployeeID' },
+                        parentDataField: { name: 'ReportsTo' }
+                    },
+                id: 'EmployeeID',
+                localData: employees
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.treeGrid.expandRow(2);
+            },
+            printClick: function () {
+                let gridContent = this.$refs.treeGrid.exportData('html');
+                let newWindow = window.open('', '', 'width=800, height=500'),
+                    document = newWindow.document.open(),
+                    pageContent =
+                        '<!DOCTYPE html>' +
+                        '<html>' +
+                        '<head>' +
+                        '<meta charset="utf-8" />' +
+                        '<title>jQWidgets TreeGrid</title>' +
+                        '        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>' +
+                        '<body>' + gridContent + '</body></html>';
+                document.write(pageContent);
+                document.close();
+                newWindow.print();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/dataprinting/main.js b/treegrid/dataprinting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/dataprinting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/dataprinting/package.json b/treegrid/dataprinting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/dataprinting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/defaultfunctionality/App.vue b/treegrid/defaultfunctionality/App.vue
new file mode 100644
index 00000000..ec1b11d1
--- /dev/null
+++ b/treegrid/defaultfunctionality/App.vue
@@ -0,0 +1,68 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+        :width="width" 
+        :pageable="true"
+        :columnsResize="true"
+        :ready="ready"
+        :columns="columns"
+        :source="dataAdapter">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 200 },
+                    { text: 'LastName',  dataField: 'LastName', width: 200 },
+                    { text: 'Department Name', dataField: 'DepartmentName', width: 150 },
+                    { text: 'Title', dataField: 'Title', width: 300 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Phone', dataField: 'Phone', cellsFormat: 'd', width: 120 }
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            this.source = {
+                dataType: "csv",
+                dataFields: [
+                    { name: 'EmployeeKey', type: 'number' },
+                    { name: 'ParentEmployeeKey', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' },
+                    { name: 'Phone', type: 'string' },
+                    { name: 'Gender', type: 'string' },
+                    { name: 'DepartmentName', type: 'string' }
+                ],
+                hierarchy:
+                {
+                    keyDataField: { name: 'EmployeeKey' },
+                    parentDataField: { name: 'ParentEmployeeKey' }
+                },
+                id: 'EmployeeKey',
+                url: '../sampledata/employeesadv.csv'
+            };                  
+        },
+        methods: {
+            ready: function () {  
+                // expand row with 'EmployeeKey = 32'
+                this.$refs.myTreeGrid.expandRow(32);                
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/defaultfunctionality/main.js b/treegrid/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/defaultfunctionality/package.json b/treegrid/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/dialog/App.vue b/treegrid/dialog/App.vue
new file mode 100644
index 00000000..c9738d10
--- /dev/null
+++ b/treegrid/dialog/App.vue
@@ -0,0 +1,186 @@
+<template>
+    <div>
+        <JqxTreeGrid ref="myTreeGrid"
+            @rowDoubleClick="onRowDoubleClick($event)"
+            :width="width"
+            :sortable="true"
+            :altRows="true"
+            :ready="ready"
+            :columns="columns"
+            :source="dataAdapter">
+        </JqxTreeGrid>
+
+        <JqxWindow ref="dialog"
+            @close="onClose()"
+            :resizable="false"
+            :autoOpen="false"
+            :width="270">
+            <div>Edit Dialog</div>
+            <div style="overflow: hidden;">
+                <table style="table-layout: fixed; border-style: none;">
+                    <tr>
+                        <td align="right">Employee ID:
+                        </td>
+                        <td align="left">
+                            <input id="EmployeeID" type="text" readonly="true" disabled="disabled" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td align="right">Title:
+                        </td>
+                        <td align="left">
+                            <input id="Title" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td align="right">Country:
+                        </td>
+                        <td align="left">
+                            <input id="Country" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td align="right">Birth Date:</td>
+                        <td align="left">
+                            <div id="BirthDate"></div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="2" align="right">
+                            <br />
+                            <button id="save">Save</button>
+                            <button style="margin-left: 5px;" id="cancel">Cancel</button></td>
+                    </tr>
+                </table>
+            </div>
+        </JqxWindow>
+    </div>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
+    import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
+    import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
+    
+    export default {
+        components: {
+            JqxTreeGrid,
+            JqxWindow,
+            JqxInput,
+            JqxDateTimeInput
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Employee ID', editable: false, dataField: 'EmployeeID', width: 150 },
+                    { text: 'Title', dataField: 'Title', width: 250 },
+                    { text: 'Country', dataField: 'Country', width: 150 },
+                    { text: 'Bith Date', dataField: 'BirthDate', cellsAlign: 'right', align: 'right', cellsFormat: 'd' }
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            this.rowKey;
+
+            this.myCancelButton;
+            this.mySaveButton;
+            this.myEmployeeIdInput;
+            this.myTitleInput;
+            this.myCountryInput;
+            this.myBirthDateInput;
+
+            let employees = [{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }];
+            
+            // prepare the data
+            this.source = {
+                dataType: "json",
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'ReportsTo', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                {
+                    keyDataField: { name: 'EmployeeID' },
+                    parentDataField: { name: 'ReportsTo' }
+                },
+                id: 'EmployeeID',
+                localData: employees
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(2);
+                this.$refs.myTreeGrid.expandRow(5);
+
+                let buttonOptions = { height: 30, width: 80 };
+                let saveButton = document.getElementById('save');
+                let cancelButton = document.getElementById('cancel');
+                let employeeIdInput = document.getElementById('EmployeeID');
+                let titleInput = document.getElementById('Title');
+                let countryInput = document.getElementById('Country');
+                let birthDateInput = document.getElementById('BirthDate');
+                
+                let width = 150;
+                let height = 30;
+                let countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe");
+
+                this.myEmployeeIdInput = jqwidgets.createInstance(employeeIdInput, 'jqxInput', { disabled: true, width: width, height: height });
+                this.myTitleInput = jqwidgets.createInstance(titleInput, 'jqxInput', { width: width, height: height });
+                this.myCountryInput = jqwidgets.createInstance(countryInput, 'jqxInput', { source: countries, width: width, height: height });
+                this.myBirthDateInput = jqwidgets.createInstance(birthDateInput, 'jqxDateTimeInput', { formatString: 'd', width: width, height: height });
+                this.mySaveButton = jqwidgets.createInstance(saveButton, 'jqxButton', buttonOptions);
+                this.myCancelButton = jqwidgets.createInstance(cancelButton, 'jqxButton', buttonOptions);
+
+                this.myCancelButton.addEventHandler('click', (event) => {
+                    this.$refs.dialog.close();
+                });
+                
+                this.mySaveButton.addEventHandler('click', (event) => {
+                    if(!!this.rowKey) {
+                        let rowData = {
+                            EmployeeID: this.myEmployeeIdInput.val(),
+                            Title: this.myTitleInput.val(),
+                            Country: this.myCountryInput.val(),
+                            BirthDate: this.myBirthDateInput.val()
+                        };
+                        this.$refs.myTreeGrid.updateRow(this.rowKey, rowData)
+                        this.$refs.dialog.close();
+                    }
+                });
+
+            },
+            onClose: function () {
+                this.$refs.myTreeGrid.disabled = false;
+            },
+            onRowDoubleClick: function (event) {
+                let args = event.args;
+                let key = args.key;
+                let row = args.row;
+                // update the widgets inside jqxWindow.
+                this.$refs.dialog.setTitle("Edit Row: " + row.EmployeeID);
+                this.$refs.dialog.open();
+                this.rowKey = parseInt(key);
+                this.myEmployeeIdInput.val(row.EmployeeID);
+                this.myTitleInput.val(row.Title);
+                this.myCountryInput.val(row.Country);
+                this.myBirthDateInput.val(row.BirthDate);
+                // disable jqxTreeGrid.
+                this.$refs.myTreeGrid.disabled = true;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/dialog/main.js b/treegrid/dialog/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/dialog/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/dialog/package.json b/treegrid/dialog/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/dialog/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/filtering/App.vue b/treegrid/filtering/App.vue
new file mode 100644
index 00000000..e9a94995
--- /dev/null
+++ b/treegrid/filtering/App.vue
@@ -0,0 +1,71 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+                 :width="getWidth"
+                 :source="dataAdapter"
+                 :pageable="true"
+                 :columnsResize="true"
+                 :sortable="true"
+                 :filterable="true"
+                 :columns="columns"
+                 :ready="ready">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 200 },
+                    { text: 'LastName', dataField: 'LastName', width: 200 },
+                    { text: 'Department Name', dataField: 'DepartmentName', width: 150 },
+                    { text: 'Title', dataField: 'Title', width: 300 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Phone', dataField: 'Phone', cellsFormat: 'd', width: 120 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.source = {
+                dataType: 'csv',
+                dataFields: [
+                    { name: 'EmployeeKey', type: 'number' },
+                    { name: 'ParentEmployeeKey', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' },
+                    { name: 'Phone', type: 'string' },
+                    { name: 'Gender', type: 'string' },
+                    { name: 'DepartmentName', type: 'string' }
+                ],
+                hierarchy:
+                    {
+                        keyDataField: { name: 'EmployeeKey' },
+                        parentDataField: { name: 'ParentEmployeeKey' }
+                    },
+                id: 'EmployeeKey',
+                url: '../sampledata/employeesadv.csv'
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(32);
+                this.$refs.myTreeGrid.expandRow(112);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/filtering/main.js b/treegrid/filtering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/filtering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/filtering/package.json b/treegrid/filtering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/filtering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/filteringapi/App.vue b/treegrid/filteringapi/App.vue
new file mode 100644
index 00000000..9ff9af3d
--- /dev/null
+++ b/treegrid/filteringapi/App.vue
@@ -0,0 +1,207 @@
+<template>
+    <div>
+        <div style="float: left; margin-right: 20px;">
+            <div>Filter By:</div>
+
+            <JqxDropDownList ref="myDropDownList" 
+                             @select="myDropDownListOnSelect($event)"
+                             :width="100" 
+                             :selectedIndex="0" 
+                             :autoDropDownHeight="true" 
+                             :source="listSource">
+            </JqxDropDownList>
+
+            <div style="margin-top: 10px"></div>
+
+            <JqxListBox ref="myListBox" 
+                        @checkChange="myListBoxOnCheckChange($event)"
+                        :width="160" 
+                        :height="250" 
+                        :checkboxes="true">
+            </JqxListBox>
+
+            <div style="margin-top: 10px">
+                <JqxButton @click="applyBtnOnClick()">Apply Filter</JqxButton>
+                <JqxButton @click="clearBtnOnClick()">Clear Filter</JqxButton>
+            </div>
+        </div>
+
+        <JqxTreeGrid ref="myTreeGrid"
+                     :width="600" 
+                     :source="dataAdapter" 
+                     :columns="columns"
+                     :sortable="true" 
+                     :ready="ready">
+        </JqxTreeGrid>
+    </div>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
+    import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid,
+            JqxDropDownList,
+            JqxListBox,
+            JqxButton
+        },
+        data: function () {
+            return {
+                listSource: [
+                    { label: 'First Name', value: 'FirstName' },
+                    { label: 'Last Name', value: 'LastName' },
+                    { label: 'City', value: 'City' }
+                ],
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', dataField: 'FirstName', minWidth: 100, width: 200 },
+                    { text: 'Last Name', dataField: 'LastName', width: 200 },
+                    { text: 'City', dataField: 'City' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.handleCheckChange = true;
+
+            const employees = [
+                { 'EmployeeID': 1, 'FirstName': 'Nancy', 'LastName': 'Davolio', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-05-01 00:00:00', 'BirthDate': '1948-12-08 00:00:00', 'City': 'Seattle', 'Address': '507 - 20th Ave. E.Apt. 2A' },
+                { 'EmployeeID': 2, 'FirstName': 'Andrew', 'LastName': 'Fuller', 'ReportsTo': null, 'Country': 'USA', 'Title': 'Vice President, Sales', 'HireDate': '1992-08-14 00:00:00', 'BirthDate': '1952-02-19 00:00:00', 'City': 'Tacoma', 'Address': '908 W. Capital Way' },
+                { 'EmployeeID': 3, 'FirstName': 'Janet', 'LastName': 'Leverling', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-04-01 00:00:00', 'BirthDate': '1963-08-30 00:00:00', 'City': 'Kirkland', 'Address': '722 Moss Bay Blvd.' },
+                { 'EmployeeID': 4, 'FirstName': 'Margaret', 'LastName': 'Peacock', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1993-05-03 00:00:00', 'BirthDate': '1937-09-19 00:00:00', 'City': 'Redmond', 'Address': '4110 Old Redmond Rd.' },
+                { 'EmployeeID': 5, 'FirstName': 'Steven', 'LastName': 'Buchanan', 'ReportsTo': 2, 'Country': 'UK', 'Title': 'Sales Manager', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1955-03-04 00:00:00', 'City': 'London', 'Address': '14 Garrett Hill' },
+                { 'EmployeeID': 6, 'FirstName': 'Michael', 'LastName': 'Suyama', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1963-07-02 00:00:00', 'City': 'London', 'Address': 'Coventry House Miner Rd.' },
+                { 'EmployeeID': 7, 'FirstName': 'Robert', 'LastName': 'King', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-01-02 00:00:00', 'BirthDate': '1960-05-29 00:00:00', 'City': 'London', 'Address': 'Edgeham Hollow Winchester Way' },
+                { 'EmployeeID': 8, 'FirstName': 'Laura', 'LastName': 'Callahan', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Inside Sales Coordinator', 'HireDate': '1994-03-05 00:00:00', 'BirthDate': '1958-01-09 00:00:00', 'City': 'Seattle', 'Address': '4726 - 11th Ave. N.E.' },
+                { 'EmployeeID': 9, 'FirstName': 'Anne', 'LastName': 'Dodsworth', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-11-15 00:00:00', 'BirthDate': '1966-01-27 00:00:00', 'City': 'London', 'Address': '7 Houndstooth Rd.' }
+            ];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'ReportsTo', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                    {
+                        keyDataField: { name: 'EmployeeID' },
+                        parentDataField: { name: 'ReportsTo' }
+                    },
+                id: 'EmployeeID',
+                localData: employees
+            };
+        },
+        methods: {
+            ready: function() {
+                this.$refs.myTreeGrid.expandRow(2);
+                this.updatemyListBox('FirstName');
+            },
+            updatemyListBox: function(dataField) {
+                this.$refs.myTreeGrid.clearFilters();
+                let myListBoxAdapter = new jqx.dataAdapter(this.source,
+                    {
+                        uniqueDataFields: [dataField],
+                        async: false,
+                        autoBind: true
+                    });
+                let uniqueRecords = myListBoxAdapter.records;
+                uniqueRecords.splice(0, 0, '(Select All)');
+                this.$refs.myListBox.setOptions({ source: uniqueRecords, displayMember: dataField });
+                this.$refs.myListBox.checkAll();
+            },
+            applyFilter: function(dataField) {
+                this.$refs.myTreeGrid.clearFilters();
+                let filtertype = 'stringfilter';
+                // create a new group of filters.
+                let filtergroup = new jqx.filter();
+                // get listbox's checked items.
+                let checkedItems = this.$refs.myListBox.getCheckedItems();
+                if (checkedItems.length == 0) {
+                    let filter_or_operator = 1;
+                    let filtervalue = "Empty";
+                    let filtercondition = 'equal';
+                    let filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
+                    filtergroup.addfilter(filter_or_operator, filter);
+                }
+                else {
+                    for (let i = 0; i < checkedItems.length; i++) {
+                        let filter_or_operator = 1;
+                        // set filter's value.
+                        let filtervalue = checkedItems[i].label;
+                        // set filter's condition.
+                        let filtercondition = 'equal';
+                        // create new filter.
+                        let filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
+                        // add the filter to the filter group.
+                        filtergroup.addfilter(filter_or_operator, filter);
+                    }
+                }
+                // add the filters.
+                this.$refs.myTreeGrid.addFilter(dataField, filtergroup);
+                // apply the filters.
+                this.$refs.myTreeGrid.applyFilters();
+            },
+            myListBoxOnCheckChange: function(event) {
+                if (!this.handleCheckChange)
+                    return;
+
+                if (event.args.label != '(Select All)') {
+                    // update the state of the "Select All" listbox item.
+                    this.handleCheckChange = false;
+                    this.$refs.myListBox.checkIndex(0);
+                    let checkedItems = this.$refs.myListBox.getCheckedItems();
+                    let items = this.$refs.myListBox.getItems();
+                    if (checkedItems.length == 1) {
+                        this.$refs.myListBox.uncheckIndex(0);
+                    }
+                    else if (items.length != checkedItems.length) {
+                        this.$refs.myListBox.indeterminateIndex(0);
+                    }
+
+                    this.handleCheckChange = true;
+                }
+                else {
+                    // check/uncheck all items if "Select All" is clicked.
+                    this.handleCheckChange = false;
+                    if (event.args.checked) {
+                        this.$refs.myListBox.checkAll();
+                    }
+                    else {
+                        this.$refs.myListBox.uncheckAll();
+                    }
+                    this.handleCheckChange = true;
+                }
+            },
+            myDropDownListOnSelect: function(event) {
+                this.updatemyListBox(event.args.item.value);
+            },
+            applyBtnOnClick: function() {
+                let dataField = this.$refs.myDropDownList.getSelectedItem().value;
+                this.applyFilter(dataField);
+            },
+            clearBtnOnClick: function() {
+                this.$refs.myTreeGrid.clearFilters();
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button{
+        width: fit-content;
+        display: inline-block;
+        margin-right: 5px;
+    }
+</style>
\ No newline at end of file
diff --git a/treegrid/filteringapi/main.js b/treegrid/filteringapi/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/filteringapi/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/filteringapi/package.json b/treegrid/filteringapi/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/filteringapi/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/fluidsize/App.vue b/treegrid/fluidsize/App.vue
new file mode 100644
index 00000000..ec013e76
--- /dev/null
+++ b/treegrid/fluidsize/App.vue
@@ -0,0 +1,87 @@
+<template>
+    <JqxTreeGrid ref="treeGrid"
+                 :width="'80%'" 
+                 :source="dataAdapter" 
+                 :sortable="true"
+                 :columns="columns" 
+                 :ready="ready">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'FirstName', dataField: 'FirstName', width: 200 },
+                    { text: 'LastName', dataField: 'LastName', width: 120 },
+                    { text: 'Title', dataField: 'Title', width: 160 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Address', dataField: 'Address', width: 250 },
+                    { text: 'City', dataField: 'City', width: 120 },
+                    { text: 'Country', dataField: 'Country' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const employees = [
+                {
+                    'EmployeeID': 2, 'FirstName': 'Andrew', 'LastName': 'Fuller', 'Country': 'USA', 'Title': 'Vice President, Sales', 'HireDate': '1992-08-14 00:00:00', 'BirthDate': '1952-02-19 00:00:00', 'City': 'Tacoma', 'Address': '908 W. Capital Way', 'expanded': 'true',
+                    'children': [
+                        { 'EmployeeID': 8, 'FirstName': 'Laura', 'LastName': 'Callahan', 'Country': 'USA', 'Title': 'Inside Sales Coordinator', 'HireDate': '1994-03-05 00:00:00', 'BirthDate': '1958-01-09 00:00:00', 'City': 'Seattle', 'Address': '4726 - 11th Ave. N.E.' },
+                        { 'EmployeeID': 1, 'FirstName': 'Nancy', 'LastName': 'Davolio', 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-05-01 00:00:00', 'BirthDate': '1948-12-08 00:00:00', 'City': 'Seattle', 'Address': '507 - 20th Ave. E.Apt. 2A' },
+                        { 'EmployeeID': 3, 'FirstName': 'Janet', 'LastName': 'Leverling', 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-04-01 00:00:00', 'BirthDate': '1963-08-30 00:00:00', 'City': 'Kirkland', 'Address': '722 Moss Bay Blvd.' },
+                        { 'EmployeeID': 4, 'FirstName': 'Margaret', 'LastName': 'Peacock', 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1993-05-03 00:00:00', 'BirthDate': '1937-09-19 00:00:00', 'City': 'Redmond', 'Address': '4110 Old Redmond Rd.' },
+                        {
+                            'EmployeeID': 5, 'FirstName': 'Steven', 'LastName': 'Buchanan', 'Country': 'UK', 'Title': 'Sales Manager', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1955-03-04 00:00:00', 'City': 'London', 'Address': '14 Garrett Hill', 'expanded': 'true',
+                            'children': [
+                                { 'EmployeeID': 6, 'FirstName': 'Michael', 'LastName': 'Suyama', 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1963-07-02 00:00:00', 'City': 'London', 'Address': 'Coventry House Miner Rd.' },
+                                { 'EmployeeID': 7, 'FirstName': 'Robert', 'LastName': 'King', 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-01-02 00:00:00', 'BirthDate': '1960-05-29 00:00:00', 'City': 'London', 'Address': 'Edgeham Hollow Winchester Way' },
+                                { 'EmployeeID': 9, 'FirstName': 'Anne', 'LastName': 'Dodsworth', 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-11-15 00:00:00', 'BirthDate': '1966-01-27 00:00:00', 'City': 'London', 'Address': '7 Houndstooth Rd.' }
+                            ]
+                        }
+                    ]
+                }
+            ];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'children', type: 'array' },
+                    { name: 'expanded', type: 'bool' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                    {
+                        root: 'children'
+                    },
+                id: 'EmployeeID',
+                localData: employees
+            };
+        },
+        methods: {
+            ready: function() {
+                this.$refs.treeGrid.expandRow(2);
+            }         
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/fluidsize/main.js b/treegrid/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/fluidsize/package.json b/treegrid/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/headertemplate/App.vue b/treegrid/headertemplate/App.vue
new file mode 100644
index 00000000..ae686c34
--- /dev/null
+++ b/treegrid/headertemplate/App.vue
@@ -0,0 +1,134 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+        :width="width"
+        :sortable="true"
+        :icons="true"
+        :ready="ready"
+        :columns="columns"
+        :source="dataAdapter">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    {
+                        text: 'Name', dataField: 'Name', width: 250,
+                        renderer: (text, align, height) => {
+                            return "<div style='margin: 5px; margin-top: 7px;'><img width='16' height='16' style='float: left;' src='../../../images/card.png'/><span style='margin-left: 4px; float: left;'>Name</span><div style='clear: both;'></div></div>";
+                        }
+                    },
+                    {
+                        text: 'Job Title', dataField: 'Title', width: 250,
+                        renderer: (text, align, height) => {
+                            return "<div style='margin: 5px; margin-top: 7px;'><img width='16' height='16' style='float: left;' src='../../../images/administrator.png'/><span style='margin-left: 4px; float: left;'>Job Title</span><div style='clear: both;'></div></div>";
+                        }
+                    },
+                    {
+                        text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120,
+                        renderer: (text, align, height) => {
+                            return "<div style='margin: 5px; margin-top: 7px;'><img width='16' height='16' style='float: left;' src='../../../images/balloons.png'/><span style='margin-left: 4px; float: left;'>Birth Date</span><div style='clear: both;'></div></div>";
+                        }
+                    },
+                    {
+                        text: 'Country', dataField: 'Country',
+                        renderer: (text, align, height) => {
+                            return "<div style='margin: 5px; margin-top: 7px;'><img width='16' height='16' style='float: left;' src='../../../images/earth.png'/><span style='margin-left: 4px; float: left;'>Country</span><div style='clear: both;'></div></div>";
+                        },               
+                        cellsRenderer: (rowKey, dataField, value, data) => {
+                            let imgString = "<div><img width='16' height='16' style='float: left;' src='../../../images/" + value.toLowerCase() + ".png'/>";
+                            switch (value) {
+                                case "USA":
+                                    value = "United States";
+                                    break;
+                                case "UK":
+                                    value = "United Kingdom";
+                                    break;
+                            }
+                            let countryName = "<span style='margin-left: 4px; float: left;'>" + value + "</span><div style='clear: both;'></div></div>";
+                            return imgString + countryName;
+                        }
+                    }
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            let employees = [
+                {
+                    "EmployeeID": 2, "icon": '../../../images/oldboss.png', "Name": "Andrew Fuller", "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "expanded": "true",
+                    "children":
+                    [
+                        { "EmployeeID": 8, "icon": '../../../images/woman.png', "Name": "Laura Callahan", "Country": "Austria", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00"},
+                        { "EmployeeID": 1, "icon": '../../../images/woman.png', "Name": "Nancy Davolio", "Country": "Germany", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1968-12-08 00:00:00"},
+                        { "EmployeeID": 3, "icon": '../../../images/woman.png', "Name": "Janet Leverling", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00"},
+                        { "EmployeeID": 4, "icon": '../../../images/woman.png', "Name": "Margaret Peacock", "Country": "Canada", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1967-09-19 00:00:00" },
+                        {
+                            "EmployeeID": 5, "icon": '../../../images/boss.png', "Name": "Steven Buchanan", "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "expanded": "true",
+                            "children":
+                            [
+                                { "EmployeeID": 6, "icon": '../../../images/asian.png', "Name": "Michael Suyama", "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00" },
+                                { "EmployeeID": 7, "icon": '../../../images/person.png', "Name": "Robert King", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00"},
+                                { "EmployeeID": 9, "icon": '../../../images/woman.png', "Name": "Anne Dodsworth", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00" }
+                            ]
+                        },
+                        {
+                            "EmployeeID": 10, "icon": '../../../images/asian.png', "Name": "Wei Zhang", "Country": "China", "Title": "Sales Manager", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1954-02-03 00:00:00", "City": "London", "Address": "14 Garrett Hill",
+                            "children":
+                            [
+                                { "EmployeeID": 11, "icon": '../../../images/person.png', "Name": "Michael Wei", "Country": "China", "Title": "Sales Representative", "HireDate": "1996-10-17 00:00:00", "BirthDate": "1973-07-02 00:00:00" },
+                                { "EmployeeID": 12, "icon": '../../../images/person.png', "Name": "Peter Han", "Country": "China", "Title": "Sales Representative", "HireDate": "1998-01-02 00:00:00", "BirthDate": "1970-05-29 00:00:00" },
+                            ]
+                        },
+                        { "EmployeeID": 13, "icon": '../../../images/person.png', "Name": "Chris Ferguson", "Country": "Canada", "Title": "Sales Representative", "HireDate": "2009-05-03 00:00:00", "BirthDate": "1967-09-19 00:00:00" },
+                        { "EmployeeID": 14, "icon": '../../../images/person.png', "Name": "Antoni Brooke", "Country": "USA", "Title": "Sales Representative", "HireDate": "2010-05-03 00:00:00", "BirthDate": "1985-09-19 00:00:00" },
+                    ]
+                }
+            ];
+            
+            // prepare the data
+            this.source = {
+                dataType: "json",
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'Name', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'icon', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'children', type: 'array' },
+                    { name: 'expanded', type: 'bool' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                {
+                    root: 'children'
+                },
+                id: 'EmployeeID',
+                localData: employees
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(2);
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-tree-grid-icon, .jqx-tree-grid-icon-size {
+        width: 16px;
+        height: 16px;
+    }
+</style>
diff --git a/treegrid/headertemplate/main.js b/treegrid/headertemplate/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/headertemplate/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/headertemplate/package.json b/treegrid/headertemplate/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/headertemplate/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/inlinerow/App.vue b/treegrid/inlinerow/App.vue
new file mode 100644
index 00000000..fb8f5f60
--- /dev/null
+++ b/treegrid/inlinerow/App.vue
@@ -0,0 +1,240 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+        @rowSelect="onRowSelect($event)" 
+        @rowUnselect="onRowUnselect($event)"
+        @rowEndEdit="onRowEndEdit($event)" 
+        @rowBeginEdit="onRowBeginEdit($event)"
+        :width="width"
+        :pageable="true"
+        :editable="true"
+        :showToolbar="true"
+        :altRows="true"
+        :pagerButtonsCount="8"
+        :toolbarHeight="35"
+        :ready="ready"        
+        :renderToolbar="renderToolbar"
+        :columns="columns"
+        :source="dataAdapter">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+    
+    export default {
+        components: {
+            JqxTreeGrid,
+            JqxButton
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),                
+                columns: [
+                    { text: 'Location Name', dataField: "Name", align: 'center', width: '50%' },
+                    { text: 'Population', dataField: "Population", align: 'right', cellsAlign: 'right', width: '50%' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.rowKey = null;        
+            this.newRowID = null;
+            this.myAddButton;
+            this.myEditButton;
+            this.myDeleteButton;
+            this.myCancelButton;
+            this.myUpdateButton;
+            
+            // prepare the data
+            this.source = {
+                dataType: "tab",
+                dataFields: [
+                    { name: "Id", type: "number" },
+                    { name: "Name", type: "string" },
+                    { name: "ParentID", type: "number" },
+                    { name: "Population", type: "number" }
+                ],
+                hierarchy:
+                {
+                    keyDataField: { name: 'Id' },
+                    parentDataField: { name: 'ParentID' }
+                },
+                id: 'Id',
+                url: '../sampledata/locations.tsv',
+                addRow: (rowID, rowData, position, parentID, commit) => {
+                    // synchronize with the server - send insert command
+                    // call commit with parameter true if the synchronization with the server is successful 
+                    // and with parameter false if the synchronization failed.
+                    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
+                    commit(true);
+                    this.newRowID = rowID;
+                },
+                updateRow: (rowID, rowData, commit) => {
+                    // synchronize with the server - send update command
+                    // call commit with parameter true if the synchronization with the server is successful 
+                    // and with parameter false if the synchronization failed.
+                    commit(true);
+                },
+                deleteRow: (rowID, commit) => {
+                    // synchronize with the server - send delete command
+                    // call commit with parameter true if the synchronization with the server is successful 
+                    // and with parameter false if the synchronization failed.
+                    commit(true);
+                }
+            };
+        },
+        methods: {
+            ready: function () {
+                // called when the DatatreeGrid is loaded.
+            },
+            renderToolbar: function (toolBar) {
+                let toTheme = (className) => {
+                    if (theme == "") return className;
+                    return className + " " + className + "-" + theme;
+                };
+                let container = document.createElement('div');
+                container.style.cssText = 'overflow: hidden; position: relative; height: 100%; width: 100%;';
+
+                let createButton = (cssClass) => {
+                    const button = document.createElement('div');
+                    button.style.cssText = 'float: left; padding: 3px; margin: 2px;';
+                    const iconDiv = document.createElement('div');
+                    iconDiv.style.cssText = 'margin: 4px; width: 16px; height: 16px;';
+                    iconDiv.className = cssClass;
+                    button.appendChild(iconDiv);
+
+                    return button;
+                };
+
+                toolBar[0].appendChild(container);
+
+                let addButton = createButton(toTheme('jqx-icon-plus'));
+                let editButton = createButton(toTheme('jqx-icon-edit'));
+                let deleteButton = createButton(toTheme('jqx-icon-delete'));
+                let updateButton = createButton(toTheme('jqx-icon-save'));
+                let cancelButton = createButton(toTheme('jqx-icon-cancel'));
+                container.appendChild(addButton);
+                container.appendChild(editButton);
+                container.appendChild(deleteButton);
+                container.appendChild(updateButton);
+                container.appendChild(cancelButton);
+
+                const buttonOptions = { cursor: "pointer", disabled: true, enableDefault: false,  height: 25, width: 25 };
+                this.myAddButton = jqwidgets.createInstance(addButton, 'jqxButton', buttonOptions);
+                this.myEditButton = jqwidgets.createInstance(editButton, 'jqxButton', buttonOptions);
+                this.myDeleteButton = jqwidgets.createInstance(deleteButton, 'jqxButton', buttonOptions);
+                this.myUpdateButton = jqwidgets.createInstance(updateButton, 'jqxButton', buttonOptions);
+                this.myCancelButton = jqwidgets.createInstance(cancelButton, 'jqxButton', buttonOptions);
+
+                let tooltipOptions = { position: 'bottom', content: 'Add' };
+                const myAddButtonTooltip = jqwidgets.createInstance(addButton, 'jqxTooltip', tooltipOptions);
+                tooltipOptions.content = "Edit";
+                const myEditButtonTooltip = jqwidgets.createInstance(editButton, 'jqxTooltip', tooltipOptions);
+                tooltipOptions.content = "Delete";
+                const myDeleteButtonTooltip = jqwidgets.createInstance(deleteButton, 'jqxTooltip', tooltipOptions);
+                tooltipOptions.content = "Save Changes";
+                const myUpdateButtonTooltip = jqwidgets.createInstance(updateButton, 'jqxTooltip', tooltipOptions);
+                tooltipOptions.content = "Cancel";
+                const myCancelButtonTooltip = jqwidgets.createInstance(cancelButton, 'jqxTooltip', tooltipOptions);
+
+                this.myAddButton.addEventHandler('click', (event) => {
+                    if (!this.myAddButton.disabled) {
+                        this.$refs.myTreeGrid.expandRow(this.rowKey);
+                        // add new empty row.
+                        this.$refs.myTreeGrid.addRow(null, {}, 'first', this.rowKey);
+                        // select the first row and clear the selection.
+                        this.$refs.myTreeGrid.clearSelection();
+                        this.$refs.myTreeGrid.selectRow(this.newRowID);
+                        // edit the new row.
+                        this.$refs.myTreeGrid.beginRowEdit(this.newRowID);
+                        this.updateButtons('add');
+                    }
+                });
+                this.myCancelButton.addEventHandler('click', (event) => {
+                    if (!this.myCancelButton.disabled) {
+                        // cancel changes.
+                        this.$refs.myTreeGrid.endRowEdit(this.rowKey, true);
+                    }
+                });
+                this.myUpdateButton.addEventHandler('click', (event) => {
+                    if (!this.myUpdateButton.disabled) {
+                        // save changes.
+                        this.$refs.myTreeGrid.endRowEdit(this.rowKey, false);
+                    }
+                });
+                this.myEditButton.addEventHandler('click', (event) => {
+                    if (!this.myEditButton.disabled) {
+                        this.$refs.myTreeGrid.beginRowEdit(this.rowKey);
+                        this.updateButtons('edit');
+                    }
+                });
+                this.myDeleteButton.addEventHandler('click', (event) => {
+                    if (!this.myDeleteButton.disabled) {
+                        let selection = this.$refs.myTreeGrid.getSelection();
+                        if (selection.length > 1) {
+                            let keys = new Array();
+                            for (let i = 0; i < selection.length; i++) {
+                                keys.push(this.$refs.myTreeGrid.getKey(selection[i]));                                    
+                            }
+
+                            this.$refs.myTreeGrid.deleteRow(keys);
+                        } else {
+                            this.$refs.myTreeGrid.deleteRow(this.rowKey);
+                        }
+                        
+                        this.updateButtons('delete');
+                    }
+                });
+            },
+            updateButtons: function (action) {
+                switch (action) {
+                    case 'Select':
+                        this.myAddButton.setOptions({ disabled: false });
+                        this.myDeleteButton.setOptions({ disabled: false });
+                        this.myEditButton.setOptions({ disabled: false });
+                        this.myCancelButton.setOptions({ disabled: true });
+                        this.myUpdateButton.setOptions({ disabled: true });
+                        break;
+                    case 'Unselect':
+                        this.myAddButton.setOptions({ disabled: false });
+                        this.myDeleteButton.setOptions({ disabled: true });
+                        this.myEditButton.setOptions({ disabled: true });
+                        this.myCancelButton.setOptions({ disabled: true });
+                        this.myUpdateButton.setOptions({ disabled: true });
+                        break;
+                    case 'Edit':
+                        this.myAddButton.setOptions({ disabled: true });
+                        this.myDeleteButton.setOptions({ disabled: true });
+                        this.myEditButton.setOptions({ disabled: true });
+                        this.myCancelButton.setOptions({ disabled: false });
+                        this.myUpdateButton.setOptions({ disabled: false });
+                        break;
+                    case 'End Edit':
+                        this.myAddButton.setOptions({ disabled: false });
+                        this.myDeleteButton.setOptions({ disabled: false });
+                        this.myEditButton.setOptions({ disabled: false });
+                        this.myCancelButton.setOptions({ disabled: true });
+                        this.myUpdateButton.setOptions({ disabled: true });
+                        break;
+                }
+            },
+            onRowSelect(event) {
+                this.rowKey = event.args.key;
+                this.updateButtons('Select');
+            },
+            onRowUnselect(event) {
+                this.updateButtons('Unselect');
+            },
+            onRowEndEdit(event) {
+                this.updateButtons('End Edit');
+            },
+            onRowBeginEdit(event) {
+                this.updateButtons('Edit');
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/inlinerow/main.js b/treegrid/inlinerow/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/inlinerow/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/inlinerow/package.json b/treegrid/inlinerow/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/inlinerow/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/jsondata/App.vue b/treegrid/jsondata/App.vue
new file mode 100644
index 00000000..d99f9f5c
--- /dev/null
+++ b/treegrid/jsondata/App.vue
@@ -0,0 +1,84 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+        :width="width"
+        :sortable="true"
+        :ready="ready"
+        :columns="columns"
+        :columnGroups="columnGroups"
+        :source="dataAdapter">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
+                    { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
+                    { text: 'Title', dataField: 'Title', width: 160 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Address', dataField: 'Address', width: 250 },
+                    { text: 'City', dataField: 'City', width: 120 },
+                    { text: 'Country', dataField: 'Country' }
+                ],
+                columnGroups: [
+                    { text: 'Name', name: 'Name' }
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            let employees = [
+                { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
+                { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
+                { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
+                { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
+                { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
+                { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
+                { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
+                { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
+                { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
+            ];
+
+            // prepare the data
+            this.source = {
+                dataType: "json",
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'ReportsTo', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                {
+                    keyDataField: { name: 'EmployeeID' },
+                    parentDataField: { name: 'ReportsTo' }
+                },
+                id: 'EmployeeID',
+                localData: employees
+            };                  
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(2);                    
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/jsondata/main.js b/treegrid/jsondata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/jsondata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/jsondata/package.json b/treegrid/jsondata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/jsondata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/keyboardnavigation/App.vue b/treegrid/keyboardnavigation/App.vue
new file mode 100644
index 00000000..dae88554
--- /dev/null
+++ b/treegrid/keyboardnavigation/App.vue
@@ -0,0 +1,102 @@
+<template>
+    <div>
+        <JqxTreeGrid ref="treeGrid"
+                     :width="getWidth"
+                     :source="dataAdapter"
+                     :editable="true"
+                     :columns="columns"
+                     :ready="ready">
+        </JqxTreeGrid>
+        <div style="font-family: Verdana; font-size: 12px; width: 670px;">
+            <ul>
+                <li><b>Left Arrow</b> key - on an expanded record, collapses the record.</li>
+                <li><b>Left Arrow</b> key - on a collapsed or end record moves focus to the record's parent.</li>
+                <li><b>Right Arrow</b> key - on a collapsed record expands the record.</li>
+                <li><b>Right Arrow</b> key - on an expanded record, moves to the first child record, or does nothing on an end record.</li>
+                <li><b>Up Arrow</b> key is pressed - Selects the row above.</li>
+                <li><b>Down Arrow</b> key is pressed - Selects the row below.</li>
+                <li><b>Page Up/Down</b> is pressed - Navigate Up or Down with one page.</li>
+                <li><b>Home/End</b> is pressed - Navigate to the first or last row on the current page.</li>
+                <li><b>Enter</b> key is pressed - Saves the Edited Row.</li>
+                <li><b>Esc</b> key is pressed - Closes all Editors and Cancels the changes.</li>
+                <li><b>F2</b> key is pressed -  Enters edit mode for the currently selected row.</li>
+                <li><b>Shift+Arrow</b> key extends the selection.</li>
+                <li><b>Shift</b> extends the selection when an end user clicks on a row.</li>
+                <li><b>Ctrl</b> key is pressed - extends the selection when an end user clicks on a row. </li>
+                <li><b>Space</b> key is pressed - Checks/Unchecks the selected record(s). </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
+                    { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 150 },
+                    { text: 'Title', dataField: 'Title', width: 160 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Address', dataField: 'Address', width: 250 },
+                    { text: 'City', dataField: 'City', width: 120 },
+                    { text: 'Country', dataField: 'Country', width: 200 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const employees = [
+                { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
+                { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
+                { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
+                { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
+                { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
+                { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
+                { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
+                { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
+                { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
+            ];
+
+            this.source = {
+                dataType: "json",
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'ReportsTo', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                    {
+                        keyDataField: { name: 'EmployeeID' },
+                        parentDataField: { name: 'ReportsTo' }
+                    },
+                id: 'EmployeeID',
+                localData: employees
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.treeGrid.expandRow(2);
+                this.$refs.treeGrid.selectRow(2);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/keyboardnavigation/main.js b/treegrid/keyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/keyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/keyboardnavigation/package.json b/treegrid/keyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/keyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/localdata/App.vue b/treegrid/localdata/App.vue
new file mode 100644
index 00000000..3a0a9319
--- /dev/null
+++ b/treegrid/localdata/App.vue
@@ -0,0 +1,71 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+        :width="width"
+        :sortable="true"
+        :pageable="true"
+        :columnsResize="true"
+        :ready="ready"
+        :columns="columns"
+        :source="dataAdapter">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),                
+                columns: [
+                    { text: 'Order Name', dataField: "name", align: 'center', width: 200 },
+                    { text: 'Customer', dataField: "customer", align: 'center', width: 200 },
+                    { text: 'Price', dataField: "price", cellsFormat: "c2", align: 'center', cellsAlign: 'right', width: 80 },
+                    {
+                        text: 'Order Date', dataField: "date", align: 'center', cellsFormat: "dd-MMMM-yyyy hh:mm",
+                        cellsRenderer: (rowKey, column, cellValue, rowData, cellText) => {
+                            if (rowData.level === 0) {
+                                return this.dataAdapter.formatDate(cellValue, "dd-MMMM-yyyy");
+                            }
+
+                            return cellText;
+                        }
+                    }
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            this.source = {
+                dataType: "array",
+                dataFields: [
+                    { name: "name", type: "string" },
+                    { name: "quantity", type: "number" },
+                    { name: "id", type: "string" },
+                    { name: "parentid", type: "number" },
+                    { name: "price", type: "number" },
+                    { name: "date", type: "date" },
+                    { name: "customer", type: "string" }
+                ],
+                hierarchy:
+                {
+                    keyDataField: { name: 'id' },
+                    parentDataField: { name: 'parentid' }
+                },
+                id: 'id',
+                localData: generateordersdata()
+            };                  
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(2);                    
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/localdata/main.js b/treegrid/localdata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/localdata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/localdata/package.json b/treegrid/localdata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/localdata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/localization/App.vue b/treegrid/localization/App.vue
new file mode 100644
index 00000000..9c53e403
--- /dev/null
+++ b/treegrid/localization/App.vue
@@ -0,0 +1,73 @@
+<template>
+    <JqxTreeGrid ref="treeGrid"
+                 :width="getWidth"
+                 :source="dataAdapter"
+                 :pageable="true"
+                 :sortable="true"
+                 :pagerMode="'advanced'" 
+                 :localization="localization"
+                 :columns="columns"
+                 :ready="ready">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                localization: getLocalization('de'),
+                columns: [
+                    { text: 'Bestellung Name', dataField: 'name', align: 'center', width: 250 },
+                    { text: 'Auftraggeber', dataField: 'customer', align: 'center', width: 250 },
+                    { text: 'Preis', dataField: 'price', cellsFormat: 'c2', align: 'center', cellsAlign: 'right', width: 180 },
+                    {
+                        text: 'Bestellung Datum', dataField: 'date', align: 'center', cellsFormat: 'dd-MMMM-yyyy hh:mm',
+                        cellsRenderer: (rowKey, column, cellValue, rowData, cellText) => {
+                            if (rowData.level === 0) {
+                                return this.dataAdapter.formatDate(cellValue, 'dd-MMMM-yyyy');
+                            }
+                            return cellText;
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.source = {
+                dataType: 'array',
+                dataFields: [
+                    { name: 'name', type: 'string' },
+                    { name: 'quantity', type: 'number' },
+                    { name: 'id', type: 'number' },
+                    { name: 'parentid', type: 'number' },
+                    { name: 'price', type: 'number' },
+                    { name: 'date', type: 'date' },
+                    { name: 'customer', type: 'string' }
+                ],
+                hierarchy:
+                    {
+                        keyDataField: { name: 'id' },
+                        parentDataField: { name: 'parentid' }
+                    },
+                id: 'id',
+                localData: generateordersdata(10)
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.treeGrid.expandRow(2);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/localization/main.js b/treegrid/localization/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/localization/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/localization/package.json b/treegrid/localization/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/localization/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/lockrow/App.vue b/treegrid/lockrow/App.vue
new file mode 100644
index 00000000..9f493181
--- /dev/null
+++ b/treegrid/lockrow/App.vue
@@ -0,0 +1,89 @@
+<template>
+    <JqxTreeGrid ref="treeGrid"
+                 :width="getWidth"
+                 :source="dataAdapter"
+                 :editable="true"
+                 :altRows="true"
+                 :columns="columns"
+                 :ready="ready">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'FirstName', dataField: 'FirstName', width: 200 },
+                    { text: 'LastName', dataField: 'LastName', width: 170 },
+                    { text: 'Title', dataField: 'Title', width: 200 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Address', dataField: 'Address', width: 250 },
+                    { text: 'City', dataField: 'City', width: 120 },
+                    { text: 'Country', dataField: 'Country', width: 120 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const employees = [{
+                'EmployeeID': 2, 'FirstName': 'Andrew', 'LastName': 'Fuller', 'Country': 'USA', 'Title': 'Vice President, Sales', 'HireDate': '1992-08-14 00:00:00', 'BirthDate': '1952-02-19 00:00:00', 'City': 'Tacoma', 'Address': '908 W. Capital Way', 'expanded': 'true',
+                'children': [
+                    { 'EmployeeID': 8, 'FirstName': 'Laura', 'LastName': 'Callahan', 'Country': 'USA', 'Title': 'Inside Sales Coordinator', 'HireDate': '1994-03-05 00:00:00', 'BirthDate': '1958-01-09 00:00:00', 'City': 'Seattle', 'Address': '4726 - 11th Ave. N.E.' },
+                    { 'EmployeeID': 1, 'FirstName': 'Nancy', 'LastName': 'Davolio', 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-05-01 00:00:00', 'BirthDate': '1948-12-08 00:00:00', 'City': 'Seattle', 'Address': '507 - 20th Ave. E.Apt. 2A' },
+                    { 'EmployeeID': 3, 'FirstName': 'Janet', 'LastName': 'Leverling', 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-04-01 00:00:00', 'BirthDate': '1963-08-30 00:00:00', 'City': 'Kirkland', 'Address': '722 Moss Bay Blvd.' },
+                    { 'EmployeeID': 4, 'FirstName': 'Margaret', 'LastName': 'Peacock', 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1993-05-03 00:00:00', 'BirthDate': '1937-09-19 00:00:00', 'City': 'Redmond', 'Address': '4110 Old Redmond Rd.' },
+                    {
+                        'EmployeeID': 5, 'FirstName': 'Steven', 'LastName': 'Buchanan', 'Country': 'UK', 'Title': 'Sales Manager', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1955-03-04 00:00:00', 'City': 'London', 'Address': '14 Garrett Hill', 'expanded': 'true',
+                        'children': [
+                            { 'EmployeeID': 6, 'FirstName': 'Michael', 'LastName': 'Suyama', 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1963-07-02 00:00:00', 'City': 'London', 'Address': 'Coventry House Miner Rd.' },
+                            { 'EmployeeID': 7, 'FirstName': 'Robert', 'LastName': 'King', 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-01-02 00:00:00', 'BirthDate': '1960-05-29 00:00:00', 'City': 'London', 'Address': 'Edgeham Hollow Winchester Way' },
+                            { 'EmployeeID': 9, 'FirstName': 'Anne', 'LastName': 'Dodsworth', 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-11-15 00:00:00', 'BirthDate': '1966-01-27 00:00:00', 'City': 'London', 'Address': '7 Houndstooth Rd.' }
+                        ]
+                    }
+                ]
+            }];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'children', type: 'array' },
+                    { name: 'expanded', type: 'bool' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                    {
+                        root: 'children'
+                    },
+                id: 'EmployeeID',
+                localData: employees
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.treeGrid.lockRow(2);
+                this.$refs.treeGrid.lockRow(1);
+                this.$refs.treeGrid.lockRow(3);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/lockrow/main.js b/treegrid/lockrow/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/lockrow/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/lockrow/package.json b/treegrid/lockrow/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/lockrow/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/manualaggregates/App.vue b/treegrid/manualaggregates/App.vue
new file mode 100644
index 00000000..d8657b47
--- /dev/null
+++ b/treegrid/manualaggregates/App.vue
@@ -0,0 +1,122 @@
+<template>
+    <JqxTreeGrid ref="treeGrid"
+                 :width="getWidth"
+                 :source="dataAdapter"
+                 :showSubAggregates="true"
+                 :showAggregates="true"
+                 :aggregatesHeight="55"
+                 :columnsResize="true"
+                 :checkboxes="true"
+                 :columns="columns"
+                 :ready="ready">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Name', align: 'left', dataField: 'name', width: 300 },
+                    { text: 'Location', dataField: 'location', cellsAlign: 'left', align: 'left', width: 250 },
+                    {
+                        text: 'Budget', cellsAlign: 'right', align: 'right', dataField: 'budget', cellsFormat: 'c2',
+                        aggregates: [{
+                            'Total':
+                                (aggregatedValue, currentValue, column, record, aggregateLevel) => {
+                                    if (record.checked && record.level === aggregateLevel) {
+                                        return aggregatedValue + currentValue;
+                                    }
+                                    else {
+                                        return aggregatedValue;
+                                    }
+                                }
+                        }],
+                        aggregatesRenderer: (aggregatesText, column, element, aggregates, type) => {
+                            let renderString = '';
+                            if (type == 'aggregates') {
+                                renderString = '<div style="margin: 4px; float: right;  height: 100%;">';
+                            }
+                            else {
+                                renderString = '<div style="float: right;  height: 100%;">';
+                            }
+
+                            let euro = this.dataAdapter.formatNumber(0.74 * aggregates.Total, 'f2');
+                            let usd = this.dataAdapter.formatNumber(aggregates.Total, 'f2');
+                            renderString += "<table><tr><td rowspan='2'><strong>Total: </strong></td><td align='right'>" + usd + " USD</td><tr><td align='right'>" + euro + " EUR</td></tr></table>";
+                            return renderString;
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const data = [{
+                'id': '1', 'name': 'Corporate Headquarters', 'budget': '1230000', 'location': 'Las Vegas',
+                'children':
+                    [
+                        {
+                            'id': '2', 'name': 'Finance Division', 'budget': '423000', 'location': 'San Antonio',
+                            'children':
+                                [
+                                    {
+                                        'id': '4', 'name': 'Investment Department', 'budget': '310000', 'location': 'San Antonio',
+                                        'children':
+                                            [
+                                                { 'id': '5', 'name': 'Banking Office', 'budget': '240000', 'location': 'San Antonio' },
+                                                { 'id': '6', 'name': 'Bonds Office', 'budget': '70000', 'location': 'San Antonio' },
+                                            ]
+                                    },
+                                    { 'id': '3', 'name': 'Accounting Department', 'budget': '113000', 'location': 'San Antonio' }
+                                ]
+                        },
+                        {
+                            'id': '7', 'name': 'Operations Division', 'budget': '600000', 'location': 'Miami',
+                            'children':
+                                [
+                                    { 'id': '8', 'name': 'Manufacturing Department', 'budget': '300000', 'location': 'Miami' },
+                                    { 'id': '9', 'name': 'Public Relations Department', 'budget': '200000', 'location': 'Miami' },
+                                    { 'id': '10', 'name': 'Sales Department', 'budget': '100000', 'location': 'Miami' }
+                                ]
+                        },
+                        { 'id': '11', 'name': 'Research Division', 'budget': '200000', 'location': 'Boston' },
+                        { 'id': '12', 'name': 'Development Division', 'budget': '300000', 'location': 'Boston' }
+                    ]
+            }];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'name', type: 'string' },
+                    { name: 'budget', type: 'number' },
+                    { name: 'id', type: 'number' },
+                    { name: 'children', type: 'array' },
+                    { name: 'location', type: 'string' }
+                ],
+                hierarchy:
+                    {
+                        root: 'children'
+                    },
+                localData: data,
+                id: 'id'
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.treeGrid.expandRow(1);
+                this.$refs.treeGrid.expandRow(2);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/manualaggregates/main.js b/treegrid/manualaggregates/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/manualaggregates/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/manualaggregates/package.json b/treegrid/manualaggregates/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/manualaggregates/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/nestedjsondata/App.vue b/treegrid/nestedjsondata/App.vue
new file mode 100644
index 00000000..d6d439c7
--- /dev/null
+++ b/treegrid/nestedjsondata/App.vue
@@ -0,0 +1,81 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+        :width="width"
+        :sortable="true"
+        :columns="columns"
+        :source="dataAdapter">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'FirstName', dataField: 'FirstName', width: 200 },
+                    { text: 'LastName', dataField: 'LastName', width: 120 },
+                    { text: 'Title', dataField: 'Title', width: 160 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Address', dataField: 'Address', width: 250 },
+                    { text: 'City', dataField: 'City', width: 120 },
+                    { text: 'Country', dataField: 'Country' }
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            let employees = [
+                {
+                    "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way", "expanded": "true",
+                        "children": [
+                        { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
+                        { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
+                        { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
+                        { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
+                        {
+                            "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill", "expanded": "true",
+                            "children": [
+                                { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
+                                { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
+                                { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
+                            ]
+                        }
+                    ]
+                }
+            ];
+
+            this.source = {
+                dataType: "json",
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'children', type: 'array' },
+                    { name: 'expanded', type: 'bool' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                {
+                    root: 'children'
+                },
+                id: 'EmployeeID',
+                localData: employees
+            };                  
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/nestedjsondata/main.js b/treegrid/nestedjsondata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/nestedjsondata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/nestedjsondata/package.json b/treegrid/nestedjsondata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/nestedjsondata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/nestedxmldata/App.vue b/treegrid/nestedxmldata/App.vue
new file mode 100644
index 00000000..e352e7a7
--- /dev/null
+++ b/treegrid/nestedxmldata/App.vue
@@ -0,0 +1,71 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+        :width="width"
+        :pageable="true"
+        :columnsResize="true"
+        :ready="ready"
+        :columns="columns"
+        :source="dataAdapter">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),                
+                columns: [
+                    { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 200 },
+                    { text: 'LastName', dataField: 'LastName', width: 200 },
+                    { text: 'Title', dataField: 'Title', width: 300 },
+                    { text: 'Address', dataField: 'Address', width: 200 },
+                    { text: 'City', dataField: 'City', width: 150 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            let url = "../sampledata/employeesadv.xml";
+            this.source = {
+                dataType: "xml",
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'ReportsTo', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                {
+                    // defines the root and record of each hiearchy level.
+                    root: 'Employees',
+                    record: 'Employee'
+                },
+                id: 'EmployeeID',
+                root: 'Employees',
+                record: 'Employee',
+                url: url
+            };                  
+        },
+        methods: {
+            ready: function () {
+                // expand row with 'EmployeeKey = 2'
+                this.$refs.myTreeGrid.expandRow(2);                    
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/nestedxmldata/main.js b/treegrid/nestedxmldata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/nestedxmldata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/nestedxmldata/package.json b/treegrid/nestedxmldata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/nestedxmldata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/paging/App.vue b/treegrid/paging/App.vue
new file mode 100644
index 00000000..79a62b05
--- /dev/null
+++ b/treegrid/paging/App.vue
@@ -0,0 +1,71 @@
+<template>
+    <JqxTreeGrid ref="treeGrid"
+                 :width="getWidth"
+                 :source="dataAdapter"
+                 :sortable="true"
+                 :pageable="true"
+                 :pagerMode="'advanced'"
+                 :columns="columns"
+                 :ready="ready">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Order Name', dataField: 'name', align: 'center', width: 250 },
+                    { text: 'Customer', dataField: 'customer', align: 'center', width: 250 },
+                    { text: 'Price', dataField: 'price', cellsFormat: 'c2', align: 'center', cellsAlign: 'right', width: 80 },
+                    {
+                        text: 'Order Date', dataField: 'date', align: 'center', cellsFormat: 'dd-MMMM-yyyy hh:mm',
+                        cellsRenderer: (rowKey, column, cellValue, rowData, cellText) => {
+                            if (rowData.level === 0) {
+                                return this.dataAdapter.formatDate(cellValue, 'dd-MMMM-yyyy');
+                            }
+                            return cellText;
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.source = {
+                dataType: 'array',
+                dataFields: [
+                    { name: 'name', type: 'string' },
+                    { name: 'quantity', type: 'number' },
+                    { name: 'id', type: 'number' },
+                    { name: 'parentid', type: 'number' },
+                    { name: 'price', type: 'number' },
+                    { name: 'date', type: 'date' },
+                    { name: 'customer', type: 'string' }
+                ],
+                hierarchy:
+                    {
+                        keyDataField: { name: 'id' },
+                        parentDataField: { name: 'parentid' }
+                    },
+                id: 'id',
+                localData: generateordersdata(10)
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.treeGrid.expandRow(2);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/paging/main.js b/treegrid/paging/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/paging/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/paging/package.json b/treegrid/paging/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/paging/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/pagingapi/App.vue b/treegrid/pagingapi/App.vue
new file mode 100644
index 00000000..268707bd
--- /dev/null
+++ b/treegrid/pagingapi/App.vue
@@ -0,0 +1,159 @@
+<template>
+    <div>
+        <div style="float: left">
+            <JqxTreeGrid ref="myTreeGrid"
+                         @pageChanged="myTreeGridOnPageChanged($event)"
+                         @pageSizeChanged="myTreeGridOnPageSizeChanged($event)"
+                         :width="560" :source="dataAdapter" :columns="columns"
+                         :sortable="true" :pageable="true" :pagerMode="'advanced'" 
+                         :ready="ready" :autoRowHeight="false" :pagerPosition="'both'">
+            </JqxTreeGrid>
+        </div>
+
+        <div style="float: left; font-size: 13px; font-family: Verdana; margin-left: 30px">
+            <div><strong>Settings</strong></div>
+            <div style="margin-top: 10px">
+                <div>Pager Mode:</div>
+
+                <JqxDropDownList style="margin-top: 5px"
+                                 @select="pagerModeDropDownListOnSelect($event)"
+                                 :width="120" :height="25" :selectedIndex="1"
+                                 :source="['default','advanced']" :autoDropDownHeight="true">
+                </JqxDropDownList>
+
+                <div style="margin-top: 10px">Pager Position:</div>
+
+                <JqxDropDownList style="margin-top: 5px"
+                                 @select="pagerPositionDropDownListOnSelect($event)"
+                                 :width="120" :height="25" :selectedIndex="2"
+                                 :source="['top','bottom','both']" :autoDropDownHeight="true">
+                </JqxDropDownList>
+
+
+                <div style="margin-top: 10px">Go to Page:</div>
+
+                <JqxInput ref="myInput" style="margin-top: 5px; float: left" :width="120" :height="25" :value="1"></JqxInput>
+                <JqxButton @click="btnOnClick()" style="margin: 7px 0 0 5px; float: left">Apply</JqxButton>
+
+            </div>
+            <div style="margin-top: 10px; display: inline-block">
+                <div>Event Log:</div>
+                <JqxPanel ref="myPanel" style="margin-top: 5px" :width="150" :height="150"></JqxPanel>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
+    import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+    import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid,
+            JqxDropDownList,
+            JqxInput,
+            JqxButton,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Order Name', dataField: 'name', align: 'center', width: 250 },
+                    { text: 'Customer', dataField: 'customer', align: 'center', width: 250 },
+                    { text: 'Price', dataField: 'price', cellsFormat: 'c2', align: 'center', cellsAlign: 'right', width: 80 },
+                    {
+                        text: 'Order Date', dataField: 'date', align: 'center', cellsFormat: 'dd-MMMM-yyyy hh:mm',
+                        cellsRenderer: (rowKey, column, cellValue, rowData, cellText) => {
+                            if (rowData.level === 0) {
+                                return this.dataAdapter.formatDate(cellValue, 'dd-MMMM-yyyy');
+                            }
+                            return cellText;
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.source = {
+                dataType: 'array',
+                dataFields: [
+                    { name: 'name', type: 'string' },
+                    { name: 'quantity', type: 'number' },
+                    { name: 'id', type: 'number' },
+                    { name: 'parentid', type: 'number' },
+                    { name: 'price', type: 'number' },
+                    { name: 'date', type: 'date' },
+                    { name: 'customer', type: 'string' }
+                ],
+                hierarchy:
+                    {
+                        keyDataField: { name: 'id' },
+                        parentDataField: { name: 'parentid' }
+                    },
+                id: 'id',
+                localData: generateordersdata(10)
+            };
+
+            this.loop = 0;
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(2);
+            },
+            pagerModeDropDownListOnSelect: function(event) {
+                if (event.args.index == 0) {
+                    this.$refs.myTreeGrid.pagerMode = 'default';
+                }
+                else {
+                    this.$refs.myTreeGrid.pagerMode = 'advanced';
+                }
+            },
+            pagerPositionDropDownListOnSelect: function (event) {
+                if (event.args.index == 0) {
+                    this.$refs.myTreeGrid.pagerPosition = 'top';
+                }
+                else if (event.args.index == 1) {
+                    this.$refs.myTreeGrid.pagerPosition = 'bottom';
+                }
+                else {
+                    this.$refs.myTreeGrid.pagerPosition = 'both';
+                }
+            },
+            btnOnClick: function () {
+                let page = parseInt(this.$refs.myInput.val());
+                if (!isNaN(page)) {
+                    page--;
+                    if (page < 0) page = 0;
+                    this.$refs.myTreeGrid.goToPage(page);
+                }
+            },
+            myTreeGridOnPageChanged: function (event) {
+                if (this.loop >= 5) {
+                    this.$refs.myPanel.clearcontent();
+                    this.loop = 0;
+                }
+
+                this.loop++;
+                let args = event.args;
+                let eventData = "<div>Page:" + (1 + args.pagenum) + ", Page Size: " + args.pageSize + "</div>";
+                this.$refs.myPanel.prepend('<div class="logged" style="margin-top: 5px;">' + eventData + '</div>');
+            },
+            myTreeGridOnPageSizeChanged: function (event) {
+                this.$refs.myPanel.clearcontent();
+                let args = event.args;
+                let eventData = "<div>Page: " + (1 + args.pagenum) + ", Page Size: " + args.pageSize + ", Old Page Size: " + args.oldpageSize + "</div>";
+                this.$refs.myPanel.prepend('<div style="margin-top: 5px;">' + eventData + '</div>');
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/pagingapi/main.js b/treegrid/pagingapi/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/pagingapi/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/pagingapi/package.json b/treegrid/pagingapi/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/pagingapi/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/pagingbyrootrecords/App.vue b/treegrid/pagingbyrootrecords/App.vue
new file mode 100644
index 00000000..8838b3f7
--- /dev/null
+++ b/treegrid/pagingbyrootrecords/App.vue
@@ -0,0 +1,70 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"              
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :sortable="true" :pageable="true" :pagerMode="'advanced'" 
+                 :ready="ready" :pageSizeMode="'root'" :pageSizeOptions="['2', '3', '4']" 
+                 :pageSize="2">
+    </JqxTreeGrid>       
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Order Name', dataField: 'name', align: 'center', width: 250 },
+                    { text: 'Customer', dataField: 'customer', align: 'center', width: 250 },
+                    { text: 'Price', dataField: 'price', cellsFormat: 'c2', align: 'center', cellsAlign: 'right', width: 80 },
+                    {
+                        text: 'Order Date', dataField: 'date', align: 'center', cellsFormat: 'dd-MMMM-yyyy hh:mm',
+                        cellsRenderer: (rowKey, column, cellValue, rowData, cellText) => {
+                            if (rowData.level === 0) {
+                                return this.dataAdapter.formatDate(cellValue, 'dd-MMMM-yyyy');
+                            }
+                            return cellText;
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.source = {
+                dataType: 'array',
+                dataFields: [
+                    { name: 'name', type: 'string' },
+                    { name: 'quantity', type: 'number' },
+                    { name: 'id', type: 'number' },
+                    { name: 'parentid', type: 'number' },
+                    { name: 'price', type: 'number' },
+                    { name: 'date', type: 'date' },
+                    { name: 'customer', type: 'string' }
+                ],
+                hierarchy:
+                    {
+                        keyDataField: { name: 'id' },
+                        parentDataField: { name: 'parentid' }
+                    },
+                id: 'id',
+                localData: generateordersdata(10)
+            };
+
+            this.loop = 0;
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(1);
+            }         
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/pagingbyrootrecords/main.js b/treegrid/pagingbyrootrecords/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/pagingbyrootrecords/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/pagingbyrootrecords/package.json b/treegrid/pagingbyrootrecords/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/pagingbyrootrecords/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/pinnedfrozencolumn/App.vue b/treegrid/pinnedfrozencolumn/App.vue
new file mode 100644
index 00000000..be53c5cc
--- /dev/null
+++ b/treegrid/pinnedfrozencolumn/App.vue
@@ -0,0 +1,92 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+        :width="width"
+        :showHeader="true"
+        :altRows="true"
+        :ready="ready"
+        :columns="columns"
+        :source="dataAdapter">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),                
+                columns: [
+                    { text: "Name", align: "center", dataField: "name", pinned: true, width: 300 },
+                    { text: "Budget", cellsAlign: "center", align: "center", dataField: "budget", cellsFormat: "c2", width: 350 },
+                    { text: "Location", dataField: "location", cellsAlign: "center", align: "center", width: 350 }                
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            let data = [
+                {
+                    "id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas",
+                    "children":
+                    [
+                        {
+                            "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio",
+                            "children":
+                            [
+                                { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio" },
+                                {
+                                    "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio",
+                                    "children":
+                                    [
+                                        { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio" },
+                                        { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio" },
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami",
+                            "children":
+                            [
+                                { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami" },
+                                { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami" },
+                                { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami" }
+                            ]
+                        },
+                        { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston" }
+                    ]
+                }
+            ];
+            // prepare the data
+            this.source = {
+                dataType: "json",
+                dataFields: [
+                    { name: "name", type: "string" },
+                    { name: "budget", type: "number" },
+                    { name: "id", type: "number" },
+                    { name: "children", type: "array" },
+                    { name: "location", type: "string" }
+                ],
+                hierarchy:
+                    {
+                        root: "children"
+                    },
+                localData: data,
+                id: "id"
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(1);
+                this.$refs.myTreeGrid.expandRow(2);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/pinnedfrozencolumn/main.js b/treegrid/pinnedfrozencolumn/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/pinnedfrozencolumn/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/pinnedfrozencolumn/package.json b/treegrid/pinnedfrozencolumn/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/pinnedfrozencolumn/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/propertyeditor/App.vue b/treegrid/propertyeditor/App.vue
new file mode 100644
index 00000000..2cd800cd
--- /dev/null
+++ b/treegrid/propertyeditor/App.vue
@@ -0,0 +1,259 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+                 @cellValueChanged="myTreeGridOnCellValueChanged($event)"
+                 :source="dataAdapter" :columns="columns" :autoRowHeight="true"
+                 :altRows="true" :editable="true" :editSettings="editSettings">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
+    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
+    import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+    import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcolorpicker.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid,
+            JqxInput,
+            JqxDropDownList,
+            JqxDropDownButton,
+            JqxCheckBox,
+            JqxColorPicker
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Property Name', editable: false, columnType: 'none', dataField: 'property', width: 200 },
+                    {
+                        text: 'Value', dataField: 'value', width: 230, columnType: 'custom',
+                        // creates an editor depending on the 'type' value.
+                        createEditor: (rowKey, cellvalue, editor, cellText, width, height) => {
+                            let row = this.$refs.myTreeGrid.getRow(rowKey);
+                            switch (row['type']) {
+                                case 'string':
+                                case 'number':
+                                    let inputContainer = document.createElement('input');
+                                    inputContainer.id = 'myInput';
+                                    inputContainer.style.cssText = 'height: 100%; border: none';
+                                    editor[0].appendChild(inputContainer);
+
+                                    this['inputRow' + rowKey] = jqwidgets.createInstance('#myInput', 'jqxInput', { width: '100%', height: '100%' });
+
+                                    break;
+                                case 'align':
+                                    let dropDownListContainer = document.createElement('div');
+                                    dropDownListContainer.id = 'myDropDownList';
+                                    dropDownListContainer.style.cssText = 'height: 100%; border: none';
+                                    editor[0].appendChild(dropDownListContainer);
+
+                                    let options =
+                                        {
+                                            width: '100%', height: '100%', autoDropDownHeight: true, source: ['Left', 'Center', 'Right']
+                                        };
+                                    this.myDropDownList = jqwidgets.createInstance('#myDropDownList', 'jqxDropDownList', options);
+
+                                    break;
+                                case 'color':
+                                    if (rowKey === '3') {
+                                        let dropDownButtonContainer = document.createElement('div');
+                                        dropDownButtonContainer.id = 'myDropDownButton1';
+                                        dropDownButtonContainer.style.cssText = 'height: 100%; border: none';
+                                        dropDownButtonContainer.innerHTML = '<div style="padding: 5px;"><div class="myColorPicker1"></div></div>';
+                                        editor[0].appendChild(dropDownButtonContainer);
+
+                                        let myDropDownButton1 = jqwidgets.createInstance('#myDropDownButton1', 'jqxDropDownButton', { width: '100%', height: '100%' });
+
+                                        this.myColorPicker1 = jqwidgets.createInstance(`.myColorPicker1`, 'jqxColorPicker', { width: 220, height: 220 });
+
+                                        this.myColorPicker1.addEventHandler('colorchange', (event) => {
+                                            myDropDownButton1.setContent(this.getTextElementByColor(event.args.color));
+                                        });
+                                    } else {
+
+                                        let dropDownButtonContainer = document.createElement('div');
+                                        dropDownButtonContainer.id = 'myDropDownButton2';
+                                        dropDownButtonContainer.style.cssText = 'height: 100%; border: none';
+                                        dropDownButtonContainer.innerHTML = '<div style="padding: 5px;"><div class="myColorPicker2"></div></div>';
+                                        editor[0].appendChild(dropDownButtonContainer);
+
+                                        let myDropDownButton2 = jqwidgets.createInstance('#myDropDownButton2', 'jqxDropDownButton', { width: '100%', height: '100%' });
+
+                                        this.myColorPicker2 = jqwidgets.createInstance(`.myColorPicker2`, 'jqxColorPicker', { width: 220, height: 220 });
+
+                                        this.myColorPicker2.addEventHandler('colorchange', (event) => {
+                                            myDropDownButton2.setContent(this.getTextElementByColor(event.args.color));
+                                        });
+                                    }
+
+                                    break;
+                                case 'bool':
+                                    let checkBoxContainer = document.createElement('div');
+                                    checkBoxContainer.id = 'myCheckBox';
+                                    checkBoxContainer.style.cssText = 'margin-top: 6px; margin-left: -8px; left: 50%; position: relative';
+                                    editor[0].appendChild(checkBoxContainer);
+
+                                    this.myCheckBox = jqwidgets.createInstance('#myCheckBox', 'jqxCheckBox', { checked: cellvalue });
+
+                                    break;
+                            }
+                        },
+                        // updates the editor's value.
+                        initEditor: (rowKey, cellvalue, editor, cellText, width, height) => {
+                            let row = this.$refs.myTreeGrid.getRow(rowKey);
+                            switch (row.type) {
+                                case 'string':
+                                case 'number':
+                                    this['inputRow' + rowKey].val(cellvalue);
+                                    break;
+                                case 'align':
+                                    this.myDropDownList.val(cellvalue);
+                                    break;
+                                case 'color':
+                                    if (rowKey === '3') {
+                                        this.myColorPicker1.setColor(cellvalue);
+                                    } else {
+                                        this.myColorPicker2.setColor(cellvalue);
+                                    }
+                                    break;
+                                case 'bool':
+                                    this.myCheckBox.val(cellvalue);
+                                    break;
+                            }
+                        },
+                        // returns the value of the custom editor.
+                        getEditorValue: (rowKey, cellvalue, editor) => {
+                            let row = this.$refs.myTreeGrid.getRow(rowKey);
+                            switch (row.type) {
+                                case 'string':
+                                    return this['inputRow' + rowKey].val();
+                                case 'number':
+                                    let number = parseFloat(this['inputRow' + rowKey].val());
+                                    if (isNaN(number)) {
+                                        return 0;
+                                    }
+                                    else return number;
+                                case 'align':
+                                    return this.myDropDownList.val();
+                                case 'color':
+                                    if (rowKey === '3') {
+                                        let color = this.myColorPicker1.getColor();
+                                        return '#' + color.hex;
+                                    } else {
+                                        let color = this.myColorPicker2.getColor();
+                                        return '#' + color.hex;
+                                    }
+                                case 'bool':
+                                    return this.myCheckBox.val();
+                            }
+                            return '';
+                        }
+                    }
+                ],
+                editSettings: {
+                    saveOnPageChange: true, saveOnBlur: false,
+                    saveOnSelectionChange: true, cancelOnEsc: true,
+                    saveOnEnter: true, editOnDoubleClick: true, editOnF2: true
+                }
+            }
+        },
+        beforeCreate: function () {
+
+            const data = [
+                {
+                    'property': 'Name', 'value': 'jqxTreeGrid', type: 'string'
+                },
+                {
+                    'property': 'Location', 'value': '0, 0', type: 'string', 'children': [{ 'property': 'X', 'value': '0', type: 'number' }, { 'property': 'Y', 'value': '0', type: 'number' }]
+                },
+                {
+                    'property': 'Size', 'value': '200, 200', type: 'string', 'children': [{ 'property': 'Width', 'value': '200', type: 'number' }, { 'property': 'Height', 'value': '200', type: 'number' }]
+                },
+                {
+                    'property': 'Background', 'value': '#4621BC', type: 'color'
+                },
+                {
+                    'property': 'Color', 'value': '#B1B11B', type: 'color'
+                },
+                {
+                    'property': 'Alignment', 'value': 'Left', type: 'align'
+                },
+                {
+                    'property': 'Enabled', 'value': 'true', type: 'bool'
+                }
+            ];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'property', type: 'string' },
+                    { name: 'value', type: 'string' },
+                    { name: 'type', type: 'string' },
+                    { name: 'children', type: 'array' }
+                ],
+                hierarchy:
+                    {
+                        root: 'children'
+                    },
+                localData: data
+            };
+
+            this.myCheckBox;
+            this.myColorPicker1;
+            this.myColorPicker2;
+            this.myDropDownList;
+            this.myInput;
+        },
+        methods: {
+            getTextElementByColor: function (color) {
+                if (color == 'transparent' || color.hex == '') {
+                    return '<div style="text-shadow: none; position: relative; padding-bottom: 4px; margin-top: 4px;">transparent</div>';
+                }
+                let nThreshold = 105;
+                let bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
+                let foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White';
+                let element = '<div style="text-shadow: none; position: relative; padding-bottom: 4px; margin-top: 4px;color:' + foreColor + '; background: #' + color.hex + '">#' + color.hex + '</div>';
+                return element;
+            },
+            myTreeGridOnCellValueChanged: function (event) {
+                // Update the Location and Size properties and their nested properties.
+                var args = event.args;
+                var row = args.row;
+                var records = row.records;
+                // update the nested properties when a parent value is changed.
+                if (records.length > 0) {
+                    var values = args.value.split(',');
+                    for (var i = 0; i < values.length; i++) {
+                        var value = $.trim(values[i]);
+                        var rowKey = this.$refs.myTreeGrid.getKey(records[i]);
+                        this.$refs.myTreeGrid.setCellValue(rowKey, 'value', value);
+                    }
+                }
+                // update the parent value when the user changes a nested property,
+                else if (row.level == 1) {
+                    var parent = row.parent;
+                    var parentRowKey = this.$refs.myTreeGrid.getKey(parent);
+                    var value = '';
+                    var records = parent.records;
+                    if (records.length > 0) {
+                        for (var i = 0; i < records.length; i++) {
+                            var rowKey = this.$refs.myTreeGrid.getKey(records[i]);
+                            var cellValue = this.$refs.myTreeGrid.getCellValue(rowKey, 'value');
+                            value += cellValue;
+                            if (i < records.length - 1) {
+                                value += ', ';
+                            }
+                        }
+                    }
+                    this.$refs.myTreeGrid.setCellValue(parentRowKey, 'value', value);
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/propertyeditor/main.js b/treegrid/propertyeditor/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/propertyeditor/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/propertyeditor/package.json b/treegrid/propertyeditor/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/propertyeditor/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/righttoleftlayout/App.vue b/treegrid/righttoleftlayout/App.vue
new file mode 100644
index 00000000..5b71deba
--- /dev/null
+++ b/treegrid/righttoleftlayout/App.vue
@@ -0,0 +1,80 @@
+<template>
+    <JqxTreeGrid ref="treeGrid"
+                 :width="getWidth"
+                 :source="dataAdapter"
+                 :rtl="true"
+                 :columns="columns"
+                 :ready="ready">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'FirstName', columnGroup: 'Name', align: 'right', cellsAlign: 'right', dataField: 'FirstName', width: 200 },
+                    { text: 'LastName', columnGroup: 'Name', align: 'right', cellsAlign: 'right', dataField: 'LastName', width: 200 },
+                    { text: 'Title', dataField: 'Title', align: 'right', cellsAlign: 'right', width: 160 },
+                    { text: 'Birth Date', dataField: 'BirthDate', align: 'right', cellsAlign: 'right', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', align: 'right', cellsAlign: 'right', cellsFormat: 'd', width: 120 },
+                    { text: 'Address', dataField: 'Address', align: 'right', cellsAlign: 'right', width: 250 },
+                    { text: 'City', dataField: 'City', align: 'right', cellsAlign: 'right', width: 120 },
+                    { text: 'Country', dataField: 'Country', align: 'right', cellsAlign: 'right', width: 200 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const employees = [
+                { 'EmployeeID': 1, 'FirstName': 'Nancy', 'LastName': 'Davolio', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-05-01 00:00:00', 'BirthDate': '1948-12-08 00:00:00', 'City': 'Seattle', 'Address': '507 - 20th Ave. E.Apt. 2A' },
+                { 'EmployeeID': 2, 'FirstName': 'Andrew', 'LastName': 'Fuller', 'ReportsTo': null, 'Country': 'USA', 'Title': 'Vice President, Sales', 'HireDate': '1992-08-14 00:00:00', 'BirthDate': '1952-02-19 00:00:00', 'City': 'Tacoma', 'Address': '908 W. Capital Way' },
+                { 'EmployeeID': 3, 'FirstName': 'Janet', 'LastName': 'Leverling', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-04-01 00:00:00', 'BirthDate': '1963-08-30 00:00:00', 'City': 'Kirkland', 'Address': '722 Moss Bay Blvd.' },
+                { 'EmployeeID': 4, 'FirstName': 'Margaret', 'LastName': 'Peacock', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1993-05-03 00:00:00', 'BirthDate': '1937-09-19 00:00:00', 'City': 'Redmond', 'Address': '4110 Old Redmond Rd.' },
+                { 'EmployeeID': 5, 'FirstName': 'Steven', 'LastName': 'Buchanan', 'ReportsTo': 2, 'Country': 'UK', 'Title': 'Sales Manager', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1955-03-04 00:00:00', 'City': 'London', 'Address': '14 Garrett Hill' },
+                { 'EmployeeID': 6, 'FirstName': 'Michael', 'LastName': 'Suyama', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1963-07-02 00:00:00', 'City': 'London', 'Address': 'Coventry House Miner Rd.' },
+                { 'EmployeeID': 7, 'FirstName': 'Robert', 'LastName': 'King', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-01-02 00:00:00', 'BirthDate': '1960-05-29 00:00:00', 'City': 'London', 'Address': 'Edgeham Hollow Winchester Way' },
+                { 'EmployeeID': 8, 'FirstName': 'Laura', 'LastName': 'Callahan', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Inside Sales Coordinator', 'HireDate': '1994-03-05 00:00:00', 'BirthDate': '1958-01-09 00:00:00', 'City': 'Seattle', 'Address': '4726 - 11th Ave. N.E.' },
+                { 'EmployeeID': 9, 'FirstName': 'Anne', 'LastName': 'Dodsworth', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-11-15 00:00:00', 'BirthDate': '1966-01-27 00:00:00', 'City': 'London', 'Address': '7 Houndstooth Rd.' }
+            ];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'ReportsTo', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                    {
+                        keyDataField: { name: 'EmployeeID' },
+                        parentDataField: { name: 'ReportsTo' }
+                    },
+                id: 'EmployeeID',
+                localData: employees
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.treeGrid.expandRow(2);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/righttoleftlayout/main.js b/treegrid/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/righttoleftlayout/package.json b/treegrid/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/rowdetails/App.vue b/treegrid/rowdetails/App.vue
new file mode 100644
index 00000000..bba7d478
--- /dev/null
+++ b/treegrid/rowdetails/App.vue
@@ -0,0 +1,102 @@
+<template>
+    <JqxTreeGrid ref="treeGrid"
+                 :width="getWidth"
+                 :source="dataAdapter"
+                 :pageable="true"
+                 :pageSize="3"
+                 :rowDetails="true"
+                 :rowDetailsRenderer="rowDetailsRenderer"
+                 :columns="columns"
+                 :ready="ready">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source, {
+                    beforeLoadComplete: (records) => {
+                        let notes = ['Education includes a BA in psychology from Colorado State University in 1970.  She also completed \'The Art of the Cold Call.\'  Nancy is a member of Toastmasters International.',
+                            'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
+                            'Janet has a BS degree in chemistry from Boston College (1984).  She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
+                            'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.',
+                            'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London.  He was promoted to sales manager in March 1993.  Mr. Buchanan has completed the courses \'Successful Telemarketing\' and \'International Sales Management.\'  He is fluent in French.',
+                            'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986).  He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\'  He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
+                            'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company.  After completing a course entitled \'Selling in Europe,\' he was transferred to the London office in March 1993.',
+                            'Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.',
+                            'Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.'];
+                        for (let i = 0; i < records.length; i++) {
+                            let imgUrl = '../images/' + records[i].FirstName.toLowerCase() + '.png';
+                            records[i].icon = imgUrl;
+                            records[i].notes = notes[i];
+                        }
+                        return records;
+                    }
+                }),
+                columns: [
+                    { text: 'FirstName', dataField: 'FirstName', width: 200 },
+                    { text: 'LastName', dataField: 'LastName', width: 200 },
+                    { text: 'City', dataField: 'City', width: 120 },
+                    { text: 'Country', dataField: 'Country' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const employees = [
+                { 'EmployeeID': 1, 'FirstName': 'Nancy', 'LastName': 'Davolio', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-05-01 00:00:00', 'BirthDate': '1948-12-08 00:00:00', 'City': 'Seattle', 'Address': '507 - 20th Ave. E.Apt. 2A' },
+                { 'EmployeeID': 2, 'FirstName': 'Andrew', 'LastName': 'Fuller', 'ReportsTo': null, 'Country': 'USA', 'Title': 'Vice President, Sales', 'HireDate': '1992-08-14 00:00:00', 'BirthDate': '1952-02-19 00:00:00', 'City': 'Tacoma', 'Address': '908 W. Capital Way' },
+                { 'EmployeeID': 3, 'FirstName': 'Janet', 'LastName': 'Leverling', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-04-01 00:00:00', 'BirthDate': '1963-08-30 00:00:00', 'City': 'Kirkland', 'Address': '722 Moss Bay Blvd.' },
+                { 'EmployeeID': 4, 'FirstName': 'Margaret', 'LastName': 'Peacock', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1993-05-03 00:00:00', 'BirthDate': '1937-09-19 00:00:00', 'City': 'Redmond', 'Address': '4110 Old Redmond Rd.' },
+                { 'EmployeeID': 5, 'FirstName': 'Steven', 'LastName': 'Buchanan', 'ReportsTo': 2, 'Country': 'UK', 'Title': 'Sales Manager', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1955-03-04 00:00:00', 'City': 'London', 'Address': '14 Garrett Hill' },
+                { 'EmployeeID': 6, 'FirstName': 'Michael', 'LastName': 'Suyama', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1963-07-02 00:00:00', 'City': 'London', 'Address': 'Coventry House Miner Rd.' },
+                { 'EmployeeID': 7, 'FirstName': 'Robert', 'LastName': 'King', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-01-02 00:00:00', 'BirthDate': '1960-05-29 00:00:00', 'City': 'London', 'Address': 'Edgeham Hollow Winchester Way' },
+                { 'EmployeeID': 8, 'FirstName': 'Laura', 'LastName': 'Callahan', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Inside Sales Coordinator', 'HireDate': '1994-03-05 00:00:00', 'BirthDate': '1958-01-09 00:00:00', 'City': 'Seattle', 'Address': '4726 - 11th Ave. N.E.' },
+                { 'EmployeeID': 9, 'FirstName': 'Anne', 'LastName': 'Dodsworth', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-11-15 00:00:00', 'BirthDate': '1966-01-27 00:00:00', 'City': 'London', 'Address': '7 Houndstooth Rd.' }
+            ];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'ReportsTo', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                    {
+                        keyDataField: { name: 'EmployeeID' },
+                        parentDataField: { name: 'ReportsTo' }
+                    },
+                id: 'EmployeeID',
+                localData: employees
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.treeGrid.expandRow(2);
+            },
+            rowDetailsRenderer: function(rowKey, row) {
+                let indent = (1 + row.level) * 20;
+                let details = "<table style='margin: 10px; min-height: 95px; height: 95px; margin-left: " + indent + "px;'><tr><td>" + "<img style='max-width:60px;' height='60' src='" + row.icon + "'/></td><td>" + row.notes + "</td></tr></table>";
+                return details;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/rowdetails/main.js b/treegrid/rowdetails/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/rowdetails/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/rowdetails/package.json b/treegrid/rowdetails/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/rowdetails/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/searchfield/App.vue b/treegrid/searchfield/App.vue
new file mode 100644
index 00000000..42d77e68
--- /dev/null
+++ b/treegrid/searchfield/App.vue
@@ -0,0 +1,81 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+                 :width="getWidth"
+                 :source="dataAdapter"
+                 :filterMode="'simple'"
+                 :filterable="true"
+                 :columns="columns"
+                 :ready="ready">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', dataField: 'FirstName', width: 200 },
+                    { text: 'Last Name', dataField: 'LastName', width: 150 },
+                    { text: 'Title', dataField: 'Title', width: 160 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Address', dataField: 'Address', width: 250 },
+                    { text: 'City', dataField: 'City', width: 120 },
+                    { text: 'Country', dataField: 'Country' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const employees = [
+                { 'EmployeeID': 1, 'FirstName': 'Nancy', 'LastName': 'Davolio', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-05-01 00:00:00', 'BirthDate': '1948-12-08 00:00:00', 'City': 'Seattle', 'Address': '507 - 20th Ave. E.Apt. 2A' },
+                { 'EmployeeID': 2, 'FirstName': 'Andrew', 'LastName': 'Fuller', 'ReportsTo': null, 'Country': 'USA', 'Title': 'Vice President, Sales', 'HireDate': '1992-08-14 00:00:00', 'BirthDate': '1952-02-19 00:00:00', 'City': 'Tacoma', 'Address': '908 W. Capital Way' },
+                { 'EmployeeID': 3, 'FirstName': 'Janet', 'LastName': 'Leverling', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-04-01 00:00:00', 'BirthDate': '1963-08-30 00:00:00', 'City': 'Kirkland', 'Address': '722 Moss Bay Blvd.' },
+                { 'EmployeeID': 4, 'FirstName': 'Margaret', 'LastName': 'Peacock', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1993-05-03 00:00:00', 'BirthDate': '1937-09-19 00:00:00', 'City': 'Redmond', 'Address': '4110 Old Redmond Rd.' },
+                { 'EmployeeID': 5, 'FirstName': 'Steven', 'LastName': 'Buchanan', 'ReportsTo': 2, 'Country': 'UK', 'Title': 'Sales Manager', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1955-03-04 00:00:00', 'City': 'London', 'Address': '14 Garrett Hill' },
+                { 'EmployeeID': 6, 'FirstName': 'Michael', 'LastName': 'Suyama', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1963-07-02 00:00:00', 'City': 'London', 'Address': 'Coventry House Miner Rd.' },
+                { 'EmployeeID': 7, 'FirstName': 'Robert', 'LastName': 'King', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-01-02 00:00:00', 'BirthDate': '1960-05-29 00:00:00', 'City': 'London', 'Address': 'Edgeham Hollow Winchester Way' },
+                { 'EmployeeID': 8, 'FirstName': 'Laura', 'LastName': 'Callahan', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Inside Sales Coordinator', 'HireDate': '1994-03-05 00:00:00', 'BirthDate': '1958-01-09 00:00:00', 'City': 'Seattle', 'Address': '4726 - 11th Ave. N.E.' },
+                { 'EmployeeID': 9, 'FirstName': 'Anne', 'LastName': 'Dodsworth', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-11-15 00:00:00', 'BirthDate': '1966-01-27 00:00:00', 'City': 'London', 'Address': '7 Houndstooth Rd.' }
+            ];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'ReportsTo', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                    {
+                        keyDataField: { name: 'EmployeeID' },
+                        parentDataField: { name: 'ReportsTo' }
+                    },
+                id: 'EmployeeID',
+                localData: employees
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(2);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/searchfield/main.js b/treegrid/searchfield/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/searchfield/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/searchfield/package.json b/treegrid/searchfield/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/searchfield/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/showorhidecolumn/App.vue b/treegrid/showorhidecolumn/App.vue
new file mode 100644
index 00000000..4621d895
--- /dev/null
+++ b/treegrid/showorhidecolumn/App.vue
@@ -0,0 +1,115 @@
+<template>
+    <div>
+        <JqxListBox style="float: left;"
+            @checkChange="checkChange($event)"
+            :width="120"
+            :height="200"
+            :checkboxes="true"
+            :source="listSource">
+        </JqxListBox>
+
+        <JqxTreeGrid ref="myTreeGrid" style="margin-left: 20px; float: left;"
+            :showHeader="true"
+            :altRows="true"
+            :ready="ready"
+            :columns="columns"
+            :source="dataAdapter">
+        </JqxTreeGrid>
+    </div>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
+    
+    export default {
+        components: {
+            JqxTreeGrid,
+            JqxListBox
+        },
+        data: function () {
+            return {
+                listSource: [{ label: 'Budget', value: 'budget', checked: true }, { label: 'Location', value: 'location', checked: false }],
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: "Name",  align: "center", dataField: "name", width: 240 },
+                    { text: "Budget", cellsAlign: "center", align: "center", dataField: "budget", cellsFormat: "c2", width: 200 },
+                    { text: "Location", dataField: "location", cellsAlign: "center", align: "center", hidden: true, width: 200 }                
+                ]
+                
+            }
+        },        
+        beforeCreate: function () {
+            let data = [
+                {
+                    "id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas",
+                    "children":
+                    [
+                        {
+                            "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio",
+                            "children":
+                            [
+                                { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio" },
+                                {
+                                    "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio",
+                                    "children":
+                                    [
+                                        { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio" },
+                                        { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio" },
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami",
+                            "children":
+                            [
+                                { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami" },
+                                { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami" },
+                                { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami" }
+                            ]
+                        },
+                        { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston" }
+                    ]
+                }
+            ];
+            // prepare the data
+            this.source = {
+                dataType: "json",
+                dataFields: [
+                    { name: "name", type: "string" },
+                    { name: "budget", type: "number" },
+                    { name: "id", type: "number" },
+                    { name: "children", type: "array" },
+                    { name: "location", type: "string" }
+                ],
+                hierarchy:
+                    {
+                        root: "children"
+                    },
+                localData: data,
+                id: "id"
+            };            
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(1);
+                this.$refs.myTreeGrid.expandRow(2);
+            },
+            checkChange: function (event) {
+                this.$refs.myTreeGrid.beginUpdate();
+                if (event.args.checked) {
+                    this.$refs.myTreeGrid.showColumn(event.args.value);
+                }
+                else {
+                    this.$refs.myTreeGrid.hideColumn(event.args.value);
+                }
+
+                this.$refs.myTreeGrid.endUpdate();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/showorhidecolumn/main.js b/treegrid/showorhidecolumn/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/showorhidecolumn/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/showorhidecolumn/package.json b/treegrid/showorhidecolumn/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/showorhidecolumn/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/sorting/App.vue b/treegrid/sorting/App.vue
new file mode 100644
index 00000000..43c58627
--- /dev/null
+++ b/treegrid/sorting/App.vue
@@ -0,0 +1,88 @@
+<template>
+    <JqxTreeGrid ref="treeGrid"
+                 :width="getWidth"
+                 :source="dataAdapter"
+                 :sortable="true"
+                 :columns="columns"
+                 :ready="ready">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'FirstName', dataField: 'FirstName', width: 200 },
+                    { text: 'LastName', dataField: 'LastName', width: 200 },
+                    { text: 'Title', dataField: 'Title', width: 200 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Address', dataField: 'Address', width: 250 },
+                    { text: 'City', dataField: 'City', width: 120 },
+                    { text: 'Country', dataField: 'Country', width: 120 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const employees = [
+                {
+                    'EmployeeID': 2, 'FirstName': 'Andrew', 'LastName': 'Fuller', 'Country': 'USA', 'Title': 'Vice President, Sales', 'HireDate': '1992-08-14 00:00:00', 'BirthDate': '1952-02-19 00:00:00', 'City': 'Tacoma', 'Address': '908 W. Capital Way', 'expanded': 'true',
+                    'children': [
+                        { 'EmployeeID': 8, 'FirstName': 'Laura', 'LastName': 'Callahan', 'Country': 'USA', 'Title': 'Inside Sales Coordinator', 'HireDate': '1994-03-05 00:00:00', 'BirthDate': '1958-01-09 00:00:00', 'City': 'Seattle', 'Address': '4726 - 11th Ave. N.E.' },
+                        { 'EmployeeID': 1, 'FirstName': 'Nancy', 'LastName': 'Davolio', 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-05-01 00:00:00', 'BirthDate': '1948-12-08 00:00:00', 'City': 'Seattle', 'Address': '507 - 20th Ave. E.Apt. 2A' },
+                        { 'EmployeeID': 3, 'FirstName': 'Janet', 'LastName': 'Leverling', 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-04-01 00:00:00', 'BirthDate': '1963-08-30 00:00:00', 'City': 'Kirkland', 'Address': '722 Moss Bay Blvd.' },
+                        { 'EmployeeID': 4, 'FirstName': 'Margaret', 'LastName': 'Peacock', 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1993-05-03 00:00:00', 'BirthDate': '1937-09-19 00:00:00', 'City': 'Redmond', 'Address': '4110 Old Redmond Rd.' },
+                        {
+                            'EmployeeID': 5, 'FirstName': 'Steven', 'LastName': 'Buchanan', 'Country': 'UK', 'Title': 'Sales Manager', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1955-03-04 00:00:00', 'City': 'London', 'Address': '14 Garrett Hill', 'expanded': 'true',
+                            'children': [
+                                { 'EmployeeID': 6, 'FirstName': 'Michael', 'LastName': 'Suyama', 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1963-07-02 00:00:00', 'City': 'London', 'Address': 'Coventry House Miner Rd.' },
+                                { 'EmployeeID': 7, 'FirstName': 'Robert', 'LastName': 'King', 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-01-02 00:00:00', 'BirthDate': '1960-05-29 00:00:00', 'City': 'London', 'Address': 'Edgeham Hollow Winchester Way' },
+                                { 'EmployeeID': 9, 'FirstName': 'Anne', 'LastName': 'Dodsworth', 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-11-15 00:00:00', 'BirthDate': '1966-01-27 00:00:00', 'City': 'London', 'Address': '7 Houndstooth Rd.' }
+                            ]
+                        }
+                    ]
+                }
+            ];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'children', type: 'array' },
+                    { name: 'expanded', type: 'bool' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                    {
+                        root: 'children'
+                    },
+                id: 'EmployeeID',
+                localData: employees
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.treeGrid.expandRow(2);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/sorting/main.js b/treegrid/sorting/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/sorting/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/sorting/package.json b/treegrid/sorting/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/sorting/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/sortingapi/App.vue b/treegrid/sortingapi/App.vue
new file mode 100644
index 00000000..b3000121
--- /dev/null
+++ b/treegrid/sortingapi/App.vue
@@ -0,0 +1,124 @@
+<template>
+    <div>
+        <JqxTreeGrid ref="treeGrid"
+                     style="float: left;"
+                     :width="550"
+                     :source="dataAdapter"
+                     :columns="columns"
+                     :sortable="true"
+                     :ready="ready">
+        </JqxTreeGrid>
+
+        <div style="float: left; margin-left: 10px;">
+            <table>
+                <tr>
+                    <td align="right"><div><strong>Settings</strong></div></td>
+                    <td align="left"></td>
+                </tr>
+                <tr>
+                    <td align="right">Column:</td>
+                    <td align="left">
+                        <JqxDropDownList ref="columnName"
+                                         :width="100" :source="['First Name', 'Last Name' , 'City' , 'Country']"
+                                         :selectedIndex="0" :autoDropDownHeight="true">
+                        </JqxDropDownList>
+                    </td>
+                </tr>
+                <tr>
+                    <td align="right">Sort Order:</td>
+                    <td align="left">
+                        <JqxDropDownList ref="sortOrder"
+                                         :width="100" :source="['Ascending', 'Descending']"
+                                         :selectedIndex="0" :autoDropDownHeight="true">
+                        </JqxDropDownList>
+                    </td>
+                </tr>
+                <tr>
+                    <td align="right"></td>
+                    <td align="left">
+                        <JqxButton style="float: left;" @click="clickSort()">Sort</JqxButton>
+                        <JqxButton style="float: left; margin-left: 5px;" @click="clickClear()">Clear</JqxButton>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid,
+            JqxDropDownList,
+            JqxButton
+        },
+        data: function () {
+            return {
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'First Name', dataField: 'FirstName', width: 160 },
+                    { text: 'Last Name', dataField: 'LastName', width: 160 },
+                    { text: 'City', dataField: 'City', width: 120 },
+                    { text: 'Country', dataField: 'Country' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const employees = [
+                { 'EmployeeID': 1, 'FirstName': 'Nancy', 'LastName': 'Davolio', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-05-01 00:00:00', 'BirthDate': '1948-12-08 00:00:00', 'City': 'Seattle', 'Address': '507 - 20th Ave. E.Apt. 2A' },
+                { 'EmployeeID': 2, 'FirstName': 'Andrew', 'LastName': 'Fuller', 'ReportsTo': null, 'Country': 'USA', 'Title': 'Vice President, Sales', 'HireDate': '1992-08-14 00:00:00', 'BirthDate': '1952-02-19 00:00:00', 'City': 'Tacoma', 'Address': '908 W. Capital Way' },
+                { 'EmployeeID': 3, 'FirstName': 'Janet', 'LastName': 'Leverling', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-04-01 00:00:00', 'BirthDate': '1963-08-30 00:00:00', 'City': 'Kirkland', 'Address': '722 Moss Bay Blvd.' },
+                { 'EmployeeID': 4, 'FirstName': 'Margaret', 'LastName': 'Peacock', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1993-05-03 00:00:00', 'BirthDate': '1937-09-19 00:00:00', 'City': 'Redmond', 'Address': '4110 Old Redmond Rd.' },
+                { 'EmployeeID': 5, 'FirstName': 'Steven', 'LastName': 'Buchanan', 'ReportsTo': 2, 'Country': 'UK', 'Title': 'Sales Manager', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1955-03-04 00:00:00', 'City': 'London', 'Address': '14 Garrett Hill' },
+                { 'EmployeeID': 6, 'FirstName': 'Michael', 'LastName': 'Suyama', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1993-10-17 00:00:00', 'BirthDate': '1963-07-02 00:00:00', 'City': 'London', 'Address': 'Coventry House Miner Rd.' },
+                { 'EmployeeID': 7, 'FirstName': 'Robert', 'LastName': 'King', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-01-02 00:00:00', 'BirthDate': '1960-05-29 00:00:00', 'City': 'London', 'Address': 'Edgeham Hollow Winchester Way' },
+                { 'EmployeeID': 8, 'FirstName': 'Laura', 'LastName': 'Callahan', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Inside Sales Coordinator', 'HireDate': '1994-03-05 00:00:00', 'BirthDate': '1958-01-09 00:00:00', 'City': 'Seattle', 'Address': '4726 - 11th Ave. N.E.' },
+                { 'EmployeeID': 9, 'FirstName': 'Anne', 'LastName': 'Dodsworth', 'ReportsTo': 5, 'Country': 'UK', 'Title': 'Sales Representative', 'HireDate': '1994-11-15 00:00:00', 'BirthDate': '1966-01-27 00:00:00', 'City': 'London', 'Address': '7 Houndstooth Rd.' }
+            ];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'ReportsTo', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                    {
+                        keyDataField: { name: 'EmployeeID' },
+                        parentDataField: { name: 'ReportsTo' }
+                    },
+                id: 'EmployeeID',
+                localData: employees
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.treeGrid.expandRow(2);
+            },
+            clickSort: function() {
+                let columnIndex = this.$refs.columnName.selectedIndex;
+                let sortOrder = this.$refs.sortOrder.selectedIndex == 0 ? 'asc' : 'desc';
+                this.$refs.treeGrid.sortBy(this.columns[columnIndex].dataField, sortOrder);
+            },
+            clickClear: function() {
+                this.$refs.treeGrid.sortBy(null);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/sortingapi/main.js b/treegrid/sortingapi/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/sortingapi/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/sortingapi/package.json b/treegrid/sortingapi/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/sortingapi/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/tabdata/App.vue b/treegrid/tabdata/App.vue
new file mode 100644
index 00000000..112771eb
--- /dev/null
+++ b/treegrid/tabdata/App.vue
@@ -0,0 +1,55 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+        :width="width"
+        :height="400"
+        :ready="ready"
+        :columns="columns"
+        :source="dataAdapter">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),                
+                columns: [
+                    { text: 'Location Name', dataField: "Name", align: 'center', width: '50%' },
+                    { text: 'Population', dataField: "Population", align: 'center', width: '50%'}
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            this.source = {
+                dataType: "tab",
+                dataFields: [
+                    { name: "Id", type: "number" },
+                    { name: "Name", type: "string" },
+                    { name: "ParentID", type: "number" },
+                    { name: "Population", type: "number" }
+                ],
+                hierarchy:
+                {
+                    keyDataField: { name: 'Id' },
+                    parentDataField: { name: 'ParentID' }
+                },
+                id: 'Id',
+                url: '../sampledata/locations.tsv'
+            };                  
+        },
+        methods: {
+            ready: function () {
+                this.$refs.myTreeGrid.expandRow(34);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/tabdata/main.js b/treegrid/tabdata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/tabdata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/tabdata/package.json b/treegrid/tabdata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/tabdata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/validation/App.vue b/treegrid/validation/App.vue
new file mode 100644
index 00000000..ccb13fbc
--- /dev/null
+++ b/treegrid/validation/App.vue
@@ -0,0 +1,123 @@
+<template>
+    <JqxTreeGrid ref="treeGrid"
+                 :width="getWidth"
+                 :source="dataAdapter"
+                 :editable="true"
+                 :altRows="true"
+                 :autoRowHeight="true"
+                 :columns="columns"
+                 :ready="ready">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'ID', editable: false, columnType: 'none', dataField: 'id', width: 150 },
+                    {
+                        text: 'Name', dataField: 'name', width: 270,
+                        validation: (cell, value) => {
+                            if (value.toString().length < 4) {
+                                return { message: 'Name should be minimum 4 characters', result: false };
+                            }
+
+                            return true;
+                        }
+                    },
+                    {
+                        text: 'Budget', align: 'right', cellsAlign: 'right', cellsFormat: 'c2', dataField: 'budget', width: 200,
+                        validation: (cell, value) => {
+                            if (parseInt(value) < 0 || parseInt(value) > 1300000 || value == '') {
+                                return { message: 'Budget should be in the 0-1 300 000 interval', result: false };
+                            }
+
+                            return true;
+                        }
+                    },
+                    {
+                        text: 'Location', dataField: 'location',
+                        validation: (cell, value) => {
+                            if (value.toString().length < 4) {
+                                return { message: 'Location should be minimum 4 characters', result: false };
+                            }
+
+                            return true;
+                        }
+                    }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            const data = [
+                {
+                    'id': '1', 'name': 'Corporate Headquarters', 'budget': '1230000', 'location': 'Las Vegas',
+                    'children':
+                        [
+                            {
+                                'id': '2', 'name': 'Finance Division', 'budget': '423000', 'location': 'San Antonio',
+                                'children':
+                                    [
+                                        { 'id': '3', 'name': 'Accounting Department', 'budget': '113000', 'location': 'San Antonio' },
+                                        {
+                                            'id': '4', 'name': 'Investment Department', 'budget': '310000', 'location': 'San Antonio',
+                                            'children':
+                                                [
+                                                    { 'id': '5', 'name': 'Banking Office', 'budget': '240000', 'location': 'San Antonio' },
+                                                    { 'id': '6', 'name': 'Bonds Office', 'budget': '70000', 'location': 'San Antonio' },
+                                                ]
+                                        }
+                                    ]
+                            },
+                            {
+                                'id': '7', 'name': 'Operations Division', 'budget': '600000', 'location': 'Miami',
+                                'children':
+                                    [
+                                        { 'id': '8', 'name': 'Manufacturing Department', 'budget': '300000', 'location': 'Miami' },
+                                        { 'id': '9', 'name': 'Public Relations Department', 'budget': '200000', 'location': 'Miami' },
+                                        { 'id': '10', 'name': 'Sales Department', 'budget': '100000', 'location': 'Miami' }
+                                    ]
+                            },
+                            { 'id': '11', 'name': 'Research Division', 'budget': '200000', 'location': 'Boston' }
+                        ]
+                }
+            ];
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'name', type: 'string' },
+                    { name: 'budget', type: 'number' },
+                    { name: 'id', type: 'number' },
+                    { name: 'children', type: 'array' },
+                    { name: 'location', type: 'string' }
+                ],
+                hierarchy:
+                    {
+                        root: 'children'
+                    },
+                localData: data,
+                id: 'id'
+            };
+        },
+        methods: {
+            ready: function () {
+                this.$refs.treeGrid.expandRow(1);
+                this.$refs.treeGrid.expandRow(2);
+                this.$refs.treeGrid.expandRow(7);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/validation/main.js b/treegrid/validation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/validation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/validation/package.json b/treegrid/validation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/validation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/virtualmode/App.vue b/treegrid/virtualmode/App.vue
new file mode 100644
index 00000000..9c2249f1
--- /dev/null
+++ b/treegrid/virtualmode/App.vue
@@ -0,0 +1,120 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+        :width="width"
+        :pageable="true"
+        :altRows="true"
+        :virtualModeCreateRecords="virtualModeCreateRecords"
+        :virtualModeRecordCreating="virtualModeRecordCreating"
+        :columns="columns">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Task', dataField: "task", align: 'center', width: 300 },
+                    { text: 'Person Name', dataField: "name", cellsAlign: 'center', align: 'center', width: 300 },
+                    {
+                        text: 'Duration', aggregates: ['sum'], dataField: "duration", cellsAlign: 'center', align: 'center', 
+                        cellsRenderer: (row, column, value) => {
+                            let hour = value > 1 ? " hours" : " hour";
+                            return value + hour;
+                        }
+                    }
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            this.source = {
+                dataType: "tab",
+                dataFields: [
+                    { name: "Id", type: "number" },
+                    { name: "Name", type: "string" },
+                    { name: "ParentID", type: "number" },
+                    { name: "Population", type: "number" }
+                ],
+                hierarchy:
+                {
+                    keyDataField: { name: 'Id' },
+                    parentDataField: { name: 'ParentID' }
+                },
+                id: 'Id',
+                url: '../sampledata/locations.tsv'
+            };                  
+        },
+        methods: {
+            generateTasks: function(rowsCount) {
+                let rowsCountData = !rowsCount ? 1 + Math.floor(Math.random() * 5) : rowsCount;
+                let data = new Array();
+                let generatekey = () => {
+                    let S4 = () => {
+                        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+                    };
+                    return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
+                };
+                for (let i = 0; i < rowsCountData; i++) {
+                    let row = {};
+                    let tasks = ["Shopping", "Housewares", "Kitchen supplies", "Groceries", "Cleaning supplies", "Office supplies", "Remodeling", "Paint bedroom", "Paint wall", "Fitness", "Decorate living room",
+                        "Fix lights", "Fix front door", "Clean kitchen"];
+                    let firstNames =
+                    [
+                        "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
+                    ];
+                    let lastNames =
+                    [
+                        "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
+                    ];
+                    row["id"] = generatekey();
+                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
+                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
+                    row["name"] = row["firstname"] + " " + row["lastname"];
+                    let taskindex = Math.floor(Math.random() * tasks.length);
+                    row["task"] = tasks[taskindex];
+                    row["duration"] = 1 + Math.floor(Math.random() * 10);
+                    data.push(row);
+                }
+                return data;
+            },
+            virtualModeCreateRecords: function (expandedRecord, done) {
+                // expandedRecord is equal to null when the function is initially called, because there is still no record to be expanded.
+                // prepare the data
+                let source =
+                {
+                    dataType: "array",
+                    dataFields: [
+                        { name: "id", type: "string" },
+                        { name: "name", type: "string" },
+                        { name: "duration", type: "number" },
+                        { name: "task", type: "number" }
+                    ],
+                    localData: expandedRecord === null ? this.generateTasks(3000) : this.generateTasks(),
+                    id: 'id'
+                }
+                let dataAdapter = new $.jqx.dataAdapter(source, {
+                    loadComplete: () => {
+                        done(dataAdapter.records);
+                    }
+                });
+                dataAdapter.dataBind();
+            },
+            virtualModeRecordCreating: function (record) {
+                if (record.level == 2) {
+                    // by setting the record's leaf member to true, you will define the record as a leaf node.
+                    record.leaf = true;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/virtualmode/main.js b/treegrid/virtualmode/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/virtualmode/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/virtualmode/package.json b/treegrid/virtualmode/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/virtualmode/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/virtualmodewithajax/App.vue b/treegrid/virtualmodewithajax/App.vue
new file mode 100644
index 00000000..954fc5f4
--- /dev/null
+++ b/treegrid/virtualmodewithajax/App.vue
@@ -0,0 +1,90 @@
+<template>
+    <div>
+        <h3 style="font-size: 16px; font-family: Verdana;">Data Source: "http://services.odata.org"</h3>
+        <JqxTreeGrid ref="treeGrid"
+                     :width="getWidth"
+                     :virtualModeCreateRecords="virtualModeCreateRecords"
+                     :virtualModeRecordCreating="virtualModeRecordCreating"
+                     :columns="columns">
+        </JqxTreeGrid>
+    </div>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('treegrid'),
+                columns: [
+                    { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 150 },
+                    { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 150 },
+                    { text: 'Title', dataField: 'Title', width: 200 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd' }
+                ]
+            }
+        },
+        beforeCreate: function () {
+
+            this.source = {
+                dataType: 'json',
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'ReportsTo', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'Country', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                timeout: 10000,
+                hierarchy:
+                    {
+                        keyDataField: { name: 'EmployeeID' },
+                        parentDataField: { name: 'ReportsTo' }
+                    },
+                id: 'EmployeeID',
+                root: 'value',
+                url: 'http://services.odata.org/V3/Northwind/Northwind.svc/Employees?$format=json&$callback=?'
+            };
+        },
+        methods: {
+            virtualModeCreateRecords: function (expandedRecord, done) {
+                let dataAdapter = new jqx.dataAdapter(this.source,
+                    {
+                        formatData: (data) => {
+                            if (expandedRecord == null) {
+                                data.$filter = '(ReportsTo eq null)'
+                            }
+                            else {
+                                data.$filter = '(ReportsTo eq ' + expandedRecord.EmployeeID + ')'
+                            }
+                            return data;
+                        },
+                        loadComplete: () => {
+                            done(dataAdapter.records);
+                        },
+                        loadError: (xhr, status, error) => {
+                            done(false);
+                            throw new Error('http://services.odata.org: ' + error.toString());
+                        }
+                    }
+                );
+                dataAdapter.dataBind();
+            },
+            virtualModeRecordCreating: function (record) {
+                // record is creating.
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/treegrid/virtualmodewithajax/main.js b/treegrid/virtualmodewithajax/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/virtualmodewithajax/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/virtualmodewithajax/package.json b/treegrid/virtualmodewithajax/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/virtualmodewithajax/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treegrid/xmldata/App.vue b/treegrid/xmldata/App.vue
new file mode 100644
index 00000000..726999d2
--- /dev/null
+++ b/treegrid/xmldata/App.vue
@@ -0,0 +1,68 @@
+<template>
+    <JqxTreeGrid ref="myTreeGrid"
+        :width="width"
+        :pageable="true"
+        :columnsResize="true"
+        :ready="ready"
+        :columns="columns"
+        :source="dataAdapter">
+    </JqxTreeGrid>
+</template>
+
+<script>
+    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
+
+    export default {
+        components: {
+            JqxTreeGrid
+        },
+        data: function () {
+            return {
+                width: getWidth('treegrid'),
+                dataAdapter: new jqx.dataAdapter(this.source),
+                ready: () => {
+                    // expand row with 'EmployeeKey = 2'
+                    this.$refs.myTreeGrid.expandRow(2);                    
+                },
+                columns: [
+                    { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 200 },
+                    { text: 'LastName', dataField: 'LastName', width: 200 },
+                    { text: 'Title', dataField: 'Title', width: 300 },
+                    { text: 'Address', dataField: 'Address', width: 200 },
+                    { text: 'City', dataField: 'City', width: 150 },
+                    { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
+                    { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }
+                ]
+            }
+        },        
+        beforeCreate: function () {
+            let url = "../sampledata/employees.xml";
+            this.source = {
+                dataType: "xml",
+                dataFields: [
+                    { name: 'EmployeeID', type: 'number' },
+                    { name: 'ReportsTo', type: 'number' },
+                    { name: 'FirstName', type: 'string' },
+                    { name: 'LastName', type: 'string' },
+                    { name: 'City', type: 'string' },
+                    { name: 'Address', type: 'string' },
+                    { name: 'Title', type: 'string' },
+                    { name: 'HireDate', type: 'date' },
+                    { name: 'BirthDate', type: 'date' }
+                ],
+                hierarchy:
+                {
+                    keyDataField: { name: 'EmployeeID' },
+                    parentDataField: { name: 'ReportsTo' }
+                },
+                id: 'EmployeeID',
+                root: 'Employees',
+                record: 'Employee',
+                url: url
+            };                  
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treegrid/xmldata/main.js b/treegrid/xmldata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treegrid/xmldata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treegrid/xmldata/package.json b/treegrid/xmldata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treegrid/xmldata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treemap/automaticrendering/App.vue b/treemap/automaticrendering/App.vue
new file mode 100644
index 00000000..c604c539
--- /dev/null
+++ b/treemap/automaticrendering/App.vue
@@ -0,0 +1,103 @@
+<template>
+    <JqxTreeMap 
+        :width="850" :height="400"
+        :colorRange="100"
+        :colorMode="'autoColors'"
+        :baseColor="'#52CBFF'"
+        :legendScaleCallback="legendScaleCallback"
+        :legendLabel="'Olympic medal count - London 2012'"
+        :source="data">
+    </JqxTreeMap>
+</template>
+
+<script>
+    import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
+
+    export default {
+        components: {
+            JqxTreeMap
+        },
+        
+        beforeCreate: function () {
+            this.legendScaleCallback = (v) =>
+            {
+                v = v.toFixed(1);
+                return v;
+            };
+
+            this.data = [
+                {
+                    label: 'USA',
+                    value: 104
+                },
+                {
+                    label: 'People\'s Republic of China',
+                    value: 88
+                },
+                {
+                    label: 'Great Britain',
+                    value: 65
+                },
+                {
+                    label: 'Russian Federation',
+                    value: 82
+                },
+                {
+                    label: 'Germany',
+                    value: 44
+                },
+                {
+                    label: 'Republic of Korea',
+                    value: 28
+                },
+                {
+                    label: 'France',
+                    value: 34
+                },
+                {
+                    label: 'Italy',
+                    value: 28
+                },
+                {
+                    label: 'Hungary',
+                    value: 17
+                },
+                {
+                    label: 'Australia',
+                    value: 35
+                },
+                {
+                    label: 'Japan',
+                    value: 38
+                },
+                {
+                    label: 'Kazakhstan',
+                    value: 13
+                },
+                {
+                    label: 'Netherlands',
+                    value: 20
+                },
+                {
+                    label: 'Ukraine',
+                    value: 20
+                },
+                {
+                    label: 'New Zealand',
+                    value: 13
+                },
+                {
+                    label: 'Cuba',
+                    value: 14
+                }
+            ];
+
+        }
+    }
+</script>
+
+<style>
+    .jqx-treemap-legend {
+        background: rgba(0, 0, 0, 0.4);
+    }
+</style>
diff --git a/treemap/automaticrendering/main.js b/treemap/automaticrendering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treemap/automaticrendering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treemap/automaticrendering/package.json b/treemap/automaticrendering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treemap/automaticrendering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treemap/bindingtojson/App.vue b/treemap/bindingtojson/App.vue
new file mode 100644
index 00000000..52415add
--- /dev/null
+++ b/treemap/bindingtojson/App.vue
@@ -0,0 +1,134 @@
+<template>
+    <JqxTreeMap 
+        :width="850" 
+        :height="600"
+        :baseColor="'#0afaaa'"
+        :renderCallbacks="renderCallbacks"
+        :source="records">
+    </JqxTreeMap>
+</template>
+
+<script>
+    import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
+
+    export default {
+        components: {
+            JqxTreeMap
+        },
+        
+        beforeCreate: function () {
+            this.renderCallbacks =
+            {
+                '*': (element, data) => {
+                    if (!data.parent) {
+                        element.css({
+                            backgroundColor: '#fff',
+                            border: '1px solid #aaa'
+                        });
+                    }
+                    else {
+                        let nThreshold = 105;
+                        let bgDelta = (data.rgb.r * 0.299) + (data.rgb.g * 0.587) + (data.rgb.b * 0.114);
+                        let foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White';
+                        element.css({
+                            color: foreColor
+                        });
+                    }
+                }
+            };
+
+            this.data = [
+                {
+                    "id": "2",
+                    "parentid": "1",
+                    "text": "Hot Chocolate",
+                    "value": "$5.2"
+                }, {
+                    "id": "3",
+                    "parentid": "1",
+                    "text": "Peppermint Hot Chocolate",
+                    "value": "$4.0"
+                }, {
+                    "id": "4",
+                    "parentid": "1",
+                    "text": "Salted Caramel Hot Chocolate",
+                    "value": "$2.4"
+                }, {
+                    "id": "5",
+                    "parentid": "1",
+                    "text": "White Hot Chocolate",
+                    "value": "$2.5"
+                }, {
+                    "text": "Chocolate Beverage",
+                    "id": "1",
+                    "parentid": "-1",
+                    "value": "$1.1"
+                }, {
+                    "id": "6",
+                    "text": "Espresso Beverage",
+                    "parentid": "-1",
+                    "value": "$0.9"
+                }, {
+                    "id": "7",
+                    "parentid": "6",
+                    "text": "Caffe Americano",
+                    "value": "$1.2"
+                }, {
+                    "id": "8",
+                    "text": "Caffe Latte",
+                    "parentid": "6",
+                    "value": "$3.3"
+                }, {
+                    "id": "9",
+                    "text": "Caffe Mocha",
+                    "parentid": "6",
+                    "value": "$2.5"
+                }, {
+                    "id": "10",
+                    "text": "Cappuccino",
+                    "parentid": "6",
+                    "value": "$1.5"
+                }, {
+                    "id": "11",
+                    "text": "Pumpkin Spice Latte",
+                    "parentid": "6",
+                    "value": "$1.6"
+                }, {
+                    "id": "12",
+                    "text": "Frappuccino",
+                    "parentid": "-1"
+                }, {
+                    "id": "13",
+                    "text": "Caffe Vanilla Frappuccino",
+                    "parentid": "12",
+                    "value": "$1.2"
+                }
+            ];
+
+            let source = {
+                datatype: "json",
+                datafields: [
+                    { name: 'id' },
+                    { name: 'parentid' },
+                    { name: 'text' },
+                    { name: 'value' }
+                ],
+                id: 'id',
+                localdata: this.data
+            };
+            // create data adapter.
+            let dataAdapter = new $.jqx.dataAdapter(source);
+            // perform Data Binding.
+            dataAdapter.dataBind();
+            // get the treemap sectors. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
+            // the sub items collection name. Each jqxTreeMap item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
+            // specifies the mapping between the 'text' and 'label' fields.  
+            this.records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
+
+                
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treemap/bindingtojson/main.js b/treemap/bindingtojson/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treemap/bindingtojson/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treemap/bindingtojson/package.json b/treemap/bindingtojson/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treemap/bindingtojson/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treemap/bindingtotabdata/App.vue b/treemap/bindingtotabdata/App.vue
new file mode 100644
index 00000000..12b9d770
--- /dev/null
+++ b/treemap/bindingtotabdata/App.vue
@@ -0,0 +1,85 @@
+<template>
+    <div>
+        <div>
+            <h3>U.S. Historical Home Prices (1950-2011)</h3>
+        </div>
+        <JqxTreeMap 
+            :width="850" 
+            :height="500"
+            :displayMember="'Year'"
+            :valueMember="'Rate'"
+            :colorMode="'rangeColors'"
+            :colorRanges="colorRanges"
+            :renderCallbacks="renderCallbacks"
+            :legendLabel="'Interest Rate'"
+            :source="dataAdapter">
+        </JqxTreeMap>
+    </div>
+</template>
+
+<script>
+    import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
+
+    export default {
+        components: {
+            JqxTreeMap
+        },
+        
+        beforeCreate: function () {
+            console.log('beforeCreate')
+
+             let source =
+             {
+                  datatype: "tab",
+                  datafields: [
+                      { name: 'Year' },
+                      { name: 'HPI' },
+                      { name: 'BuildCost' },
+                      { name: 'Population' },
+                      { name: 'Rate' }
+                  ],
+                  url: '../sampledata/homeprices.txt'
+              };
+            this.dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
+            
+            this.colorRanges = [
+                { min: 0.02, max: 0.03, color: '#ff0300' },
+                { min: 0.03, max: 0.04, color: '#fe2e00' },
+                { min: 0.04, max: 0.05, color: '#fe3900' },
+                { min: 0.05, max: 0.06, color: '#ff5400' },
+                { min: 0.06, max: 0.07, color: '#fe7500' },
+                { min: 0.07, max: 0.08, color: '#fe8200' },
+                { min: 0.08, max: 0.09, color: '#ffed00' },
+                { min: 0.09, max: 0.1, color: '#b8db00' },
+                { min: 0.1, max: 0.11, color: '#7fbf00' },
+                { min: 0.11, max: 0.12, color: '#50a600' },
+                { min: 0.12, max: 0.15, color: '#008000' }
+            ];
+
+            this.renderCallbacks =
+            {
+                '*': function (element, data) {
+                    var content = '<div><div style="font-weight: bold; font-family: verdana; font-size: 13px;">Year: ' + data.record.Year + '</div>';
+                    content += '<div style=" font-family: verdana; font-size: 12px;">HPI: ' + data.record.HPI + '</div>';
+                    content += '<div style=" font-family: verdana; font-size: 12px;">Build Cost: ' + data.record.BuildCost + '</div>';
+                    content += '<div style=" font-family: verdana; font-size: 12px;">Population: ' + data.record.Population + '</div>';
+                    content += '<div style=" font-family: verdana; font-size: 12px;">Interest Rate: ' + data.record.Rate + '</div>';
+                    content += '</div>';
+                    element.jqxTooltip({
+                        content: content,
+                        position: 'mouse',
+                        autoHideDelay: 6000,
+                        theme: theme
+                    });
+                }
+            };
+        }
+    }
+</script>
+
+<style>
+    .jqx-treemap-legend {
+        width: 350px;
+        background: rgba(0, 0, 0, 0.4);
+    }
+</style>
diff --git a/treemap/bindingtotabdata/main.js b/treemap/bindingtotabdata/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treemap/bindingtotabdata/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treemap/bindingtotabdata/package.json b/treemap/bindingtotabdata/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treemap/bindingtotabdata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treemap/customrendering/App.vue b/treemap/customrendering/App.vue
new file mode 100644
index 00000000..68b958ad
--- /dev/null
+++ b/treemap/customrendering/App.vue
@@ -0,0 +1,85 @@
+<template>
+    <div>
+        <JqxTreeMap 
+            :width="850" 
+            :height="300"
+            :colorRanges="colorRanges"
+            :renderCallbacks="renderCallbacks"
+            :source="data">
+        </JqxTreeMap>
+        <span style="font-size: 13px; font-family: Verdana;">Non-mobile web browser usage for Wikimedia visitors as of March 2014</span>
+    </div>
+</template>
+
+<script>
+    import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
+
+    export default {
+        components: {
+            JqxTreeMap
+        },
+        
+        beforeCreate: function () {
+            this.colorRanges = [
+                { min: 1254040000, max: 1454040000, color: '#de290b' },
+                { min: 1054040000, max: 1254039999, color: '#de440c' },
+                { min: 300000000, max: 1054040000, color: '#ea7707' },
+                { min: 210000000, max: 460000000, color: '#ee8a06' },
+                { min: 190000000, max: 209999999, color: '#f19505' },
+                { min: 180000000, max: 189999999, color: '#f6a903' },
+                { min: 160000000, max: 179999999, color: '#f8b203' },
+                { min: 140000000, max: 159999999, color: '#fabb02' },
+                { min: 100000000, max: 139999999, color: '#fbbf01' },
+                { min: 90000000, max: 99999999, color: '#fbcd01' },
+                { min: 10000000, max: 89999999, color: '#fbde33' }
+            ];
+
+            this.renderCallbacks = 
+            {
+                '*': (element, data) => {
+                    element.css({
+                        color: '#ffffff'
+                    });
+                    element.html('<span style="font-size: 11px;" class="jqx-treemap-label">' + data.label + ', ' + data.value + '%</span>');
+                    return true;
+                }
+            };
+
+            this.data = [
+                {
+                    label: 'Chrome',
+                    value: 44.06,
+                    color: "#37c837"
+                },
+                {
+                    label: 'Internet Explorer',
+                    value: 22.08,
+                    color: "#0066ff"
+                },
+                {
+                    label: 'Firefox',
+                    value: 18.17,
+                    color: "#ed7b0f"
+                },
+                {
+                    label: 'Others',
+                    value: 9.07,
+                    color: "#818181"
+                },
+                {
+                    label: 'Opera',
+                    value: 3.38,
+                    color: "#9a0900"
+                },
+                {
+                    label: 'Safari',
+                    value: 3.24,
+                    color: "#4dbff1"
+                }
+            ];
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treemap/customrendering/main.js b/treemap/customrendering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treemap/customrendering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treemap/customrendering/package.json b/treemap/customrendering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treemap/customrendering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treemap/defaultfunctionality/App.vue b/treemap/defaultfunctionality/App.vue
new file mode 100644
index 00000000..ba9fa878
--- /dev/null
+++ b/treemap/defaultfunctionality/App.vue
@@ -0,0 +1,175 @@
+<template>
+    <JqxTreeMap :width="850" :height="600" :source="data"
+        :colorRange="50" :renderCallbacks="renderCallbacks">
+    </JqxTreeMap>
+</template>
+
+<script>
+    import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
+
+    export default {
+        components: {
+            JqxTreeMap
+        },
+        
+        beforeCreate: function () {
+            this.renderCallbacks =
+            {
+                '*': (elementObject, value) => {
+                    if (value.data === undefined) {
+                        let element = elementObject[0];
+                        element.style.backgroundColor = '#fff';
+                        element.style.border = '1px solid #555';
+                    }
+                    else {
+                        elementObject.jqxTooltip({
+                            content: '<div><div style="font-weight: bold; max-width: 200px; font-family: verdana; font-size: 13px;">' + value.data.title + '</div><div style="width: 200px; font-family: verdana; font-size: 12px;">' + value.data.description + '</div></div>',
+                            position: 'mouse',
+                            autoHideDelay: 6000
+                        });
+                    }
+                }
+            };
+
+            this.data = [
+                {
+                    label: 'Drama',
+                    value: null,
+                    color: '#B3FAFF'
+                },
+                {
+                    label: 'Crime',
+                    value: null,
+                    color: '#95FF7A'
+                },
+                {
+                    label: 'Action',
+                    value: null,
+                    color: '#FFA3CE'
+                },
+                {
+                    label: 'Comedy',
+                    value: null,
+                    color: '#F1A3FF'
+                },
+                {
+                    label: 'The Shawshank Redemption',
+                    value: 15.4,
+                    parent: 'Drama',
+                    data: { description: "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.", title: "The Shawshank Redemption (1994)" }
+                },
+                {
+                    label: 'Top Gun',
+                    value: 4,
+                    parent: 'Drama',
+                    data: { description: "As students at the Navy's elite fighter weapons school compete to be best in the class, one daring young flyer learns a few things from a civilian instructor that are not taught in the classroom.", title: "Top Gun (1986)" }
+                },
+                {
+                    label: 'The Master',
+                    value: 4.5,
+                    parent: 'Drama',
+                    data: { description: "A Naval veteran arrives home from war unsettled and uncertain of his future - until he is tantalized by The Cause and its charismatic leader.", title: "The Master (2012)" }
+                },
+                {
+                    label: 'Argo',
+                    value: 6.8,
+                    parent: 'Drama',
+                    data: { description: "A dramatization of the 1980 joint CIA-Canadian secret operation to extract six fugitive American diplomatic personnel out of revolutionary Iran.", title: "Argo (2012)" }
+                },
+                {
+                    label: 'Fight Club',
+                    value: 8.8,
+                    parent: 'Crime',
+                    data: { description: "An insomniac office worker looking for a way to change his life crosses paths with a devil-may-care soap maker and they form an underground fight club that evolves into something much, much more.", title: "Fight Club (1999)" }
+                },
+                {
+                    label: 'The Godfather',
+                    value: 11,
+                    parent: 'Crime',
+                    data: { description: "The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.", title: "The Godfather (1972)" }
+                },
+                {
+                    label: 'The Dark Knight',
+                    value: 8.9,
+                    parent: 'Action',
+                    data: { description: "When Batman, Gordon and Harvey Dent launch an assault on the mob, they let the clown out of the box, the Joker, bent on turning Gotham on itself and bringing any heroes down to his level.", title: "The Dark Knight (2008)" }
+                },
+                {
+                    label: 'Pulp Fiction',
+                    value: 6.0,
+                    parent: 'Crime',
+                    data: { description: "The lives of two mob hit men, a boxer, a gangster's wife, and a pair of diner bandits intertwine in four tales of violence and redemption.", title: "Pulp Fiction (1994)" }
+                },
+                {
+                    label: 'Forrest Gump',
+                    value: 8.7,
+                    parent: 'Drama',
+                    data: { description: "Forrest Gump, while not intelligent, has accidentally been present at many historic moments, but his true love, Jenny Curran, eludes him.", title: "Forrest Gump (1994)" }
+                },
+                {
+                    label: 'The Matrix',
+                    value: 8.7,
+                    parent: 'Action',
+                    data: { description: "A computer hacker learns from mysterious rebels about the true nature of his reality and his role in the war against its controllers.", title: "The Matrix (1999)" }
+                },
+                {
+                    label: '12 Angry Men',
+                    value: 7.9,
+                    parent: 'Drama',
+                    data: { description: "Twelve men must decide the fate of one when one juror objects to the jury's decision.", title: "12 Angry Men (TV 1997)" }
+                },
+                {
+                    label: 'Star Wars',
+                    value: 10.8,
+                    parent: 'Action',
+                    data: { description: "Luke Skywalker, a spirited farm boy, joins rebel forces to save Princess Leia from the evil Darth Vader, and the galaxy from the Empire's planet-destroying Death Star..", title: "Star Wars: Episode IV - A New Hope (1977)" }
+                },
+                {
+                    label: 'Inception',
+                    value: 9.8,
+                    parent: 'Action',
+                    data: { description: "A skilled extractor is offered a chance to regain his old life as payment for a task considered to be impossible.", title: "Inception (2010)" }
+                },
+                {
+                    label: 'Snatch.',
+                    value: 4.3,
+                    parent: 'Crime',
+                    data: { description: "Unscrupulous boxing promoters, violent bookmakers, a Russian gangster, incompetent amateur robbers, and supposedly Jewish jewelers fight to track down a priceless stolen diamond.", title: "Snatch (2000)" }
+                },
+                {
+                    label: 'Toy Story',
+                    value: 9.3,
+                    parent: 'Comedy',
+                    data: { description: "A cowboy doll is profoundly threatened and jealous when a new spaceman figure supplants him as top toy in a boy's room.", title: "Toy Story(2005)" }
+                },
+                {
+                    label: 'Skyfall',
+                    value: 7,
+                    parent: 'Crime',
+                    data: { description: "Bond's loyalty to M is tested when her past comes back to haunt her. Whilst MI6 comes under attack, 007 must track down and destroy the threat, no matter how personal the cost.", title: "Skyfall (2012)" }
+                },
+                {
+                    label: 'Parker',
+                    value: 5.6,
+                    parent: 'Crime',
+                    data: { description: "A thief with a unique code of professional ethics is double-crossed by his crew and left for dead. Assuming a new disguise and forming an unlikely alliance with a woman on the inside, he looks to hijack the score of the crew's latest heist.", title: "Parker (1994)" }
+                },
+                {
+                    label: 'District 9',
+                    value: 6.0,
+                    parent: 'Action',
+                    data: { description: "An extraterrestrial race forced to live in slum-like conditions on Earth suddenly finds a kindred spirit in a government agent who is exposed to their biotechnology.", title: "District 9 (2009)" }
+                },
+                {
+                    label: 'Stalag 17',
+                    value: 6.1,
+                    parent: 'Comedy',
+                    data: { description: "When two escaping American World War II prisoners are killed, the German POW camp barracks black marketeer, J.J. Sefton, is suspected of being an informer.", title: "Stalag 17 (1953)"}
+                }
+            ];
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/treemap/defaultfunctionality/main.js b/treemap/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treemap/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treemap/defaultfunctionality/package.json b/treemap/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treemap/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treemap/fluidsize/App.vue b/treemap/fluidsize/App.vue
new file mode 100644
index 00000000..6bf8616e
--- /dev/null
+++ b/treemap/fluidsize/App.vue
@@ -0,0 +1,124 @@
+<template>
+    <JqxTreeMap 
+        :width="'75%'" 
+        :height="'75%'"
+        :colorRange="100"
+        :colorMode="'autoColors'"
+        :baseColor="'#52CBFF'"
+        :legendScaleCallback="legendScaleCallback"
+        :legendLabel="'Olympic medal count - London 2012'"
+        :source="data">
+    </JqxTreeMap>
+</template>
+
+<script>
+    import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
+
+    export default {
+        components: {
+            JqxTreeMap
+        },
+        
+        beforeCreate: function () {
+            this.colorRanges = [
+                { min: 1254040000, max: 1454040000, color: '#de290b' },
+                { min: 1054040000, max: 1254039999, color: '#de440c' },
+                { min: 300000000, max: 1054040000, color: '#ea7707' },
+                { min: 210000000, max: 460000000, color: '#ee8a06' },
+                { min: 190000000, max: 209999999, color: '#f19505' },
+                { min: 180000000, max: 189999999, color: '#f6a903' },
+                { min: 160000000, max: 179999999, color: '#f8b203' },
+                { min: 140000000, max: 159999999, color: '#fabb02' },
+                { min: 100000000, max: 139999999, color: '#fbbf01' },
+                { min: 90000000, max: 99999999, color: '#fbcd01' },
+                { min: 10000000, max: 89999999, color: '#fbde33' }
+            ];
+
+            this.legendScaleCallback = (v) => {
+                return v.toFixed(1);
+            };
+
+            this.data = [
+                {
+                    label: 'USA',
+                    value: 104
+                },
+                {
+                    label: 'People\'s Republic of China',
+                    value: 88
+                },
+                {
+                    label: 'Great Britain',
+                    value: 65
+                },
+                {
+                    label: 'Russian Federation',
+                    value: 82
+                },
+                {
+                    label: 'Germany',
+                    value: 44
+                },
+                {
+                    label: 'Republic of Korea',
+                    value: 28
+                },
+                {
+                    label: 'France',
+                    value: 34
+                },
+                {
+                    label: 'Italy',
+                    value: 28
+                },
+                {
+                    label: 'Hungary',
+                    value: 17
+                },
+                {
+                    label: 'Australia',
+                    value: 35
+                },
+                {
+                    label: 'Japan',
+                    value: 38
+                },
+                {
+                    label: 'Kazakhstan',
+                    value: 13
+                },
+                {
+                    label: 'Netherlands',
+                    value: 20
+                },
+                {
+                    label: 'Ukraine',
+                    value: 20
+                },
+                {
+                    label: 'New Zealand',
+                    value: 13
+                },
+                {
+                    label: 'Cuba',
+                    value: 14
+                }
+            ];
+
+        }
+    }
+</script>
+
+<style>
+    .jqx-treemap-legend {
+        width: 75%;
+        background: rgba(0, 0, 0, 0.4);
+    }
+    body, html {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+    }
+</style>
diff --git a/treemap/fluidsize/main.js b/treemap/fluidsize/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treemap/fluidsize/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treemap/fluidsize/package.json b/treemap/fluidsize/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treemap/fluidsize/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/treemap/issues.txt b/treemap/issues.txt
new file mode 100644
index 00000000..ff0ec472
--- /dev/null
+++ b/treemap/issues.txt
@@ -0,0 +1,17 @@
+ALL
+    -> source - Expected Object, got Array
+        => normal type is an array
+
+    -> there is no `getWidth("TreeMap")`
+
+    -> legendScaleCallback - Expected Object, got Function.
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treemap/rangesrendering/App.vue b/treemap/rangesrendering/App.vue
new file mode 100644
index 00000000..63224d64
--- /dev/null
+++ b/treemap/rangesrendering/App.vue
@@ -0,0 +1,124 @@
+<template>
+    <JqxTreeMap 
+        :width="850" 
+        :height="400"
+        :colorMode="'rangeColors'"
+        :colorRanges="colorRanges"
+        :baseColor="'#52CBFF'"
+        :legendScaleCallback="legendScaleCallback"
+        :legendLabel="'Population (in billions)'"
+        :source="data">
+    </JqxTreeMap>
+</template>
+
+<script>
+    import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
+
+    export default {
+        components: {
+            JqxTreeMap
+        },
+        
+        beforeCreate: function () {
+            this.colorRanges = [
+                { min: 1254040000, max: 1454040000, color: '#de290b' },
+                { min: 1054040000, max: 1254039999, color: '#de440c' },
+                { min: 300000000, max: 1054040000, color: '#ea7707' },
+                { min: 210000000, max: 460000000, color: '#ee8a06' },
+                { min: 190000000, max: 209999999, color: '#f19505' },
+                { min: 180000000, max: 189999999, color: '#f6a903' },
+                { min: 160000000, max: 179999999, color: '#f8b203' },
+                { min: 140000000, max: 159999999, color: '#fabb02' },
+                { min: 100000000, max: 139999999, color: '#fbbf01' },
+                { min: 90000000, max: 99999999, color: '#fbcd01' },
+                { min: 10000000, max: 89999999, color: '#fbde33' }
+            ];
+
+            this.legendScaleCallback = (v) => {
+                let convertValue = v / 1000000000;
+                return convertValue.toFixed(2);
+            };
+
+            this.data = [
+                {
+                    label: 'China',
+                    value: 1354040000
+                },
+                {
+                    label: 'India',
+                    value: 1210193422
+                },
+                {
+                    label: 'United States',
+                    value: 315498000
+                },
+                {
+                    label: 'Indonesia',
+                    value: 237641326
+                },
+                {
+                    label: 'Brazil',
+                    value: 193946886
+                },
+                {
+                    label: 'Pakistan',
+                    value: 182228000
+                },
+                {
+                    label: 'Nigeria',
+                    value: 166629000
+                },
+                {
+                    label: 'Bangladesh',
+                    value: 152518015
+                },
+                {
+                    label: 'Russia',
+                    value: 143369806
+                },
+                {
+                    label: 'Japan',
+                    value: 127460000
+                },
+                {
+                    label: 'Mexico',
+                    value: 112336538
+                },
+                {
+                    label: 'Philippines',
+                    value: 92337852
+                },
+                {
+                    label: 'Vietnam',
+                    value: 87840000
+                },
+                {
+                    label: 'Ethiopia',
+                    value: 84320987
+                },
+                {
+                    label: 'Egypt',
+                    value: 84320987
+                },
+                {
+                    label: 'Germany',
+                    value: 81946000
+                }
+            ];
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+    }
+
+    .jqx-treemap-legend {
+        width: 380px;
+    }
+</style>
diff --git a/treemap/rangesrendering/main.js b/treemap/rangesrendering/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/treemap/rangesrendering/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/treemap/rangesrendering/package.json b/treemap/rangesrendering/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/treemap/rangesrendering/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/validator/defaultfunctionality/App.vue b/validator/defaultfunctionality/App.vue
new file mode 100644
index 00000000..9ab3ecf6
--- /dev/null
+++ b/validator/defaultfunctionality/App.vue
@@ -0,0 +1,162 @@
+<template>
+    <JqxExpander :width="350" :showArrow="false" :toggleMode="'none'">
+        <div><h3 style="padding: 0; margin: 0;">Register</h3></div>
+        <div style="padding: 5px;">
+            <JqxValidator ref="myValidator" :rules="rules">
+                <form id="form" action="./">
+                    <table class="register-table">
+                        <tbody>
+                            <tr>
+                                <td>Username:</td>
+                                <td><JqxInput class="userInput text-input" :width="195" :height="22"></JqxInput></td>
+                            </tr>
+                            <tr>
+                                <td>Password:</td>
+                                <td><JqxPasswordInput ref="passwordInput" class="passwordInput text-input" :width="195" :height="22"></JqxPasswordInput></td>
+                            </tr>
+                            <tr>
+                                <td>Confirm password:</td>
+                                <td><JqxPasswordInput ref="confirmPasswordInput" class="passwordConfirmInput text-input" :width="195" :height="22"></JqxPasswordInput></td>
+                            </tr>
+                            <tr>
+                                <td>Real name:</td>
+                                <td><JqxInput :width="195" :height="22" class="realNameInput text-input"></JqxInput></td>
+                            </tr>
+                            <tr>
+                                <td>Birth date:</td>
+                                <td><JqxDateTimeInput ref="dateTimeInput" :width="195" :height="22" :value="initialDate" class="birthInput"></JqxDateTimeInput></td>
+                            </tr>
+                            <tr>
+                                <td>E-mail:</td>
+                                <td><JqxInput :placeHolder="'someone@mail.com'" class="emailInput text-input" :width="195" :height="22"></JqxInput></td>
+                            </tr>
+                            <tr>
+                                <td>SSN:</td>
+                                <td><JqxMaskedInput :width="195" :height="22" :mask="'###-##-####'" class="ssnInput"></JqxMaskedInput></td>
+                            </tr>
+                            <tr>
+                                <td>Phone:</td>
+                                <td><JqxMaskedInput :width="195" :height="22" :mask="'(###)###-####'" class="phoneInput"></JqxMaskedInput></td>
+                            </tr>
+                            <tr>
+                                <td>Zip code:</td>
+                                <td><JqxMaskedInput :width="195" :height="22" :mask="'###-##-####'" class="zipInput"></JqxMaskedInput></td>
+                            </tr>
+                            <tr>
+                                <td colspan="2" style="padding-left: 100px; padding-top: 10px; padding-bottom: 10px;">
+                                    <JqxCheckBox :width="130" class="acceptCheckBox">I accept terms</JqxCheckBox>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td colspan="2" style="padding-left: 20px;">
+                                    <JqxButton @click="sendButton()"
+                                               style="text-align: center; margin-left: 8em;"
+                                               :width="60" :height="25">
+                                        Send
+                                    </JqxButton>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </form>
+            </JqxValidator>
+        </div>
+    </JqxExpander>
+</template>
+
+<script>
+    import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
+    import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
+    import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
+    import JqxPasswordInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpasswordinput.vue';
+    import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
+    import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxExpander,
+            JqxValidator,
+            JqxInput,
+            JqxPasswordInput,
+            JqxDateTimeInput,
+            JqxMaskedInput,
+            JqxCheckBox,
+            JqxButton
+        },
+        data: function () {
+            return {
+                initialDate: new Date(2017, 8, 1),
+                rules: [
+                    { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
+                    { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' },
+                    { input: '.realNameInput', message: 'Real Name is required!', action: 'keyup, blur', rule: 'required' },
+                    { input: '.realNameInput', message: 'Your real name must contain only letters!', action: 'keyup', rule: 'notNumber' },
+                    { input: '.realNameInput', message: 'Your real name must be between 3 and 12 characters!', action: 'keyup', rule: 'length=2,12' },
+                    {
+                        input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2020.', action: 'valueChanged',
+                        rule: (input, commit) => {
+                            let date = this.$refs.dateTimeInput.value;
+                            let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2020;
+                            return result;
+                        }
+                    },
+                    { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
+                    { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
+                    { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
+                    {
+                        input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
+                        rule: (input, commit) => {
+                            if (this.$refs.passwordInput.val() === this.$refs.confirmPasswordInput.val()) {
+                                return true;
+                            }
+                            return false;
+                        }
+                    },
+                    { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
+                    { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' },
+                    { input: '.ssnInput', message: 'Invalid SSN!', action: 'valuechanged, blur', rule: 'ssn' },
+                    { input: '.phoneInput', message: 'Invalid phone number!', action: 'valuechanged, blur', rule: 'phone' },
+                    { input: '.zipInput', message: 'Invalid zip code!', action: 'valuechanged, blur', rule: 'zipCode' },
+                    { input: '.acceptCheckBox', message: 'You have to accept the terms', action: 'change', rule: 'required', position: 'right:217,0' }
+                ]
+            }
+        },
+        methods: {
+            sendButton: function() {
+                this.$refs.myValidator.validate(document.getElementById('form'));
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    .register-table {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+
+    .register-table td,
+    .register-table tr {
+        margin: 0px;
+        padding: 2px;
+        border-spacing: 0px;
+        border-collapse: collapse;
+        font-family: Verdana;
+        font-size: 12px;
+    }
+
+    h3 {
+        display: inline-block;
+        margin: 0px;
+        padding: 0px;
+    }
+</style>
\ No newline at end of file
diff --git a/validator/defaultfunctionality/main.js b/validator/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/validator/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/validator/defaultfunctionality/package.json b/validator/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/validator/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/validator/errorlabels/App.vue b/validator/errorlabels/App.vue
new file mode 100644
index 00000000..29de864f
--- /dev/null
+++ b/validator/errorlabels/App.vue
@@ -0,0 +1,162 @@
+<template>
+    <JqxExpander :width="350" :showArrow="false" :toggleMode="'none'">
+        <div><h3 style="padding: 0; margin: 0;">Register</h3></div>
+        <div style="padding: 5px;">
+            <JqxValidator ref="myValidator" :rules="rules" :animationDuration="0" :hintType="'label'">
+                <form id="form" action="./">
+                    <table class="register-table">
+                        <tbody>
+                            <tr>
+                                <td>Username:</td>
+                                <td><JqxInput class="userInput text-input" :width="195" :height="22"></JqxInput></td>
+                            </tr>
+                            <tr>
+                                <td>Password:</td>
+                                <td><JqxPasswordInput ref="passwordInput" class="passwordInput text-input" :width="195" :height="22"></JqxPasswordInput></td>
+                            </tr>
+                            <tr>
+                                <td>Confirm password:</td>
+                                <td><JqxPasswordInput ref="confirmPasswordInput" class="passwordConfirmInput text-input" :width="195" :height="22"></JqxPasswordInput></td>
+                            </tr>
+                            <tr>
+                                <td>Real name:</td>
+                                <td><JqxInput :width="195" :height="22" class="realNameInput text-input"></JqxInput></td>
+                            </tr>
+                            <tr>
+                                <td>Birth date:</td>
+                                <td><JqxDateTimeInput ref="dateTimeInput" :width="195" :height="22" :value="initialDate" class="birthInput"></JqxDateTimeInput></td>
+                            </tr>
+                            <tr>
+                                <td>E-mail:</td>
+                                <td><JqxInput :placeHolder="'someone@mail.com'" class="emailInput text-input" :width="195" :height="22"></JqxInput></td>
+                            </tr>
+                            <tr>
+                                <td>SSN:</td>
+                                <td><JqxMaskedInput :width="195" :height="22" :mask="'###-##-####'" class="ssnInput"></JqxMaskedInput></td>
+                            </tr>
+                            <tr>
+                                <td>Phone:</td>
+                                <td><JqxMaskedInput :width="195" :height="22" :mask="'(###)###-####'" class="phoneInput"></JqxMaskedInput></td>
+                            </tr>
+                            <tr>
+                                <td>Zip code:</td>
+                                <td><JqxMaskedInput :width="195" :height="22" :mask="'###-##-####'" class="zipInput"></JqxMaskedInput></td>
+                            </tr>
+                            <tr>
+                                <td colspan="2" style="padding-left: 100px; padding-top: 10px; padding-bottom: 10px;">
+                                    <JqxCheckBox :width="130" class="acceptCheckBox">I accept terms</JqxCheckBox>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td colspan="2" style="padding-left: 20px;">
+                                    <JqxButton @click="sendButton()"
+                                               style="text-align: center; margin-left: 8em;"
+                                               :width="60" :height="25">
+                                        Send
+                                    </JqxButton>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </form>
+            </JqxValidator>
+        </div>
+    </JqxExpander>
+</template>
+
+<script>
+    import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
+    import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
+    import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
+    import JqxPasswordInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpasswordinput.vue';
+    import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
+    import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxExpander,
+            JqxValidator,
+            JqxInput,
+            JqxPasswordInput,
+            JqxDateTimeInput,
+            JqxMaskedInput,
+            JqxCheckBox,
+            JqxButton
+        },
+        data: function () {
+            return {
+                initialDate: new Date(2017, 8, 1),
+                rules: [
+                    { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
+                    { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' },
+                    { input: '.realNameInput', message: 'Real Name is required!', action: 'keyup, blur', rule: 'required' },
+                    { input: '.realNameInput', message: 'Your real name must contain only letters!', action: 'keyup', rule: 'notNumber' },
+                    { input: '.realNameInput', message: 'Your real name must be between 3 and 12 characters!', action: 'keyup', rule: 'length=2,12' },
+                    {
+                        input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2020.', action: 'valueChanged',
+                        rule: (input, commit) => {
+                            let date = this.$refs.dateTimeInput.value;
+                            let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2020;
+                            return result;
+                        }
+                    },
+                    { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
+                    { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
+                    { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
+                    {
+                        input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
+                        rule: (input, commit) => {
+                            if (this.$refs.passwordInput.val() === this.$refs.confirmPasswordInput.val()) {
+                                return true;
+                            }
+                            return false;
+                        }
+                    },
+                    { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
+                    { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' },
+                    { input: '.ssnInput', message: 'Invalid SSN!', action: 'valuechanged, blur', rule: 'ssn' },
+                    { input: '.phoneInput', message: 'Invalid phone number!', action: 'valuechanged, blur', rule: 'phone' },
+                    { input: '.zipInput', message: 'Invalid zip code!', action: 'valuechanged, blur', rule: 'zipCode' },
+                    { input: '.acceptCheckBox', message: 'You have to accept the terms', action: 'change', rule: 'required', position: 'right:217,0' }
+                ]
+            }
+        },
+        methods: {
+            sendButton: function() {
+                this.$refs.myValidator.validate(document.getElementById('form'));
+            }
+        }
+    }
+</script>
+
+<style>
+    html, body {
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    .register-table {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+
+    .register-table td,
+    .register-table tr {
+        margin: 0px;
+        padding: 2px;
+        border-spacing: 0px;
+        border-collapse: collapse;
+        font-family: Verdana;
+        font-size: 12px;
+    }
+
+    h3 {
+        display: inline-block;
+        margin: 0px;
+        padding: 0px;
+    }
+</style>
\ No newline at end of file
diff --git a/validator/errorlabels/main.js b/validator/errorlabels/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/validator/errorlabels/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/validator/errorlabels/package.json b/validator/errorlabels/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/validator/errorlabels/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/validator/righttoleftlayout/App.vue b/validator/righttoleftlayout/App.vue
new file mode 100644
index 00000000..fb2d29bc
--- /dev/null
+++ b/validator/righttoleftlayout/App.vue
@@ -0,0 +1,164 @@
+<template>
+    <div style="float: right; direction: rtl;">
+        <JqxExpander :width="350" :showArrow="false" :toggleMode="'none'" :rtl="true">
+            <div><h3 style="padding: 0; margin: 0;">Register</h3></div>
+            <div style="padding: 5px;">
+                <JqxValidator ref="myValidator" :rules="rules" :rtl="true">
+                    <form id="form" action="./">
+                        <table class="register-table">
+                            <tbody>
+                                <tr>
+                                    <td>Username:</td>
+                                    <td><JqxInput class="userInput text-input" :width="195" :height="22" :rtl="true"></JqxInput></td>
+                                </tr>
+                                <tr>
+                                    <td>Password:</td>
+                                    <td><JqxPasswordInput ref="passwordInput" class="passwordInput text-input" :width="195" :height="22" :rtl="true"></JqxPasswordInput></td>
+                                </tr>
+                                <tr>
+                                    <td>Confirm password:</td>
+                                    <td><JqxPasswordInput ref="confirmPasswordInput" class="passwordConfirmInput text-input" :width="195" :height="22" :rtl="true"></JqxPasswordInput></td>
+                                </tr>
+                                <tr>
+                                    <td>Real name:</td>
+                                    <td><JqxInput :width="195" :height="22" :rtl="true" class="realNameInput text-input"></JqxInput></td>
+                                </tr>
+                                <tr>
+                                    <td>Birth date:</td>
+                                    <td><JqxDateTimeInput ref="dateTimeInput" :width="195" :height="22" :value="initialDate" :rtl="true" class="birthInput"></JqxDateTimeInput></td>
+                                </tr>
+                                <tr>
+                                    <td>E-mail:</td>
+                                    <td><JqxInput :placeHolder="'someone@mail.com'" class="emailInput text-input" :width="195" :height="22" :rtl="true"></JqxInput></td>
+                                </tr>
+                                <tr>
+                                    <td>SSN:</td>
+                                    <td><JqxMaskedInput :width="195" :height="22" :mask="'###-##-####'" class="ssnInput" :rtl="true"></JqxMaskedInput></td>
+                                </tr>
+                                <tr>
+                                    <td>Phone:</td>
+                                    <td><JqxMaskedInput :width="195" :height="22" :mask="'(###)###-####'" class="phoneInput" :rtl="true"></JqxMaskedInput></td>
+                                </tr>
+                                <tr>
+                                    <td>Zip code:</td>
+                                    <td><JqxMaskedInput :width="195" :height="22" :mask="'###-##-####'" class="zipInput" :rtl="true"></JqxMaskedInput></td>
+                                </tr>
+                                <tr>
+                                    <td colspan="2" style="padding-left: 100px; padding-top: 10px; padding-bottom: 10px;">
+                                        <JqxCheckBox :width="130" :rtl="true" class="acceptCheckBox">I accept terms</JqxCheckBox>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td colspan="2" style="padding-left: 20px;">
+                                        <JqxButton @click="sendButton()"
+                                                   style="text-align: center; margin-left: 8em;"
+                                                   :width="60" :height="25">
+                                            Send
+                                        </JqxButton>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </form>
+                </JqxValidator>
+            </div>
+        </JqxExpander>
+    </div>
+</template>
+
+<script>
+    import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
+    import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
+    import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
+    import JqxPasswordInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpasswordinput.vue';
+    import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
+    import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
+    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxExpander,
+            JqxValidator,
+            JqxInput,
+            JqxPasswordInput,
+            JqxDateTimeInput,
+            JqxMaskedInput,
+            JqxCheckBox,
+            JqxButton
+        },
+        data: function () {
+            return {
+                initialDate: new Date(2017, 8, 1),
+                rules: [
+                    { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
+                    { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' },
+                    { input: '.realNameInput', message: 'Real Name is required!', action: 'keyup, blur', rule: 'required' },
+                    { input: '.realNameInput', message: 'Your real name must contain only letters!', action: 'keyup', rule: 'notNumber' },
+                    { input: '.realNameInput', message: 'Your real name must be between 3 and 12 characters!', action: 'keyup', rule: 'length=2,12' },
+                    {
+                        input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2020.', action: 'valueChanged',
+                        rule: (input, commit) => {
+                            let date = this.$refs.dateTimeInput.value;
+                            let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2020;
+                            return result;
+                        }
+                    },
+                    { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
+                    { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
+                    { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
+                    {
+                        input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
+                        rule: (input, commit) => {
+                            if (this.$refs.passwordInput.val() === this.$refs.confirmPasswordInput.val()) {
+                                return true;
+                            }
+                            return false;
+                        }
+                    },
+                    { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
+                    { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' },
+                    { input: '.ssnInput', message: 'Invalid SSN!', action: 'valuechanged, blur', rule: 'ssn' },
+                    { input: '.phoneInput', message: 'Invalid phone number!', action: 'valuechanged, blur', rule: 'phone' },
+                    { input: '.zipInput', message: 'Invalid zip code!', action: 'valuechanged, blur', rule: 'zipCode' },
+                    { input: '.acceptCheckBox', message: 'You have to accept the terms', action: 'change', rule: 'required', position: 'right:217,0' }
+                ]
+            }
+        },
+        methods: {
+            sendButton: function() {
+                this.$refs.myValidator.validate(document.getElementById('form'));
+            }
+        }
+    }
+</script>
+
+<style>
+    .text-input {
+        direction: rtl;
+    }
+
+    .register-table {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        direction: rtl;
+    }
+
+    .register-table td,
+    .register-table tr {
+        direction: rtl;
+        text-align: left;
+        margin: 0px;
+        padding: 2px;
+        border-spacing: 0px;
+        border-collapse: collapse;
+        font-family: Verdana;
+        font-size: 12px;
+    }
+
+    h3 {
+        display: inline-block;
+        margin: 0px;
+        text-align: right;
+    }
+</style>
\ No newline at end of file
diff --git a/validator/righttoleftlayout/main.js b/validator/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/validator/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/validator/righttoleftlayout/package.json b/validator/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/validator/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/window/defaultfunctionality/App.vue b/window/defaultfunctionality/App.vue
new file mode 100644
index 00000000..bd4443c2
--- /dev/null
+++ b/window/defaultfunctionality/App.vue
@@ -0,0 +1,167 @@
+<template>
+    <div id="jqxWidget">
+        <div style="float: left;">
+            <div>
+                <JqxButton ref="showWindowButton" :width="75" :height="'auto'"
+                           @click="showWindowButtonClicked()">
+                    Open
+                </JqxButton>
+                <JqxButton ref="hideWindowButton" :width="65" :height="'auto'"
+                           @click="hideWindowButtonClicked()">
+                    Close
+                </JqxButton>
+            </div>
+
+            <div class="clear"></div>
+
+            <div style="margin-top: 10px;">
+                <JqxCheckbox :checked="true" @change="resizeChange($event)">Resizable</JqxCheckbox>
+                <JqxCheckbox :checked="true" @change="dragChange($event)">Enable drag</JqxCheckbox>
+            </div>
+        </div>
+
+        <JqxWindow ref="window"
+                   :width="500" :height="300"
+                   :showCollapseButton="true"
+                   :initContent="init"
+                   :maxHeight="400" :maxWidth="700" :minHeight="200" :minWidth="200">
+            <div>
+                <span>
+                    <img src="../../../images/movie.png" alt="" style="margin-right: 15px" />Movies
+                </span>
+            </div>
+            <div>
+                <JqxTabs ref="tab" :autoCreate="false">
+                    <ul style="margin-left: 30px;">
+                        <li>Avatar</li>
+                        <li>End Game</li>
+                        <li>Twilight</li>
+                        <li>Unstoppable</li>
+                        <li>Priest</li>
+                    </ul>
+                    <div>
+                        <img src="../../../images/avatar.png" style="float: left; margin: 10px;" alt="" />
+                        Avatar is a 2009 American[6][7] epic science fiction film written and directed by
+                        James Cameron, and starring Sam Worthington, Zoe Saldana, Stephen Lang, Michelle
+                        Rodriguez, Joel David Moore, Giovanni Ribisi and Sigourney Weaver. The film is set
+                        in the mid-22nd century, when humans are mining a precious mineral called unobtanium
+                        on Pandora , a lush habitable moon of a gas giant in the Alpha Centauri star system.
+                        The expansion of the mining colony threatens the continued existence of a local
+                        tribe of Na'vi—a humanoid species indigenous to Pandora. The film's title refers
+                        to the genetically engineered Na'vi-human hybrid bodies used by a team of researchers
+                        to interact with the natives of Pandora.
+                    </div>
+                    <div>
+                        <img src="../../../images/endgame.png" style="float: left; margin: 10px;" alt="" />
+                        End Game is a 2006 action/thriller film, written and directed by Andy Cheng. The
+                        film stars Cuba Gooding, Jr. as Secret Service agent Alex Thomas, who is shot in
+                        the hand, while unsuccessfully trying to protect the President (played by Jack Scalia)
+                        from an assassin's bullet. Later, with the help of a persistent newspaper reporter
+                        named Kate Crawford (played by Angie Harmon), he uncovers a vast conspiracy behind
+                        what initially appeared to be a lone gunman. James Woods, Burt Reynolds, and Anne
+                        Archer co–star in this film that was originally set to be shown in cinemas by MGM
+                        in 2005, but was delayed by the takeover from Sony and eventually sent direct to
+                        DVD.
+                    </div>
+                    <div>
+                        <img src="../../../images/twilight.png" style="float: left; margin: 10px;" alt="" />
+                        The project was in development for approximately three years at Paramount Pictures,
+                        during which time a screen adaptation that differed significantly from the novel
+                        was written. Summit Entertainment acquired the rights to the novel after three years
+                        of the project's stagnant development. Melissa Rosenberg wrote a new adaptation
+                        of the novel shortly before the 2007–2008 Writers Guild of America strike and sought
+                        to be faithful to the novel's storyline. Principal photography took 44 days, and
+                        completed on May 2, 2008; the film was primarily shot in Oregon
+                    </div>
+                    <div>
+                        <img src="../../../images/unstoppable.png" style="float: left; margin: 10px;" alt="" />
+                        Meanwhile, in a rail yard within the northern town of Fuller, two AWVR hostlers,
+                        Dewey (Ethan Suplee) and Gilleece (T.J. Miller), are ordered by Fuller operations
+                        dispatcher Bunny (Kevin Chapman) to move a freight train led by locomotive #777
+                        (nicknamed "Triple Seven") off its current track to clear the track for an excursion
+                        train carrying schoolchildren. Dewey attempts to take shortcuts, instructing Gilleece
+                        to leave the hoses for the air brakes disconnected for the short trip. Dewey later
+                        leaves the moving cab to throw a misaligned rail switch along the train's path,
+                        but is unable to climb back on, as the train's throttle jumps from idle, to full
+                        power. He is forced to report the train as a "coaster" to Fuller yardmaster Connie
+                        Hooper (Rosario Dawson)...
+                    </div>
+                    <div>
+                        <img src="../../../images/priest.png" style="float: left; margin: 10px;" alt="" />
+                        Priest is a 2011 American post-apocalyptic sci-fi western and supernatural action
+                        film starring Paul Bettany as the title character. The film, directed by Scott Stewart,
+                        is based on the Korean comic of the same name. In an alternate world, humanity and
+                        vampires have warred for centuries. After the last Vampire War, the veteran Warrior
+                        Priest (Bettany) lives in obscurity with other humans inside one of the Church's
+                        walled cities. When the Priest's niece (Lily Collins) is kidnapped by vampires,
+                        the Priest breaks his vows to hunt them down. He is accompanied by the niece's boyfriend
+                        (Cam Gigandet), who is a wasteland sheriff, and a former Warrior Priestess (Maggie
+                        Q).
+                    </div>
+                </JqxTabs>
+            </div>
+        </JqxWindow>
+    </div>
+</template>
+
+<script>
+    import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
+    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+    import JqxCheckbox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+
+    export default {
+        components: {
+            JqxWindow,
+            JqxTabs,
+            JqxButton,
+            JqxCheckbox
+        },
+        mounted: function () {
+            let jqxWidget = document.getElementById('jqxWidget');
+            let offsetLeft = jqxWidget.offsetLeft;
+            let offsetTop = jqxWidget.offsetTop;
+            this.$refs.window.position = { x: offsetLeft + 50, y: offsetTop + 50 };
+        },
+        methods: {
+            init: function () {
+                let options = { width: "100%", height: "99%" };
+                this.$refs.tab.createComponent(options);
+            },
+            showWindowButtonClicked: function () {
+                this.$refs.window.open();
+            },
+            hideWindowButtonClicked: function () {
+                this.$refs.window.close();
+            },
+            resizeChange: function (event) {
+                if (event.args.checked) {
+                    this.$refs.window.resizable = true;
+                } else {
+                    this.$refs.window.resizable = false;
+                }
+            },
+            dragChange: function (event) {
+                if (event.args.checked) {
+                    this.$refs.window.draggable = true;
+                } else {
+                    this.$refs.window.draggable = false;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-button {
+        float: left;
+    }
+
+    .jqx-button:last-child {
+        margin-left: 5px;
+    }
+
+    .clear {
+        clear: both;
+    }
+</style>
diff --git a/window/defaultfunctionality/main.js b/window/defaultfunctionality/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/window/defaultfunctionality/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/window/defaultfunctionality/package.json b/window/defaultfunctionality/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/window/defaultfunctionality/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/window/events/App.vue b/window/events/App.vue
new file mode 100644
index 00000000..a1243cb5
--- /dev/null
+++ b/window/events/App.vue
@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <JqxButton @click="showWindowButtonClick()"
+                   :width="80">
+            Show
+        </JqxButton>
+
+        <div style="margin-top: 10px;">Events Log:</div>
+        <JqxPanel ref="events" style="width: 300px; height: 200px; border-width: 0px;"></JqxPanel>
+        <JqxWindow ref="eventWindow"
+                   @close="onClose($event)"
+                   @moved="onMoved($event)"
+                   @open="onOpen($event)"
+                   :width="270" :height="155"
+                   :maxHeight="160" :maxWidth="280" :minHeight="30" :minWidth="250"
+                   :isModal="true" :modalOpacity="0.3"
+                   :position="{ x: 50, y: 120 }"
+                   :okButton="'.ok'"
+                   :cancelButton="'.cancel'"
+                   :resizable="false">
+            <div>
+                <img width="14" height="14" src="../../../images/help.png" alt="" />
+                Modal Window
+            </div>
+            <div>
+                <div>
+                    Please click "OK", "Cancel" or the close button to close the modal window. The dialog
+                    result will be displayed in the events log.
+                </div>
+                <div style="float: right; margin-top: 15px;">
+                    <JqxButton class="ok" style="display: inline-block; margin-right: 10px;" :width="80">OK</JqxButton>
+                    <JqxButton class="cancel" style="display: inline-block;" :width="80">Cancel</JqxButton>
+                </div>
+            </div>
+        </JqxWindow>
+    </div>
+</template>
+
+<script>
+    import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+    import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
+
+    export default {
+        components: {
+            JqxWindow,
+            JqxButton,
+            JqxPanel
+        },
+        methods: {
+
+            capitaliseFirstLetter: function (value) {
+                return value.charAt(0).toUpperCase() + value.slice(1);
+            },
+            displayEvent: function (event) {
+                let eventData = 'Event: ' + this.capitaliseFirstLetter(event.type);
+                if (event.type === 'moved') {
+                    eventData += ', X: ' + event.args.x + ', Y: ' + event.args.y;
+                }
+
+                if (event.type === 'close') {
+                    eventData += ', Dialog result: ';
+                    if (event.args.dialogResult.OK) {
+                        eventData += 'OK';
+                    } else if (event.args.dialogResult.Cancel) {
+                        eventData += 'Cancel';
+                    } else {
+                        eventData += 'None';
+                    }
+                }
+
+                let content = document.createElement('div');
+                content.style.marginTop = '5px';
+                content.innerText = eventData;
+
+                this.$refs.events.$el.prepend(content);
+            },
+            onClose: function (event) {
+                this.displayEvent(event);
+            },
+            onMoved: function (event) {
+                this.displayEvent(event);
+            },
+            onOpen: function (event) {
+                this.displayEvent(event);
+            },
+            showWindowButtonClick: function () {
+                this.$refs.eventWindow.open();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/window/events/main.js b/window/events/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/window/events/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/window/events/package.json b/window/events/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/window/events/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/window/keyboardnavigation/App.vue b/window/keyboardnavigation/App.vue
new file mode 100644
index 00000000..c35a231f
--- /dev/null
+++ b/window/keyboardnavigation/App.vue
@@ -0,0 +1,100 @@
+<template>
+    <div>
+        <div style="font-family: Verdana; font-size: 12px; width: 400px; margin-left: 20px; float: left;">
+            <JqxButton @click="showWindowButtonClick()"
+                       :width="80">
+                Show
+            </JqxButton>
+            <ul>
+                <li><b>Esc</b> key - closes the window.</li>
+                <li><b>Up</b> key - moves window up.</li>
+                <li><b>Ctrl + Up</b> - narrows window in vertical direction.</li>
+                <li><b>Down</b> key - moves window down.</li>
+                <li><b>Ctrl + Down</b> - expands window in vertical direction.</li>
+                <li><b>Left</b> key - moves window left.</li>
+                <li><b>Ctrl + Left</b> - narrows window in horizontal direction.</li>
+                <li><b>Right</b> key - moves window down.</li>
+                <li><b>Ctrl + Right</b> - expands window in horizontal direction.</li>
+            </ul>
+        </div>
+
+        <JqxWindow ref="window"
+                   :width="500" :height="400"
+                   :minHeight="300" :minWidth="300"
+                   :position="{ x: 50, y: 120 }"
+                   :resizable="true">
+            <div>
+                About 30 St Mary Axe
+            </div>
+            <div>
+                <div>
+                    <img src="../../../images/building_big.jpg" alt="" class="big-image" />
+                    <div>
+                        <h3>30 St Mary Axe</h3>
+                        <p class="important-text">
+                            the Swiss Re Building (colloquially referred to as the Gherkin), is a skyscraper
+                            in London's main financial district, the City of London, completed in December 2003
+                            and opened at the end of May 2004. With 40 floors, the tower is 180 metres (591
+                            ft) tall, and stands on the former site of the Baltic Exchange building, which was
+                            severely damaged on 10 April 1992 by the explosion of a bomb placed by the Provisional
+                            IRA.
+                        </p>
+                        <div class="more-text">
+                            The building is on the former site of the Baltic Exchange building, the headquarters
+                            of a global marketplace for ship sales and shipping information. On 10 April 1992
+                            the Provisional IRA detonated a bomb close to the Exchange, severely damaging the
+                            historic Exchange building and neighbouring structures. The UK government's statutory
+                            adviser on the historic environment, English Heritage, and the City of London governing
+                            body, the City of London Corporation, were keen that any redevelopment must restore
+                            the building's old façade onto St Mary Axe. The Exchange Hall was a celebrated fixture
+                            of the ship trading company.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </JqxWindow>
+    </div>
+</template>
+
+<script>
+    import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxWindow,
+            JqxButton
+        },
+        mounted: function () {
+            this.$refs.window.focus();
+        },
+        methods: {
+            showWindowButtonClick: function () {
+                this.$refs.window.open();
+            }
+        }
+    }
+</script>
+
+<style>
+    .big-image {
+        float: left;
+        margin-right: 15px;
+        margin-bottom: 15px;
+        border: 1px solid #999;
+        background: #fff;
+        padding: 3px;
+    }
+
+    .important-text {
+        font-size: 13px;
+        font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
+    }
+
+    .more-text {
+        font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
+        color: #444;
+        font-size: 11px;
+        font-style: italic;
+    }
+</style>
diff --git a/window/keyboardnavigation/main.js b/window/keyboardnavigation/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/window/keyboardnavigation/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/window/keyboardnavigation/package.json b/window/keyboardnavigation/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/window/keyboardnavigation/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/window/multiplewindows/App.vue b/window/multiplewindows/App.vue
new file mode 100644
index 00000000..eb2629a5
--- /dev/null
+++ b/window/multiplewindows/App.vue
@@ -0,0 +1,91 @@
+<template>
+    <div style="width: 100%; height: 650px; border: 0px solid #ccc; margin-top: 15px;">
+
+        <JqxButton @click="showWindowButtonClick()"
+                   :width="120" style="float: left;">
+            Show Windows
+        </JqxButton>
+        <JqxButton @click="addWindowButtonClick()"
+                   :width="100" style="float: left; margin-left: 5px;">
+            Add Windows
+        </JqxButton>
+
+        <div id="mainDemoContainer">
+            <JqxWindow :width="300" :height="'auto'" :position="{ x: 50, y: 120 }">
+                <div>RISC</div>
+                <div>
+                    Some aspects attributed to the first RISC-labeled designs around 1975 include the
+                    observations that the memory-restricted compilers of the time were often unable
+                    to take advantage of features intended to facilitate manual assembly coding, and
+                    that complex addressing modes take many cycles to perform due to the required additional
+                    memory accesses...
+                </div>
+            </JqxWindow>
+
+            <JqxWindow :width="300" :height="'auto'" :position="{ x: 100, y: 170 }">
+                <div>CISC</div>
+                <div>
+                    Before the RISC philosophy became prominent, many computer architects tried to bridge
+                    the so called semantic gap, i.e. to design instruction sets that directly supported
+                    high-level programming constructs such as procedure calls, loop control, and complex
+                    addressing modes, allowing data structure and array accesses to be combined into
+                    single instructions. Instructions are also typically highly encoded in order to
+                    further enhance the code density...
+                </div>
+            </JqxWindow>
+
+            <JqxWindow :width="300" :height="'auto'" :position="{ x: 150, y: 220 }">
+                <div>Database management system</div>
+                <div>
+                    A database management system (DBMS) is a software package with computer programs
+                    that control the creation, maintenance, and the use of a database. It allows organizations
+                    to conveniently develop databases for various applications by database administrators
+                    (DBAs) and other specialists. A database is an integrated collection of data records,
+                    files, and other database objects...
+                </div>
+            </JqxWindow>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxWindow,
+            JqxButton
+        },
+
+        beforeCreate: function () {
+            this.counter = 0;
+        },
+        methods: {
+            showWindowButtonClick: function () {
+                let windows = document.getElementsByClassName('jqx-window'),
+                    count = windows.length;
+                while (count) {
+                    count -= 1;
+                    $('#' + windows[count].id).jqxWindow('open');
+                }
+            },
+            addWindowButtonClick: function () {
+                this.counter += 1;
+                let mainDemoContainer = document.getElementById('mainDemoContainer');
+                let widgetContainer = document.createElement('div');
+                widgetContainer.id = "win" + this.counter;
+                widgetContainer.innerHTML = '<div>Header ' + this.counter + '</div>' +
+                    '<div>Content of window  ' + this.counter + '</div>';
+
+                mainDemoContainer.appendChild(widgetContainer);
+
+                let options = { height: 150, width: 300 };
+                new jqxWindow('#win' + this.counter, options);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/window/multiplewindows/main.js b/window/multiplewindows/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/window/multiplewindows/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/window/multiplewindows/package.json b/window/multiplewindows/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/window/multiplewindows/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/window/righttoleftlayout/App.vue b/window/righttoleftlayout/App.vue
new file mode 100644
index 00000000..bc02dd73
--- /dev/null
+++ b/window/righttoleftlayout/App.vue
@@ -0,0 +1,91 @@
+<template>
+    <div id="jqxWidget">
+        <JqxButton @click="showWindowButtonClick()"
+                   :width="80">
+            Show
+        </JqxButton>
+
+        <JqxWindow ref="window"
+                   :width="500" :height="400"
+                   :minHeight="300" :minWidth="300"
+                   :resizable="true">
+            <div>
+                About 30 St Mary Axe
+            </div>
+            <div>
+                <div style="direction: rtl;">
+                    <img src="../../../images/building_big.jpg" alt="" class="big-image" />
+                    <div>
+                        <h3 style="text-align: right; direction: rtl;">30 St Mary Axe</h3>
+                        <p class="important-text">
+                            the Swiss Re Building (colloquially referred to as the Gherkin), is a skyscraper
+                            in London's main financial district, the City of London, completed in December 2003
+                            and opened at the end of May 2004. With 40 floors, the tower is 180 metres (591
+                            ft) tall, and stands on the former site of the Baltic Exchange building, which was
+                            severely damaged on 10 April 1992 by the explosion of a bomb placed by the Provisional
+                            IRA.
+                        </p>
+                        <div class="more-text">
+                            The building is on the former site of the Baltic Exchange building, the headquarters
+                            of a global marketplace for ship sales and shipping information. On 10 April 1992
+                            the Provisional IRA detonated a bomb close to the Exchange, severely damaging the
+                            historic Exchange building and neighbouring structures. The UK government's statutory
+                            adviser on the historic environment, English Heritage, and the City of London governing
+                            body, the City of London Corporation, were keen that any redevelopment must restore
+                            the building's old façade onto St Mary Axe. The Exchange Hall was a celebrated fixture
+                            of the ship trading company.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </JqxWindow>
+    </div>
+</template>
+
+<script>
+    import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+
+    export default {
+        components: {
+            JqxWindow,
+            JqxButton
+        },
+        mounted: function () {
+            let jqxWidget = document.getElementById('jqxWidget');
+            this.$refs.window.position = { x: jqxWidget.offsetLeft + 50, y: jqxWidget.offsetTop + 50 };
+        },
+        methods: {
+            showWindowButtonClick: function () {
+                this.$refs.window.open();
+            }
+        }
+    }
+</script>
+
+<style>
+    .big-image {
+        float: left;
+        margin-right: 15px;
+        margin-bottom: 15px;
+        border: 1px solid #999;
+        background: #fff;
+        padding: 3px;
+    }
+
+    .important-text {
+        font-size: 13px;
+        font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
+        direction: rtl;
+        text-align: right;
+    }
+
+    .more-text {
+        font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
+        direction: rtl;
+        color: #444;
+        font-size: 11px;
+        font-style: italic;
+        text-align: right;
+    }
+</style>
diff --git a/window/righttoleftlayout/main.js b/window/righttoleftlayout/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/window/righttoleftlayout/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/window/righttoleftlayout/package.json b/window/righttoleftlayout/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/window/righttoleftlayout/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file
diff --git a/window/settings/App.vue b/window/settings/App.vue
new file mode 100644
index 00000000..cbcd8d63
--- /dev/null
+++ b/window/settings/App.vue
@@ -0,0 +1,124 @@
+<template>
+    <div>
+        <JqxButton @click="showWindowButtonClick()"
+                   :width="80" style="float: left;">
+            Open
+        </JqxButton>
+
+        <JqxButton @click="hideWindowButtonClick()"
+                   :width="100" style="float: left; margin-left: 3px;">
+            Close
+        </JqxButton>
+
+        <JqxButton @click="pinWindowButtonClick()"
+                   :width="80" style="float: left; margin-left: 3px;">
+            Pin
+        </JqxButton>
+
+        <JqxButton @click="unpinWindowButtonClick()"
+                   :width="80" style="float: left; margin-left: 5px;">
+            Unpin
+        </JqxButton>
+
+        <JqxButton @click="collapseWindowButtonClick()"
+                   :width="80" style="float: left; margin-left: 3px;">
+            Collapse
+        </JqxButton>
+
+        <JqxButton @click="expandWindowButtonClick()"
+                   :width="80" style="float: left; margin-left: 3px;">
+            Expand
+        </JqxButton>
+
+        <JqxWindow ref="customWindow"
+                   :width="400" :height="115" :position="{ x: 50, y: 120 }"
+                   :cancelButton="'#cancelButton'"
+                   :initContent="init"
+                   :resizable="false">
+            <div>Find</div>
+            <div>
+                <div id="customWindowContent" style="overflow: hidden;">
+                    <div style="margin: 10px;">
+                        Fi<u>n</u>d what:
+                        <input ref="searchTextInput"
+                               @keyup="onKey($event)"
+                               @keydown="onKeyUp($event)"
+                               @change="onChange($event)"
+                               type='text' style="margin-left: 5px; height: 17px; width: 175px; border: 1px solid #aaa;" />
+
+                        <div style="float: right">
+                            <input type="button" value="Find Next" style="margin-bottom: 5px;" id="searchTextButton" /><br />
+                            <input type="button" value="Cancel" id="cancelButton" />
+                        </div>
+                        <br />
+                        <br />
+                        <JqxCheckbox ref="checkBox" :width="150">Match case</JqxCheckbox>
+                    </div>
+                </div>
+            </div>
+        </JqxWindow>
+    </div>
+</template>
+
+<script>
+    import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
+    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
+    import JqxCheckbox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
+
+    export default {
+        components: {
+            JqxWindow,
+            JqxButton,
+            JqxCheckbox
+        },
+        beforeCreate: function () {
+            this.searchTextButton = null;
+        },
+        methods: {
+            init: function () {
+                this.searchTextButton = new jqxButton('#searchTextButton', { width: '80px', disabled: true });
+                new jqxButton('#cancelButton', { width: '80px', disabled: false });
+            },
+            searchButtonHandle: function () {
+                if (this.$refs.searchTextInput !== null) {
+                    if (this.$refs.searchTextInput.value !== '') {
+                        this.searchTextButton.disabled = false;
+                    }
+                    else {
+                        this.searchTextButton.disabled = true;
+                    }
+                }
+            },
+            onKey: function (event) {
+                this.searchButtonHandle();
+            },
+            onKeyUp: function (event) {
+                this.searchButtonHandle();
+            },
+            onChange: function (event) {
+                this.searchButtonHandle();
+            },
+            showWindowButtonClick: function () {
+                this.$refs.customWindow.open();
+            },
+            hideWindowButtonClick: function () {
+                this.$refs.customWindow.close();
+            },
+            pinWindowButtonClick: function () {
+                this.$refs.customWindow.draggable = false;
+            },
+            unpinWindowButtonClick: function () {
+                this.$refs.customWindow.draggable = true;
+            },
+            collapseWindowButtonClick: function () {
+                this.$refs.customWindow.collapse();
+            },
+            expandWindowButtonClick: function () {
+                this.$refs.customWindow.expand();
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/window/settings/main.js b/window/settings/main.js
new file mode 100644
index 00000000..4101f9fc
--- /dev/null
+++ b/window/settings/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})
\ No newline at end of file
diff --git a/window/settings/package.json b/window/settings/package.json
new file mode 100644
index 00000000..4ee7b6dd
--- /dev/null
+++ b/window/settings/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}
\ No newline at end of file