Using the Kendo UI for Vue Wrapper Components in Vite

With the development of the Vue framework, Vite is getting more and more popular displacing the Vue CLI as a recommended build tool. As the Wrapper components use Kendo UI for jQuery under the hood, there are some specifics that should be followed when working with the Wrapper components in Vite.

Configuration Specifics

The current article lists the configurations you need to apply to your Vite project to have the Wrapper components work correctly. The discussed below details are related to the following:

• How to import the Wrapper components in your application
• How to add the jQuery library to your project

Importing the Wrapper Components in Vite

As the Kendo UI for Vue Wrapper components use Kendo UI for jQuery under the hood, one of the required packages needed to initialize all Wrapper components is the @progress/kendo-ui package.

To be able to load a Wrapper component on Vite you should import only this part of the @progress/kendo-ui package that is related to the specific component you need. If, for example, we want to initialize the Wrapper ListBox component then we need the following imports:

Copy Codeimport "@progress/kendo-ui/js/kendo.listbox"
import { ListBox } from '@progress/kendo-listbox-vue-wrapper';

To summarize the above, to initialize a Wrapper component you need two imports per component:

1. One that adds the specific component-related code part of the @progress/kendo-ui package
2. Second that adds the component itself from the specific Wrapper component package

Importing jQuery to Your Vite Project

Together with the @progress/kendo-ui package, the jQuery library is the second must-have thing to load a Kendo UI for Vue Wrapper component.

To load the jQuery library you need to configure the vite.config.js file of your project by providing the viteCommonjs plugin and injecting the jQuery library. Here is an example of a basic vite.config.js configuration needed to initialize a Kendo UI for Vue Wrapper component:

Copy Codeimport { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
import inject from '@rollup/plugin-inject'

export default defineConfig({
  plugins: [
    viteCommonjs(),
    vue(),
    inject({
      jQuery: 'jquery',
    }),
  ],
  optimizeDeps: {
    force: true,
    include: ["jquery"],
  }
})

Suggested Links

• Kendo UI Components for Vue