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!
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 on what you need to know, and I recommend reading the official documentation 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:
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!)
For example, for our Vuetiful Rick & Morty we used buttons:
You can head over to the Kendo UI for Vue site for more details on themes and components.
Once we have installed all necessary packages, we shall proceed with the integration:
Add the minimum base pack to our project and, for this particular case, adding buttons:
So now we can create our component using Kendo UI's buttons!
In our component:
Let's add it to our component list:
And we can now use:
<kendo-button></kendo-button>. For example:
You can get more information about buttons here.
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:
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:
- But wait a minute!... Where is
webpack.config.js in the new CLI?
- Now it's inside of
- 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
Once we create the file, just add the following code:
And voila!!!! It's all running smoothly!!
For more Vue info: Want to learn about creating great user interfaces with Vue? Check out Kendo UI for Vue with everything from grids and charts to schedulers and pickers.
Woman, traveller, musicienne and clown. DevOps/SRE + Full Stack Dev. Proud Vue Vixen. A nerd who loves to party. 🏳️🌈🦄She/Her
Subscribe to be the first to get our expert-written articles and tutorials for developers!