New to Kendo UI for Vue? Start a free 30-day trial

Using CDN

The Kendo UI for Vue packages are available from a CDN service.

Basic Usage

To use the Kendo UI wrappers for Vue, include the respective <script> element to your page. The following example demonstrates how to initialize the Calendar by using its Vue wrapper.

<!--Load Kendo styles from the Kendo CDN service-->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.314/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.314/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/2023.1.314/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@3/dist/vue.global.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>

<div id="vueapp" class="vue-app">
  <kendo-calendar :value="new Date()" selection></kendo-calendar>
</div>

<script>
  const { createApp } = Vue;
  createApp({
  	components: {
      'kendo-calendar':window.KendoDateinputsVueWrapper.Calendar
    }
  }).mount('#vueapp')
</script>

Available Packages

Based on the similarities of their core functionalities, the Kendo UI components are grouped in packages which can be accessed by using the CDN services.

The following packages are available as CDN bundles:

CDN PackageComponents
https://unpkg.com/@progress/kendo-barcodes-vue-wrapper/dist/cdn/kendo-barcodes-vue-wrapper.jsBarcode and QRCode
https://unpkg.com/@progress/kendo-buttons-vue-wrapper/dist/cdn/kendo-buttons-vue-wrapper.jsButton, ButtonGroup, and ToolBar
https://unpkg.com/@progress/kendo-charts-vue-wrapper/dist/cdn/kendo-charts-vue-wrapper.jsChart, all Chart series types, Sparkline, and StockChart
https://unpkg.com/@progress/kendo-chat-vue-wrapper@2018.3.911/dist/cdn/kendo-chat-vue-wrapper.min.jsChat
https://unpkg.com/@progress/kendo-datasource-vue-wrapper/dist/cdn/kendo-datasource-vue-wrapper.jsDataSource, GanttDataSource, GanttDependencyDataSource, HierarchicalDataSource, PivotDataSource, SchedulerDataSource, and TreeListDataSource
https://unpkg.com/@progress/kendo-dateinputs-vue-wrapper/dist/cdn/kendo-dateinputs-vue-wrapper.jsCalendar, DateInput, DatePicker, DateTimePicker, and TimePicker
https://unpkg.com/@progress/kendo-diagram-vue-wrapper/dist/cdn/kendo-diagram-vue-wrapper.jsDiаgram
https://unpkg.com/@progress/kendo-dialog-vue-wrapper/dist/cdn/kendo-dialog-vue-wrapper.jsDialog
https://unpkg.com/@progress/kendo-dropdowns-vue-wrapper/dist/cdn/kendo-dropdowns-vue-wrapper.jsAutoComplete, ComboBox, DropDownList, and MultiSelect
https://unpkg.com/@progress/kendo-dropdowntree-vue-wrapper@2018.3.911/dist/cdn/kendo-dropdowntree-vue-wrapper.min.jsDropDownTree
https://unpkg.com/@progress/kendo-editor-vue-wrapper/dist/cdn/kendo-editor-vue-wrapper.jsEditor
https://unpkg.com/@progress/kendo-gantt-vue-wrapper/dist/cdn/kendo-gantt-vue-wrapper.jsGantt
https://unpkg.com/@progress/kendo-gauges-vue-wrapper/dist/cdn/kendo-gauges-vue-wrapper.jsArcGauge, LinearGauge, and RadialGauge
https://unpkg.com/@progress/kendo-grid-vue-wrapper/dist/cdn/kendo-grid-vue-wrapper.jsGrid
https://unpkg.com/@progress/kendo-inputs-vue-wrapper/dist/cdn/kendo-inputs-vue-wrapper.jsColorPicker, MaskedTextBox, NumericTextBox, RangeSlider, Slider, and Switch
https://unpkg.com/@progress/kendo-layout-vue-wrapper/dist/cdn/kendo-layout-vue-wrapper.jsContextMenu, Menu, PanelBar, Splitter, and TabStrip
https://unpkg.com/@progress/kendo-listbox-vue-wrapper/dist/cdn/kendo-listbox-vue-wrapper.jsListBox
https://unpkg.com/@progress/kendo-listview-vue-wrapper/dist/cdn/kendo-listview-vue-wrapper.jsListView and Pager
https://unpkg.com/@progress/kendo-map-vue-wrapper/dist/cdn/kendo-map-vue-wrapper.jsMap
https://unpkg.com/@progress/kendo-mediaplayer-vue-wrapper/dist/cdn/kendo-mediaplayer-vue-wrapper.jsMediaPlayer
https://unpkg.com/@progress/kendo-pivotgrid-vue-wrapper/dist/cdn/kendo-pivotgrid-vue-wrapper.jsPivotGrid
https://unpkg.com/@progress/kendo-popups-vue-wrapper/dist/cdn/kendo-popups-vue-wrapper.jsNotification and Tooltip
https://unpkg.com/@progress/kendo-scheduler-vue-wrapper/dist/cdn/kendo-scheduler-vue-wrapper.jsScheduler
https://unpkg.com/@progress/kendo-scrollview-vue-wrapper/dist/cdn/kendo-scrollview-vue-wrapper.jsScrollView
https://unpkg.com/@progress/kendo-spreadsheet-vue-wrapper/dist/cdn/kendo-spreadsheet-vue-wrapper.jsSpreadsheet
https://unpkg.com/@progress/kendo-treelist-vue-wrapper/dist/cdn/kendo-treelist-vue-wrapper.jsTreeList
https://unpkg.com/@progress/kendo-treemap-vue-wrapper/dist/cdn/kendo-treemap-vue-wrapper.jsTreeMap
https://unpkg.com/@progress/kendo-treeview-vue-wrapper/dist/cdn/kendo-treeview-vue-wrapper.jsTreeView
https://unpkg.com/@progress/kendo-upload-vue-wrapper/dist/cdn/kendo-upload-vue-wrapper.jsUpload
https://unpkg.com/@progress/kendo-validator-vue-wrapper/dist/cdn/kendo-validator-vue-wrapper.jsValidator
https://unpkg.com/@progress/kendo-window-vue-wrapper/dist/cdn/kendo-window-vue-wrapper.jsWindow

In this article

Not finding the help you need?