### Install Vue Inputs Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/inputs/README.md

Use this command to install the @syncfusion/ej2-vue-inputs package and its dependencies.

```sh
npm install @syncfusion/ej2-vue-inputs
```

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

### Install ej2-vue-base Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/base/README.md

Use this command to install the ej2-vue-base package and its dependent packages.

```sh
npm install @syncfusion/ej2-vue-base
```

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

### Install In-place Editor Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/inplaceeditor/README.md

Install the In-place Editor component and its dependencies using npm.

```sh
npm install @syncfusion/ej2-vue-inplace-editor
```

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

### Install Dropdowns Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/dropdowns/README.md

Use this command to install the `dropdowns` package and its dependencies for your Vue project.

```bash
npm install @syncfusion/ej2-vue-dropdowns
```

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

### Install SplitButtons package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/splitbuttons/README.md

Use this command to install the SplitButtons package and its dependencies via npm.

```sh
npm install @syncfusion/ej2-vue-splitbuttons
```

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

### Install Syncfusion Vue Lists

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/lists/README.md

Use this command to install the ListView component and its dependencies via npm.

```sh
npm install @syncfusion/ej2-vue-lists
```

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

### Install Syncfusion Vue Popup Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/popups/README.md

Use this command to install the popup components and their required dependencies.

```sh
npm install @syncfusion/ej2-vue-popups
```

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

### Install TreeGrid Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/treegrid/README.md

Command to install the Syncfusion Vue TreeGrid package via npm.

```bash
npm install @syncfusion/ej2-vue-treegrid --save
```

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

### Install Syncfusion Vue Chart Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/charts/README.md

Use npm to install the required chart package from the Syncfusion registry.

```bash
npm install @syncfusion/ej2-vue-charts --save
```

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

### Install Vue CLI and Create Project

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/pdfviewer/README.md

Use Vue CLI to set up a new Vue 2 project. This involves installing Vue CLI globally and then initializing a new project with the webpack-simple template.

```bash
npm install -g @vue/cli
npm install -g @vue/cli-init
vue init webpack-simple quickstart
cd quickstart
npm install
```

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

### Install Vue Ribbon via npm

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/ribbon/README.md

Use this command to install the Ribbon component and its required dependencies in your Vue project.

```sh
npm install @syncfusion/ej2-vue-ribbon --save
```

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

### Install Kanban Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/kanban/README.md

Command to add the Syncfusion Kanban package to your project via npm.

```bash
npm install @syncfusion/ej2-vue-kanban --save
```

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

### Install Rich Text Editor Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/richtexteditor/README.md

Use npm to install the Rich Text Editor package and its peer dependencies.

```bash
npm install @syncfusion/ej2-vue-richtexteditor --save
```

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

### Install Syncfusion Vue Buttons

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/buttons/README.md

Use this command to install the buttons package and its dependencies in your Vue project.

```sh
npm install @syncfusion/ej2-vue-buttons
```

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

### Install Vue Interactive Chat Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/interactivechat/README.md

Use this command to install the interactive chat package and its dependencies in your Vue project.

```sh
npm install @syncfusion/ej2-vue-interactive-chat
```

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

### Install Syncfusion Vue Gantt Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/gantt/README.md

Install the Syncfusion Vue Gantt package from npm. This command adds the necessary component files to your project.

```bash
npm install @syncfusion/ej2-vue-gantt --save
```

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

### Create Vue Application with Vue CLI

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/circulargauge/README.md

Use Vue CLI to create a new Vue 2 project. Navigate into the project directory and start the development server.

```bash
npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve
```

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

### Install Syncfusion Vue Schedule Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/schedule/README.md

Install the Syncfusion Vue Schedule package using npm. This command adds the necessary library to your project.

```bash
npm install @syncfusion/ej2-vue-schedule --save
```

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

### Install Vue Block Editor Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/blockeditor/README.md

Use npm to install the required Syncfusion Vue Block Editor package in your project.

```sh
npm install @syncfusion/ej2-vue-blockeditor
```

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

### Install Syncfusion Grid Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/grids/README.md

Command to add the Syncfusion Vue Grid package to your project.

```bash
npm install @syncfusion/ej2-vue-grids --save
```

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

### Install Syncfusion Vue PDF Viewer Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/pdfviewer/README.md

Install the Syncfusion Vue PDF Viewer package from npm. This command adds the necessary library to your project's dependencies.

```bash
npm install @syncfusion/ej2-vue-pdfviewer --save
```

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

### Install Syncfusion Vue Spreadsheet Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/spreadsheet/README.md

Install the Syncfusion Vue Spreadsheet package using npm. This command adds the package as a dependency to your project.

```bash
npm install @syncfusion/ej2-vue-spreadsheet --save
```

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

### Install Syncfusion Vue Diagram Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/diagrams/README.md

Install the Syncfusion Vue Diagram package from npm. This command saves the package as a dependency in your project.

```bash
npm install @syncfusion/ej2-vue-diagrams --save
```

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

### Install Vue Query Builder Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/querybuilder/README.md

Install the Syncfusion Vue Query Builder package using npm. This command adds the necessary package to your project's dependencies.

```bash
npm install @syncfusion/ej2-vue-querybuilder --save
```

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

### Install Barcode Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/barcodegenerator/README.md

Command to add the Syncfusion Barcode generator dependency to the project.

```bash
npm install @syncfusion/ej2-vue-barcode-generator --save
```

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

### Install Syncfusion Vue Maps Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/maps/README.md

Install the Syncfusion Vue Maps package using npm. This command adds the necessary library to your project.

```bash
npm install @syncfusion/ej2-vue-maps --save
```

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

### Install Pivot Table Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/pivotview/README.md

Command to add the Syncfusion Vue Pivot Table dependency to your project.

```bash
npm install @syncfusion/ej2-vue-pivotview --save
```

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

### Install Syncfusion Vue Linear Gauge Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/lineargauge/README.md

Install the Syncfusion Vue Linear Gauge package from npm. This command saves the package as a dependency in your project.

```bash
npm install @syncfusion/ej2-vue-lineargauge --save
```

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

### Install Syncfusion Vue Image Editor Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/imageeditor/README.md

Install the Syncfusion Vue Image Editor package using npm. This command adds the necessary package to your project's dependencies.

```bash
npm install @syncfusion/ej2-vue-image-editor --save
```

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

### Install Syncfusion Vue Circular Gauge Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/circulargauge/README.md

Install the Syncfusion Vue Circular Gauge package from npm. This command adds the package as a dependency to your project.

```bash
npm install @syncfusion/ej2-vue-circulargauge --save
```

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

### Install Syncfusion Vue Heat Map Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/heatmap/README.md

Install the Syncfusion Vue Heat Map package using npm. This command adds the necessary package to your project's dependencies.

```bash
npm install @syncfusion/ej2-vue-heatmap --save
```

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

### Install Syncfusion Vue TreeMap Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/treemap/README.md

Install the Syncfusion Vue TreeMap package using npm. This command adds the necessary component files to your project's node_modules directory.

```bash
npm install @syncfusion/ej2-vue-treemap --save
```

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

### Install Syncfusion Vue DOCX Editor Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/documenteditor/README.md

Install the Syncfusion Vue Document Editor package using npm. This command adds the necessary package to your project's dependencies.

```bash
npm install @syncfusion/ej2-vue-documenteditor --save
```

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

### Install FileManager Package

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/filemanager/README.md

Command to add the Syncfusion Vue FileManager package to your project dependencies.

```bash
npm install @syncfusion/ej2-vue-filemanager --save
```

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

### Add Syncfusion Vue Image Editor Component to Template

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/imageeditor/README.md

Integrate the Syncfusion Vue Image Editor component into your application's template using the ejs-imageeditor selector. This example shows a basic setup.

```html
<template>
    <div id="app">
        <ejs-imageeditor id="image-editor"></ejs-imageeditor>
    </div>
</template>
<script>
  import Vue from "vue";
  import { ImageEditorPlugin } from "@syncfusion/ej2-vue-image-editor";
  Vue.use(ImageEditorPlugin);
  export default {
    data() {
      return {
      };
    },
  }
</script>
```

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

### Import CSS References

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/richtexteditor/README.md

Include the required Bootstrap 5 styles for the Rich Text Editor in the App.vue file.

```html
<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/bootstrap5.css";
</style>
```

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

### Import Kanban CSS

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/kanban/README.md

Required CSS references for the Kanban component using the Bootstrap 5 theme.

```html
<style>
    @import '../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css';
    @import '../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css';
    @import '../node_modules/@syncfusion/ej2-layouts/styles/bootstrap5.css';
    @import '../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap5.css';
    @import '../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css';
    @import '../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css';
    @import '../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css';
    @import '../node_modules/@syncfusion/ej2-vue-kanban/styles/bootstrap5.css';
</style>
```

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

### Implement FileManager Component

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/filemanager/README.md

Basic usage of the ejs-filemanager component with ajaxSettings configuration.

```html
<template>
<div id="app">
    <ejs-filemanager id="file-manager" :ajaxSettings="ajaxSettings">
    </ejs-filemanager>
</div>
</template>
<script>
import Vue from "vue";
import { FileManagerPlugin } from "@syncfusion/ej2-vue-filemanager";

Vue.use(FileManagerPlugin);
export default {
data () {
    return {
       ajaxSettings:
        {
            url: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
        }
    };
}
}
</script>
```

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

### Add Schedule CSS References

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/schedule/README.md

Include the required CSS styles for the Schedule component and its dependencies in your App.vue file. Ensure the paths correctly point to the node_modules folder.

```html
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css';
</style>
```

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

### Implement Barcode Component

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/barcodegenerator/README.md

Example of adding the ejs-barcodegenerator component to a Vue template with data binding.

```html
<template>
    <div id="app">
       <ejs-barcodegenerator
              id="barcode"  
              :width="width"
              :height="height"
              :type="type"
              :value="value"
              :mode="mode"
            ></ejs-barcodegenerator>
    </div>
</template>
<script>
import Vue from "vue";
import { BarcodeGeneratorPlugin } from "@syncfusion/ej2-vue-barcode-generator";

Vue.use(BarcodeGeneratorPlugin);

export default {
  data() {
    return {
      width: "200px",
      height: "150px",
      mode: "SVG",
      type: "Ean8",
      value: "11223344",
    };
  },
}
</script>
```

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

### Import Grid CSS

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/grids/README.md

Required CSS imports for the Grid component in the App.vue style section.

```html
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
```

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

### Add TreeMap Component to Vue Template

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/treemap/README.md

Integrate the Syncfusion Vue TreeMap component into your Vue application's template. This example demonstrates binding data and configuring leaf item settings.

```html
<template>
    <div id="app">
        <ejs-treemap :dataSource='data' weightValuePath='Count' 
     :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { TreeMapPlugin } from '@syncfusion/ej2-vue-treemap';

    Vue.use(TreeMapPlugin);
    export default Vue.extend ({
	    data: function() {
		    return {
			    dataSource: [
					{
						State: 'Brazil',
						Count: 25
					},
					{
						State: 'Colombia',
						Count: 12
					},
					{
						State: 'Argentina',
						Count: 9
					},
					{
						State: 'Ecuador',
						Count: 7
					},
					{
						State: 'Chile',
						Count: 6
					},
					{
						State: 'Peru',
						Count: 3
					},
					{
						State: 'Venezuela',
						Count: 3
					},
					{
						State: 'Bolivia',
						Count: 2
					},
					{
						State: 'Paraguay',
						Count: 2
					},
					{
						State: 'Uruguay',
						Count: 2
					},
					{
						State: 'Falkland Islands',
						Count: 1
					},
					{
						State: 'French Guiana',
						Count:1
					},
					{
						State: 'Guyana',
						Count: 1
					},
					{
						State: 'Suriname',
						Count: 1
					}
				],
				leafItemSettings: { labelPath: 'State' }
			}
		}
	});
</script>
```

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

### Add CSS References for Query Builder

Source: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/querybuilder/README.md

Include the necessary CSS theme files for the Query Builder and its dependencies in the style section of your App.vue file. This ensures proper styling for the component.

```html
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-vue-querybuilder/styles/bootstrap5.css";
</style>
```