Skip to content

Latest commit

 

History

History
113 lines (82 loc) · 3.76 KB

index.md

File metadata and controls

113 lines (82 loc) · 3.76 KB
title page_title description slug brand canonicalLink heading
Get Started with Kendo UI for Vue Wrapper
Get Started with Vue Wrapper Components - Kendo UI for Vue Docs & Demos
Get started with the Kendo UI for Vue Wrapper.
getting_started
getting-started
Get Started

Get Started with Kendo UI for Vue Wrapper Components

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

Play also our video tutorial on Getting Started with Kendo UI and Vue.

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 DateInputs wrappers package 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 builds and the Calendar component appears on the screen.

VSCode Extension

To help you create projects even faster we have introduced the Kendo UI VS Code Template Wizard. To learn more about this awesome extension please check Introducing the Kendo UI Template Wizard for Visual Studio Code.

Suggested Links