Kendo UI for Vue 3 and Vue 2

Overview

Kendo UI for Vue 3 and Vue 2

Kendo UI for Vue uses GitHub Issues as a bug tracker. This repository is here for that purpose—it does not contain the actual components source code.

In this repository you will also find examples of how our components can be integrated in more complex scenarios.

Table of Contents

Features of Kendo UI for Vue suite

The following table lists the widgets and features available in Kendo UI for Vue Native suite. In this document you will also find a list of the components we plan to release with our next official release.

Component name Kendo UI for Vue Native
Data Management
Grid
Buttons
Button
ButtonGroup
Chip
ChipList
FloatingActionButton
Dropdowns
AutoComplete
ComboBox
DropDownList
MultiSelect
Dialogs
Dialog
Window
Inputs
Input
MaskedTextBox
NumericTextBox
Slider
Checkbox
RadioButton
RadioGroup
Date Inputs
Calendar
DateInput
DatePicker
DateTimePicker
TimePicker
Layout
Avatar
Card
TabStrip
Data Tools
Pager
Animations
Expand
Fade
Push
Reveal
Slide
Zoom
Popup
Popup
Upload
Upload
Form
Form
Charts
Area
Bar
Box Plot
Bubble
Bullet
Donut
Funnel
Line
Pie
Polar
Radar
Range Area
Range Bar
Scatter
Sparkline
StockChart
Waterfall
Labels
Label
FloatingLabel
Hint
Error
Tools & Features
Data Query
Date Math
Drawing
Excel Export
File Saver
Globalization
Localization
PDF Processing
ThemeBuilder

When do you plan on releasing Feature X?

  1. Check the Roadmap for the planned items.
  2. If the item you need is not present there, check our feedback portal. If someone has already posted it there, you can upvote it. If nobody has requested it so far, you can post a new idea.

Components planned for the next release

Component name Kendo UI for Vue Native
Editor Planned for R1 2022
Gauge Planned for R1 2022
Loader Planned for R1 2022
Menu Planned for R1 2022

How do I…?

  1. Check out the Components or Troubleshooting pages.
  2. Browse the kendo-vue-ui questions on Stack Overflow. If you haven't found what you are looking for there, pose a question for the Stack Overflow community to follow or answer.
  3. Use our official support channel and submit a support ticket .

I think I found a bug

  1. Review the issues in the Issue Tracker . Maybe someone has already reported it and it will be fixed soon.
  2. The problem might have also been fixed. In this case, you will find the issue in the closed issues list .
  3. If you cannot find your issue, follow the reproduction steps guide below. We will look into it.

I want to report a bug

  1. Find an example in the documentation that looks similar to your case.
  2. Open it in StackBlitz by using the OPEN IN STACKBLITZ button.
  3. Fork the project by using the FORK button at the top.
  4. Modify the project, so that the issue is reproducible in it. Try to include the minimum possible amount of code.
  5. Save the project by using the SAVE button at the top.
  6. Copy the link from the address bar of the browser.
  7. Open a new issue and add the StackBlitz link in the description.
  8. Provide any additional information necessary for us to reproduce the problem such as browser version, steps to perform, etc.

We might not be able to act on issues without a runnable demo.

If you need assistance on troubleshooting or isolating a problem, you can request a remote assistance session through our Support Ticket system. Remote Assistance is included in the DevCraft Ultimate subscription.

I need a tailor-made solution

Our aim is to provide the most versatile and proven set of application building blocks. Still, there is some assembly required depending on the desired functionality.

The Progress Services team is available to assist in building functional blocks or complete applications according to your specification. They will help you make the best out of KendoVue while freeing you to work on the real business problems.

Issues
  • Types of DropDownList (and Possibly others) are not correct for Vue 3

    Types of DropDownList (and Possibly others) are not correct for Vue 3

    I am not yet a paying customer, but am in evaluation to use Kendo for our UI front end, and am in our trial period. We are running into issues using the Vue components with Vue 3, despite the docs saying they are supported. We will likely have to hack around this, but wanted to leave feedback that this is a sharp edge that really is causing us pain.

    • Bug report

    Current behavior

    The type of the DropDownList is currently any, because the Vue imports are pointing to the old, Vue 2 structure. For DropDownList, this is kendo-vue-dropdowns/src/DropDownList/DropDownList.tsx

    import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
    

    Vue now has ComponentOptions in just vue, and RecordPropsDefinition does not even exist.

    This causes us to lose all downstream type safety, even though the components are functional. This most effects our tests, where everything is a mess when interacting with Kendo.

    Expected behavior

    The types would be correct, even if we had to load a second type package to support the newer Vue version.

    Minimal reproduction of the problem with instructions

    Create new Vue 3 project with typescript support, and install kendo-vue-dropdowns, and try looking at the type of DropDownList

    What is the motivation or use case for changing the behavior?

    Being able to combine Vue, Typescript, and Kendo ui controls

    Environment

    Package versions:

    +-- @auth0/[email protected]
    +-- @progress/[email protected]
    +-- @progress/[email protected]
    +-- UNMET PEER DEPENDENCY @progress/[email protected]^1.6.0
    +-- @progress/[email protected]
    +-- @progress/[email protected]
    +-- @progress/[email protected]
    +-- @progress/[email protected]
    +-- @progress/[email protected]
    +-- UNMET PEER DEPENDENCY @progress/[email protected]^1.2.0
    +-- @progress/[email protected]
    +-- @progress/[email protected]
    +-- @progress/[email protected]
    +-- @progress/[email protected]
    +-- @progress/[email protected]
    +-- @progress/[email protected]
    +-- @types/[email protected]
    +-- @typescript-eslint/[email protected]
    +-- @typescript-eslint/[email protected]
    +-- @vue/[email protected]
    +-- @vue/[email protected]
    +-- @vue/[email protected]
    +-- @vue/[email protected]
    +-- @vue/[email protected]
    +-- @vue/[email protected]
    +-- @vue/[email protected]
    +-- UNMET PEER DEPENDENCY @vue/[email protected]^1.0.0-beta.1
    +-- @vue/[email protected]
    +-- @vue/[email protected]
    +-- @vue/[email protected]
    +-- @vuelidate/[email protected]
    +-- @vuelidate/[email protected]
    +-- [email protected]
    +-- UNMET PEER DEPENDENCY [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    `-- [email protected]
    

    Browser: N/A

    System:

    • TypeScript version: 4.1.2
    • Node version: v12.19.0
    • Platform: Windows
    bug 
    opened by timritzer 5
  • TypeError: kendo.jQuery(...).kendoSwitch is not a function

    TypeError: kendo.jQuery(...).kendoSwitch is not a function

    I'm submitting a...

    • Bug report

    Current behavior

    image image

    Kendo switch wrapper for typescript is not working as expected. It is always throwing the error that kendoSwitch is not a function. I'm using other wrappers as the multiselect and the tooltip and they're both working just fine.

    I'm importing the wrapper on my main.ts image

    Then on my component:

    image

    Expected behavior

    It should show the switch toogle correctly.

    image

    Environment

    Package versions: | package | version | |---|---| | vue | 2.6.12 | | @progress/kendo-dropdowns-vue-wrapper | 2020.3.928 | | @progress/kendo-inputs-vue-wrapper | 2020.3.1022 | | @progress/kendo-ui | 2020.3.915 | | @progress/kendo-vue-dropdowns | 1.1.2 | | @progress/kendo-vue-intl | 1.1.2 |

    
    

    Browser:

    • Microsoft Edge (desktop) version 86.0.622.61

    System:

    • TypeScript version: 4.0.3
    • Node version: v14.7.0
    • Platform: Windows
    opened by felipe-allmeida 5
  • 'Editor' only refers to a type, but is being used as a value here.

    'Editor' only refers to a type, but is being used as a value here.

    image While importing Editor form kendo-editor getting this issue in vue 3.0

    opened by yedidisatya 4
  • Native DatePicker calendar popup closes after pressing the navigation arrow (iOS 14.1)

    Native DatePicker calendar popup closes after pressing the navigation arrow (iOS 14.1)

    I'm submitting a bug report

    Current behavior

    When the DatePicker popup calendar is opened on a device with iOS 14.1, once the navigation arrow is clicked, the pop immediately closes

    Expected behavior

    Tapping on the navigation arrow should change the current calendar view and remain the popup opened.

    Minimal reproduction of the problem with instructions

    1. Open this demo on a mobile device with iOS 14.1
    2. Open the calendar of the DatePicker and navigate it with the navigation arrows
    bug FP: Completed Priority 1 SEV: High 
    opened by PekoPPT 3
  • Peer dependency requirements prevent project from compiling after following installation instructions

    Peer dependency requirements prevent project from compiling after following installation instructions

    I'm submitting a Bug report

    Current behavior

    When attempting to use the kendo-vue-grid with minimal dependencies, after following the Webpack installation instructions on the Telerik website and attempting to run the project, a number of error messages regarding missing dependencies is displayed:

    These dependencies were not found:
    
    * @progress/kendo-data-query in ./node_modules/@progress/kendo-vue-grid/dist/es/columnMenu/GridColumnMenuFilter.js
    * @progress/kendo-vue-animation in ./node_modules/@progress/kendo-vue-grid/dist/es/columnMenu/GridColumnMenuItemContent.js
    * @progress/kendo-vue-intl in ./node_modules/@progress/kendo-vue-grid/dist/es/GridNoRecords.js, ./node_modules/@progress/kendo-vue-grid/dist/es/cells/GridEditCell.js and 8
    others
    * @progress/kendo-vue-popup in ./node_modules/@progress/kendo-vue-grid/dist/es/columnMenu/ColumnMenu.js
    * vue-class-component in ./node_modules/@progress/kendo-vue-grid/dist/es/GridToolbar.js, ./node_modules/@progress/kendo-vue-grid/dist/es/Grid.js and 32 others
    

    Expected behavior

    Either the grid component should run correctly after installing the two dependencies listed on the website (@progress/kendo-theme-default and @progress/kendo-vue-grid) or the documentation should have the correct installation instructions listing all necessary steps.

    Minimal reproduction of the problem with instructions

    1. In a fresh Vue project with no kendo dependencies, follow the official instructions to install the two listed npm dependencies.
    2. Register the Grid component as described on that page.
    3. Try to compile and run the solution. I was unable to reproduce this issue on StackBlitz which seems to force peer dependencies to be installed. However I have reproduced this on CodeSandbox.

    What is the motivation or use case for changing the behavior?

    It should be easy to get started by following the official instructions.

    Environment

    Package versions:

    @progress/[email protected]
    @progress/[email protected]
    [email protected]
    

    System:

    • Node version: 10.16.0
    • npm version: 6.9.0
    • Platform: Windows
    documentation FP: Completed 
    opened by danielelkington 3
  • kendo[d]Classes typo in the Base component results in an error when changing model value

    kendo[d]Classes typo in the Base component results in an error when changing model value

    I'm submitting a...

    • Regression report

    Current behavior

    kendo[d]Classes typo in the Base component results in an error when changing model value.

    Expected behavior

    No error should be thrown

    Minimal reproduction of the problem with instructions

    Could be observed in the following StackBlitz: https://stackblitz.com/edit/q7wsg9?file=index.html. Simply select a value in the DatePicker

    Browser: all

    bug FP: Completed 
    opened by veselints 3
  • Content-Security-Policy (CSP) strict mode support

    Content-Security-Policy (CSP) strict mode support

    I'm submitting a...

    • Question

    Current behavior

    I'm trying to add more strict CSP rules to my app and we use the Grid component. One of the dependencies is the @progress/kendo-vue-popup package and it's raising unsafe-inline errors (there are some methods in the package that manually set the style of the elements).

    Do you have plans to make the Kendo Vue library CSP strict compatible?

    Expected behavior

    The components work with strict CSP rules.

    What is the motivation or use case for changing the behavior?

    I want to use strict CSP rules for the script and styles.

    Environment

    Package versions:

    +-- @progress/[email protected] +-- @progress/[email protected] +-- @progress/[email protected] +-- @progress/[email protected] +-- @progress/[email protected] +-- @progress/[email protected] +-- @vue/[email protected] +-- @vue/[email protected] `-- [email protected]

    System:

    • Node version: v12.13.1
    • Platform: Windows

    Minimal reproduction of the problem with instructions

    1. git clone https://github.com/fabiano/kendo-vue-grid-csp
    2. cd kendo-vue-grid-csp
    3. npm install
    4. npm start
    5. Open the Developer Tools and you will see the error message: Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-Y+wsDhnso/VitFKVAmAGIC+CGwKJuRUiycQ54atO+eE='), or a nonce ('nonce-...') is required to enable inline execution.
    bug FP: Completed 
    opened by fabiano 3
  • Remove computed properties from virtual scrolling demo

    Remove computed properties from virtual scrolling demo

    I'm submitting a...

    • Bug report

    Current behavior

    Virtual scrolling is not smooth with 500000 items.

    Expected behavior

    Virtual scrolling should be smooth with 500000 items.

    bug demo 
    opened by zdravkov 3
  • TypeError: Cannot read property '$options' of undefined - something with sync/async?

    TypeError: Cannot read property '$options' of undefined - something with sync/async?

    Bug report

    Reproduction of the problem

    1. Create fresh Vue.js 2 project using vue-cli 3.11.0, all defaulted, Vue version is 2.6.12
    2. Add chart widget as described here (by copying the example): https://www.telerik.com/kendo-vue-ui/components/charts/series-types/area/ (I'm using the second one, stacked area chart)
    3. Start the app.

    Current behavior

    Gives error:

    [Vue warn]: Error in mounted hook: "TypeError: Cannot read property '$options' of undefined" found in ---> ...

    Expected/desired behavior

    Work.

    Environment

    • Kendo UI version: 2020.3.1118 || 2021.1.119
    • Vue: 2.6.12
    • Vue-cli: 3.11.0
    • Browser: any

    Possibly related to this: https://github.com/vuejs/vue-test-utils/issues/673 https://github.com/vuejs/vue-test-utils/issues/653 https://github.com/vuejs/vue/pull/8240

    Though I don't understand the workaround proposed: https://github.com/vuejs/vue-test-utils/issues/653#issuecomment-391944648

    Are there any quick workarounds specifically for the chart component? I suppose there was at least a version combination between Vue and Kendo that did actually work, maybe I could revert for some older ones?

    bug FP: Completed Priority 2 wrappers 
    opened by k2042 3
  • Using the

    Using the "ChartSeriesItem" nested tag in Chart throws and error in the console

    I'm submitting a Bug report

    Current behavior

    <chart :title-text="'Gross domestic product growth /GDP annual %/'" 
            :legend-position="'bottom'"
            :series-defaults-type="'area'"
            :category-axis-categories="categoryAxisData"
            :category-axis-major-grid-lines-visible="false"
            :category-axis-labels-rotation="'auto'"
            :value-axis-labels-format="'{0}%'"
            :value-axis-line-visible="false"
            :value-axis-axis-crossing-value="-10"
            :tooltip-visible="true"
            :tooltip-format="'{0}%'"
            :tooltip-template="tooltipTemplate"
            :theme="'sass'">
        <chart-series-item :name="'India'"
                            :data="indiaData"
                            :line-style="'smooth'">
        </chart-series-item>
        <chart-series-item :name="'World'"
                            :data="worldData"
                            :line-style="'smooth'">
        </chart-series-item>
        <chart-series-item :name="'Haiti'"
                            :data="haitiData"
                            :line-style="'smooth'">
        </chart-series-item>
    </chart>
    

    When using the ChartSeriesItem tags to define the data in the Chart component the following error appears in the console once the Vue project is started. image

    Expected behavior

    <chart-series-item :name="'India'"
                            :data="indiaData"
                            :line-style="'smooth'">
        </chart-series-item>
        <chart-series-item :name="'World'"
                            :data="worldData"
                            :line-style="'smooth'">
        </chart-series-item>
        <chart-series-item :name="'Haiti'"
                            :data="haitiData"
                            :line-style="'smooth'">
        </chart-series-item>
    

    Using a definition like the above, we should be able to define Chart's data with no issues.

    Minimal reproduction of the problem with instructions

    1. Open this project
    2. In the console run "npm install"
    3. In the console run "npm run serve"
    4. Open the URL of the project and see the browser's console
    bug FP: Completed SEV: Medium wrappers 
    opened by PekoPPT 3
  • Drawer component doesn't open from the correct direction

    Drawer component doesn't open from the correct direction

    Describe the bug The first time the Drawer is expanded, when its mode is set to "overlay" and the "expanded" is false, the component appears from right to left. This happens only once.

    To Reproduce

    1. Open this StackBlitz example
    2. Click the button

    Expected behavior The Drawer should expand from left to right

    bug SEV: Medium 
    opened by PekoPPT 0
  • Allow numbers as values in multiselect

    Allow numbers as values in multiselect

    Describe the bug

    <multiselect
            :data-items="values"
            :value="values"
          ></multiselect>
    ...
    data() {
        return {
          values: [2,3],
        };
    

    select and item error:

    At TagList.js:81 Uncaught (in promise) TypeError: tagData.text.replace is not a function at Proxy.eval (TagList.js:81:48) at Array.map () at Proxy.render (TagList.js:75:19) at renderComponentRoot (runtime-core.esm-bundler.js:623:44) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4372:57) at ReactiveEffect.run (reactivity.esm-bundler.js:195:29) at setupRenderEffect (runtime-core.esm-bundler.js:4498:9) at mountComponent (runtime-core.esm-bundler.js:4281:9) at processComponent (runtime-core.esm-bundler.js:4239:17) at patch (runtime-core.esm-bundler.js:3843:21)

    bug FP: Planned 
    opened by zdravkov 0
  • chore(deps): bump follow-redirects from 1.14.5 to 1.14.7 in /examples-standalone/coffee-warehouse

    chore(deps): bump follow-redirects from 1.14.5 to 1.14.7 in /examples-standalone/coffee-warehouse

    Bumps follow-redirects from 1.14.5 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • The Bar Chart is rendering only one column no matter the number of series passed to it

    The Bar Chart is rendering only one column no matter the number of series passed to it

    Describe the bug The Bar Chart component renders only one column no matter the number of series passed to it. The Bar Chart renders only the first seriesitem passed to it

    To Reproduce

    1. Open this Dojo example and run it

    Expected behavior

    There should be two columns rendered for each category as in this StackBlitz example.

    bug SEV: High 
    opened by PekoPPT 0
  • Stepper does not change visually initially with focused

    Stepper does not change visually initially with focused

    https://stackblitz.com/edit/gv4uwk?file=src/main.vue

    Focus the initial input then press tab the stepper is focused yet it does not change visually so we know it

    expected: There is a visual initial representation of the focused component

    bug FP: Unplanned 
    opened by zdravkov 0
  • Circular Dependency when building with rollup

    Circular Dependency when building with rollup

    The issue is reported in ticket - https://supportheroes.telerik.com/ticket/1547173 and there is a project attached and the warning is this one: image

    https://github.com/telerik/kendo-charts/issues/266

    bug FP: Unplanned 
    opened by zdravkov 0
  • Typescript error when building with site and typescript

    Typescript error when building with site and typescript

    https://github.com/zdravkov/kendo-popup-with-vite Followed the below steps: node - 16.13.1 pnpm install Change App.vue as mentioned below pnpm dev (works) pnpm build (fails with type errors)

    Type errors: c:\temp\kendo-popup-with-vite>pnpm build

    [email protected] build c:\temp\kendo-popup-with-vite vue-tsc --noEmit && vite build

    node_modules/.pnpm/@[email protected]_acc43b21ea211aeeda51cec780f114cb/node_modules/@progress/kendo-vue-popup/dist/npm/Popup.d.ts:2:57 - error TS2307: Cannot find module 'vue/types/options' or its corresponding type declarations.

    2 import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options'; ~~~~~~~~~~~~~~~~~~~

    node_modules/.pnpm/@[email protected]_acc43b21ea211aeeda51cec780f114cb/node_modules/@progress/kendo-vue-popup/dist/npm/Popup.d.ts:63:72 - error TS2304: Cannot find name 'Vue'.

    63 export interface PopupAll extends PopupMethods, PopupState, PopupData, Vue { ~~~

    node_modules/.pnpm/@[email protected]_acc43b21ea211aeeda51cec780f114cb/node_modules/@progress/kendo-vue-popup/dist/npm/Popup.d.ts:68:37 - error TS2304: Cannot find name 'Vue'.

    68 declare let Popup: ComponentOptions<Vue, DefaultData, DefaultMethods, {}, RecordPropsDefinition>; ~~~

    Found 3 errors.

     ELIFECYCLE  Command failed with exit code 2.

    bug FP: Planned 
    opened by zdravkov 1
  • Dropdown popup is not positioned correctly when there is a longer item

    Dropdown popup is not positioned correctly when there is a longer item

    Describe the bug A clear and concise description of what the bug is.

    To Reproduce Steps to reproduce the behavior:

    https://stackblitz.com/edit/5yuap2-cjycwm?file=src/main.vue open the dropdownlist The popup is NOT aligned with the component

    Expected behavior the popup is aligned with the component workaround - https://stackblitz.com/edit/5yuap2-f2kb5l?file=src%2Fmain.vue

    bug FP: Unplanned 
    opened by zdravkov 0
  • DropDownList: Unhandled error when using filtering with value and data-item-key properties

    DropDownList: Unhandled error when using filtering with value and data-item-key properties

    Describe the bug

    When filtering the DropDownList data, if both the value and the data-item-key properties are defined for the component, an error appears in the browser's console. Once the error appears, the popup of the component cannot be closed.

    To Reproduce

    1. Open this StackBlitz example
    2. In the DropDownList, search/filter for something that doesn't exist. The point here is to get the 'NO DATA FOUND' template displayed.
    3. Once that 'NO DATA FOUND' is displayed then delete the searched text

    Expected behavior The DropDownList should continue to work with no issues no matter the combination of properties configured for it.

    Screenshots image

    bug SEV: Medium 
    opened by PekoPPT 0
  • The Native Chart component doesn't update reactively on data change

    The Native Chart component doesn't update reactively on data change

    Describe the bug The data inside the Chart is not updating when we change the data it is bound to.

    To Reproduce Steps to reproduce the behavior:

    1. Download this project(_re-render.zip) and install the NPM packages(run: npm i)
    2. Start the project(run: npm run serve)
    3. Click on the "Change dataset" button

    Expected behavior With each click of the "Change dataset" button, the "Duration" property of the first element inside the "projects" array is being changed. With this change of "Duration", the Chart should be updated.

    Workaround of the issue

    Set a new :key to the ChartWrapper component:

    <ChartWrapper v-for="chart in chartSetDefinition"
        :key="uuid()"
        :id="chart.id" (...)
    

    Where uuid() is a function that generates a random uuid.

    bug SEV: High 
    opened by PekoPPT 0
Owner
Telerik
Telerik
:diamonds: A modular and customizable UI library based on Material Design and Vue

BalmUI Next Generation Material UI for Vue.js Introduction BalmUI is a modular and customizable Material Design UI library for Vue.js. ?? NOW, balm-ui

BalmJS 313 Jan 15, 2022
🌟Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards.

Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards. Documentation & Demo • Official Page Getting Started Getting started with Sh

DesignRevision 396 Dec 21, 2021
🌟Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards.

Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards. Documentation & Demo • Official Page Getting Started Getting started with Sh

DesignRevision 395 Jan 20, 2022
BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.

With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive impl

BootstrapVue 13.6k Jan 17, 2022
🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜

Ant Design Vue An enterprise-class UI components based on Ant Design and Vue. English | 简体中文 Features An enterprise-class UI design system for desktop

vueComponent 15.9k Jan 15, 2022
Fast, Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js.

Framevuerk Fast, Responsive, Without Dependencies, Both Direction Support and Configurable UI Framework based on Vue.js. Setup First of all, you shoul

null 270 Dec 21, 2021
Vue Bootstrap with Material Design - Powerful and free UI KIT

Vue Bootstrap with Material Design Based on the latest Bootstrap 4 and Vue. 400+ material UI elemens, 600+ material icons, 74 CSS animations, SASS fil

MDBootstrap 851 Jan 18, 2022
⚡️ Build scalable and accessible Vue.js applications with ease.

Build scalable and accessible Vue.js applications with ease. @chakra-ui/vue gives you a set of accessible and composable Vue components that you can u

Chakra UI 1.4k Jan 23, 2022
Free and Open Source UI Library for Vue 3 🤘

Free and Open Source UI Library for Vue 3 ??

Epicmax 1.1k Jan 19, 2022
🧬Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

??Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

Yan Savinov 708 Jan 22, 2022
ICIJ's Design System for Bootstrap 4 and Vue.js

Murmur is ICIJ's Design System for Bootstrap 4 and Vue.js Status CI checks Code Climate NPM version NPM downloads Installation guide If you are using

The International Consortium of Investigative Journalists 16 Dec 16, 2021
A fresh and flat UI-Kit specially for desktop application with Vue.js 2.0

AT-UI Style AT-UI Style is an ui component library based on Flexbox, be used for AT-UI Install npm install at-ui-style Usage import 'at-ui-style' Cont

null 98 Sep 22, 2021
Learning Physics by Visualising - the fastest, easiest, and retianable way of learning Physics

?? Physics Lab Learning Physics by Visualising - the fastest, easiest, and retainable way of learning Physics here! ?? Inspiration Bored from long phy

Milan 45 Jan 9, 2022
Business React components for Bootstrap and Material-UI

DevExtreme Reactive · DevExtreme Reactive is a set of business React components that deeply integrate with Bootstrap and Material-UI libraries. Common

Developer Express Inc. 1.8k Jan 20, 2022
🎩 Vue Demi is a developing utility allows you to write Universal Vue Libraries for Vue 2 & 3

?? Vue Demi (half in French) is a developing utility allows you to write Universal Vue Libraries for Vue 2 & 3

VueUse 1.4k Jan 22, 2022
Vue.js components implementation of Fundamental Library Styles guidelines. The library is aiming to provide a Vue.js implementation of the components designed in Fundamental Library Styles.

Fundamental Vue Description The fundamental-vue library is a set of Vue.js components built using Fundamental Library Styles. Fundamental Library for

SAP 180 Dec 23, 2021
An emerging UI framework for Vue.js & Vue 3 with only the bright side. ☀️

Wave UI An emerging UI framework for Vue.js & Vue 3 with only the bright side. ☀️ Demo & Documentation antoniandre.github.io/wave-ui install npm i wav

Antoni 333 Jan 15, 2022
MADE Vue - A library of Vue 3 UI Components

MADE Vue A library of Vue 3 UI Components. Support MADE Vue ♥ Projects like MADE Vue are built and maintained in spare time. If you find this project

MADE Apps 3 Jan 11, 2022
Material design for Vue.js

Material Design for Vue.js Vue Material is Simple, lightweight and built exactly according to the Google Material Design specs Build well-designed app

Vue Material 9.6k Jan 22, 2022