From 737e9ff175596d1c3eb0b7be5cbd6aab18b0a96f Mon Sep 17 00:00:00 2001 From: filipKovachev Date: Tue, 25 Jun 2024 21:40:52 +0300 Subject: [PATCH 1/6] scale changes to the javascript and options api article --- .../getting-started/javascript-options-api.md | 636 +++++------------- 1 file changed, 151 insertions(+), 485 deletions(-) diff --git a/docs/getting-started/javascript-options-api.md b/docs/getting-started/javascript-options-api.md index 047368e..72bc02f 100644 --- a/docs/getting-started/javascript-options-api.md +++ b/docs/getting-started/javascript-options-api.md @@ -1,5 +1,5 @@ --- -title: First Steps with JavaScript + Options API +title: First Steps (Options API and JavaScript) page_title: Kendo UI for Vue Components Introduction - Kendo UI for Vue Docs & Demos description: "Get started with the Kendo UI for Vue Native Components using Vite and Options API." slug: getting_started_javascript_options_api @@ -8,231 +8,138 @@ heading: Get Started position: 10 --- -# Get Started with Kendo UI for Vue Native Components with JavaScript and Options API +# Get Started with Kendo UI for Vue -In this article you’ll learn how to use Kendo UI for Vue components by building a small app that includes a Grid, a DropDownList, a Window and a design theme. +This tutorial will help you develop a simple app that includes a native Vue Data Grid component. To achieve this, you will build a project using [Vite](https://vitejs.dev/) and the [Vue Options API](https://vuejs.org/guide/typescript/options-api) paired with JavaScript. + + +>Curious about TypeScript or the Composition API? This tutorial comes in several additional variants: +>* [Kendo UI for Vue with TypeScript and the Composition API](slug:getting_started_typescript_composition_api) +>* [Kendo UI for Vue with TypeScript and the Options API](slug:getting_started_typescript_options_api) -The current example uses the recommended by Vue [Vite build tool](https://vitejs.dev/) + [Vue Options API](https://vuejs.org/guide/introduction.html#options-api). If you need Getting started information that uses `Vue Composition API`, you can check [this link](slug:getting_started_javascript_composition_api). > Historically, all Kendo UI for Vue Native components support both **Vue 2** and **Vue 3**, however, Vue 2 is currently in its end-of-support phase till Nov 2024. After our last major release for 2024, Vue 2 will no longer be supported in the new versions of the Kendo UI for Vue components. Please check our [Vue 2 End of Support article](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/) for more details. -## 1. Set up the Vue project -* The recommended way to start with Vue is to scaffold a project using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite). To create a new Vite project use one of the following commands for NPM or Yarn. +## Create the Vue Project -Create project commands: +The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite). -```sh -npm create vite@latest -``` -or -```sh -yarn create vite -``` -When one of the above commands is executed, the interface will ask you to apply additional configurations to your project: -1. Set the project name: -Here we can define the name of our new project. For the needs of the current article, set the name of the application as `my-app` +> You can use both NPM and Yarn to create the project and import the Kendo UI for Vue components. However, for the purposes of this tutorial, we demonstrate only NPM. -2. Select the framework - Choose `Vue` here: -Vite Select Framework +1. Create the Vue project: -3. Select the framework variant - Choose `Javascript` to build a Vite project with Vue and Javascript. -Vite Select Framework Variant + ```sh + npm create vite@latest + ``` + -When you are ready with the above steps, to run the newly created project do the following commands: -``` - cd my-app - npm install - npm run dev -``` +1. Enter the project name, for example, `my-app`. -## 2. Prepare the Generated Project - -> By default, the Vite scaffolding generates a template for Vue project that uses the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) available in the framework. The current article uses [Vue Options API](https://vuejs.org/guide/introduction.html#options-api). A Getting Started Article with Composition API can be found on [this link](slug:getting_started_javascript_composition_api). - -Before you start playing with Kendo UI for Vue, let’s clean up the sample app a bit. Here is a list of suggested edits: -* In the `src/components` folder, delete the `HelloWorld.vue` file -* In the src/App.vue file: - * Remove the import of the HelloWorld component - - ```js - import HelloWorld from './components/HelloWorld.vue' - ``` - * Remove the following code from the template definition: - - ```html -
- - - - - - -
- - ``` - - * Remove the following CSS styles - ```css - .logo { - height: 6em; - padding: 1.5em; - will-change: filter; - } - .logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); - } - .logo.vue:hover { - filter: drop-shadow(0 0 2em #42b883aa); - } - ``` +1. Select the Vue framework by using the arrow keys. + + ```sh + ? Select a framework: » - Use arrow-keys. Return to submit. + Vanilla + > Vue + React + ... + ``` + +1. Select the JavaScript framework variant + + ```sh + ? Select a variant: » - Use arrow-keys. Return to submit. + TypeScript + > JavaScript + ... + ``` +1. Run the newly created project by executing the following commands: - * Clear the `script` tag in the **App.vue** file in a way suitable for the Options API configuration. The `script` tag should look like this: + ```sh + cd my-app + npm install + npm run dev + ``` + +## Clean Up the Generated Project + +Before you start playing with Kendo UI for Vue, clean up the sample app created by Vite: + +1. Delete the `HelloWorld.vue` file in the `src/components` folder. +1. Remove everything in the `src/App.vue` file and leave it blank. +1. Delete the `import './style.css'` line in the `src/main.js` file. +1. Clear the script tag in src/App.vue for Options API configuration: ```html-no-run ``` -Now, when we are ready with the blank Vue project, we can continue the development of our sample application. +Now that the project is clean, you can start developing the sample application. -## 3. Add Application Data -Add dummy data needed by the components. Create folder `appdata` in the `src` folder. Add the following files to the `appdata` folder. +## Add Application Data -* Add a `src/appdata/categories.json` file and copy the content from [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-options-api/src/appdata/categories.json). -* Add a `src/appdata/products.json` file and copy the content from [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-options-api/src/appdata/products.json). +Components like the Grid need some data that they can display, so, in this step, you will add a file with sample data: -## 4. Import Kendo UI for Vue components +1. In the `src` folder, create a new folder called `appdata` where you will place the JSON file with the data. -Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`. For example, the name of the `Grid` package is `@progress/kendo-vue-grid`. +1. Create a new `src/appdata/categories.json` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-options-api/src/appdata/categories.json).json) and paste it into the `products.json` file. -Kendo UI for Vue is a rich suite of many modular components. For our dashboard example, we’ll use three of these components: The Grid, the DropDownList and the Window. +1. Create a new `src/appdata/products.json` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-options-api/src/appdata/products.json). +json) and paste it into the `products.json` file. -Let’s add the mentioned components’ packages and their dependencies: -```sh -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/ @progress/kendo-svg-icons @progress/kendo-vue-indicators -``` -or -```sh -yarn add @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 @progress/kendo-vue-indicators -``` -With the above, we not only add the packages of the `Grid` and `DropDownList` but also add another important package – `kendo-data-query`. It contains useful functions for client-side data operations. -To install the Window component run the following: +## Install the Data Grid Component + +Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`. For example, the name of the Grid package is `@progress/kendo-vue-grid`. To use the Grid in your app, add the component and its [dependencies](https://www.telerik.com/kendo-vue-ui/components/grid/#toc-dependencies): + +Kendo UI for Vue is a rich suite of many modular components. For our dashboard example, we’ll use three of these components: The Grid, the DropDownList and the Window. + ```sh -npm install --save @progress/kendo-vue-dialogs @progress/kendo-licensing @progress/kendo-svg-icons +npm install --save @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-licensing @progress/kendo-vue-animation @progress/kendo-vue-data-tools @progress/kendo-vue-dateinputs @progress/kendo-vue-dropdowns @progress/kendo-vue-inputs @progress/kendo-vue-indicators @progress/kendo-vue-intl @progress/kendo-vue-popup ``` -or + -Kendo UI for Vue includes four gorgeous themes, which are all available as separate NPM packages. The available theme packages are [@progress/kendo-theme-default](https://www.npmjs.com/package/@progress/kendo-theme-default), [@progress/kendo-theme-bootstrap](https://www.npmjs.com/package/@progress/kendo-theme-bootstrap), [@progress/kendo-theme-material](https://www.npmjs.com/package/@progress/kendo-theme-material) and [@progress/kendo-theme-fluent](https://www.npmjs.com/package/@progress/kendo-theme-fluent). -Let’s take the Default theme and install it just like we did with the component packages: -```sh -npm install --save @progress/kendo-theme-default -``` -or +## Import the CSS Styles -```sh -yarn add --save @progress/kendo-theme-default -``` +Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles) available as separate NPM packages. To style the components, you can use each theme as is or [customize](slug:customizingthemes) it to your liking. -Import the CSS files from the package in the `src/App.vue` file. If needed, any additional custom styles can be added in the `` tag of the `src/App.vue` file. +1. Install the [Default theme](https://www.telerik.com/kendo-vue-ui/components/styling/theme-default/): -Here is what we should add: -```js -import '@progress/kendo-theme-default/dist/all.css'; -``` + ```sh + npm install --save @progress/kendo-theme-default + ``` + -## 6. Add a Kendo UI for Vue DropDownList -Now that you have everything set up and ready to go, let’s begin using the Kendo UI for Vue components, starting with the [DropDownList](slug:overview_dropdownlist) component. -Before we continue, the first thing we should do is to import the already installed DropDownList component into the `src/App.vue` file and the `appdata/categories.json` file using the following code: -```js -import { DropDownList } from '@progress/kendo-vue-dropdowns'; -import categories from './appdata/categories.json'; -``` -Add the DropDownList component with the following code: -```js -export default { - name: 'App', - components: { - 'dropdownlist': DropDownList, - }, -//.............. -``` +1. In the `src/App.vue` file, import the CSS files provided by the installed theme package: -After importing the component, use the code below to bind a DropDownList to a list of categories. -```html - - -``` -The data-items property of the DropDownList points to an array of objects or primitive values. In this case, you’re using an array of objects, and therefore specify both `data-item-key` and `text-field` properties. - -You can also use the `default-item` property to display a hint for the users when no item is selected. The default item should have a field that matches the `text-field` name. - -To show a little more of the DropDownList in action, update the `src/App.vue` file to use the below code. -```html - - - -``` -The above code additionally renders the ID of the selected category next to the `DropDownList`. You do this by defining a `dropdownlistCategory` field in the data options and implementing an [onChange](slug:api_dropdowns_dropdownlistchangeevent) handler to set it. +You can add any additional custom styles in the `` tag of the `src/App.vue` file. -> With the things added above, you can already test the Native DropDownList component. If you need a basic test of the `Kendo UI for Vue Native` suite, you can stop here or continue further with the more complex scenario where the [Grid](slug:overview_grid) and [Window](slug:overview_window) components are used. -## 7. Add a Kendo UI for Vue Data Grid -Now that you’ve seen what a basic Kendo UI for Vue component looks like, let’s next implement something more complex with the Kendo UI for Vue Data Grid. +## Add a Vue Data Grid Component -The [Kendo UI for Vue Data Grid](slug:overview_grid) provides 100+ ready-to-use features, covering everything from paging, sorting, filtering, editing and grouping, to row and column virtualization and Excel export. -In this section you’ll try out several of these features, but let’s start by seeing a simple Grid in action. +Now that you've installed all required packages, you are ready to add the Kendo UI for Vue Data Grid to the application: -Import the `Grid` component, the `process` package and the products.json file to the `src/App.vue file`. +1. In the `src/App.vue` file, add a ` -``` + + + ``` -In this section you were able to add a robust grid to your application—complete with paging, filtering, and sorting. Not a bad accomplishment for a few minutes' worth of work! -Feel free to explore the [Kendo UI for Vue Data Grid documentation page](slug:overview_grid) to get a sense of just how many things the Grid can do. -## 8. Add a Kendo UI for Vue Window -The `products` array contains some fields which are not displayed in the Grid. In this section, you’ll use the Kendo UI for Vue Window to display those additional product details when users select a Grid row. +## Get the Complete Source Code -Here are the required steps. -First import the Window component: - -```js -import { Window } from '@progress/kendo-vue-dialogs'; - -export default { - name: 'App', - components: { - //.............. - 'window': Window - }, - //.............. -``` - -Next, define new `windowVisible` and `gridClickedRow` data properties. -```js -data: function() { - return { - //.............. - gridClickedRow:{}, - windowVisible: false - } -} -``` -Next, add a [row click handler](slug:api_grid_gridprops#toc-rowclick) to the Grid. -```html - - //.............. - -``` -After that, add the `rowClick` function below, which will set the `windowVisible` flag to true, and assign the data item of the clicked row to the gridClickedRow property. You’ll use the data item values to render the Window's content. -```js -methods: { - //.............. - rowClick (event){ - this.windowVisible=true; - this.gridClickedRow=event.dataItem; - } - //.............. -} -``` -Next, add the following Window declaration. (Add it immediately after the Grid's definition in the template.) Notice how the Window will be rendered only if the `windowVisible` flag value is true. -```html - -
-
Product Name
-
{{gridClickedRow.ProductName}}
-
Product ID
-
{{gridClickedRow.ProductID}}
-
Quantity per Unit
-
{{gridClickedRow.QuantityPerUnit}}
-
- -``` -Finally, add the following Window [close handler](slug:api_dialogs_windowprops#toc-close), which will set the `windowVisible` flag to false when the user closes the Window. - -```js -methods: { - //.............. - closeWindow (){ - this.windowVisible=false; - } -} -``` -With this code in place, try tapping on a row in the Grid. You should see a custom Window appear with additional product information. - -Once again, note how simple this functionality was to implement. With Kendo UI for Vue, you get a collection of Vue components that are easy to drop in and solve hard problems—in this case, building a customizable cross-browser-friendly Window. That’s the power of Kendo UI for Vue! - -You can learn more about the `Window component` and what it can do on the [Kendo UI for Vue Window documentation page](slug:overview_window). - -## 9. Activate Your Trial or Commercial License -Kendo UI for Vue is a professionally developed library distributed under a [commercial license](https://www.telerik.com/purchase/license-agreement/kendo-ui). Starting from [version 2.0.0](https://www.telerik.com/kendo-vue-ui/components/changelogs/ui-for-vue/), using any of the UI components from the Kendo UI for Vue library requires either a commercial license key or an active trial license key. - -> Since version 3.14.0 (13 September 2023) of Kendo UI for Vue, a missing license causes a watermark to appear over selected components. For more information, see the [Invalid License](slug:my_license#toc-invalid-license) section. - -To experience the full potential of the Kendo UI for Vue components, follow the [license activation instructions](slug:my_license) and hide the invalid/not-activated license messages and attributes. You can skip this step if your application already contains a Kendo UI for Vue license file. - -## 10. Get the Complete Source Code Your Kendo UI for Vue Getting Started application is complete! You can download and run the complete sample application from the [kendo-vue GitHub repository](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-options-api). Alternatively, run, fork and [experiment with the application directly in StackBlitz](https://stackblitz.com/edit/vue3-vite-starter-75eowq?file=src%2FApp.vue). -* If you are using Vue 2, [here a link to the same project](https://codesandbox.io/s/busy-bash-s7is6) implemented in Vue 2 context. - -> Vue 2 is currently in its end-of-support phase till Nov 2024. After our last major release for 2024, Vue 2 will no longer be supported in the new versions of the Kendo UI for Vue components. Please check our [Vue 2 End of Support article](slug:vue2-end-of-support) for more details. - -This article shows just a glimpse of what you can create with Kendo UI for Vue. We hope we’ve managed to get you excited about becoming more a productive Vue developer and building complex UI in a short time through our professional UI library. We’re in it for the long run, so dive in!" - -## Additional Resources - -The resources in this section will help you get the most out of Kendo UI for Vue. - -### ThemeBuilder - -To take full control over the appearance of the Kendo UI for Vue components, you can create your own styles by using [ThemeBuilder](slug:themebuilder). - -ThemeBuilder is a web application that enables you to create new themes and customize existing ones. Every change that you make is visualized almost instantly. Once you are done styling the Vue components, you can export a zip file with the styles for your theme and use them in your Vue app. - -### UI Kits for Figma - -Kendo UI for Vue comes with [four UI Kits for Figma](slug:ui_kits_figma): Material, Bootstrap, Fluent, and Kendo UI Default. They provide the designers of your application with a building block that matches the UI components available in the Kendo UI for Vue suite. Having matching building blocks guarantees the smooth implementation of the design. - -### VSCode Extension - -To help you create projects even faster we have introduced [the Kendo UI VS Code Template Wizard](https://marketplace.visualstudio.com/items?itemName=KendoUI.kendotemplatewizard). To learn more about this awesome extension please check [Introducing the Kendo UI Template Wizard for Visual Studio Code](https://www.telerik.com/blogs/kendo-ui-template-wizard-for-visual-studio-code). -### Virtual Classroom +## Next Steps -If you are aware of TypeScript and prefer the video tutorials, you can check our free [Kendo UI for Vue with TypeScript](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript) course in [Telerik Virtual Classroom](https://learn.telerik.com/learn). +* [Activate Your Kendo UI for Vue License](slug:my_license_vue) +* [Create Projects Faster with the Kendo UI for Vue VS Code Extension](slug:getting_started_vscode) +* [Take a Free Entry-Level Kendo UI for Vue (with TypeScript) Course](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript) \ No newline at end of file From ab0fd8ef5e86a5d2c3cebce0ed4dbca46be36fb6 Mon Sep 17 00:00:00 2001 From: filipKovachev Date: Tue, 25 Jun 2024 22:25:05 +0300 Subject: [PATCH 2/6] scale changes to composition api and typescript article --- .../typescript-composition-api.md | 662 ++++-------------- 1 file changed, 135 insertions(+), 527 deletions(-) diff --git a/docs/getting-started/typescript-composition-api.md b/docs/getting-started/typescript-composition-api.md index ade41eb..0840c18 100644 --- a/docs/getting-started/typescript-composition-api.md +++ b/docs/getting-started/typescript-composition-api.md @@ -1,5 +1,5 @@ --- -title: First Steps with TypeScript +title: First Steps (Composition API and TypeScript) page_title: Kendo UI for Vue Native Components with TypeScript and Composition API Introduction - Kendo UI for Vue Docs & Demos description: "Get started with the Kendo UI for Vue Native Components using Typescript, Vite and Composition API." slug: getting_started_typescript_composition_api @@ -12,9 +12,12 @@ position: 20 Recently, the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) in Vue is getting more and more popular, over the classic [Options API](https://vuejs.org/guide/introduction.html#options-api). -In this article you will learn how to use **Kendo UI for Vue Native** components with `TypeScript` and `Composition API`. Below we are building a small app that includes a Grid, a DropDownList, a Window and a design theme. +This tutorial will help you develop a simple app that includes a native Vue Data Grid component. To achieve this, you will build a project using [Vite](https://vitejs.dev/) and the [Vue Composition API](https://vuejs.org/guide/introduction.html#composition-api) paired with TypeScript. -For the example discussed in the current article, we are using Vue 3. The Kendo UI for Vue Native components can be used with Composition API both in Vue 3 and Vue 2 context. More about the `Composition API`, you can learn on this [TypeScript Integration](slug:overview_typescript_integation) article. + +>Curious about JavaScript or the Options API? This tutorial comes in several additional variants: +>* [Kendo UI for Vue with TypeScript and the Options API](slug:getting_started_typescript_options_api) +>* [Kendo UI for Vue with JavaScript and the Options API](slug:getting_started_javascript_options_api) > Vue 2 is currently in its end-of-support phase till Nov 2024. After our last major release for 2024, Vue 2 will no longer be supported in the new versions of the Kendo UI for Vue components. Please check our [Vue 2 End of Support article](slug:vue2-end-of-support) for more details. @@ -22,240 +25,141 @@ The current example uses the recommended by Vue [Vite build tool](https://vitejs > Prefer video tutorials? How about a free Telerik UI onboarding course? Check out the [Kendo UI for Vue with TypeScript](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript) training in [Telerik Virtual Classroom](https://learn.telerik.com/learn). -## 1. Set up the Vue project -* The recommended way to start with Vue is to scaffold a project using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite). To create a new Vite project use one of the following commands for NPM or Yarn. +## Create the Vue Project -Create project commands: +The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite). -```sh -npm create vite@latest -``` -or -```sh -yarn create vite -``` +> You can use both NPM and Yarn to create the project and import the Kendo UI for Vue components. However, for the purposes of this tutorial, we demonstrate only NPM. -When one of the above commands is executed, the interface will ask you to apply additional configurations to your project: -1. Set the project name: -Here we can define the name of our new project. For the needs of the current article, set the name of the application as `my-app` +1. Create the Vue project: -2. Select the framework - Choose `Vue` here: -Vite Select Framework + ```sh + npm create vite@latest + ``` + -3. Select the framework variant - Choose `Typescript` to build a Vite project with Vue and Typescript. -Vite Select Framework Variant +1. Enter the project name, for example, `my-app`. -When you are ready with the above steps, to run the newly created project do the following commands: -``` - cd my-app - npm install - npm run dev -``` +1. Select the Vue framework by using the arrow keys. + + ```sh + ? Select a framework: » - Use arrow-keys. Return to submit. + Vanilla + > Vue + React + ... + ``` + +1. Select the TypeScript framework variant -## 2. Prepare the Generated Project - -> By default, the Vite scaffolding generates a template for Vue project that uses the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) available in the framework. If you use the [Vue Options API](https://vuejs.org/guide/introduction.html#options-api),a getting started article with it + Typescript can be found on [this link](slug:getting_started_typescript_options_api). - -Before you start playing with Kendo UI for Vue, let’s clean up the sample app a bit. Here is a list of suggested edits: -* In the `src/components` folder, delete the `HelloWorld.vue` file -* In the src/App.vue file: - * Remove the import of the HelloWorld component - - ```js - import HelloWorld from './components/HelloWorld.vue' - ``` - * Remove the following code from the template definition: - - ```html - - - ``` - - * Remove the following CSS styles - ```css - .logo { - height: 6em; - padding: 1.5em; - will-change: filter; - } - .logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); - } - .logo.vue:hover { - filter: drop-shadow(0 0 2em #42b883aa); - } - ``` - -Now, when we are ready with the blank Vue project, we can continue the development of our sample application. - -## 3. Add Application Data + ```sh + ? Select a variant: » - Use arrow-keys. Return to submit. + > TypeScript + JavaScript + ... + ``` +1. Run the newly created project by executing the following commands: + + ```sh + cd my-app + npm install + npm run dev + ``` + + +## Clean Up the Generated Project + +Before you start playing with Kendo UI for Vue, clean up the sample app created by Vite: + +1. Delete the `HelloWorld.vue` file in the `src/components` folder. +1. Remove everything in the `src/App.vue` file and leave it blank. +1. Delete the `import './style.css'` line in the `src/main.ts` file. + +Now that the project is clean, you can start developing the sample application. + +## Add Application Data Add dummy data needed by the components. Create folder `appdata` in the `src` folder. Add the following files to the `appdata` folder. -* Add a `src/appdata/categories.ts` file and copy the content from [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-typescript-composition-api/src/appdata/categories.ts). -* Add a `src/appdata/products.ts` file and copy the content from [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-typescript-composition-api/src/appdata/products.ts). +1. Create a new `src/appdata/products.ts` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-typescript-composition-api/src/appdata/categories.ts) and paste it into the `products.ts` file. -## 4. Import Kendo UI for Vue components +1. Create a new `src/appdata/categories.ts` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-typescript-composition-api/src/appdata/categories.ts) and paste it into the `products.ts` file. -Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`. For example, the name of the `Grid` package is `@progress/kendo-vue-grid`. -Kendo UI for Vue is a rich suite of many modular components. For our dashboard example, we’ll use three of these components: The Grid, the DropDownList and the Window. +## Install the Data Grid Component -Let’s add the mentioned components’ packages and their dependencies: -```sh -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 @progress/kendo-svg-icons @progress/kendo-vue-indicators -``` -or -```sh -yarn add @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 @progress/kendo-svg-icons @progress/kendo-vue-indicators -``` -With the above, we not only add the packages of the `Grid` and `DropDownList` but also add another important package – `kendo-data-query`. It contains useful functions for client-side data operations. +Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`. For example, the name of the Grid package is `@progress/kendo-vue-grid`. To use the Grid in your app, add the component and its [dependencies](https://www.telerik.com/kendo-vue-ui/components/grid/#toc-dependencies): -To install the Window component run the following: ```sh -npm install --save @progress/kendo-vue-dialogs @progress/kendo-licensing @progress/kendo-svg-icons +npm install --save @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-licensing @progress/kendo-vue-animation @progress/kendo-vue-data-tools @progress/kendo-vue-dateinputs @progress/kendo-vue-dropdowns @progress/kendo-vue-inputs @progress/kendo-vue-indicators @progress/kendo-vue-intl @progress/kendo-vue-popup ``` -or + -Kendo UI for Vue includes four gorgeous themes, which are all available as separate NPM packages. The available theme packages are [@progress/kendo-theme-default](https://www.npmjs.com/package/@progress/kendo-theme-default), [@progress/kendo-theme-bootstrap](https://www.npmjs.com/package/@progress/kendo-theme-bootstrap), [@progress/kendo-theme-material](https://www.npmjs.com/package/@progress/kendo-theme-material) and [@progress/kendo-theme-fluent](https://www.npmjs.com/package/@progress/kendo-theme-fluent). +## Import the CSS Styles -Let’s take the Default theme and install it just like we did with the component packages: -```sh -npm install --save @progress/kendo-theme-default -``` -or +Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles) available as separate NPM packages. To style the components, you can use each theme as is or [customize](slug:customizingthemes) it to your liking. -```sh -yarn add --save @progress/kendo-theme-default -``` - -Import the CSS files from the package in the `src/main.ts` file. If needed, any additional custom styles can be added in the `` tag of the `src/App.vue` file. +1. Install the [Default theme](https://www.telerik.com/kendo-vue-ui/components/styling/theme-default/): -Here is what we should add: -```js -import '@progress/kendo-theme-default/dist/all.css'; -``` + ```sh + npm install --save @progress/kendo-theme-default + ``` + -## 6. Add a Kendo UI for Vue DropDownList -Now that you have everything set up and ready to go, let’s begin using the Kendo UI for Vue components, starting with the [DropDownList](slug:overview_dropdownlist) component. -Before we continue, the first thing we should do is to import the already installed DropDownList component into the `src/App.vue` file and the `appdata/categories.ts` file using the following code: -```js -import { DropDownList } from '@progress/kendo-vue-dropdowns'; -import { categories } from './appdata/categories'; -``` -Add the DropDownList component with the following code: -```js -export default defineComponent({ - components: { - 'dropdownlist': DropDownList, - }, -//.............. -``` +1. In the `src/App.vue` file, import the CSS files provided by the installed theme package: -After importing the component, use the code below to bind a DropDownList to a list of categories. -```html - - -``` -The data-items property of the DropDownList points to an array of objects or primitive values. In this case, you’re using an array of objects, and therefore specify both `data-item-key` and `text-field` properties. - -You can also use the `default-item` property to display a hint for the users when no item is selected. The default item should have a field that matches the `text-field` name. - -To show a little more of the DropDownList in action, update the `src/App.vue` file to use the below code. -```html - - - -``` -The above code additionally renders the ID of the selected category next to the `DropDownList`. You do this by defining a `dropdownlistCategory` field in the data options and implementing an [onChange](slug:api_dropdowns_dropdownlistchangeevent) handler to set it. -> In the definition on the `handleDropDownChange` method, you will see the `DropDownListChangeEvent` type defined for the event handler. This type should be defined when we work with TypeScript. The type is exported in the `@progress/kendo-vue-dropdowns` package and to use it we have to update the import definition as follows: -```html -import { DropDownList, DropDownListChangeEvent } from '@progress/kendo-vue-dropdowns'; -``` -> With the things added above, you can already test the Native DropDownList component. If you need a basic test of the `Kendo UI for Vue Native` suite, you can stop here or continue further with the more complex scenario where the [Grid](slug:overview_grid) and [Window](slug:overview_window) components are used. -## 7. Add a Kendo UI for Vue Data Grid +## Add a Vue Data Grid Component -Now that you’ve seen what a basic Kendo UI for Vue component looks like, let’s next implement something more complex with the Kendo UI for Vue Data Grid. +Now that you've installed all required packages, you are ready to add the Kendo UI for Vue Data Grid to the application: -The [Kendo UI for Vue Data Grid](slug:overview_grid) provides 100+ ready-to-use features, covering everything from paging, sorting, filtering, editing and grouping, to row and column virtualization and Excel export. -In this section you’ll try out several of these features, but let’s start by seeing a simple Grid in action. +1. In the `src/App.vue` file, add a ` + ``` -```js -import { products } from './appdata/products'; -import { process } from '@progress/kendo-data-query'; -import { Grid } from '@progress/kendo-vue-grid'; -``` +1. Add a `