Skip to content

Commit

Permalink
resolve feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
filipKovachev committed Jun 27, 2024
1 parent 4cdf072 commit d0ce66f
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 22 deletions.
8 changes: 5 additions & 3 deletions docs/getting-started/get-started-nuxt-3.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,11 @@ This tutorial will help you develop a simple app that includes a native Vue Data
>* [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)
> 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/).
## Create the Vue Project

1. Create a Nuxt project named my-app:
1. Create a Nuxt project named `my-app`:

```sh
npx nuxi init my-app
Expand Down Expand Up @@ -86,13 +88,13 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles)
## Add a Vue Data Grid Component


1. Create the file in which we will add the Grid's logic with 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
```
1. In the pages/KendoGrid.vue file, add a `<script>` block and import the Grid and its data:
1. In the `pages/KendoGrid.vue` file, add a `<script>` block and import the Grid and its data:
```js
Expand Down
8 changes: 4 additions & 4 deletions docs/getting-started/javascript-options-api.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: First Steps (Options API and JavaScript)
page_title: Kendo UI for Vue Components Introduction - Kendo UI for Vue Docs & Demos
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
Expand All @@ -18,14 +18,14 @@ This tutorial will help you develop a simple app that includes a native Vue Data
>* [Kendo UI for Vue with TypeScript and the Options API](slug:getting_started_typescript_options_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.
> 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/).
## Create the Vue Project

The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#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.
> 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.
1. Create the Vue project:

Expand All @@ -50,7 +50,7 @@ The recommended way to scaffold your Vue project is using [Vite](https://vuejs.o
...
```

1. Select the JavaScript framework variant
1. Select the JavaScript framework variant.

```sh
? Select a variant: » - Use arrow-keys. Return to submit.
Expand Down
8 changes: 3 additions & 5 deletions docs/getting-started/typescript-composition-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,11 @@ This tutorial will help you develop a simple app that includes a native Vue Data
> 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.
> 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).
## Create the Vue Project

The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#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.
> 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.
1. Create the Vue project:

Expand All @@ -50,7 +48,7 @@ The recommended way to scaffold your Vue project is using [Vite](https://vuejs.o
...
```

1. Select the TypeScript framework variant
1. Select the TypeScript framework variant.

```sh
? Select a variant: » - Use arrow-keys. Return to submit.
Expand Down Expand Up @@ -79,7 +77,7 @@ 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.
Components like the Grid need some data that they can display, so, in this step, you will add a file with sample data:

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.

Expand Down
18 changes: 8 additions & 10 deletions docs/getting-started/typescript-options-api.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: First Steps (Options API and TypeScript)
page_title: Kendo UI for Vue Native Components with TypeScript Introduction - Kendo UI for Vue Docs & Demos
page_title: Kendo UI for Vue Native Components with TypeScript and Options API Introduction - Kendo UI for Vue Docs & Demos
description: "Get started with the Kendo UI for Vue Native Components using Typescript, Vite and Options API."
slug: getting_started_typescript_options_api
brand: getting-started
Expand All @@ -11,23 +11,24 @@ position: 30

# Get Started with Kendo UI for Vue

> 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).

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://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-options-api) paired with TypeScript.

>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)

> 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.
> 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).
> 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/).
## Create the Vue Project

The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#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.
> 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.
1. Create the Vue project:

Expand All @@ -52,7 +53,7 @@ The recommended way to scaffold your Vue project is using [Vite](https://vuejs.o
...
```

1. Select the TypeScript framework variant
1. Select the TypeScript framework variant.

```sh
? Select a variant: » - Use arrow-keys. Return to submit.
Expand Down Expand Up @@ -81,14 +82,11 @@ Before you start playing with Kendo UI for Vue, clean up the sample app created
</script>
```

Now that the project is clean, you can start developing the sample application.


Now, when we are ready with the blank Vue project, we can continue the development of our 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.
Components like the Grid need some data that they can display, so, in this step, you will add a file with sample data:

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.

Expand Down

0 comments on commit d0ce66f

Please sign in to comment.