diff --git a/docs/getting-started/get-started-nuxt-3.md b/docs/getting-started/get-started-nuxt-3.md index c8fa484..b93cefb 100644 --- a/docs/getting-started/get-started-nuxt-3.md +++ b/docs/getting-started/get-started-nuxt-3.md @@ -1,5 +1,5 @@ --- -title: First Steps with Nuxt 3 +title: First Steps (Composition API and Nuxt 3) page_title: Kendo UI for Vue Native Components with Nuxt 3 Introduction - Kendo UI for Vue Docs & Demos description: "Get started with the Kendo UI for Vue Native Components in Nuxt 3 using Typescript." slug: getting_started_nuxt_3 @@ -8,162 +8,96 @@ heading: Get Started position: 100 --- +# Get Started with Kendo UI for Vue -# Get Started with the Kendo UI for Vue Native Components using Nuxt 3 +> 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). -Since the release of Nuxt 3 in mid-November 2022, we are happy to announce the Kendo UI for Vue Native components are fully compatible with Nuxt 3 and all our Native components can be used in Nuxt 3 with SSR(server-side rendering) configuration. +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 [Nuxt 3](https://nuxt.com/docs/getting-started/introduction) -This article showcases how we can implement simple Nuxt 3 application using the Native Grid, DropDownList and Window components styled with a Kendo Theme. The current example uses `Vue Composition API` + `Typescript` but the same approach can be implemented using `Javascript` and/or `Vue Options API`. +>Curious about JavaScript 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 JavaScript and the Options API](slug:getting_started_javascript_options_api) +>* [Kendo UI for Vue with TypeScript and the Options API](slug:getting_started_typescript_options_api) -> If you prefer to see the ready implementation of the example discussed in this article, you can directly [check its code here](#toc-11-complete-source-code). +> Historically, all Kendo UI for Vue Native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/). -## 1. Set up your Nuxt 3 project -* To create a new Nuxt project with a name `my-app`, use the following command. +## Create the Vue Project + +1. Create a Nuxt project named `my-app`: ```sh npx nuxi init my-app ``` -When the processes followed by the execution of the above command are finished, to run the newly created project do the following commands: +1. Run the newly created project by executing the following commands: + ``` cd my-app npm install npm run dev ``` -## 2. Prepare the Generated Project - -Before you continue with the next steps in the current article, please remove the following code from the template definition in the generated `app.vue` file: - -```html - -``` +## Clean Up the Generated Project -## 3. Add JSON data +Before you start playing with Kendo UI for Vue, clean up the sample app created by Nuxt: -Add dummy data needed by the components. Create folder `appdata` in the root folder. Add the following files to the `appdata` folder. +1. Delete the `` line inside the `app.vue` file -* Add a `appdata/categories.ts` file and copy the content from [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-nuxt3/appdata/categories.ts). -* Add a `appdata/products.ts` file and copy the content from [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-nuxt3/appdata/products.ts). +## Add Application Data -## 4. Add the Kendo UI for Vue components +Add dummy data needed by the components. Create folder `appdata` in the `src` folder. Add the following files to the `appdata` folder. -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 `appdata/categories.ts` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-nuxt3/appdata/categories.ts) and paste it into the `categories.ts` 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](slug:overview_grid), the [DropDownList](slug:overview_dropdownlist) and the [Window](slug:overview_window). +1. Create a new `appdata/products.ts` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-nuxt3/appdata/products.ts) and paste it into the `products.ts` 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/kendo-licensing @progress/kendo-svg-icons @progress/kendo-vue-indicators -``` +## Install the Data Grid Component -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 -``` - -> To demonstrate the features of the Nuxt Framework, we will separate the implementation of the Grid, DropDownList, and Window components into separate Vue components that pass parameters to each other. - -## 5. Import the Kendo UI for Vue CSS styles - -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 -``` - -To add the CSS definitions from the theme package in our project, we need to include them in the `nuxt.config.ts` file as follows: - -```js -export default defineNuxtConfig({ - css: [ - '@progress/kendo-theme-default/dist/all.css', - ], -}) +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 ``` - -## 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. - -As mentioned above, each of the Kendo UI for Vue components we are going to use in the getting started example will be added to a separate Vue component. To create the file in which we will add the DropDownList's logic run the following command: - + -The above command will add a file with name `KendoDropDownList.vue` to the pages folder of your Nuxt 3 application. Having this file available we can continue further with our example. +## Import the CSS Styles -The first thing we should do is to add the already installed DropDownList component into the `pages/KendoDropDownList.vue` file and the `appdata/categories.ts` file using the following code: -```js -import { categoriesData } from '../appdata/categories'; -import { DropDownList as dropdownlist, DropDownListChangeEvent } from '@progress/kendo-vue-dropdowns'; -``` +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. -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. +1. Install the [Default theme](https://www.telerik.com/kendo-vue-ui/components/styling/theme-default/): -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. + ```sh + npm install --save @progress/kendo-theme-default + ``` + -To show a little more of the DropDownList in action, update the `pages/KendoDropDownList.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. +1. In the `nuxt.config.ts` file, import the CSS files provided by the installed theme package: -> 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. + ```js + import '@progress/kendo-theme-default/dist/all.css'; + ``` -What we did in this step of the getting started article is to build the basics of the DropDownList's functionality which [later will be combined with the other components](#toc-9-assembling-all-in-one) to create a complete product. -## 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 now implement something more complex with the Kendo UI for Vue Data Grid. -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. To create the file in which we will add the Grid's logic run the following command: +1. Now that you've installed all required packages, you are ready to add the Kendo UI for Vue Data Grid to the application. ```sh npx nuxi add page KendoGrid ``` -The above command will add a file with name `KendoGrid.vue` to the pages folder of your Nuxt 3 application. In the newly created file, import the `Grid` component, the `process` package and the `products.ts` file to the `pages/KendoGrid.vue file`. +1. In the `pages/KendoGrid.vue` file, add a ` -``` - -> Above you will see the usage of the `GridDataStateChangeEvent`, `DataResult`, `State` and `CompositeFilterDescriptor` types. More details about the different types you can find on the [Data Query API page](slug:api_kendo-data-query) and [this GridDataStateChangeEvent API](slug:api_grid_griddatastatechangeevent) documentation. - -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. - -What we did in this step of the getting started article is to build the basics of the Grid's functionality which [later will be combined with the other components](#toc-9-assembling-all-in-one) to create a complete product. - -## 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. - -To create the file in which we will add the Window's logic run the following command: - -```sh -npx nuxi add page KendoWindow -``` - -In the newly created `KendoWindow.vue` file, add the following import. - -```js -import { Window as window } from '@progress/kendo-vue-dialogs'; ``` -Next, add the following Window declaration in template section of the KendoWindow.vue component. -```html - -
-
Product Name
-
{{ props.rowData.gridClickedRow.ProductName }}
-
Product ID
-
{{ props.rowData.gridClickedRow.ProductID }}
-
Quantity per Unit
-
{{ props.rowData.gridClickedRow.QuantityPerUnit }}
-
- -``` - -Next, define `windowVisible` property that controls the visibility of the Window. This value is imported as a prop inside the KendoWindow component. -```js -const props = defineProps({ - rowData: { type: Object, default: { windowVisible: false, gridClickedRow: { "ProductName": "", "ProductID": "", QuantityPerUnit: "" } } }, -}) -``` - -Finally, add the following Window [close handler](slug:api_dialogs_windowprops#toc-close), which will trigger a logic that will set the `windowVisible` flag to false when the user closes the Window. - -```js -const closeWindow = () => { - emit('closeWindow', { windowVisible: false }) -}; -``` - -The complete KendoWindow.vue code needed in our application is as follows: - -```js - - - -``` - -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. Assembling All in One -To assemble all of the above pages in one, we need to add a component that uses each of our `KendoGrid`, `KendoDropDownList` and `KendoWindow` components and handles the data passed between them. - -Execute the following command to add an `index` page to the Nuxt application. -```sh -npx nuxi add page index -``` -Copy the following code into the newly created `index.vue` file. - -```js-no-run - - - -``` - -Having the final step implemented, we are ready to start and test our Getting started example. To do this you need to run the following command in the root folder of the `my-app` project: -```js-no-run -npm run dev -``` - -## 10. 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. - -## 11. 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-examples GitHub repository](https://github.com/telerik/kendo-vue/tree/master/getting-started-nuxt3/). - -Alternatively, run, fork and [experiment with the application directly in StackBlitz](https://stackblitz.com/edit/nuxt-starter-qacprz?file=pages%2Findex.vue). - -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 +## Get the Complete Source Code -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). +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-nuxt3/). Alternatively, run, fork and [experiment with the application directly in StackBlitz](https://stackblitz.com/edit/nuxt-starter-qacprz?file=pages%2Findex.vue). -### Kendo UI for Vue and TypeScript -For more specifics about the usage of the Kendo UI for Vue Native components, you can check the [Kendo UI for Vue TypeScript Integration Overview](slug:overview_typescript_integation) article. +## Next Steps -## Suggested Links +* [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) -* [Getting Started with Kendo UI for Vue Native suite]({% slug getting_started_javascript_composition_api %}) -* [Kendo UI for Vue - First Steps with JavaScript + Options API]({% slug getting_started_javascript_options_api %}) -* [Kendo UI for Vue - First Steps with TypeScript]({% slug getting_started_typescript_composition_api %}) -* [Kendo UI for Vue - First Steps with TypeScript + Options API]({% slug getting_started_typescript_options_api %}) \ No newline at end of file diff --git a/docs/getting-started/javascript-options-api.md b/docs/getting-started/javascript-options-api.md index 047368e..5d16335 100644 --- a/docs/getting-started/javascript-options-api.md +++ b/docs/getting-started/javascript-options-api.md @@ -1,6 +1,6 @@ --- -title: First Steps with JavaScript + Options API -page_title: Kendo UI for Vue Components Introduction - Kendo UI for Vue Docs & Demos +title: First Steps (Options API and JavaScript) +page_title: Kendo UI for Vue Components with JavaScript and the Options API 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 brand: getting-started @@ -8,231 +8,140 @@ 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. +> 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). -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). +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. -> 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. +>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) +>* [Kendo UI for Vue with the Composition API and Nuxt 3](slug:getting_started_nuxt_3) -Create project commands: +> Historically, all Kendo UI for Vue Native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/). -```sh -npm create vite@latest -``` -or -```sh -yarn create vite -``` +## Create the Vue Project -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` +The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite). -2. Select the framework - Choose `Vue` here: -Vite Select Framework -3. Select the framework variant - Choose `Javascript` to build a Vite project with Vue and Javascript. -Vite Select Framework Variant +> You can use both NPM and Yarn to create the project and import the Kendo UI for Vue components. This tutorial demonstrates only the NPM approach. -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. Create the Vue project: -## 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); - } - ``` + ```sh + npm create vite@latest + ``` + - * 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: +1. Enter the project name, for example, `my-app`. + +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: + + ```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 diff --git a/docs/getting-started/typescript-composition-api.md b/docs/getting-started/typescript-composition-api.md index ade41eb..49f9903 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 @@ -8,254 +8,156 @@ heading: Get Started position: 20 --- -# Get Started with Kendo UI for Vue Native Components with TypeScript and Composition API +# Get Started with Kendo UI for Vue -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). +> 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). -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. -> 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. +>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) +>* [Kendo UI for Vue with the Composition API and Nuxt 3](slug:getting_started_nuxt_3) -The current example uses the recommended by Vue [Vite build tool](https://vitejs.dev/) + [Vue Composition API](https://vuejs.org/guide/introduction.html#composition-api) + Typescript. If you need Getting started information that uses `Vue Options API` + Typescript, you can check [this link](slug:getting_started_typescript_options_api). +> Historically, all Kendo UI for Vue Native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/). -> 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. This tutorial demonstrates only the NPM approach. -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. -## 2. Prepare the Generated Project + ```sh + ? Select a framework: » - Use arrow-keys. Return to submit. + Vanilla + > Vue + React + ... + ``` -> 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). +1. Select the TypeScript framework variant. -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 + ```sh + ? Select a variant: » - Use arrow-keys. Return to submit. + > TypeScript + JavaScript + ... + ``` +1. Run the newly created project by executing the following commands: - ```js - import HelloWorld from './components/HelloWorld.vue' - ``` - * Remove the following code from the template definition: + ```sh + cd my-app + npm install + npm run dev + ``` - ```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); - } - ``` +## Clean Up the Generated Project -Now, when we are ready with the blank Vue project, we can continue the development of our sample application. +Before you start playing with Kendo UI for Vue, clean up the sample app created by Vite: -## 3. Add Application Data +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. -Add dummy data needed by the components. Create folder `appdata` in the `src` folder. Add the following files to the `appdata` folder. +Now that the project is clean, you can start developing the sample application. -* 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). +## Add Application Data -## 4. Import Kendo UI for Vue components +Components like the Grid need some data that they can display, so, in this step, you will add a file with sample 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/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. -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/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. -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. -To install the Window component run the following: -```sh -npm install --save @progress/kendo-vue-dialogs @progress/kendo-licensing @progress/kendo-svg-icons -``` -or -```sh -yarn add @progress/kendo-vue-dialogs @progress/kendo-licensing @progress/kendo-svg-icons -``` -## 5. Import the Kendo UI for Vue CSS styles +## Install the Data Grid Component -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). +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): -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 +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 - + -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. +## Import the CSS Styles -Here is what we should add: -```js -import '@progress/kendo-theme-default/dist/all.css'; -``` +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. -## 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. Install the [Default theme](https://www.telerik.com/kendo-vue-ui/components/styling/theme-default/): -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. + ```js + import '@progress/kendo-theme-default/dist/all.css'; + ``` -> 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. +You can add any additional custom styles in the `` tag of the `src/App.vue` file. -## 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. -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. +## Add a Vue Data Grid Component -Import the `Grid` component, the `process` package and the products.ts file to the `src/App.vue file`. +Now that you've installed all required packages, you are ready to add the Kendo UI for Vue Data Grid to the application: -```js -import { products } from './appdata/products'; -import { process } from '@progress/kendo-data-query'; -import { Grid } from '@progress/kendo-vue-grid'; -``` +1. In the `src/App.vue` file, add a ` + ``` -```html - -``` +1. Add a `