Installing Kendo UI for Vue using CDN-CodePudding

I'm trying to implement Kendo UI for Vuejs using CDN as suggested in this page:

https://www.telerik.com/kendo-vue-ui/components/framework-wrapper/using-cdn/

and here:

https://www.telerik.com/kendo-vue-ui/components/charts-wrapper/

But when I tried this I get this error message:

Uncaught ReferenceError: ChartInstaller is not defined"

Here is the jsfiddle for what I tried:

https://jsfiddle.net/agw1u098/3/

CodePudding user response：

Your jsfiddle is wrong. Poor documentation from Telerik. To use Kendo UI wrappers for Vue via CDN, implement it like below. Try the code below on the Telerik DOJO.

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/daterangepicker/date-range">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <!--Load Kendo styles from the Kendo CDN service-->
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css"/>

    <!--Load the required libraries - jQuery, Kendo, Babel and Vue-->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <!--Load the required Kendo Vue package(s)-->
    <script src="https://unpkg.com/@progress/kendo-dateinputs-vue-wrapper/dist/cdn/kendo-dateinputs-vue-wrapper.min.js"></script>
    <script src="https://unpkg.com/@progress/kendo-charts-vue-wrapper/dist/cdn/kendo-charts-vue-wrapper.js"></script>

</head>
<body>
  <div id="kendoChart">
    <kendo-chart :title-text="'Kendo Chart Example'"
             :legend-position="'bottom'"
             :series="series"
             :category-axis-categories="categories"
             :value-axis="axis"
             :theme="'bootstrap'">
    </kendo-chart>
  </div>

<script>  
  new Vue({
    el: '#kendoChart',
    data: function() {
      return {
        series: [
          {
            name: 'Temperature',
            data: [20, 25, 32],
            axis: "temperature"
          },{
            name: 'Humidity',
            data: [40, 50, 80],
            axis: "humidity"
          }
        ],
        categories: ["Aug", "Sep", "Oct"],
        axis: [
          {
            name: "temperature",
            labels: {
              format: "{0}C"
            }
          },{
            name: "humidity",
            labels: {
              format: "{0}%"
            }
          }
        ]
      }
    }
  });
</script>    

</body>
</html>