### Start Nuxt 3 Development Server (NPM)

Source: https://github.com/telerik/kendo-vue/blob/master/getting-started-nuxt3/README.md

Starts the Nuxt 3 development server, typically accessible at http://localhost:3000. This command is used for local development and hot-reloading. It requires Node.js and npm to be installed.

```bash
npm run dev
```

--------------------------------

### Start Nuxt Development Server with npm, pnpm, yarn, bun

Source: https://github.com/telerik/kendo-vue/blob/master/examples-standalone/vue-personal-finance-nuxt/README.md

Starts the local development server, typically accessible at http://localhost:3000. This command enables hot-reloading for faster development cycles. It requires dependencies to be installed first.

```bash
# npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

# bun
bun run dev
```

--------------------------------

### Install and Run Kendo UI Vue + Tailwind Project

Source: https://github.com/telerik/kendo-vue/blob/master/examples-standalone/kendo-vue-tailwind/README.md

Commands to install dependencies, start the development server, and build the project for production. Assumes npm is used for package management.

```bash
npm install

npm run dev

npm run build
```

--------------------------------

### Vue Diagram Basic Usage Example

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-diagram-vue-wrapper/index.md

Demonstrates the basic initialization and usage of the Kendo UI Diagram component in a Vue application. This example includes the Vue component definition and its associated JavaScript setup.

```html
<template>
    <div id="diagram-container">
        <kendo-diagram
            :options="diagramOptions"
        >
        </kendo-diagram>
    </div>
</template>

<script>
import { Diagram } from '@progress/kendo-diagram-vue-wrapper';

export default {
    components: {
        'kendo-diagram': Diagram
    },
    data: function() {
        return {
            diagramOptions: {
                // Diagram configuration options go here
                dataSource: [
                    { id: 1, name: "Node A" },
                    { id: 2, name: "Node B" },
                    { id: 3, name: "Node C" }
                ],
                nodes: {
                    data: this.dataSource,
                    template: "#=name#"
                },
                connections: [
                    { from: 1, to: 2 },
                    { from: 2, to: 3 }
                ]
            }
        };
    }
};
</script>

<style>
#diagram-container {
    width: 100%;
    height: 500px;
}
</style>
```

```javascript
import Vue from 'vue';
import { DiagramInstaller } from '@progress/kendo-diagram-vue-wrapper';
import '@progress/kendo-theme-default/dist/all.css';

Vue.use(DiagramInstaller);

new Vue({
    el: '#app',
    render: h => h(App)
});

// Assuming App.vue is the main component where the Diagram is used.
```

--------------------------------

### Install Kendo UI Packages for Vue (NPM)

Source: https://github.com/telerik/kendo-vue/blob/master/docs/wrappers-getting-started/index.md

Installs the core Kendo UI package, a default theme, and the Kendo UI DateInputs wrapper package for Vue using NPM. These are essential for using Kendo UI components within a Vue.js application.

```sh
npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default
npm install --save @progress/kendo-dateinputs-vue-wrapper
```

--------------------------------

### PanelBar Basic Usage Example

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-layout-vue-wrapper/panelbar/index.md

Demonstrates the fundamental implementation of the Kendo UI PanelBar component in a Vue application. This example showcases how to initialize and render the PanelBar with its essential structure and configuration, serving as a starting point for further customization and integration.

```javascript
import { provide } from "@angular/core";
import { Component } from "@angular/core";
import { PanelBarModule } from "@progress/kendo-angular-layout";
import { IntlService, provideIntl } from "@progress/kendo-angular-intl";

@Component({
  selector: "my-app",
  template: `
        <div class="container">
            <kendo-panelbar>
                <kendo-panelbar-item title="First Item">
                    <p>Content for the first item.</p>
                </kendo-panelbar-item>
                <kendo-panelbar-item title="Second Item">
                    <p>Content for the second item.</p>
                </kendo-panelbar-item>
                <kendo-panelbar-item title="Third Item">
                    <p>Content for the third item.</p>
                </kendo-panelbar-item>
            </kendo-panelbar>
        </div>
    `,
  standalone: true,
  imports: [PanelBarModule],
  providers: [provideIntl()]
})
export class AppComponent {
}
```

```javascript
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app.module";

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

```

--------------------------------

### npm Script for Theme Setup

Source: https://github.com/telerik/kendo-vue/blob/master/docs/styling/index.md

Installs all theme dependencies for the Kendo UI for Vue themes repository. This is a prerequisite for customizing themes or building swatches.

```bash
npm run setup
```

--------------------------------

### Install Dependencies (Yarn, NPM, PNPM)

Source: https://github.com/telerik/kendo-vue/blob/master/getting-started-nuxt3/README.md

Installs project dependencies using different package managers. Ensure you have the appropriate package manager installed before running these commands. No specific inputs or outputs beyond package installation.

```bash
# yarn
yarn install

# npm
npm install

# pnpm
pnpm install --shamefully-hoist
```

--------------------------------

### Vue TimePicker Keyboard Navigation Example

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-dateinputs-vue-wrapper/timepicker/keyboard-navigation.md

This Vue.js code demonstrates the keyboard navigation features of the Kendo UI TimePicker component. It includes the necessary template and script setup to enable and test the various keyboard shortcuts described in the documentation. This example assumes the Kendo UI for Vue library is properly installed and configured.

```html
<template>
    <div id="app">
        <TimePicker
            :data-role="'timepicker'"
            :fill-mode="'solid'"
            :value="value"
            :format="'HH:mm'"></TimePicker>
    </div>
</template>

<script>
import '@progress/kendo-theme-default/dist/all.css';
import { TimePicker } from '@progress/kendo-vue-dateinputs';

export default {
    components: {
        TimePicker
    },
    data: function() {
        return {
            value: new Date()
        };
    }
};
</script>

<style>
#app {
  padding: 25px;
  display: flex;
  justify-content: center;
}
</style>
```

```javascript
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');
```

--------------------------------

### MultiSelect Basic Usage in Vue

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-dropdowns-vue-wrapper/docs/multiselect/index.md

Demonstrates the basic implementation of the Kendo UI MultiSelect component in a Vue application. It shows how to import and use the component, allowing for multiple item selection from a predefined list. This example is crucial for getting started with the MultiSelect.

```vue
<template>
    <div id="app">
        <multi-select :data-items="dataItems" :text-field="'text'" :value-field="'value'">
        </multi-select>
    </div>
</template>
<script>
import { MultiSelect } from '@progress/kendo-vue-dropdowns';

export default {
  components: {
    MultiSelect
  },
  data: function () {
    return {
      dataItems: [
        { text: 'Item 1', value: 1 },
        { text: 'Item 2', value: 2 },
        { text: 'Item 3', value: 3 }
      ]
    };
  }
};
</script>
```

```js
import { defineComponent } from "vue";
import { MultiSelect } from "@progress/kendo-vue-dropdowns";

export default defineComponent({
  components: {
    MultiSelect
  },
  data() {
    return {
      dataItems: [
        { text: "Item 1", value: 1 },
        { text: "Item 2", value: 2 },
        { text: "Item 3", value: 3 }
      ]
    };
  }
});

```

--------------------------------

### Vue AutoComplete RTL Implementation

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-dropdowns-vue-wrapper/docs/autocomplete/rtl-support.md

This Vue.js code snippet demonstrates how to integrate RTL support for the Kendo UI AutoComplete component. It showcases the necessary component setup and the application of the 'k-rtl' class to enable right-to-left text direction. This example assumes the Kendo UI Vue library is installed and configured.

```vue
<template>
    <div id="app" class="k-rtl">
        <my-component :data-items="dataItems" :placeholder="'Select item...'" :filterable="true" :suggest-on-focus="true"></my-component>
    </div>
</template>
<script>
import '@progress/kendo-theme-default/dist/all.css';
import MyComponent from './main.vue';

export default {
    components: {
        MyComponent
    },
    data: function () {
        return {
            dataItems: [
                "Item 1",
                "Item 2",
                "Item 3",
                "Item 4",
                "Item 5",
                "Item 6",
                "Item 7",
                "Item 8"
            ]
        };
    }
};
</script>
```

```javascript
import Vue from 'vue';
import '@progress/kendo-ui';
import '@progress/kendo-theme-default/dist/all.css';
import { AutoComplete } from '@progress/kendo-vue-dropdowns';

Vue.component('my-component', AutoComplete);

new Vue({
    el: '#app'
});
```

--------------------------------

### Install Dependencies with npm, pnpm, yarn, bun

Source: https://github.com/telerik/kendo-vue/blob/master/examples-standalone/vue-personal-finance-nuxt/README.md

Installs project dependencies using the specified package manager. Ensure you have Node.js and the chosen package manager installed. This step is crucial before running or building the application.

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

--------------------------------

### Build Nuxt 3 Application for Production (NPM)

Source: https://github.com/telerik/kendo-vue/blob/master/getting-started-nuxt3/README.md

Builds the Nuxt 3 application for production deployment. This command optimizes the application for performance and generates static files. It requires Node.js and npm to be installed.

```bash
npm run build
```

--------------------------------

### Vue Flat ColorPicker Example

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-inputs-vue-wrapper/colorpicker/flat-colorpicker.md

This example demonstrates the usage of the Flat ColorPicker component in Vue. It includes the main Vue component and its associated JavaScript setup. This component provides an HSV color selection interface.

```html
<template>
    <div id="app">
        <app-component />
    </div>
</template>
<script>
import AppComponent from './main.vue';
export default {
  components: {
    AppComponent
  }
};
</script>
```

```javascript
import Vue from 'vue';
import App from './App.vue';
import '@progress/kendo-ui';
import '@progress/kendo-theme-default/dist/all.css';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount('#app');
```

--------------------------------

### Build Nuxt Application for Production with npm, pnpm, yarn, bun

Source: https://github.com/telerik/kendo-vue/blob/master/examples-standalone/vue-personal-finance-nuxt/README.md

Builds the Nuxt application for production deployment. This process optimizes the code and assets for performance. It generates static files in a designated output directory.

```bash
# npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

# bun
bun run build
```

--------------------------------

### Vue Example: Disable Left Part of SplitButton

Source: https://github.com/telerik/kendo-vue/blob/master/knowledge-base/splitbutton-disable-left-part.md

This runnable example demonstrates how to disable the left part of a Kendo UI for Vue SplitButton. It includes the necessary Vue component setup and JavaScript logic to apply the disabling effect. The example is designed for testing and interactive demonstration.

```vue
<template>
    <div id="app">
        <SplitButton :dataItems="dataItems" :text="'SplitButton'" :icon="'save'" />
    </div>
</template>
<script>
import '@progress/kendo-theme-default/dist/all.css';
import { SplitButton } from '@progress/kendo-vue-buttons';

export default {
  components: {
    SplitButton
  },
  data() {
    return {
      dataItems: [
        { text: 'Action 1' },
        { text: 'Action 2' },
        { text: 'Action 3' }
      ]
    };
  }
};
</script>
<style>
.k-button-group > .k-button:first-child:not(:only-child) {
    pointer-events: none;
}
</style>
```

```javascript
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');
```

--------------------------------

### Preview Nuxt Production Build Locally with npm, pnpm, yarn, bun

Source: https://github.com/telerik/kendo-vue/blob/master/examples-standalone/vue-personal-finance-nuxt/README.md

Locally previews the production build of the Nuxt application. This command allows you to test the production version on your local machine before deploying it to a live server. It requires the production build to be completed first.

```bash
# npm
npm run preview

# pnpm
pnpm preview

# yarn
yarn preview

# bun
bun run preview
```

--------------------------------

### Preview Nuxt 3 Production Build Locally (NPM)

Source: https://github.com/telerik/kendo-vue/blob/master/getting-started-nuxt3/README.md

Locally previews the production build of the Nuxt 3 application. This command is useful for testing the production version before deploying it. It requires Node.js and npm to be installed.

```bash
npm run preview
```

--------------------------------

### Basic Bar Chart Usage - Vue

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-charts-vue-wrapper/series-types/bar.md

Demonstrates the fundamental setup and rendering of a Bar chart component using Kendo UI for Vue. This example showcases a simple Bar chart configuration and its associated JavaScript setup.

```vue
<template>
    <kendo-chart>
        <kendo-chart-series>
            <kendo-chart-series-item type="bar" :data="[36, 25, 33, 10, 15]">
            </kendo-chart-series-item>
        </kendo-chart-series>
        <kendo-chart-category-axis>
            <kendo-chart-category-axis-item :categories="['10:00', '11:00', '12:00', '13:00', '14:00']">
            </kendo-chart-category-axis-item>
        </kendo-chart-category-axis>
    </kendo-chart>
</template>
<script>
    import '@progress/kendo-ui';
    import '@progress/kendo-theme-default/dist/all.css';

    export default {
        mounted() {
            // No specific JS setup needed for this basic example
        }
    };
</script>
```

```javascript
import Vue from 'vue';
import { ChartInstaller } from '@progress/kendo-charts-vue-wrapper';

Vue.use(ChartInstaller);

new Vue({
    el: '#app',
    data: function() {
        return {
            seriesData: [36, 25, 33, 10, 15]
        };
    }
});
```

--------------------------------

### Navigate and Install Dependencies

Source: https://github.com/telerik/kendo-vue/blob/master/docs/getting-started/javascript-options-api.md

Changes the directory to the newly created project and installs all necessary project dependencies using NPM or Yarn. This is essential before running the development server.

```sh
cd my-app
npm install

```

```sh
cd my-app
yarn install

```

--------------------------------

### Nuxt.js Build Commands

Source: https://github.com/telerik/kendo-vue/blob/master/kendo-nuxt3-grid-chart/README.md

Provides essential npm commands for managing a Nuxt.js project. Includes installation, running in development mode with hot reloading, building for production, previewing the production build, and generating a static site.

```bash
# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run preview

# generate static project
$ npm run generate
```

--------------------------------

### Install Kendo UI and Upload Packages for Vue

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-upload-vue-wrapper/index.md

Provides the npm commands to install the necessary Kendo UI and Kendo UI Upload packages for Vue.js projects, including the default theme.

```sh
npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default
npm install --save @progress/kendo-upload-vue-wrapper

```

--------------------------------

### JavaScript Map Marker Setup

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-map-vue-wrapper/markers.md

Initializes a Kendo UI Map widget using JavaScript and configures its markers. This example demonstrates the programmatic setup of map markers, including their shape and tooltip information, in a typical JavaScript environment.

```javascript
import '@progress/kendo-ui/js/kendo.map';

var map = $("#map").kendoMap({
    center: {
        lat: 45.62,
        lon: 25.48
    },
    zoom: 6,
    layers: [{
        type: "tile"
    }],
    markerClick: function(e) {
        console.log("Marker clicked:", e.target.options.location);
    }
}).data("kendoMap");

map.addLayer({
    type: "marker",
    markers: [
        {
            location: {
                lat: 42.69,
                lon: 23.32
            },
            tooltip: {
                content: "Sofia"
            },
            shape: "pin"
        },
        {
            location: {
                lat: 42.15,
                lon: 24.75
            },
            tooltip: {
                content: "Plovdiv"
            },
            shape: "pin"
        },
        {
            location: {
                lat: 43.21,
                lon: 27.91
            },
            tooltip: {
                content: "Varna"
            },
            shape: "pin"
        }
    ]
});
```

--------------------------------

### Vue MaskedTextBox Basic Usage Example

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-inputs-vue-wrapper/maskedtextbox/index.md

Demonstrates the basic usage of the Kendo UI MaskedTextBox component in a Vue.js application. This example includes the main Vue component file and its JavaScript setup. It controls user input through a defined mask.

```javascript
<template>
    <div id="app">
        <form class="k-form">
            <fieldset>
                <legend>Enter your phone number:</legend>
                <MaskedTextBox :mask="'(###) ###-####'" :value="'1234567890'"></MaskedTextBox>
            </fieldset>
        </form>
    </div>
</template>
<script>
import { MaskedTextBox } from '@progress/kendo-vue-inputs';

export default {
  components: {
    MaskedTextBox
  }
};
</script>

<style>
.k-form .k-field {
    margin-bottom: 1em;
}
</style>
```

```javascript
import { defineComponent } from "vue";
import { MaskedTextBox } from "@progress/kendo-vue-inputs";

export default defineComponent({
  components: {
    MaskedTextBox
  }
});

```

--------------------------------

### Install Kendo UI Packages for Vue

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-mediaplayer-vue-wrapper/index.md

Provides the npm commands required to install the necessary Kendo UI packages for Vue development, including the core Kendo UI library, a theme, and the MediaPlayer wrapper.

```sh
npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default
npm install --save @progress/kendo-mediaplayer-vue-wrapper
```

--------------------------------

### Basic Kendo UI Window Initialization and Event Handling

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-window-vue-wrapper/index.md

Shows a basic Vue.js example of how to use the Kendo UI Window component, including how to set its title and subscribe to the 'open' event. The example uses Vue.js and the Kendo UI Window wrapper.

```html
<div id="vueapp" class="vue-app">
	<kendo-window :title="'Window title'" v-on:open="onOpen">Content</kendo-window>
</div>
```

```javascript
Vue.use(WindowInstaller);

new Vue({
	el: '#vueapp',
	methods: {
		onOpen (e) {
			console.log('Window is about to be opened.');
		}
	})

```

--------------------------------

### Basic ComboBox Setup and Usage in Vue

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-dropdowns-vue-wrapper/docs/combobox/index.md

Demonstrates the fundamental setup and usage of the Kendo UI ComboBox component within a Vue.js application. It includes the necessary Vue.js installation, data binding configuration, and event handling for common user interactions.

```html
<div id="vueapp" class="vue-app">
    <kendo-combobox :data-source="dataSourceArray"
                    :data-text-field="'text'"
                    :data-value-field="'value'"
                    :filter="'contains'"
                    :placeholder="'Select country...'"
                    @change="onChange"
                    @close="onClose"
                    @dataBound="onDataBound"
                    @filtering="onFiltering"
                    @open="onOpen"
                    @select="onSelect"
                    @cascade="onCascade">
    </kendo-combobox>
</div>
```

```javascript
Vue.use(DropdownsInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            dataSourceArray: [
                { text: 'Albania', value: '1' },
                { text: 'Andorra', value: '2' },
                { text: 'Armenia', value: '3' },
                { text: 'Austria', value: '4' },
                { text: 'Azerbaijan', value: '5' },
                { text: 'Belarus', value: '6' },
                { text: 'Belgium', value: '7' }
            ]
        }
    },
    methods: {
        onChange: function(e) {
            console.log("Event :: change");
        },
        onClose: function(e) {
            console.log("Event :: close");
        },
        onDataBound: function(e) {
            console.log("Event :: dataBound");
        },
        onFiltering: function(e) {
            console.log("Event :: filtering");
        },
        onOpen: function(e) {
            console.log("Event :: open");
        },
        onSelect: function(e) {
            console.log("Event :: select");
        },
        onCascade: function(e) {
            console.log("Event :: cascade")
        }
    }
})
```

--------------------------------

### Vue Grid PDF Export Example

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-grid-vue-wrapper/export/pdf-export.md

This example demonstrates how to enable and configure the PDF export functionality for the Kendo UI Grid wrapper in Vue. It includes the necessary Vue component setup and JavaScript logic to initiate the export.

```vue
<template>
    <div id="app">
        <button @click="exportPDF" class="k-button">Export to PDF</button>
        <Grid ref="grid" :
              :data-items="dataItems"
              :
              :pageable="true"
              :sortable="true"
              :groupable="true"
              :column-menu="true"
              :
              :toolbar="toolbarItems"
              @save-pdf="onSavePdf"
        >
            <GridColumn field="ProductID" title="Product ID" width="120" />
            <GridColumn field="ProductName" title="Product Name" />
            <GridColumn field="UnitPrice" title="Unit Price" width="120" />
            <GridColumn field="UnitsInStock" title="Units In Stock" width="120" />
        </Grid>
    </div>
</template>
<script>
import Vue from 'vue';
import { Grid, GridColumn } from '@progress/kendo-vue-grid';
import '@progress/kendo-theme-default/dist/all.css';

import products from './products.json';

export default {
    components: {
        Grid: Grid,
        GridColumn: GridColumn
    },
    data: function() {
        return {
            dataItems: products,
            toolbarItems: [
                { text: 'Export to PDF', location: 'before' },
                'pdf' // Built-in PDF export command
            ]
        };
    },
    methods: {
        exportPDF() {
            this.$refs.grid.saveAsPdf();
        },
        onSavePdf(e) {
            // Custom PDF export logic can be added here if needed
            console.log('PDF export triggered');
        }
    }
};
</script>
```

```javascript
export default [
    {
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.00,
        "UnitsInStock": 39
    },
    {
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.00,
        "UnitsInStock": 17
    },
    {
        "ProductID": 3,
        "ProductName": "Aniseed Syrup",
        "UnitPrice": 10.00,
        "UnitsInStock": 13
    }
];
```

--------------------------------

### Create Nuxt 3 Project with npx

Source: https://github.com/telerik/kendo-vue/blob/master/docs/getting-started/get-started-nuxt-3.md

Initializes a new Nuxt 3 project named 'my-app' using the npx command. This command sets up the basic project structure and necessary dependencies for a Nuxt 3 application.

```sh
npx nuxi init my-app
```

--------------------------------

### Vue MultiViewCalendar Keyboard Navigation Example

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-dateinputs-vue-wrapper/multiviewcalendar/keyboard-navigation.md

Demonstrates keyboard navigation for the Kendo UI MultiViewCalendar component in Vue. It includes the main Vue component file and a supporting JavaScript file. Ensure Kendo UI for Vue is installed to use this example.

```vue
<template>
    <div id="app">
        <div class="example-config">
            <p>Selected dates: {{ selectedDates.join('\n') }}</p>
        </div>
        <multi-view-calendar
            :is-multi-view="true"
            v-model="selectedDates"
        >
        </multi-view-calendar>
    </div>
</template>

<script>
import '@progress/kendo-theme-default/dist/all.css';
import { MultiViewCalendar } from '@progress/kendo-vue-dateinputs';

export default {
    components: {
        MultiViewCalendar
    },
    data () {
        return {
            selectedDates: [new Date()]
        };
    }
};
</script>
<style>
.example-config {
    margin: 0 0 20px 0;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #323c48;
    background-color: #fefefe;
}
</style>
```

```javascript
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
```

--------------------------------

### Initialize Kendo UI Window with Webpack

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-window-vue-wrapper/index.md

Demonstrates how to install and import the Kendo UI Window package for Vue when using Webpack. It includes installing the core Kendo UI library, a theme, and the specific window wrapper, followed by Vue configuration.

```sh
npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default
npm install --save @progress/kendo-window-vue-wrapper
```

```javascript
import '@progress/kendo-ui'
import '@progress/kendo-theme-default/dist/all.css'
import { Window, WindowInstaller } from '@progress/kendo-window-vue-wrapper'

Vue.use(WindowInstaller)

new Vue({
  el: '#app',
  components: {
    Window
  }
})
```

--------------------------------

### Vue ListView RTL Support Example

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-listview-vue-wrapper/listview-wrapper/rtl-support.md

Demonstrates how to apply the 'k-rtl' class to activate RTL layout for the Kendo UI ListView component in Vue.js. This involves adding the class to the parent element. The example uses a Vue component and its JavaScript setup.

```vue
<template>
    <div id="app" class="k-rtl">
        <app-component :data="gridData"></app-component>
    </div>
</template>
<script>
import Vue from 'vue';
import { ListView } from '@progress/kendo-vue-listview';

var gridData = [
    { 'text': 'Item 1' },
    { 'text': 'Item 2' },
    { 'text': 'Item 3' },
    { 'text': 'Item 4' }
];

new Vue({
    el: '#app',
    components: {
        'app-component': {
            template: '<div><kendo-listview :data-source="data"><template v-slot:itemRender><div>{{item.data.text}}</div></template></kendo-listview></div>',
            components: {
                'kendo-listview': ListView
            },
            data: function () {
                return {
                    data: gridData
                };
            }
        }
    }
});
</script>
```

```javascript
import Vue from 'vue';
import { ListView } from '@progress/kendo-vue-listview';

var gridData = [
    { 'text': 'Item 1' },
    { 'text': 'Item 2' },
    { 'text': 'Item 3' },
    { 'text': 'Item 4' }
];

new Vue({
    el: '#app',
    components: {
        'app-component': {
            template: '<div><kendo-listview :data-source="data"><template v-slot:itemRender><div>{{item.data.text}}</div></template></kendo-listview></div>',
            components: {
                'kendo-listview': ListView
            },
            data: function () {
                return {
                    data: gridData
                };
            }
        }
    }
});
```

--------------------------------

### Install Kendo UI Packages for PivotGrid

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-pivotgrid-vue-wrapper/index.md

This code demonstrates the npm commands required to install the Kendo UI PivotGrid package and a default theme for use in a Vue project. These packages provide the necessary components and styling for the PivotGrid.

```sh
npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default
```

```sh
npm install --save @progress/kendo-pivotgrid-vue-wrapper
```

--------------------------------

### Vue ComboBox Keyboard Navigation Example

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-dropdowns-vue-wrapper/docs/combobox/keyboard-navigation.md

This Vue component demonstrates the keyboard navigation functionality of the Kendo UI ComboBox. It includes the necessary setup to enable and test the shortcuts described in the documentation. This example requires the Kendo UI for Vue library.

```vue
<template>
    <div id="app">
        <App />
    </div>
</template>
<script>
    import Vue from 'vue';
    import { registerLicense } from '@progress/kendo-licensing';

    import App from './App.vue';

    Vue.config.productionTip = false;

    registerLicense('YOUR_KENDO_LICENSE_KEY');

    new Vue({
        render: h => h(App)
    }).$mount('#app');
</script>
```

```javascript
import Vue from 'vue';
import { Combobox } from '@progress/kendo-vue-dropdowns';
import { L10n } from '@progress/kendo-vue-intl';

var DATA = [
    { text: 'Item 1', value: 1 },
    { text: 'Item 2', value: 2 },
    { text: 'Item 3', value: 3 },
    { text: 'Item 4', value: 4 },
    { text: 'Item 5', value: 5 },
    { text: 'Item 6', value: 6 },
    { text: 'Item 7', value: 7 },
    { text: 'Item 8', value: 8 },
    { text: 'Item 9', value: 9 },
    { text: 'Item 10', value: 10 },
    { text: 'Item 11', value: 11 },
    { text: 'Item 12', value: 12 },
    { text: 'Item 13', value: 13 },
    { text: 'Item 14', value: 14 },
    { text: 'Item 15', value: 15 },
    { text: 'Item 16', value: 16 },
    { text: 'Item 17', value: 17 },
    { text: 'Item 18', value: 18 },
    { text: 'Item 19', value: 19 },
    { text: 'Item 20', value: 20 }
];

var messages = {
    'en-US': {
        'filterInputPlaceholder': 'Select item...', // Placeholder for the input field
        'noResultsPlaceholder': 'No data found.' // Placeholder for no results
    }
};

new Vue({
    el: '#app',
    template: '<div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 col-md-6 col-lg-4">
                <label>ComboBox</label>
                <Combobox
                    :data-items="dataItems"
                    :text-field"="textField"
                    :data-value-field"="valueField"
                    :value="value"
                    @change="onChange"
                    :messages="messages"
                />
            </div>
        </div>
    </div>',
    data: function () {
        return {
            dataItems: DATA,
            text: 'Item 1',
            value: 1,
            textField: 'text',
            valueField: 'value',
            messages: L10n.parse(messages['en-US'])
        };
    },
    methods: {
        onChange: function (e) {
            this.value = e.value;
            this.text = e.text;
        }
    }
});
```

--------------------------------

### Vue TabStrip RTL Support Example

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-layout-vue-wrapper/tabstrip/rtl-support.md

Demonstrates how to implement right-to-left (RTL) support for the Kendo UI TabStrip component in a Vue application. This involves adding the 'k-rtl' class to the component's container. The example includes both the Vue component definition and its JavaScript setup.

```Vue
<template>
    <div id="tabstrip" class="k-rtl">
        <ul id="tabstrip-tabstrip">
            <li>Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
        </ul>
        <div>
            <p>Content 1</p>
        </div>
        <div>
            <p>Content 2</p>
        </div>
        <div>
            <p>Content 3</p>
        </div>
    </div>
</template>
<script>
import "@progress/kendo-theme-default/dist/all.css";
import { TabStrip} from "@progress/kendo-layout-vue-wrapper";

export default {
    components: {
        TabStrip
    }
};
</script>

```

```JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import { TabStrip, TabStripTab } from '@progress/kendo-react-layout';

const App = () => {
  return (
    <div className="k-rtl">
      <TabStrip>
        <TabStripTab title="Tab 1">Content 1</TabStripTab>
        <TabStripTab title="Tab 2">Content 2</TabStripTab>
        <TabStripTab title="Tab 3">Content 3</TabStripTab>
      </TabStrip>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

```

--------------------------------

### Install Kendo UI and Kendo UI Grid for Vue

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-grid-vue-wrapper/index.md

Commands to install the necessary Kendo UI packages for your Vue.js project using npm. This includes the core Kendo UI library, a theme, and the specific Grid wrapper package.

```sh
npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default
npm install --save @progress/kendo-grid-vue-wrapper
```

--------------------------------

### ColorPicker Basic Usage Example (Vue)

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-inputs-vue-wrapper/colorpicker/index.md

Demonstrates the basic implementation and usage of the Kendo UI ColorPicker component in a Vue application. This includes setting up the component and its initial state.

```Vue
<template>
	<div id="vueapp" class="vue-app">
		<kendo-colorpicker :value="color" v-on:change="onChange">ColorPicker</kendo-colorpicker>
		color: <span v-text="color"></span>
	</div>
</template>
<script>
	import Vue from 'vue';
	import { InputsInstaller } from '@progress/kendo-inputs-vue-wrapper';

	Vue.use(InputsInstaller);

	new Vue({
		el: "#vueapp",
		data () {
			return {
				color: "5CE500"
			}
		},
		methods: {
			onChange (ev) {
				this.color = ev.sender.value()
			}
		}
	})
</script>
<style>
	.vue-app {
		/* Add styles if needed */
	}
</style>
```

--------------------------------

### Vue Basic Usage Example - Kendo UI Inputs

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-inputs-vue-wrapper/index.md

Demonstrates the basic initialization of various Kendo UI for Vue input components including ColorPicker, MaskedTextBox, NumericTextBox, RangeSlider, Slider, and Switch. This example requires Vue.js and the Kendo UI for Vue library to be installed and configured.

```javascript
import { createApp } from 'vue';
import App from './App.vue';

import '@progress/kendo-theme-default/dist/all.css';

createApp(App).mount('#app');
```

```vue
<template>
    <div id="app">
        <ColorPicker :value="'red'" />
        <MaskedTextBox :mask="'000-000-0000'" :value="'123-456-7890'" />
        <NumericTextBox :value="10" />
        <RangeSlider :min="0" :max="100" :values="[25, 75]" />
        <Slider :min="0" :max="100" :value="50" />
        <Switch :checked="true" />
    </div>
</template>

<script>
import {
    ColorPicker,
    MaskedTextBox,
    NumericTextBox,
    RangeSlider,
    Slider,
    Switch
} from '@progress/kendo-vue-inputs';

export default {
    components: {
        ColorPicker,
        MaskedTextBox,
        NumericTextBox,
        RangeSlider,
        Slider,
        Switch
    }
};
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
```

--------------------------------

### Vue Cascading MultiColumnComboBox Example

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-dropdowns-vue-wrapper/docs/multicolumncombobox/cascading.md

Demonstrates how to implement cascading filtering between two Kendo UI MultiColumnComboBox components in a Vue.js application. This example utilizes Vue's reactivity to update the second ComboBox based on the selection in the first. Ensure Kendo UI for Vue is installed and configured.

```html
<template>
  <div id="app">
    <label for="countries">Select Country:</label>
    <kendo-multicolumncombobox
      :data-source="countries"
      :data-text-field="'text'"
      :data-value-field="'value'"
      v-model="selectedCountry"
      @change="countryChange"
      style="width: 200px;"
    ></kendo-multicolumncombobox>

    <label for="cities">Select City:</label>
    <kendo-multicolumncombobox
      :data-source="cities"
      :data-text-field="'text'"
      :data-value-field="'value'"
      :enabled="selectedCountry !== null"
      style="width: 200px;"
    ></kendo-multicolumncombobox>
  </div>
</template>

<script>
import { MultiColumnComboBox } from '@progress/kendo-vue-dropdowns';

export default {
  components: {
    'kendo-multicolumncombobox': MultiColumnComboBox
  },
  data: function () {
    return {
      countries: [
        { text: 'USA', value: '1' },
        { text: 'Canada', value: '2' },
        { text: 'Mexico', value: '3' }
      ],
      cities: [],
      selectedCountry: null
    };
  },
  methods: {
    countryChange: function (e) {
      const countryId = e.sender.value();
      if (countryId === '1') {
        this.cities = [
          { text: 'New York', value: '1' },
          { text: 'Los Angeles', value: '2' },
          { text: 'Chicago', value: '3' }
        ];
      } else if (countryId === '2') {
        this.cities = [
          { text: 'Toronto', value: '1' },
          { text: 'Vancouver', value: '2' },
          { text: 'Montreal', value: '3' }
        ];
      } else {
        this.cities = [];
      }
    }
  }
};
</script>

<style>
#app {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
label {
  font-weight: bold;
}
</style>
```

```javascript
import { defineComponent } from "vue";
import { MultiColumnComboBox } from "@progress/kendo-vue-dropdowns";

export default defineComponent({
  components: {
    "kendo-multicolumncombobox": MultiColumnComboBox,
  },
  data() {
    return {
      countries: [
        { text: "USA", value: "1" },
        { text: "Canada", value: "2" },
        { text: "Mexico", value: "3" },
      ],
      cities: [],
      selectedCountry: null,
    };
  },
  methods: {
    countryChange(e) {
      const countryId = e.sender.value();
      if (countryId === "1") {
        this.cities = [
          { text: "New York", value: "1" },
          { text: "Los Angeles", value: "2" },
          { text: "Chicago", value: "3" },
        ];
      } else if (countryId === "2") {
        this.cities = [
          { text: "Toronto", value: "1" },
          { text: "Vancouver", value: "2" },
          { text: "Montreal", value: "3" },
        ];
      } else {
        this.cities = [];
      }
    },
  },
});

```

--------------------------------

### PanelBar Event Handling Example

Source: https://github.com/telerik/kendo-vue/blob/master/vue-wrappers-documentation/kendo-layout-vue-wrapper/panelbar/index.md

Illustrates how to handle common events emitted by the Kendo UI PanelBar component within a Vue application. This example shows the setup for subscribing to and reacting to user interactions, such as expanding or collapsing panel items, enabling dynamic behavior based on user input.

```javascript
import { provide } from "@angular/core";
import { Component } from "@angular/core";
import { PanelBarModule } from "@progress/kendo-angular-layout";
import { IntlService, provideIntl } from "@progress/kendo-angular-intl";

@Component({
  selector: "my-app",
  template: `
        <div class="container">
            <kendo-panelbar (select)="onSelect($event)" (collapse)="onCollapse($event)" (expand)="onExpand($event)">
                <kendo-panelbar-item title="First Item">
                    <p>Content for the first item.</p>
                </kendo-panelbar-item>
                <kendo-panelbar-item title="Second Item">
                    <p>Content for the second item.</p>
                </kendo-panelbar-item>
            </kendo-panelbar>
        </div>
    `,
  standalone: true,
  imports: [PanelBarModule],
  providers: [provideIntl()]
})
export class AppComponent {
    public onSelect(e: any):
        void {
        console.log("SELECT:", e);
    }

    public onCollapse(e: any):
        void {
        console.log("COLLAPSE:", e);
    }

    public onExpand(e: any):
        void {
        console.log("EXPAND:", e);
    }
}

```

```javascript
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app.module";

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

```