Syncfusion Vue UI Components

https://github.com/syncfusion/ej2-vue-ui-components
Admin
Syncfusion Vue UI Components library offers over 70 lightweight, responsive, modular, and...
Tokens:32,970
Snippets:648
Trust Score:10
Update:4 months ago
Show doc for...
Tokens:
Raw
### 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
```

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

### 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>
```

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

### 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
```

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

### 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>
```

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

### 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>
```

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

### 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>
```

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

### 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 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>
```

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

### Register Kanban Component

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

Global registration of the Kanban component and its child directives using Vue.use().

```typescript
import { KanbanPlugin  } from '@syncfusion/ej2-vue-kanban';

Vue.use(KanbanPlugin );
```

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

### Add Vue Schedule Component

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

Use the ejs-schedule selector in the template and import necessary modules. Configure event settings and selected date in the data. Provide schedule views in the provide section. Import and use Material CSS styles.

```html
<template>
    <div id='app'>
        <ejs-schedule :selectedDate='selectedDate' :eventSettings='eventSettings'></ejs-schedule>
    </div>
</template>
<script>
    import Vue from "vue";
    import { SchedulePlugin, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
    Vue.use(SchedulePlugin);
    export default {
        data() {
            return {
                eventSettings: { dataSource: [{
                    Id: 1,
                    Subject: 'Meeting',
                    StartTime: new Date(2023, 1, 15, 10, 0),
                    EndTime: new Date(2023, 1, 15, 12, 30)
                    }] },
                selectedDate: new Date(2023, 1, 15)
            }
        },
        provide: {
            schedule: [Day, Week, WorkWeek, Month, Agenda]
        }
    };
</script>
<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>
```

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

### Register Grid Component

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

Global registration of the Grid component using Vue.use().

```typescript
import { GridPlugin } from '@syncfusion/ej2-vue-grids';

Vue.use(GridPlugin);
```

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

### Add Kanban Component in Vue

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

Use the ejs-kanban selector to add the component and import the KanbanPlugin to enable it. Ensure all required Syncfusion CSS files are imported in the style section.

```html
<template>
  <div id="app">
       <ejs-kanban id="kanban" keyField="Status" :dataSource="kanbanData" :cardSettings="cardSettings">
          <e-columns>
            <e-column headerText="To Do" keyField="Open"></e-column>
            <e-column headerText="In Progress" keyField="InProgress"></e-column>
            <e-column headerText="Testing" keyField="Testing"></e-column>
            <e-column headerText="Done" keyField="Close"></e-column>
          </e-columns>
        </ejs-kanban>
  </div>
</template>

<script>
import Vue from "vue";
import { KanbanPlugin } from '@syncfusion/ej2-vue-kanban';

Vue.use(KanbanPlugin);

export default {
  data: function() {
    return {
      kanbanData: [
        { Id: 1, Status: 'Open', Summary: 'Analyze the new requirements gathered from the customer.', Type: 'Story', Priority: 'Low', Tags: 'Analyze,Customer', Estimate: 3.5, Assignee: 'Nancy Davloio', RankId: 1 },
        { Id: 2, Status: 'InProgress', Summary: 'Fix the issues reported in the IE browser.', Type: 'Bug', Priority: 'Release Breaker', Tags: 'IE', Estimate: 2.5, Assignee: 'Janet Leverling', RankId: 2  },
        { Id: 3, Status: 'Testing', Summary: 'Fix the issues reported by the customer.', Type: 'Bug', Priority: 'Low', Tags: 'Customer', Estimate: '3.5', Assignee: 'Steven walker', RankId: 1 },
        { Id: 4, Status: 'Close', Summary: 'Arrange a web meeting with the customer to get the login page requirements.', Type: 'Others', Priority: 'Low', Tags: 'Meeting', Estimate: 2, Assignee: 'Michael Suyama', RankId: 1 },
        { Id: 5, Status: 'Validate', Summary: 'Validate new requirements', Type: 'Improvement', Priority: 'Low', Tags: 'Validation', Estimate: 1.5, Assignee: 'Robert King', RankId: 1 }
    ],
      cardSettings: {
        contentField: "Summary",
        headerField: "Id",
      }
    };
  },
}
</script>
<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>
```

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

### Initialize Block Editor Element

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

Add the ejs-blockeditor component to your Vue template to render the editor.

```html
  <ejs-blockeditor id='block-editor' height="500px"></ejs-blockeditor>
```

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

### Integrate Document Editor in Vue

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

Use the ejs-documenteditorcontainer component in the template and provide the necessary modules and service URL in the script section. Ensure all required Syncfusion CSS files are imported in the style block.

```html
<template>
    <div id="app">
        <ejs-documenteditorcontainer height="590px" :serviceUrl='serviceUrl' :enableToolbar='true'> </ejs-documenteditorcontainer>
    </div>
</template>

<script>
  import Vue from 'vue';
  import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar } from '@syncfusion/ej2-vue-documenteditor';

  Vue.use(DocumentEditorContainerPlugin);
  export default {
      data(){
          return { serviceUrl:'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }
      },
      provide: {
          //Inject require modules.
          DocumentEditorContainer: [Toolbar]
      }
  }
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
```

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

### Initialize Diagram Component in Vue

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

Use the ejs-diagram selector to add the component to the template and define nodes and connectors in the script section.

```html
<template>
    <div id="app">
        <ejs-diagram id="diagram"  :width='width' :height='height' :nodes='nodes' :connectors='connectors'></ejs-diagram>
    </div>
</template>
<script>
import Vue from "vue";
import { DiagramPlugin } from "@syncfusion/ej2-vue-diagrams";

Vue.use(DiagramPlugin);

//Initializes the nodes for the diagram
let nodes: NodeModel[] = [
  {
    id: "begin",
    height: 60,
    offsetX: 300,
    offsetY: 80,
    shape: { type: "Flow", shape: "Terminator" },
    annotations: [
      {
        content: "Begin"
      }
    ]
  },
  {
    id: "process",
    height: 60,
    offsetX: 300,
    offsetY: 160,
    shape: { type: "Flow", shape: "Decision" },
    annotations: [
      {
        content: "Process"
      }
    ]
  },
  {
    id: "end",
    height: 60,
    offsetX: 300,
    offsetY: 240,
    shape: { type: "Flow", shape: "Process" },
    annotations: [
      {
        content: "End"
      }
    ]
  },
];
//Initializes the connector for the diagram
let connectors: ConnectorModel[] = [
  { id: "connector1", sourceID: "begin", targetID: "process" },
  { id: "connector2", sourceID: "process", targetID: "end" },
];

export default {
  data() {
    return {
       width: "100%",
       height: "350px",
       nodes: nodes,
       connectors: connectors
    };
  },
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/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-navigations/styles/material.css";
</style>
```

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

### Add PDF Viewer CSS References

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

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

```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-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/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-pdfviewer/styles/material.css";
</style>
```

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

### Add CSS References

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

Required CSS imports for the Pivot Table component, placed within the style section of App.vue.

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

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

### Add Syncfusion Gantt CSS References

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

Include the required CSS styles for the Syncfusion Gantt component and its dependencies in the style section of your App.vue file. This ensures proper visual rendering.

```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-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/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-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css';
@import '../node_modules/@syncfusion/ej2-gantt/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-gantt/styles/material.css';
</style>
```

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

### Add CSS References for DOCX Editor

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

Include the necessary CSS references for the Document editor in the style section of your App.vue file. These imports ensure the component's styling is applied correctly.

```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-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
```

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

### Add Grid component to Vue application

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

Use the ejs-grid selector in the template and import the GridPlugin to enable the component. Ensure all required Syncfusion CSS files are imported in the style section.

```html
<template>
    <div id="app">
        <ejs-grid :dataSource="data" >
          <e-columns>
            <e-column field='OrderID' headerText='Order ID'></e-column>
            <e-column field='CustomerID' headerText='Customer ID'></e-column>
            <e-column field='ShipCountry' headerText='Ship Country'></e-column>
          </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: [
          {'OrderID': 10248,'CustomerID': 'VINET', 'ShipCountry': 'France'},
          {'OrderID': 10249,'CustomerID': 'TOMSP', 'ShipCountry': 'Germany'},
          {'OrderID': 10250,'CustomerID': 'HANAR', 'ShipCountry': 'Brazil' },
          {'OrderID': 10251,'CustomerID': 'VICTE', 'ShipCountry': 'France'}
      ],
    };
  },
}
</script>
<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>
```

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

### Import TreeGrid CSS

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

CSS imports required for the TreeGrid component styling in App.vue.

```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-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-treegrid/styles/material.css";
</style>
```

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

### Add CSS References for Image Editor

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

Include the required CSS references for the Image Editor component in the style section of your App.vue file. These imports ensure proper styling.

```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-lists/styles/bootstrap5.css";
  @import "../node_modules/@syncfusion/ej2-popups/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-dropdowns/styles/bootstrap5.css";
  @import "../node_modules/@syncfusion/ej2-image-editor/styles/bootstrap5.css";
</style>
```

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

### Import FileManager CSS

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

Required CSS imports for the FileManager component using the Bootstrap 5 theme.

```css
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-icons/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-inputs/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-splitbuttons/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-layouts/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-vue-filemanager/styles/bootstrap5.css";
</style>
```

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

### Register FileManager Plugin

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

Global registration of the FileManager component and its child directives.

```typescript
import { FileManagerPlugin } from "@syncfusion/ej2-vue-filemanager";

Vue.use(FileManagerPlugin);
```

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

### Add CSS References for Diagram

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

Include the necessary CSS references for the Diagram component in the style section of your App.vue file. This ensures the correct styling for the diagram and its dependencies.

```html
<style>
@import "../node_modules/@syncfusion/ej2-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/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-navigations/styles/material.css";
</style>
```

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

### Register Pivot Table Component

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

Global registration of the PivotViewPlugin to enable the component and its child directives.

```typescript
import { PivotViewPlugin } from "@syncfusion/ej2-vue-pivotview";

Vue.use(PivotViewPlugin);
```

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

### Configure PDF Viewer Component in Vue

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

Import necessary modules and configure the PDF Viewer component in your Vue application's script section. This includes setting data properties for serviceUrl and documentPath, and providing required modules for functionality.

```javascript
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
```

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

### Implement Chart Component in App.vue

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

Add the ejs-chart component to the template and configure the data and providers in the script section.

```html
<template>
    <div id="app">
       <ejs-chart id="container" :primaryXAxis='primaryXAxis'>
         <e-series-collection>
            <e-series :dataSource='seriesData' type='Line' xName='month' yName='sales'> </e-series>
         </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin } from "@syncfusion/ej2-vue-charts";

Vue.use(ChartPlugin);

export default {
  data() {
    return {
      seriesData: [
        { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
        { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
        { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
        { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
        { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
        { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
      ],
      primaryXAxis: {
       valueType: 'Category'
      }
    };
  },
   provide: {
    chart: [LineSeries, Category]
  }
}
</script>
```

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

### Add CSS References for Spreadsheet Component

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

Include the necessary CSS files for the Syncfusion Spreadsheet component in the style section of your App.vue file. These imports ensure the component is styled correctly.

```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-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-grids/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css';
</style>
```

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

### Register Schedule Component Globally

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

Register the Schedule plugin globally in your Vue application using Vue.use(). This makes the Schedule component available throughout your project.

```typescript
import { SchedulePlugin } from '@syncfusion/ej2-vue-schedule';
Vue.use(SchedulePlugin);
```

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

### Register Barcode Component

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

Global registration of the BarcodeGeneratorPlugin using Vue.use().

```typescript
import { BarcodeGeneratorPlugin } from '@syncfusion/ej2-vue-barcode-generator';

Vue.use(BarcodeGeneratorPlugin);
```

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

### Add Vue Gantt Component

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

Integrate the Vue Gantt component by using the ejs-gantt selector in the template and importing the GanttPlugin. Configure data and task fields for rendering.

```html
<template>
 <div id="app">
    <ejs-gantt :dataSource="data" :taskFields = "taskFields"></ejs-gantt>
</div>
</template>
<script>
import Vue from "vue";
import { GanttPlugin } from "@syncfusion/ej2-vue-gantt";

Vue.use(GanttPlugin);

export default {
  data: function() {
  return{
        data: [
        {
            TaskID: 1,
            TaskName: 'Project Initiation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
                { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50  },
                { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            ]
        },
        {
            TaskID: 5,
            TaskName: 'Project Estimation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
                { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
                { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
            ]
        }],
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            child: 'subtasks'
        },
    };
  },
};
</script>
<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-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/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-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css';
@import '../node_modules/@syncfusion/ej2-gantt/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-gantt/styles/material.css';
</style>
```

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

### Register TreeGrid Component

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

Global registration of the TreeGrid component using the Vue plugin.

```typescript
import { TreeGridPlugin } from '@syncfusion/ej2-vue-treegrid';

Vue.use(TreeGridPlugin);
```

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

### Register Syncfusion Gantt Component

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

Register the Gantt component globally in your Vue application using Vue.use(). This makes the Gantt component and its directives available throughout your project.

```typescript
import { GanttPlugin } from '@syncfusion/ej2-vue-gantt';

Vue.use(GanttPlugin);
```

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

### Module Injection for Schedule Views

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

Inject the required view modules (Day, Week, WorkWeek, Month, Agenda) into the Schedule component's provide section in app.vue. This enables the different calendar views.

```typescript
provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda]
}
```

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

### Register Rich Text Editor Component

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

Globally register the component using the RichTextEditorPlugin.

```typescript
import { RichTextEditorPlugin } from '@syncfusion/ej2-vue-richtexteditor';
Vue.use(RichTextEditorPlugin);
```

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

### Register Vue Query Builder Component

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

Register the QueryBuilderPlugin globally in your Vue application using Vue.use(). This makes the Query Builder component and its directives available throughout your project.

```typescript
import { QueryBuilderPlugin } from "@syncfusion/ej2-vue-querybuilder";
Vue.use(QueryBuilderPlugin);
```

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

### Register Chart Component Globally

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

Register the ChartPlugin to make the chart component and its child directives available throughout the application.

```typescript
import { ChartPlugin  } from '@syncfusion/ej2-vue-charts';

Vue.use(ChartPlugin);
```

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

### Register PDF Viewer Plugin Globally

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

Register the PdfViewerPlugin in your Vue application using Vue.use(). This makes the PDF Viewer component and its directives available globally.

```typescript
import { PdfViewerPlugin } from '@syncfusion/ej2-vue-pdfviewer';

Vue.use(PdfViewerPlugin);
```

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

### Register Spreadsheet Component in Vue

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

Register the Spreadsheet component globally in your Vue application using `Vue.use()`. This makes the Spreadsheet component and its directives available throughout your application.

```typescript
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);
```
Tokens:
Raw