Integrating Vue CLI 3 with Kendo UI
Tags: vue, kendoui, javascript
Published: 2019-09-27 01:51:51

---
title:Integrating Vue CLI 3 with Kendo UI
cover_image: https://d585tldpucybw.cloudfront.net/sfimages/default-source/default-album/tb_870x2203607bc27512d449ca7ae44ad6f7ae805.png?sfvrsn=e6bee45c_1
published: true
description: Walk through the integration process of the new Vue CLI 3 with Kendo UI, and start developing eye-catching Vue.js applications with zero hassle!
tags: #vue #kendoUI #javascript
---
## Walk through the integration process of the new Vue CLI 3 with Kendo UI, and start developing eye-catching Vue.js applications with zero hassle!

*[Original Post](https://www.telerik.com/blogs/integrating-vue-cli-3-with-kendo-ui) on The Telerik Blog. October 2018*

---
[Kendo UI](https://www.telerik.com/kendo-ui) is an awesome UI component library made by [Progress](https://www.progress.com/). It can be used with multiple frameworks/tools (jQuery, React, Angular), but let's talk about using it with [Vue.js](https://www.telerik.com/kendo-vue-ui).

We will go through the integration process explaining it step by step and solving a few issues that may occur while integrating Kendo UI with Vue CLI 3. For this, we're going to use our *"Vuetiful"* [Rick & Morty app] (https://ricknmortyvue.surge.sh) as an example.

For those who haven't updated to Vue CLI 3 yet, you can check out this [blog post](https://www.telerik.com/blogs/what-you-need-to-know-about-vue-cli-3) on what you need to know, and I recommend reading the [official documentation](https://cli.vuejs.org/) to learn the proper usage of this awesome tool.

Assuming we have previously installed Vue CLI 3 let's create our project and enter its root folder:

```js
vue create ricknmorty-vue
cd /ricknmorty-vue
```

## Install Kendo UI Using npm

**Installing:**

```js
npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default
```

For our app, we used the default theme, but among the many possibilities to get your apps rocking and looking like a million bucks, you can build your own theme, or use the default, bootstrap or material theme. [Check out the Theme Builder!.](https://www.telerik.com/kendo-vue-ui/components/styling/theme-builder/)

For example, for our Vuetiful Rick & Morty we used buttons:

```js
npm install --save @progress/kendo-buttons-vue-wrapper
```

You can head over to the Kendo UI for Vue site for [more details on themes and components.](https://www.telerik.com/kendo-vue-ui)

Once we have installed all necessary packages, we shall proceed with the integration:

- Open main.js
- Let's import our magic adding the following to our code:

```js
import '@progress/kendo-ui'
import '@progress/kendo-theme-default/dist/all.css'
```

- Add the minimum base pack to our project and, for this particular case, adding buttons:  

```js
import { ButtonsInstaller } from '@progress/kendo-buttons-vue-wrapper'
 
Vue.use (ButtonsInstaller)
```

So now we can create our component using Kendo UI's buttons!

- In our component:

```js
import { Button } from '@progress/kendo-buttons-vue-wrapper'
```

- Let's add it to our component list:

```js 
components: {
  Button
}
```

And we can now use: `<kendo-button></kendo-button>`. For example:

```js
<kendo-button class="button" icon="arrow-right" @click="position++"></kendo-button>
```

You can get more information about buttons [here](https://www.telerik.com/kendo-vue-ui/components/buttons/button/).

Once we have finished our development, let's go to our terminal and use npm to run our project, just as shown in the Vue CLI 3 documentation:

- To run our project type:

```js
npm run serve
```

- And this will trigger the following warning:

```
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
```

**What just happened?!**

Don't sweat it! This can happen often with some Vue.js components and it can be fixed by adding a simple line of code inside of: webpack.config.js

- But wait a minute!... Where is `webpack.config.js` in the new CLI?

- Now it's inside of `node_modules`

- But thou shall not ever modify `node_modules`!!!

- That's actually true, because if you update your project, all the changes you make in `node_modules` will be lost.

- Sooo??? I am lost!. How do I sort this out?

In the new Vue CLI 3, any new configs for `webpack.config.js` are applied in a single file we can create in our project root and it should be called `vue.config.js`.

Once we create the file, just add the following code:

```js
const path = require('path');
 
function resolve (dir) {
  return path.join(__dirname, dir)
}
 
module.exports = {
  lintOnSave: true,
  chainWebpack: (config) => {
    config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
  }
}
```
And voila!!!! It's all running smoothly!!

![vuetiful](https://d585tldpucybw.cloudfront.net/sfimages/default-source/default-album/vue01.jpg?sfvrsn=2faea7b8_1)

---
###### *Special thanks to Gonzalo Nandez and Giselle Perez for their magic*