VueT2 Dark_1200x303

How can Kendo UI help you design and develop the perfect form in Vue with ease?

Before We Start

This post is suited for all levels of frontend developers who use Vue.js, so being conversant with beginner concepts and installation processes is not assumed. Here are a few prerequisites you should already have before you start to use Vue CLI 3 through this article.

You will need:

  • Node.js 10.x or above installed
  • The Node Package Manager 6.7 or above (npm) also installed
  • A code editor: Visual Studio Code is highly recommended (here’s why)
  • Vue’s latest version installed globally on your machine
  • Vue CLI 3.0 installed on your machine

What is Kendo UI?

Kendo UI is a comprehensive web user interface framework with a collection of JavaScript UI components with libraries for jQuery and even more modern ones like Vue, React and Angular. Kendo UI developers build interactive and responsive high-performance apps using the large library of UI widgets and data visualization components.

Why Kendo UI?

Using Kendo UI you can easily add really advanced UI components into your frontend project in the library of your choice. You get to save time from worrying about key functionalities of the interface and focus on proprietary features instead. Kendo UI ships with support for each of your favorite frontend web frameworks like Vue.js with an easy-to-use integration.

Also aside from basic UI components, Kendo UI provides you with advanced data visualization UI elements that ensure you do not have to add additional libraries to your project to handles charts and graphs. These advanced UI elements are also very customizable too.

Accessibility Focus

Most times when people build user interfaces or use UI libraries, they do not consider the accessibility of the components they build or the elements they integrate into their projects. This is a space where Kendo UI also stands out—they ensure that every single element they provide is made accessible out of the box.

Getting Started

If you followed this post from the start, you already have Vue installed, so open up your VS Code and open a new terminal. Navigate to a directory of your choice and then create a new project:

vue create kendoapp

When you are done with setting up a new Vue project called kendoapp, test it out to confirm it works without errors.

cd kendoapp
npm run serve

If you go to the root directory, the main.js file should look like this:

import Vue from 'vue'
import App from './App.vue'
import '@progress/kendo-ui'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Installation

After setting up Vue, the next step is Installing Kendo UI on the project using webpack. Open up the terminal in your VS Code and run the commands below:

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

What We Will Be Building

We are going to build a UX designer job application form that will include a color picker, interactive sliders and dark mode.

App demo includes color picker, interactive sliders and dark mode

To start, you have to install the Kendo UI inputs package for forms:

npm install --save @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-vue-dropdowns @progress/kendo-vue-dateinputs @progress/kendo-drawing @progress/kendo-vue-data-tools @progress/kendo-vue-animation @progress/kendo-licensing

Yes, you need most of them and you can decide to install them one after another. Due to the native ability of these components, when you integrate any one without installing it first, the terminal throws an error and then tells you exactly what to install. I think that is pretty cool.

After installation, you can now import a couple of individual native components like:

MaskedTextBox

The MaskedTextBox uses a mask to control the input of the user. Using this, you can define the specific format by using the mask option of the component. Each mask can contain mask rules and mask literals. The mask literals are automatically entered for the user and cannot be removed. When the MaskedTextBox initializes, it decorates the element with a textbox CSS class.

NumericTextBox

The NumericTextBox enables the user to edit and submit specific numeric values by typing or by using the spin buttons. It converts an element into a numeric, percentage or currency textbox. The conversion data type depends on the specific format. The component renders spin buttons that increase or decrease its value with a predefined step.

Date Picker

The date picker allows the user to select a date in one of the most intuitive ways a date can be rendered. It combines Kendo UI for Vue DateInput, Calendar and TimePicker component features, and enables the user to enter or pick a date and time values. The DateTimePicker component is part of the Kendo UI for Vue library of Vue UI components. It is distributed through npm under the kendo-vue-date inputs package.

Slider

The Slider enables the user to increase, decrease and select predefined values by dragging its handle along the track, or by clicking the side arrow buttons. The component enables you to set minimum and maximum values, define its horizontal or vertical orientation, determine its small and large steps, and adjust the format and position of its tooltip.

RangeSlider

The RangeSlider displays and allows the user to select a range of values. The RangeSlider wrapper for Vue is a client-side wrapper for Kendo UI RangeSlider widget.

Initial Setup

Template

Below is the code block for the template as it shows in the gif above.

<template>
<body id="app" v-bind:class="[isActive ? 'red' : 'blue']">
   <div>
     <div class="col-xs-12 col-sm-6 example-col">
          <label for="fname">First name</label><br>
          <input type="text" id="fname" name="fname" placeholder="John" style="font-size:18px;
          width:160px; margin:10px;"><br>
          <label for="lname">Last name</label><br>
          <input type="text" id="lname" name="lname" placeholder="Doe" style="font-size:18px;
          width:160px;margin:10px;"><br>
        </div>
        <div>
            <p>Enter phone number</p>
            <maskedtextbox :mask="mask" :default-value="defaultValue" ></maskedtextbox>
            
        </div>
        <br><br>
        <p>Choose date of graduation</p>
        <div class="example-wrapper">
          <datetimepicker />
      </div> <br>
        <div>
          <label>
            <p>Number of Dribble designs you have</p>
            <numerictextbox
                :default-value="2"
                :step="2"
                :min="0"
                :max="18">
            </numerictextbox> 
        </label>
        </div>
        <br>
        <div class="example-wrapper">
          <p>Rate your wireframing skills</p>
            <slider
                :buttons="true"
                :step="1"
                :default-value="7"
                :min="1"
                :max="10"
            >
            <slider-label :position="1">1</slider-label>
            <slider-label :position="3">3</slider-label>
            <slider-label :position="5">5</slider-label>
            <slider-label :position="7">7</slider-label>
            <slider-label :position="10">10</slider-label>
            </slider>
        </div> <br> <br>
      <div>
        <p>Dark Mode</p>
          <label class="switch">
            <div @click="toggleClass()">
            <input type="checkbox">  </div>
            <span class="slider"></span>
          </label>
      </div>
    </div>
  </body>
</template>

Here you can see that Kendo UI has a slightly different way of referencing template elements, with elements like instead of saying . However, we will make sure to tell Vue to take note of this in the logic section. We also bound the toggle functionality to the body tag but the trigger at the button at the bottom.

Logic

Copy the code block below into the scripts section of the app.vue file:

<script>
import '@progress/kendo-theme-default/dist/all.css';
import { MaskedTextBox } from '@progress/kendo-vue-inputs';
import { NumericTextBox } from '@progress/kendo-vue-inputs';
import { Slider, SliderLabel } from '@progress/kendo-vue-inputs';
import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
export default {
    components: {
        'maskedtextbox': MaskedTextBox,
        'numerictextbox': NumericTextBox,
        'slider': Slider,
        'slider-label': SliderLabel,
        'datetimepicker': DateTimePicker
    },
     data: function(){
        return {
            mask: '(999) 000-00-00-00',
            defaultValue: '(359) 884-12-33-21',
            isActive: true
              
        };
    },
methods:{
  toggleClass: function(){
       this.isActive = !this.isActive;
    },
  }
};
</script>

Here we imported all the necessary Kendo UI components and then registered the various components. We also made sure to tell Vue to reference the components as it is specified in the template. You might get some linting errors, but ignore them because the Kendo UI library for Vue uses a slightly different way to name HTML elements. We also added logic for the toggle method for the dark mode.

The style section of your app.vue should look like this:

<style>
body{
  background-color: grey;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0px;
  padding: 100px;
}
.red{
  background: #f5efef;
}
.blue{
  background: #585353;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
</style>

It is important to know that these are all native Kendo components. These components do not depend on third-party frameworks like jQuery. This makes them lightweight and easy to use and customize without so many dependencies.

Conclusion

In this post, you were introduced to Kendo UI for Vue and how useful it is for frontend developers. We also saw how to set up Kendo UI for our Vue projects and then built a fun project using some native input components. Happy hacking!


5E9A474B-EBDB-439E-8A4A-3B041B0BEDA6
About the Author

Nwose Lotanna Victor

Nwose Lotanna Victor is a web technology enthusiast who documents his learning process with technical articles and tutorials. He is a freelance frontend web developer based in Lagos, Nigeria. Passionate about inclusion, community-building and movies in Africa, he enjoys learning new things and traveling.

Related Posts

Comments

Comments are disabled in preview mode.