diff --git a/docs/getting-started/index.md b/docs/getting-started/index.md index fe4148b..b4fb33b 100644 --- a/docs/getting-started/index.md +++ b/docs/getting-started/index.md @@ -1,603 +1,217 @@ --- -title: First Steps with 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 Composition API." +title: First Steps (Composition API and JavaScript) +page_title: Get Started with Kendo UI for Vue - Kendo UI for Vue Docs & Demos +description: "Get started with the Kendo UI for Vue Native Components and build your first Data Grid by using Vite and the Composition API." slug: getting_started_javascript_composition_api brand: getting-started heading: Get Started position: 0 --- -# Get Started with Kendo UI for Vue Native Components with JavaScript and Composition 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 Composition API](https://vuejs.org/guide/introduction.html#composition-api) paired with JavaScript. -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). +>Curious about TypeScript or the Options 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 JavaScript and the Options API](slug:getting_started_javascript_options_api) -## 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 `Javascript` to build a Vite project with Vue and Javascript. -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 can be found on [this link](slug:getting_started_javascript_options_api). +1. Select the JavaScript 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 -
- - - - - - -
- - ``` +## Clean Up the Generated Project - * 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); - } - ``` +Before you start playing with Kendo UI for Vue, clean up the sample app created by Vite: -Now, when we are ready with the blank Vue project, we can continue the development of our sample application. +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. -## 3. Add Application Data +Now that the project is clean, you can start developing the sample application. -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-composition-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-composition-api/src/appdata/products.json). +Components like the Grid need some data that they can display, so, in this step, you will add a files 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 files 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/blob/master/getting-started-javascript-composition-api/src/appdata/categories.json) and paste it into the `categories.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. - -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. +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. -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/App.vue` 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'; -``` - -## 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 defineComponent({ - components: { - 'dropdownlist': DropDownList, - }, -//.............. -``` +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. - -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. +1. Install the [Default theme](https://www.telerik.com/kendo-vue-ui/components/styling/theme-default/): -> 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. + ```sh + npm install --save @progress/kendo-theme-default + ``` + -## 7. Add a Kendo UI for Vue Data Grid +1. In the `src/App.vue` file, add a ` + ``` -```js -const columns = [ - { field: 'ProductName', title: 'Product Name' }, - { field: 'UnitPrice', title: 'Price' }, - { field: 'UnitsInStock', title: 'Units in Stock' }, - { field: 'Discontinued', cell: 'discontinuedTemplate' } -]; -``` +1. Add a `