reposition EOL note, remove VR classroom note

docs/getting-started/get-started-nuxt-3.md

@@ -10,8 +10,6 @@ position: 100
 
 # 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://vuejs.org/guide/introduction.html#composition-api) paired with [Nuxt 3](https://nuxt.com/docs/getting-started/introduction) 
 
 
@@ -20,8 +18,6 @@ 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`:
@@ -59,11 +55,6 @@ Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`.
 ```sh
 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
 ```
-<!---
-```sh
-yarn add @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
-```
---->
 
 ## Import the CSS Styles
 
@@ -74,11 +65,6 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles)
     ```sh
       npm install --save @progress/kendo-theme-default
     ```
-    <!---
-    ```sh
-    yarn add --save @progress/kendo-theme-default
-    ```
-    --->
 
 1. In the `nuxt.config.ts` file, import the CSS files provided by the installed theme package:  
 
@@ -89,79 +75,155 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles)
 
 ## Add a Vue Data Grid Component
 
-
 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
-```
+    ```sh
+    npx nuxi add page KendoGrid
+    ```
 
 1. In the `pages/KendoGrid.vue` file, add a `<script>` block and import the Grid and its data:
 
-
-```js
-import { productsData } from '../appdata/products';
-import { process, DataResult, State, CompositeFilterDescriptor, SortDescriptor } from '@progress/kendo-data-query';
-import { Grid as grid } from '@progress/kendo-vue-grid';
-```
+    ```js
+    import { productsData } from '../appdata/products';
+    import { process, DataResult, State, SortDescriptor } from '@progress/kendo-data-query';
+    import { Grid as grid } from '@progress/kendo-vue-grid';
+    ```
 
 1. Add a `<template>` block with a simple heading and create a Data Grid. Bind it to the `products` data:
 
-```html
-<grid
-  :data-items="products"
-  :columns="columns"
-></grid>
-```
+    ```html
+    <template>
+        <h1>Hello Kendo UI for Vue with Nuxt 3!</h1>
+        <grid
+          :data-items="products"
+          :columns="columns"
+        ></grid>
+    </template>
+    ```
 
 1. Add the Data Grid's data and columns in the `setup` section of the `KendoGrid.vue` file:
 
-```js
-const products = productsData;
-const columns = [
-  { field: 'ProductName', title: 'Product Name' },
-  { field: 'UnitPrice', title: 'Price' },
-  { field: 'UnitsInStock', title: 'Units in Stock' },
-  { field: 'Discontinued' }
-] as GridColumnProps[];
-```
+    ```js
+    const products = productsData;
+    const columns = [
+      { field: 'ProductName', title: 'Product Name' },
+      { field: 'UnitPrice', title: 'Price' },
+      { field: 'UnitsInStock', title: 'Units in Stock' },
+      { field: 'Discontinued' }
+    ] as GridColumnProps[];
+    ```
 
 These steps let you render a very basic Grid by running `npm run dev` and navigating to the local URL displayed in the terminal.
 
 > Notice the `No valid license found` message and the watermark in the Grid. They are informational and encourage you to activate your trial or commercial license and to [add a license file to your application](slug:my_license_vue). Once you complete these licensing steps, the license message and the watermark will disappear.
 
-Now that you have a running Grid, you are ready to use some of its basic features like sorting and paging:
+## Configure the Vue Data Grid
 
 1. In the Grid declaration, add [paging](slug:paging_grid), [sorting](slug:sorting_grid), and a height style that activates [scrolling](slug:scrollmmodes_grid).
 
     ```html
-      <template>
-          <h1>Hello Kendo UI for Vue!</h1>
-          <grid 
-            :data-items="products"
-            :columns="columns"
-            :pageable="pageable"
-            :sortable="sortable"
-            :style="{ height: '400px' }"
-          ></grid>
-      </template>
+    <template>
+        <h1>Hello Kendo UI for Vue with Nuxt 3!</h1>
+        <grid 
+          :data-items="products"
+          :columns="columns"
+          :pageable="pageable"
+          :sortable="sortable"
+          :style="{ height: '400px' }"
+        ></grid>
+    </template>
     ```
 
-
 1. Implement the paging and sorting functionality in the `data` option:
 
-  * Set the [page size (`take`)](slug:api_grid_gridprops#toc-take) to 10.
-  * Set the initial [`skip`](slug:api_grid_gridprops#toc-skip) for the paging.
-  * Set the initial [sorting](slug:api_grid_gridprops#toc-sort) by Product name.
+    - Set the [page size (`take`)](slug:api_grid_gridprops#toc-take) to 10.
+    - Set the initial [`skip`](slug:api_grid_gridprops#toc-skip) for the paging.
+    - Set the initial [sorting](slug:api_grid_gridprops#toc-sort) by Product name.
+    - Set [`sortable`](slug:api_grid_gridprops#toc-sortable) to `true`.
+    - Set [`pageable`](slug:api_grid_gridprops#toc-pageable) to `true`.
+    - Initialize the `dataResult` empty array.
 
-```js
-const skip = ref<number | undefined>(0);
-const take = ref<number | undefined>(10);
-const sort = ref<SortDescriptor[] | undefined>([
-  { field: "ProductName", dir: "asc" }
-]);
-```
+    ```js
+    <script lang="ts">
+    const skip = ref<number | undefined>(0);
+    const take = ref<number | undefined>(10);
+    const pageable = ref(true);
+    const sortable = ref(true);
+    const sort = ref<SortDescriptor[] | undefined>([
+      { field: "ProductName", dir: "asc" }
+    ]);
+    const columns = [
+      { field: 'ProductName', title: 'Product Name' },
+      { field: 'UnitPrice', title: 'Price' },
+      { field: 'UnitsInStock', title: 'Units in Stock' },
+      { field: 'Discontinued', cell: 'discontinuedTemplate' }
+    ] as GridColumnProps[];
+    const dataResult = ref<DataResult>({ data: [] as any, total: 0 });
+    </script>
+    <template>
+      <grid
+        :data-items="dataResult"
+        :pageable="pageable"
+        :sortable="sortable"
+        :columns="columns"
+        :skip="skip"
+        :take="take"
+        :sort="sort"
+      ></grid>
+    </template>
+    ```
+
+1. Set the initial `dataState` in the `onMounted` hook and handle the `dataStateChange` event. Implement a `createAppState` helper method that will update the component's state based on the grid's current data state (`skip`, `take`, `sort`):
+
+    ```js
+    <script lang="ts" setup>
+    onMounted(() => {
+      const dataState: State = {
+        skip: skip.value,
+        take: take.value,
+        sort: sort.value,
+      };
+      dataResult.value = process(products, dataState);
+    });
+
+    const createAppState = (dataState: State) => {
+      take.value = dataState.take;
+      skip.value = dataState.skip;
+      sort.value = dataState.sort;
+    };
+
+    const dataStateChange = (event: GridDataStateChangeEvent) => {
+      createAppState(event.data);
+      dataResult.value = process(products, {
+        skip: event.data.skip,
+        take: event.data.take,
+        sort: event.data.sort,
+      });
+    };
+
+    const pageable = ref(true);
+    const sortable = ref(true);
+    const skip = ref<number | undefined>(0);
+    const take = ref<number | undefined>(10);
+    const sort = ref<SortDescriptor[] | undefined>([
+      { field: 'ProductName', dir: 'asc' },
+    ]);
+    </script>
+    <template>
+      <grid
+        :data-items="dataResult"
+        :pageable="pageable"
+        :sortable="sortable"
+        :columns="columns"
+        :skip="skip"
+        :take="take"
+        :sort="sort"
+        @datastatechange="dataStateChange"
+      ></grid>
+    </template>
+    ```
 
+> 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/).
 
 ## Get the Complete Source Code