You’re currently viewing documentation for our jQuery wrappers.We highly recommend that you migrate to the equivalent Native Vue component as that is what will receive updates in the future.

Script Size Optimization

To reduce the size of your Vue application, Kendo UI for Vue enables you to load only parts of the entire Kendo UI library.

Each Kendo UI component for Vue requires a specific set of the Kendo UI source scripts. Organized in this way, the modular structure of Kendo UI allows you to load only those scripts that are needed in a specific application scenario.

To load only the Kendo UI scripts you need, use Webpack and utilize either of the following approaches:

• (Recommended) Direct loading of the specific source Kendo UI scripts, or
• Create a custom scripts bundle and load it in your application.

Including the Scripts for Each Component

Including the individual script files for each component directly from the source folder of the @progress/kendo-ui package is a viable approach when you use a limited number of components in your application. This approach may dramatically reduce the size of the referenced JavaScript files from Kendo UI.

To include the scripts for each component:

1. Identify which are the scripts that will be included. The full list of scripts for each the Kendo UI widget is available in the Kendo UI documentation. For example, to use only the DatePicker, go to the Editors scripts article and look for the DatePicker script in the table.

2. Import the DatePicker script instead of the full Kendo UI library script. Webpack will also load all the dependency scripts.

   Copy Codeimport $ from 'jquery';
   import '@progress/kendo-ui/js/kendo.datepicker.js'

3. Import the DatePicker component and its installer from the kendo-dateinputs-vue-wrapper package.

   Copy Codeimport { DatePicker, DateinputsInstaller } from '@progress/kendo-dateinputs-vue-wrapper'

4. Initialize the DatePicker.

   Copy Code<div id="vueapp" class="vue-app row example-wrapper">
       <kendo-datepicker v-model="date"></kendo-datepicker>
   </div>

   Copy CodeVue.use(DateinputsInstaller);
   
   new Vue({
       el: '#vueapp',
       data: {
           date: null
       }
   })

Including Custom Scripts Bundles

Due to the different module loading, building a custom bundle may result in future side effects. Although including custom scripts bundles is still an option for adding Kendo UI scripts, the recommended and appropriate way to import them is by using the @progress/kendo-ui NPM module.

Including a custom scripts bundle is a viable approach only in scenarios when you use many Kendo UI widgets in your application.

To create a single bundled script:

1. Download the Kendo UI commercial-source archive from your Telerik account.

2. Extract the archive and navigate to its src folder.

3. To build a custom distribution from the shipped source, run the following shell commands.

   Copy Codecd src
   npm install -g gulp
   npm install
   gulp custom -c autocomplete,dropdownlist

   In the gulp command, list the components you want to be included in the custom build and separate them with a comma (,). The previous example builds a custom minified script which includes the AutoComplete and the DropDownList widgets.

   When complete, the Gulp command outputs a kendo.custom.min.js file in the src/dist directory. The Gulp build task automatically resolves the dependencies needed by each component and you do not have to list them. Avoid using multiple combined custom scripts as they will contain duplicate code. Instead, create a single combined script file which includes everything you need.

4. Import the above script in your application.

   Copy Codeimport $ from 'jquery';
   import 'kendo.custom.min.js'

5. Import the respective Kendo UI components for Vue from kendo-vue-dropdowns-package.

   Copy Codeimport { DropDownList, AutoComplete, DropdownsInstaller } from '@progress/kendo-dropdowns-vue-wrapper'

6. Initialize the DropDownList and the AutoComplete.

   Copy Code<div id="vueapp" class="vue-app row example-wrapper">
       <div>
           <kendo-autocomplete :data-source="dataSourceArray"
                               :placeholder="'Your favorite sport'"
                               :separator="', '"
                               :filter="'contains'">
           </kendo-autocomplete>
       </div>
       <div>
           <kendo-dropdownlist :data-source="dataSourceArray"
                               :index="0">
           </kendo-dropdownlist>
       </div>
   </div>

   Copy CodeVue.use(DropdownsInstaller);
   
   new Vue({
       el: '#vueapp',
       data: function() {
           return {
               dataSourceArray: [
                   'Football',
                   'Tennis',
                   'Basketball',
                   'Baseball',
                   'Cricket',
                   'Field Hockey',
                   'Volleyball'
               ]
           }
       }
   })

Suggested Links

• Getting Started with Kendo UI for Vue
• Using CDN to Load the Kendo UI Wrappers for Vue
• Creating Your Own Custom Bundles with Kendo UI