Skip to content

Commit 7b6c25f

Browse files
yordan-mitevyordan-mitev
committed
gs-article-revamp-part1
1 parent 0da5019 commit 7b6c25f

File tree

1 file changed

+67
-69
lines changed

1 file changed

+67
-69
lines changed

‎docs/getting-started/index.md‎

Lines changed: 67 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: First Steps with JavaScript
2+
title: First Steps (Using JavaScript)
33
page_title: Kendo UI for Vue Components Introduction - Kendo UI for Vue Docs & Demos
44
description: "Get started with the Kendo UI for Vue Native Components using Vite and Composition API."
55
slug: getting_started_javascript_composition_api
@@ -8,95 +8,93 @@ heading: Get Started
88
position: 0
99
---
1010

11-
# Get Started with Kendo UI for Vue Native Components with JavaScript and Composition API
11+
# Get Started with Kendo UI for Vue
1212

13-
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.
13+
This tutorial will help you develop a simple app that includes a few native Vue components: *[Grid]*, *[Component2]*, and *[Component3]*. 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 JavaScript.
1414

15-
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). If you need Getting started information that uses `Vue Options API`, you can check [this link](slug:getting_started_javascript_options_api).
15+
>Curious about TypeScript or the Options API? This tutorial comes in several additional variants:
16+
>* [Kendo UI for Vue with TypeScript and the Composition API](slug:getting_started_typescript_composition_api)
17+
>* [Kendo UI for Vue with TypeScript and the Options API](slug:getting_started_typescript_options_api)
18+
>* [Kendo UI for Vue with JavaScript and the Options API](slug:getting_started_javascript_options_api)
1619
17-
## 1. Set up the Vue project
18-
* 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.
20+
## Create the Vue Project
1921

20-
Create project commands:
22+
The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite).
2123

22-
```sh
23-
npm create vite@latest
24-
```
25-
or
26-
```sh
27-
yarn create vite
28-
```
24+
> 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.
2925
30-
When one of the above commands is executed, the interface will ask you to apply additional configurations to your project:
31-
1. Set the project name:
32-
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`
26+
1. Create the Vue project:
3327

34-
2. Select the framework - Choose `Vue` here:
35-
<img src="./images/vite-select-framework.png" alt="Vite Select Framework" style="width: 80%" />
28+
```sh
29+
npm create vite@latest
30+
```
31+
<!---
32+
```sh
33+
yarn create vite
34+
```
35+
--->
3636

37-
3. Select the framework variant - Choose `Javascript` to build a Vite project with Vue and Javascript.
38-
<img src="./images/vite-select-framework-variant.png" alt="Vite Select Framework Variant" style="width: 80%" />
37+
1. Enter the project name, for example, `my-app`.
3938

40-
When you are ready with the above steps, to run the newly created project do the following commands:
41-
```
42-
cd my-app
43-
npm install
44-
npm run dev
45-
```
39+
1. Select the Vue framework by using the arrow keys.
4640

47-
## 2. Prepare the Generated Project
41+
```sh
42+
? Select a framework: » - Use arrow-keys. Return to submit.
43+
Vanilla
44+
> Vue
45+
React
46+
...
47+
```
4848

49-
> 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 can be found on [this link](slug:getting_started_javascript_options_api).
49+
1. Select the JavaScript framework variant
5050

51-
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:
52-
* In the `src/components` folder, delete the `HelloWorld.vue` file
53-
* In the src/App.vue file:
54-
* Remove the import of the HelloWorld component
51+
```sh
52+
? Select a variant: » - Use arrow-keys. Return to submit.
53+
TypeScript
54+
> JavaScript
55+
...
56+
```
57+
1. Run the newly created project by executing the following commands:
5558

56-
```js
57-
import HelloWorld from './components/HelloWorld.vue'
58-
```
59-
* Remove the following code from the template definition:
59+
```sh
60+
cd my-app
61+
npm install
62+
npm run dev
63+
```
6064

61-
```html
62-
<div>
63-
<a href="https://vitejs.dev" target="_blank">
64-
<img src="/vite.svg" class="logo" alt="Vite logo" />
65-
</a>
66-
<a href="https://vuejs.org/" target="_blank">
67-
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
68-
</a>
69-
</div>
70-
<HelloWorld msg="Vite + Vue" />
71-
```
72-
73-
* Remove the following CSS styles
74-
```css
75-
.logo {
76-
height: 6em;
77-
padding: 1.5em;
78-
will-change: filter;
79-
}
80-
.logo:hover {
81-
filter: drop-shadow(0 0 2em #646cffaa);
82-
}
83-
.logo.vue:hover {
84-
filter: drop-shadow(0 0 2em #42b883aa);
85-
}
86-
```
65+
## Clean Up the Generated Project
66+
67+
Before you start playing with Kendo UI for Vue, clean up the sample app created by Vite:
68+
69+
1. In the `src/components` folder, delete the `HelloWorld.vue` file.
70+
1. Replace the content of the `src/App.vue` with the following:
71+
72+
```html
73+
<script setup>
74+
</script>
75+
76+
<template>
77+
</template>
78+
79+
<style scoped>
80+
</style>
81+
```
82+
83+
Now that the project is blank, you can start developing the sample application.
84+
85+
## Add Application Data
8786

88-
Now, when we are ready with the blank Vue project, we can continue the development of our sample application.
87+
Components like the Grid need some data that the can display, so, in this step, you will add two files with sample data:
8988

90-
## 3. Add Application Data
89+
1. In the `src` folder, create a new folder called `appdata`.
9190

92-
Add dummy data needed by the components. Create folder `appdata` in the `src` folder. Add the following files to the `appdata` folder.
91+
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-composition-api/src/appdata/categories.json) and paste it into the `categories.json` file.
9392

94-
* 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-composition-api/src/appdata/categories.json).
95-
* 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-composition-api/src/appdata/products.json).
93+
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-composition-api/src/appdata/products.json) and paste it into the `products.json` file.
9694

9795
## 4. Import Kendo UI for Vue components
9896

99-
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`.
97+
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`.
10098

10199
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.
102100

0 commit comments

Comments
 (0)