You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/getting-started/get-started-nuxt-3.md
+5-3Lines changed: 5 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,9 +18,11 @@ This tutorial will help you develop a simple app that includes a native Vue Data
18
18
>*[Kendo UI for Vue with JavaScript and the Options API](slug:getting_started_javascript_options_api)
19
19
>*[Kendo UI for Vue with TypeScript and the Options API](slug:getting_started_typescript_options_api)
20
20
21
+
> 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/).
22
+
21
23
## Create the Vue Project
22
24
23
-
1. Create a Nuxt project named my-app:
25
+
1. Create a Nuxt project named `my-app`:
24
26
25
27
```sh
26
28
npx nuxi init my-app
@@ -86,13 +88,13 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles)
86
88
## Add a Vue Data Grid Component
87
89
88
90
89
-
1. Create the file in which we will add the Grid's logic with the following command:
91
+
1. Now that you've installed all required packages, you are ready to add the Kendo UI for Vue Data Grid to the application.
90
92
91
93
```sh
92
94
npx nuxi add page KendoGrid
93
95
```
94
96
95
-
1. In the pages/KendoGrid.vue file, add a `<script>` block and import the Grid and its data:
97
+
1. In the `pages/KendoGrid.vue` file, add a `<script>` block and import the Grid and its data:
Copy file name to clipboardExpand all lines: docs/getting-started/javascript-options-api.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
---
2
2
title: First Steps (Options API and JavaScript)
3
-
page_title: Kendo UI for Vue Components Introduction - Kendo UI for Vue Docs & Demos
3
+
page_title: Kendo UI for Vue Components with JavaScript and the Options API Introduction - Kendo UI for Vue Docs & Demos
4
4
description: "Get started with the Kendo UI for Vue Native Components using Vite and Options API."
5
5
slug: getting_started_javascript_options_api
6
6
brand: getting-started
@@ -18,14 +18,14 @@ This tutorial will help you develop a simple app that includes a native Vue Data
18
18
>*[Kendo UI for Vue with TypeScript and the Options API](slug:getting_started_typescript_options_api)
19
19
20
20
21
-
> 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.
21
+
> 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/).
22
22
23
23
## Create the Vue Project
24
24
25
25
The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite).
26
26
27
27
28
-
> 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.
28
+
> 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.
29
29
30
30
1. Create the Vue project:
31
31
@@ -50,7 +50,7 @@ The recommended way to scaffold your Vue project is using [Vite](https://vuejs.o
50
50
...
51
51
```
52
52
53
-
1. Select the JavaScript framework variant
53
+
1. Select the JavaScript framework variant.
54
54
55
55
```sh
56
56
? Select a variant: » - Use arrow-keys. Return to submit.
Copy file name to clipboardExpand all lines: docs/getting-started/typescript-composition-api.md
+3-5Lines changed: 3 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,13 +19,11 @@ This tutorial will help you develop a simple app that includes a native Vue Data
19
19
20
20
> 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.
21
21
22
-
> 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).
23
-
24
22
## Create the Vue Project
25
23
26
24
The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite).
27
25
28
-
> 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.
26
+
> 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.
29
27
30
28
1. Create the Vue project:
31
29
@@ -50,7 +48,7 @@ The recommended way to scaffold your Vue project is using [Vite](https://vuejs.o
50
48
...
51
49
```
52
50
53
-
1. Select the TypeScript framework variant
51
+
1. Select the TypeScript framework variant.
54
52
55
53
```sh
56
54
? Select a variant: » - Use arrow-keys. Return to submit.
@@ -79,7 +77,7 @@ Now that the project is clean, you can start developing the sample application.
79
77
80
78
## Add Application Data
81
79
82
-
Add dummy data needed by the components. Create folder `appdata`in the `src` folder. Add the following files to the `appdata` folder.
80
+
Components like the Grid need some data that they can display, so, in this step, you will add a file with sample data:
83
81
84
82
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.
Copy file name to clipboardExpand all lines: docs/getting-started/typescript-options-api.md
+8-10Lines changed: 8 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
---
2
2
title: First Steps (Options API and TypeScript)
3
-
page_title: Kendo UI for Vue Native Components with TypeScript Introduction - Kendo UI for Vue Docs & Demos
3
+
page_title: Kendo UI for Vue Native Components with TypeScript and Options API Introduction - Kendo UI for Vue Docs & Demos
4
4
description: "Get started with the Kendo UI for Vue Native Components using Typescript, Vite and Options API."
5
5
slug: getting_started_typescript_options_api
6
6
brand: getting-started
@@ -11,23 +11,24 @@ position: 30
11
11
12
12
# Get Started with Kendo UI for Vue
13
13
14
+
> 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).
15
+
16
+
14
17
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.
15
18
16
19
>Curious about JavaScript or the Composition API? This tutorial comes in several additional variants:
17
20
>*[Kendo UI for Vue with TypeScript and the Composition API](slug:getting_started_typescript_composition_api)
18
21
>*[Kendo UI for Vue with JavaScript and the Options API](slug:getting_started_javascript_options_api)
19
22
20
23
21
-
> 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.
22
-
23
-
> 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).
24
+
> 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/).
24
25
25
26
## Create the Vue Project
26
27
27
28
The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite).
28
29
29
30
30
-
> 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.
31
+
> 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.
31
32
32
33
1. Create the Vue project:
33
34
@@ -52,7 +53,7 @@ The recommended way to scaffold your Vue project is using [Vite](https://vuejs.o
52
53
...
53
54
```
54
55
55
-
1. Select the TypeScript framework variant
56
+
1. Select the TypeScript framework variant.
56
57
57
58
```sh
58
59
? Select a variant: » - Use arrow-keys. Return to submit.
@@ -81,14 +82,11 @@ Before you start playing with Kendo UI for Vue, clean up the sample app created
81
82
</script>
82
83
```
83
84
84
-
Now that the project is clean, you can start developing the sample application.
85
-
86
-
87
85
Now, when we are ready with the blank Vue project, we can continue the development of our sample application.
88
86
89
87
## Add Application Data
90
88
91
-
Add dummy data needed by the components. Create folder `appdata`in the `src` folder. Add the following files to the `appdata` folder.
89
+
Components like the Grid need some data that they can display, so, in this step, you will add a file with sample data:
92
90
93
91
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.
0 commit comments