Introducing License Keys to Kendo UI for Vue

Kendo UI for Vue 2.0 dropped today, December 14th, and with this update comes a change with how we are handling distribution with Kendo UI for Vue which is the introduction of license keys.

What Is Changing?

With Kendo UI for Vue 2.0 we are adding a requirement for developers to provide a license key when adding any of the npm packages of Kendo UI for Vue. A warning message will appear in the console until a license key has been properly provided.

This message will link directly to the My License page with instructions for how to acquire and install said license. This is a physical license file which needs to be included in your project and after executing CLI command will remove the warning message mentioned above.

Our goal with this is to ensure that acquiring a license and activating it is seamless. I’ll cover what these steps are in the “How to Use your License Key” section below, but for those of you interested in why we have added license keys I’ll cover that first.

Why License Keys?

Kendo UI for Vue offers its packages via npm as a way for Vue developers to quickly and easily add our UI components to any of their Vue projects. We know that npm is the standard for handling various packages and reference in modern web applications. One limitation of this setup is that a commercial library such as Kendo UI for Vue does not have any tooling to assist with trials or licensed users.

In order to continue to offer Kendo UI for Vue through npm and make our development efforts to expand the number of features and UI components that we offer sustainable, we believe that license keys will be a good path forward for both our users as well as give our team a way to manage trial and licensed users alike.

Does This Affect Me Today?

This will affect any user who works with Kendo UI for Vue 2.0 and any version that comes after. So, if you previously have used Kendo UI for Vue in your projects you will only see this message when you upgrade to version 2.0.

Eventually this will of course affect all Kendo UI for Vue users in the future, but since we are announcing this today, I just wanted to highlight this scenario for our existing users.

How to Use My License Key

The biggest thing to take away from this blog post is to keep the Kendo UI for Vue My License Key page somewhere in your bookmarks. This page will contain all the information that you need in order to understand our licensing setup along with a more detailed FAQ. That being said, I just want to cover the crucial steps to go from warning message to no warning message which should be done in three steps:

• Get access to your license key
• Install or update the license key in your projects
• Register said license key

How to Access My License Key

The abovementioned informational page has a “Download Your License Key” section. Sign in with your Telerik account and look for the button labeled kendo-ui-license.txt which you should download.

A note I should make here is that you will need to either have an active trial, or be a licensed developer, in order to get access to a license key. If you do not have access the page will bring you to a registration form for a Kendo UI for Vue trial to get you up and running!

Install or Update My License Key

Whether this is your first time starting a Kendo UI for Vue trial, you are looking to upgrade from a trial license to a developer license, or if you are a licensed developer updating to Kendo UI for Vue 2.0, the process is the same.

1. Copy the license key file (kendo-ui-license.txt) to the root folder of your project
2. Install @progress/kendo-licensing as a project dependency by running npm install --save @progress/kendo-licensing
3. Run npx kendo-ui-license activate in the console

Once you have done these three you should be good to go! Easy, right? This is all that you need to do in order to remove the warning message.

If you want to move beyond your local development machine and work with this license key on your CI Servers we recommend adding the Kendo UI for Vue license key to your environment variables, as mentioned in this section of our documentation.

For trial users looking to update their license files after they have purchased a license you will have to snag another license key (tied to your purchase) and follow the same instructions again. This will replace the old trial license key and ensure your project is properly licensed.

If you are a licensed developer whose subscription has expired, and you follow the above instructions you may be met with a message that indicates that the current version of Kendo UI for Vue is not available as a part of your inactive subscription. While Kendo UI for Vue licenses are perpetual, part of your subscription is access to newer versions of Kendo UI for Vue. So, if you see this message you can simply renew and get a new, active, license key and add it to your Vue project.

Kendo UI for Vue License Keys in Practice

With all that out of the way, let’s create a project using the Vue CLI and see how these license keys work in practice.

So, this scenario I have a newly built Vue app that used the vue create CLI command. For my app I chose to go with the aptly named “kendo-licensing-sample” so we end up with vue create kui-licensing-sample.

For the sake of demonstration, a quick and easy component Kendo UI for Vue component would be the Kendo UI Vue DropDownList.

Following the instructions on the DropDown package overview docs, I will run the following npm install command:

npm install --save @progress/kendo-vue-dropdowns @progress/kendo-vue-intl

Also, to get our components styled appropriately I’ll be working with the Kendo UI for Vue Material Theme by running:

npm install --save @progress/kendo-theme-material

Now, with Kendo UI for Vue 2.0 you will see this included as a part of our npm install commands that we list for installation instructions, but I wanted to highlight it here to showcase what package we need for the licensing mechanism to work properly.

npm install --save @progress/kendo-licensing

This is the package which is responsible for activating our license key and all Kendo UI for Vue packages now require the inclusion of @progress/kendo-licensing as a dependency.

I’ll import the DropDownList component to my project inside the HelloWorld.vue sample component that the Vue CLI gave me, then go ahead and copy and paste code from the Kendo UI for Vue DropDownList Getting Started page. It should end up looking something like this when put together:

I also went ahead and added this statement to App.vue in order to apply the Kendo UI for Vue Material theme across my application

import '@progress/kendo-theme-material/dist/all.css';

Now, when I run my Vue application we should see the Vue logo and a DropDownlist with a few options. If I inspect the developer console in my browser I see the following message warning me that there is no license found in this project.

This message lets us know that we need to apply a license key. In case you didn’t bookmark the link previously, the message has a handy link that leads directly to the Kendo UI for Vue licensing page.

From here I can follow the instructions that I mentioned previously and download my license file by finding this button on the page (note that you have to be logged in to a Telerik account to see this):

Now that I’ve downloaded the license file I’ll add kendo-ui-license.txt to the root of my project.

Once this has been added to the project, I go back to my terminal or command prompt and run:

npx kendo-ui-license activate

And that should be it! The next time I run my project the warning message should be gone, and I am off to the races. It really is as simple as that.

Additional Questions

If you have a question not answered in this blog, please review the Frequently Asked Questions section of the Kendo UI for Vue License Key page, which covers more scenarios. You can also always count on our helpful support team for additional questions about this change.

Got Feedback?

Are there ways we can improve this licensing mechanism for you and your team? We would love to hear it! You’re welcome to leave a comment in the section below or submit a support ticket to interact directly with our support and engineering teams.