Get Started

In this article

To start using the Kendo UI for Vue, you need to integrate them in either of the available ways.

Integrating with NPM and Webpack

To integrate the Kendo UI for Vue by using NPM and Webpack:

  1. Set up the Vue project

  2. Update and build the application

Setting Up the Vue Project

To create a new Vue project, use the Create Vue App approach from the official Vue documentation.

  1. Add Kendo UI by installing the Kendo UI Professional NPM package.

    npm install --save @progress/kendo-ui
  2. Add Kendo UI Theme by installing the Kendo UI Default Theme NPM package.

    npm install --save @progress/kendo-theme-default
  3. Add the Kendo UI DateInput wrapper for Vue.

    npm install --save @progress/kendo-dateinputs-vue-wrapper
  4. Import the Kendo UI packages to the App component. If you refer to Kendo UI in two or more places in your application, add the Kendo UI-related files only to the main.js file. Alternatively, add them only to the component files where they will be used.

    import '@progress/kendo-ui'
    import '@progress/kendo-theme-default/dist/all.css'
    import { Calendar } from '@progress/kendo-dateinputs-vue-wrapper'
  5. Add the Calendar component globally by registering it as a global component and then adding it to the collection of components.

    Vue.component(Calendar.name, Calendar)
    
    new Vue({
        el: '#app',
        router,
        template: '<App/>',
        components: {
            App,
            Calendar
        }
    })
  6. Declare the Calendar in a component by opening the Hello.vue file and then adding the Calendar to the template section.

    <template>
        <div class="hello">
            <h1>{{ msg }}</h1>
            <kendo-calendar :value="new Date()"></kendo-calendar>
        </div>
    </template>
    
    <script>
        export default {
            name: 'hello',
            data () {
                return {
                    msg: 'Hello Kendo UI for Vue.js'
                }
            }
        }
    </script>

Building the Application

After you add the dependencies and the code, run the npm run dev command to start the application.

As a result, the application is built and the Calendar component appears on the screen.

vue-getting-started.png