EJ2 Vue Platform

https://github.com/syncfusion-content/ej2-vue-docs
Admin
The EJ2 Vue Platform provides comprehensive documentation for developers utilizing the Syncfusion...
Tokens:2,994,121
Snippets:21,661
Trust Score:8.2
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install dependencies and start server

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/gantt/getting-started-vue.md

Commands for manual installation and starting the development server.

```bash
Install with npm and start now?: Yes
```

```bash
cd my-project
npm install
```

```bash
cd my-project
yarn install
```

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

### Dependency installation prompt

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/pivotview/vue-3-getting-started.md

Confirmation prompt for installing dependencies and starting the development server.

```bash
Install with npm and start now?: Yes
```

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

### Run the project commands

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/rich-text-editor/getting-started.md

Commands to navigate to the project directory, install dependencies, and start the development server.

```bash
cd my-app
npm install
npm run dev
```

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

### Initialize Quasar Project

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/chart/quasar.md

Run this command to start the interactive setup process for a new Quasar project.

```bash
npm init quasar
```

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

### Silent Installation Command Syntax and Example

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/installation-and-upgrade/installation-using-offline-installer.md

Use these commands in an administrator command prompt to perform a silent installation with specific configuration options.

```bat
"installer file path\SyncfusionEssentialStudio<product>_<version>.exe" /Install silent /UNLOCKKEY:"<product unlock key>" [/log "<log file path>"] [/InstallPath:<install location>] [/InstallSamples:true|false] [/InstallAssemblies:true|false] [/UninstallExistAssemblies:true|false] [/InstallToolbox:true|false]
```

```bat
"D:\Temp\syncfusionejs2_20.2.0.36.exe" /Install silent /UNLOCKKEY:"your-unlock-key" /log "C:\Temp\EssentialStudioPlatform.log" /InstallPath:"C:\Syncfusion\20.2.0.36" /InstallSamples:true /InstallAssemblies:true /UninstallExistAssemblies:true /InstallToolbox:true
```

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

### Manual dependency installation

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/file-manager/vue-3-getting-started.md

Commands to install dependencies manually if the automatic setup was skipped.

```bash
cd my-project
npm install
```

```bash
cd my-project
yarn install
```

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

### Vue NumericTextBox Getting Started - Options API

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/numerictextbox/accessibility.md

This snippet shows the basic setup of the Vue NumericTextBox using the Options API. It includes necessary imports and component registration.

```html
<template>
    <div id="app">
        <div id='numeric' style="width:300px">
            <ejs-numerictextbox :value='value' :floatLabelType='floatLabelType'></ejs-numerictextbox>
        </div>
    </div>
</template>

<script>
import { NumericTextBoxComponent as EjsNumerictextbox } from "@syncfusion/ej2-vue-inputs";

export default {
    name: 'App',
    components: {
        "ejs-numerictextbox": EjsNumerictextbox
    },
    data() {
        return {
            value: 10,
            floatLabelType: 'Auto'
        };
    },
    provide: {
        "numerictextbox": []
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css';
#numeric {
    margin: 30px auto;
    width: 240px;
}
</style>
```

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

### Select framework

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/schedule/getting-started-vue-3.md

Example of the framework selection prompt.

```bash
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
> Vue
  React
  Preact
  Lit
  Svelte
  Others
```

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

### Vue NumericTextBox Getting Started - Composition API

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/numerictextbox/accessibility.md

This snippet demonstrates the basic setup of the Vue NumericTextBox using the Composition API. Ensure the component is imported and registered correctly.

```html
<template>
    <div id="app">
        <div id='numeric' style="width:300px">
            <ejs-numerictextbox :value='value' :floatLabelType='floatLabelType'></ejs-numerictextbox>
        </div>
    </div>
</template>

<script setup>
import { provide } from 'vue';
import { NumericTextBoxComponent as EjsNumerictextbox } from "@syncfusion/ej2-vue-inputs";

const value = 10;
const floatLabelType = 'Auto';

provide('numerictextbox', {});
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css';
#numeric {
    margin: 30px auto;
    width: 240px;
}
</style>
```

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

### Run the Application

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/block-editor/vue-3-getting-started.md

Start the development server to view the application in the browser.

```bash
npm run dev
```

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

### Vue Sidebar Getting Started - Options API

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/sidebar/auto-close.md

This snippet shows the basic setup for the Vue Sidebar component using the Options API. It includes necessary imports and component registration.

```html
<template>
    <div id="app">
        <div class="control-section">
            <div class="sample-content">
                <!-- To render the Sidebar element -->
                <ejs-sidebar id='default-sidebar' style="visibility: hidden">
                    <div id="sidebar-content">
                        <div class="main-menu">
                            <ul>
                                <li class="mx-auto">
                                    <span class="menu-icon e-icons e-home"></span><a href="#" class="menu-text">Home</a>
                                </li>
                                <li class="mx-auto">
                                    <span class="menu-icon e-icons e-profile"></span><a href="#" class="menu-text">Profile</a>
                                </li>
                                <li class="mx-auto">
                                    <span class="menu-icon e-icons e-settings"></span><a href="#" class="menu-text">Settings</a>
                                </li>
                                <li class="mx-auto">
                                    <span class="menu-icon e-icons e-cart"></span><a href="#" class="menu-text">Cart</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </ejs-sidebar>
            </div>
            <div class="main-content">
                <div class="header-content">
                    <button id="sidebarbtn" class="e-btn">
                        <span class="e-icons e-menu"></span>
                    </button>
                </div>
                <div class="content">
                    <p>The main content area</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { SidebarComponent, TreeViewComponent } from '@syncfusion/ej2-vue';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
    name: 'App',
    components: {
        'ejs-sidebar': SidebarComponent,
        'ejs-treeview': TreeviewComponent
    },
    data: function () {
        return {
            items: [
                { id: '1', text: 'File Manager', iconCss: 'e-icons e-folder' },
                { id: '2', text: 'Downloads', iconCss: 'e-icons e-download' },
                { id: '3', text: 'Upload', iconCss: 'e-icons e-upload' }
            ]
        };
    },
    provide: {
        sidebar: {
            enable: true
        }
    }
};
</script>

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

.sample-content {
    width: 300px;
    float: left;
}

.main-content {
    width: calc(100% - 300px);
    float: left;
    box-sizing: border-box;
}

.control-section {
    height: 350px;
    margin: 0 auto;
    border: 1px solid #ccc;
    overflow: hidden;
}

.header-content {
    height: 60px;
    display: flex;
    align-items: center;
    padding-left: 15px;
    background-color: #f5f5f5;
}

.content {
    padding: 15px;
}

.main-menu ul {
    padding-left: 0;
    list-style: none;
}

.main-menu ul li {
    padding: 10px 20px;
    color: #333;
    font-size: 16px;
}

.main-menu ul li a {
    text-decoration: none;
    color: #333;
    margin-left: 10px;
}

.main-menu ul li .menu-icon {
    vertical-align: middle;
    font-size: 18px;
}

.main-menu ul li .menu-text {
    vertical-align: middle;
}

.e-sidebar-collapse-trigger {
    display: none;
}

.e-menu-icon {
    font-size: 20px;
    color: #333;
}

.e-sidebar-content {
    padding: 15px;
    color: #fff;
}

.sidebar-content {
    padding: 15px;
}

.main-menu {
    padding-top: 20px;
}

.mx-auto {
    margin: auto;
}

.e-icons::before {
    line-height: inherit;
}
</style>

```

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

### Vue Sidebar Getting Started - Composition API

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/sidebar/auto-close.md

This snippet demonstrates the basic setup for the Vue Sidebar component using the Composition API. It includes necessary imports and component registration.

```html
<template>
    <div id="app">
        <div class="control-section">
            <div class="sample-content">
                <!-- To render the Sidebar element -->
                <ejs-sidebar id='default-sidebar' style="visibility: hidden">
                    <div id="sidebar-content">
                        <div class="main-menu">
                            <ul>
                                <li class="mx-auto">
                                    <span class="menu-icon e-icons e-home"></span><a href="#" class="menu-text">Home</a>
                                </li>
                                <li class="mx-auto">
                                    <span class="menu-icon e-icons e-profile"></span><a href="#" class="menu-text">Profile</a>
                                </li>
                                <li class="mx-auto">
                                    <span class="menu-icon e-icons e-settings"></span><a href="#" class="menu-text">Settings</a>
                                </li>
                                <li class="mx-auto">
                                    <span class="menu-icon e-icons e-cart"></span><a href="#" class="menu-text">Cart</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </ejs-sidebar>
            </div>
            <div class="main-content">
                <div class="header-content">
                    <button id="sidebarbtn" class="e-btn">
                        <span class="e-icons e-menu"></span>
                    </button>
                </div>
                <div class="content">
                    <p>The main content area</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { provide } from 'vue';
import { SidebarComponent as EjsSidebar, TreeViewComponent as EjsTreeview } from '@syncfusion/ej2-vue';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

const items = [
    { id: '1', text: 'File Manager', iconCss: 'e-icons e-folder' },
    { id: '2', text: 'Downloads', iconCss: 'e-icons e-download' },
    { id: '3', text: 'Upload', iconCss: 'e-icons e-upload' }
];

provide('sidebar', {
    enable: true
});
</script>

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

.sample-content {
    width: 300px;
    float: left;
}

.main-content {
    width: calc(100% - 300px);
    float: left;
    box-sizing: border-box;
}

.control-section {
    height: 350px;
    margin: 0 auto;
    border: 1px solid #ccc;
    overflow: hidden;
}

.header-content {
    height: 60px;
    display: flex;
    align-items: center;
    padding-left: 15px;
    background-color: #f5f5f5;
}

.content {
    padding: 15px;
}

.main-menu ul {
    padding-left: 0;
    list-style: none;
}

.main-menu ul li {
    padding: 10px 20px;
    color: #333;
    font-size: 16px;
}

.main-menu ul li a {
    text-decoration: none;
    color: #333;
    margin-left: 10px;
}

.main-menu ul li .menu-icon {
    vertical-align: middle;
    font-size: 18px;
}

.main-menu ul li .menu-text {
    vertical-align: middle;
}

.e-sidebar-collapse-trigger {
    display: none;
}

.e-menu-icon {
    font-size: 20px;
    color: #333;
}

.e-sidebar-content {
    padding: 15px;
    color: #fff;
}

.sidebar-content {
    padding: 15px;
}

.main-menu {
    padding-top: 20px;
}

.mx-auto {
    margin: auto;
}

.e-icons::before {
    line-height: inherit;
}
</style>

```

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

### Vue Markdown Editor Getting Started with Options API

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/markdown-editor/keyboard-support.md

This snippet shows how to initialize the Syncfusion Vue Markdown editor using the Options API. It covers the required imports and component setup for the editor.

```html
<template>
    <div id="app">
        <div class="rte-control-section">
            <div class="custom-editor-div">
                <ejs-richtexteditor id="markdowneditor" :editorMode='"Markdown"' :toolbarItems='[]'>
                    <p>This is a basic Markdown editor example.</p>
                </ejs-richtexteditor>
            </div>
        </div>
    </div>
</template>

<script>
import { provide } from 'vue';
import { RichTextEditorComponent as EjsRTE, Toolbar, Link, Image, HtmlEditor, Table, Count, MarkdownEditor } from '@syncfusion/ej2-vue3-richtexteditor';

export default {
    name: 'App',
    components: {
        'ejs-richtexteditor': EjsRTE
    },
    provide: {
        richtexteditor: [
            Toolbar,
            Link,
            Image,
            HtmlEditor,
            Table,
            Count,
            MarkdownEditor
        ]
    }
};
</script>

<style>
@import '@syncfusion/ej2-vue3-richtexteditor/styles/material.css';
</style>
```

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

### Run the project

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/chart/vue-3-getting-started.md

Commands to navigate to the project directory and start the development server.

```bash
cd my-project
npm install
npm run dev
```

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

### Vue DateRangePicker Getting Started - Composition API

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/daterangepicker/accessibility.md

This snippet demonstrates the basic setup of the DateRangePicker component using Vue's Composition API. It includes necessary imports and component registration for a functional implementation.

```html
<template>
    <div id="app">
        <div class="daterangepicker-control">
            <ejs-daterangepicker :start="start" :depth="depth" :format="format" :placeholder="placeholder" :presets="presets"></ejs-daterangepicker>
        </div>
    </div>
</template>

<script setup>
import { provide } from 'vue';
import { DateRangePickerComponent as EjsDaterangepicker } from "@syncfusion/ej2-vue-calendars";

const start = '2023-01-01';
const depth = 'normal';
const format = 'MM/dd/yyyy';
const placeholder = 'Select a range';
const presets = [
    { label: 'Today', start: new Date(), end: new Date() },
    { label: 'This week', start: new Date(new Date().setDate(new Date().getDate() - 7)), end: new Date() },
    { label: 'This month', start: new Date(new Date().setDate(1)), end: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0) },
];

provide('daterangepicker', {});
</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-calendars/styles/material.css';

#app {
    margin-top: 20px;
    margin-left: 20px;
}

.daterangepicker-control {
    width: 300px;
}
</style>
```

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

### Create project directory structure

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/gantt/connecting-to-adaptors/graphql-adaptor.md

Commands to initialize the server directory and source folder.

```bash
mkdir GraphQLServer
cd GraphQLServer
mkdir src
cd src
```

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

### Start the Backend and Frontend Servers

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/chat-ui/bot-integrations/integration-with-dialogflow.md

Commands to initialize the Node.js backend and the Vue development server.

```bash
node index.js
```

```bash
npm run dev
```

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

### Run the client application

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/gantt/connecting-to-adaptors/graphql-adaptor.md

Commands to navigate to the client directory and start the development server.

```bash
    cd GanttClient
    npm run dev
```

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

### Building and Previewing for Production

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/file-manager/getting-started.md

Commands to create an optimized production build and preview it locally.

```bash
npm run build
```

```bash
npx serve dist
```

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

### Customize Week Start Day in Vue Gantt Chart

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/gantt/time-line/time-line.md

Customize the week start day of the Gantt Chart by setting the `weekStartDay` property in `timelineSettings`. This example shows how to set Sunday as the default start day and how to change it.

```html
<template>
    <div id="app">
        <ejs-gantt :dataSource='data' :taskFields='taskFields' :height='height' :timelineSettings='timelineSettings'></ejs-gantt>
    </div>
</template>
<script setup>
import { GanttComponent as EjsGantt } from "@syncfusion/ej2-vue3";
import { GanttData } from "./datasource.js";

const data = GanttData;
const height = "350px";
const taskFields = {
    id: "TaskID",
    startDate: "StartDate",
    duration: "Duration",
    endDate: "EndDate",
    dependency: "Predecessor",
    progress: "Progress",
    resourceInfo: "Resources",
    work: "Work",
    name: "TaskName"
};
const timelineSettings = {
    weekStartDay: 3
};
</script>
```

```html
<template>
    <div id="app">
        <ejs-gantt :dataSource='data' :taskFields='taskFields' :height='height' :timelineSettings='timelineSettings'></ejs-gantt>
    </div>
</template>
<script>
import { GanttComponent as EjsGantt } from "@syncfusion/ej2-vue3";
import { GanttData } from "./datasource.js";

export default {
    name: "app",
    components: {
        "ejs-gantt": EjsGantt
    },
    data() {
        return {
            data: GanttData,
            height: "350px",
            taskFields: {
                id: "TaskID",
                startDate: "StartDate",
                duration: "Duration",
                endDate: "EndDate",
                dependency: "Predecessor",
                progress: "Progress",
                resourceInfo: "Resources",
                work: "Work",
                name: "TaskName"
            },
            timelineSettings: {
                weekStartDay: 3
            }
        };
    }
};
</script>
```

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

### Complete Vue TreeView Component Setup

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/treeview/quasar.md

This consolidated example shows the complete setup for the Vue TreeView component, including template, script, and necessary CSS imports for styling.

```html
<template>
  <ejs-treeview id='treeview' :fields='fields'></ejs-treeview>
</template>

<script setup>
    import { TreeViewComponent as EjsTreeview } from "@syncfusion/ej2-vue-navigations";
    const data =  [
    {
        nodeId: '01', nodeText: 'Music',
        nodeChild: [
            { nodeId: '01-01', nodeText: 'Gouttes.mp3' }
        ]
    },
    {
        nodeId: '02', nodeText: 'Videos', expanded: true,
        nodeChild: [
            { nodeId: '02-01', nodeText: 'Naturals.mp4' },
            { nodeId: '02-02', nodeText: 'Wild.mpeg' },
        ]
    },
    {
        nodeId: '03', nodeText: 'Documents',
        nodeChild: [
            { nodeId: '03-01', nodeText: 'Environment Pollution.docx' },
            { nodeId: '03-02', nodeText: 'Global Water, Sanitation, & Hygiene.docx' },
            { nodeId: '03-03', nodeText: 'Global Warming.ppt' },
            { nodeId: '03-04', nodeText: 'Social Network.pdf' },
            { nodeId: '03-05', nodeText: 'Youth Empowerment.pdf' },
        ]
    },
    ];
    const fields = { dataSource: data, id: "nodeId", text: "nodeText", child: "nodeChild" };
</script>

<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
</style>
```

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

### Full Implementation Examples

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/speech-to-text/vue-3-getting-started.md

Complete examples showing the integration of the SpeechToText component using both Composition and Options APIs.

```html
<template>
    <div style="margin: 50px auto;">
        <ejs-speechtotext id="speechtotext"></ejs-speechtotext>
    </div>
</template>

<script setup>
    import { SpeechToTextComponent as EjsSpeechtotext  } from "@syncfusion/ej2-vue-inputs";
</script>

<style>
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/speech-to-text/index.css";
</style>
```

```html
<template>
    <div style="margin: 50px auto;">
        <ejs-speechtotext id="speechtotext"></ejs-speechtotext>
    </div>
</template>

<script>
import { SpeechToTextComponent  } from "@syncfusion/ej2-vue-inputs";

export default {
    name: "App",
    components: {
    'ejs-speechtotext': SpeechToTextComponent
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/speech-to-text/index.css";
</style>
```

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

### Start Application

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/grid/data-binding/remote-data.md

Command to start the application concurrently.

```bash
npm start
```

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

### Configure LiteLLM Proxy

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/ai-assistview/ai-integrations/lite-llm-integration.md

Commands to install the LiteLLM proxy and start it using a configuration file.

```bash
pip install "litellm[proxy]"
litellm --config "./config.yaml" --port 4000 --host 0.0.0.0
```

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

### Full Gantt Chart Implementation

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/gantt/quasar.md

Complete example showing component registration, data source definition, task field mapping, and required CSS imports.

```html
<template>
  <ejs-gantt 
    :dataSource="data"
    :taskFields="taskFields"
  >
  </ejs-gantt>
</template>

<script setup>
  import { GanttComponent as EjsGantt} from '@syncfusion/ej2-vue-gantt';
  const data = [
    {TaskID: 1, TaskName: 'Project initiation', StartDate: new Date('2024-04-01'), EndDate: new Date('2024-04-15')},
    {TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('2024-04-01'), Duration: 4, Progress: 70, ParentID: 1},
    {TaskID: 3, TaskName: 'Perform site survey', StartDate: new Date('2024-04-01'), Duration: 4, Progress: 50, ParentID: 1},
    {TaskID: 4, TaskName: 'Soil testing', StartDate: new Date('2024-04-01'), Duration: 3, Progress: 40, ParentID: 1},
    {TaskID: 5, TaskName: 'Project estimation', StartDate: new Date('2024-04-08'), EndDate: new Date('2024-04-18')},
    {TaskID: 6, TaskName: 'Develop floor plan', StartDate: new Date('2024-04-08'), Duration: 5, Progress: 30, ParentID: 5},
    {TaskID: 7, TaskName: 'Estimate project cost', StartDate: new Date('2024-04-08'), Duration: 5, Progress: 20, ParentID: 5}
  ];
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-gantt/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-treegrid/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-layouts/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
</style>
```

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

### Vue Tooltip Customization Example (Composition API)

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/tooltip/how-to/fancy-tooltip-customization.md

This example demonstrates how to implement fancy tooltip customizations in a Vue application using the Composition API. It includes the necessary template and script setup.

```html
<template>
    <div id="app">
        <div class="tooltip-section">
            <ejs-tooltip content='Tooltip with customized arrow' position='BottomCenter'>
                <div id='target'>Hover me to see the tooltip</div>
            </ejs-tooltip>
        </div>
    </div>
</template>

<script setup>
import { provide } from 'vue';
import { Tooltip, TooltipEventArgs } from '@syncfusion/ej2-vue3';

provide('tooltip', {});
</script>

<style>
#target {
    position: relative;
    width: 100px;
    height: 40px;
    margin: 30px auto;
    text-align: center;
    line-height: 40px;
}

/* Curved tip customization */
.e-arrow-tip-outer.e-tip-bottom,
.e-arrow-tip-outer.e-tip-top {
     border-left: none !important;
     border-right: none !important;
     border-top: none !important;
}
.e-arrow-tip.e-tip-top {
     transform: rotate(170deg);
}

/* Bubble tip customization */
/*
.e-arrow-tip-outer.e-tip-bottom, .e-arrow-tip-outer.e-tip-top
  {
     border-radius: 50px;
     height: 10px;
     width: 10px;
  }

  .e-arrow-tip-inner.e-tip-bottom, .e-arrow-tip-inner.e-tip-top
    {
     border-radius: 50px;
     height: 10px;
     width: 10px;
    }
*/
</style>
```

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

### Vue ProgressButton Start and Stop Methods (Options API)

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/progress-button/spinner-and-progress.md

Pause and resume progress using the 'stop' and 'start' methods. Clicking the ProgressButton will pause and resume the progress. This example uses the Options API.

```html
<template>
    <div id="app">
        <div id="container">
            <ejs-progressbutton :enableProgress='true' :progressBegin='onProgressBegin' :progressComplete='onProgressComplete' :content='"Normal"' :spinSettings='spinSettings' :animationSettings='animationSettings'></ejs-progressbutton>
        </div>
    </div>
</template>

<script>
import { ProgressButtonComponent as EjsProgressbutton } from "@syncfusion/ej2-vue-progress-button";

export default {
    components: {
        "ejs-progressbutton": EjsProgressbutton
    },
    data: function() {
        return {
            spinSettings: {
                lines: 10,
                lineSize: 2,
                radius: 20,
                width: 5,
                color: "#000000"
            },
            animationSettings: {
                effect: 'SlideLeft',
                duration: 1000,
                easing: 'Linear'
            }
        };
    },
    methods: {
        onProgressBegin: function(args) {
            // Logic for progress start
        },
        onProgressComplete: function(args) {
            // Logic for progress completion
        }
    }
}
</script>

<style>
#app {
    margin: 20px auto;
    width: 200px;
}
</style>
```

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

### Start the development server

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/3D-chart/getting-started.md

Commands to launch the development server using npm or yarn.

```bash
npm run serve
```

```bash
yarn run serve
```

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

### Vue ProgressButton Start and Stop Methods (Composition API)

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/progress-button/spinner-and-progress.md

Pause and resume progress using the 'stop' and 'start' methods. Clicking the ProgressButton will pause and resume the progress. This example uses the Composition API.

```html
<template>
    <div id="app">
        <div id="container">
            <ejs-progressbutton :enableProgress='true' :progressBegin='onProgressBegin' :progressComplete='onProgressComplete' :content='"Normal"' :spinSettings='spinSettings' :animationSettings='animationSettings'></ejs-progressbutton>
        </div>
    </div>
</template>

<script setup>
import { ProgressButtonComponent as EjsProgressbutton } from "@syncfusion/ej2-vue-progress-button";

const spinSettings = {
    lines: 10,
    lineSize: 2,
    radius: 20,
    width: 5,
    color: "#000000"
};
const animationSettings = {
    effect: 'SlideLeft',
    duration: 1000,
    easing: 'Linear'
};

const onProgressBegin = (args) => {
    // Logic for progress start
};

const onProgressComplete = (args) => {
    // Logic for progress completion
};
</script>

<style>
#app {
    margin: 20px auto;
    width: 200px;
}
</style>
```

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

### Install Backend Dependencies

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/chat-ui/bot-integrations/integration-with-bot-framework.md

Install the required packages for the token server.

```bash
npm install express axios cors dotenv
```

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

### Vue Ribbon Contextual Tab Method Example

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/code-snippet/ribbon/contextual-tab-method/index.html

Demonstrates how to use methods to control the visibility of contextual tabs in the EJ2 Vue Ribbon. This example shows the basic setup for a ribbon with contextual tabs.

```html
<!DOCTYPE html>
<html>
<head>
    <title>EJ2 Vue Sample</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="supported-color-schemes" content="light dark">
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.syncfusion.com/ej2/24.1.41/material.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js"></script>
</head>
<body>
    <div id="app">
        <div id="ribbon"></div>
    </div>
    <script src="index.js"></script>
</body>
</html>
```

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

### Install Project Dependencies

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/block-editor/vue-3-getting-started.md

Navigate to the project directory and install the necessary node modules.

```bash
cd my-app
npm install
```

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

### API Endpoint for GET Request in Vue Gantt

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/gantt/data-binding.md

This C# code defines a GET API endpoint for retrieving data, returning a placeholder string value. It's a basic example for API interaction.

```csharp
// GET: api/Orders/
        [HttpGet("{id}", Name = "Get")]
        public string Get(int id)
        {
            return "value";
        }
```

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

### Install PNPM and Initialize Vite Project

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/getting-started/pnpm.md

Global installation of PNPM and initiation of the Vite project creation process.

```bash
npm install -g pnpm

pnpm create vite@latest
```

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

### Start the Token Server

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/chat-ui/bot-integrations/integration-with-bot-framework.md

Command to initiate the token server from the project directory.

```bash
node index.js
```

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

### Backend Launch Settings

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/diagram/mysql-server.md

Example of the application URL configuration found in launchSettings.json.

```json
"applicationUrl": "https://localhost:7092;http://localhost:5296"
```

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

### Complete Image Editor Setup (Options API)

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/image-editor/getting-started.md

A complete example of setting up the Image Editor component using the Options API in Vue.

```html
<template>
    <div>
        <ejs-imageeditor id="image-editor" height="350px" width="550px"></ejs-imageeditor>
    </div>
</template>

<script>
import { ImageEditorComponent } from "@syncfusion/ej2-vue-image-editor";

export default {
    name: "App",
    components: {
        'ejs-imageeditor': ImageEditorComponent
    }
}
</script>

<style>

</style>
```

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

### Navigate to Project Directory

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/3D-chart/getting-started.md

Command to enter the newly created project directory.

```bash
cd quickstart
```

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

### Install Project Dependencies

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/getting-started/pnpm.md

Navigate to the project directory and install dependencies using PNPM.

```bash
cd my-project

pnpm install
```

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

### Complete Image Editor Setup (Composition API)

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/image-editor/getting-started.md

A complete example of setting up the Image Editor component using the Composition API in Vue.

```html
<template>
    <div>
        <ejs-imageeditor id="image-editor" height="350px" width="550px"></ejs-imageeditor>
    </div>
</template>

<script setup>
import { ImageEditorComponent as EjsImageeditor } from "@syncfusion/ej2-vue-image-editor";

export default {
    components: {
        'ejs-imageeditor': EjsImageeditor
    }
}
</script>

<style>

</style>
```

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

### Run the GraphQL server

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/gantt/connecting-to-adaptors/graphql-adaptor.md

Commands to navigate to the server directory and start the development server.

```bash
  cd GraphQLServer
  npm run dev
```

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

### Configure GraphQLAdaptor for Searching in Vue Grid

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/grid/connecting-to-adaptors/graphql-adaptor.md

This example shows the setup of a DataManager with a GraphQLAdaptor and the inclusion of the Toolbar component to enable search functionality.

```html
<template>
  <div id="app">
    <ejs-grid :dataSource='data' :toolbar="toolbar">
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey="true"></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width='160'></e-column>
        <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, Edit, Sort, Page, Filter } from "@syncfusion/ej2-vue-grids";
import { DataManager, GraphQLAdaptor } from "@syncfusion/ej2-data";
export default {
  name: "App",
  components: {
    "ejs-grid": GridComponent,
    "e-columns": ColumnsDirective,
    "e-column": ColumnDirective,
  },
  data() {
    return {
      data: new DataManager({
        url: "http://localhost:xxxx/",
        adaptor: new GraphQLAdaptor({
          response: {
            result: 'getOrders.result',
            count: 'getOrders.count',
            aggregates: 'getOrder.aggregates'
          },
          query: `query getOrders($datamanager: DataManager) {
        getOrders(datamanager: $datamanager) {
         count,
         result{
          OrderID, CustomerID, ShipCity, ShipCountry}
         }
        }`,
        })
      }),
      toolbar: ['Search'],
    };
  },
  provide: {
    grid: [Toolbar]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material3.css";
</style>
```

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

### Vue Stepper with Label Type

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/code-snippet/stepper/labelStepType/index.html

Configure the Vue Stepper component to display labels for each step. This example shows the basic setup for the Stepper.

```html
<template>
    <div id="app">
        <ejs-stepper>
            <e-stepperstep></e-stepperstep>
            <e-stepperstep></e-stepperstep>
            <e-stepperstep></e-stepperstep>
            <e-stepperstep></e-stepperstep>
        </ejs-stepper>
    </div>
</template>

<script>
import Vue from 'vue';
import { StepperPlugin } from '@syncfusion/ej2-vue-navigations';

Vue.use(StepperPlugin);

export default {
    name: 'App',
    components: {

    }
};
</script>

<style>
#app {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
</style>
```

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

### Initialize a Nuxt project

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/getting-started/nuxt-3.md

Use the nuxi CLI to scaffold a new Nuxt project.

```bash
npx nuxi@latest init my-project
```

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

### Install Frontend Dependencies

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/chat-ui/bot-integrations/integration-with-bot-framework.md

Install the necessary packages for bot communication and the Syncfusion Chat UI.

```bash
npm install directline-js axios --save
```

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

### Express Server CRUD Implementation

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/grid/data-binding/remote-data.md

An Express server setup to handle GET, POST, PUT, and DELETE requests for grid data operations.

```javascript
import express from 'express';
import data from './src/data-source.js';
import bodyParser from 'body-parser';
import cors from 'cors';

const app = express();

app.use(cors({
    origin: '*', // Update to the correct frontend origin
    credentials: true
}));

app.use(bodyParser.json());

// Root route
app.get('/', (req, res) => {
    res.send('Server is running');
});

// all records
app.get('/orders', function (req, res) {
    res.json({ result: data, count:data.length });
});

// insert
app.post('/orders', function (req, res){
    data.splice(0, 0, req.body.value);
    res.status(200).send('Row Inserted');
});

// get specific records
app.get('/orders/:OrderID', (req, res) => {
  const orderID = parseInt(req.params.OrderID, 10);
  const order = data.find(d => d.OrderID === orderID);
  
  if (order) {
      res.json(order);
  } else {
      res.status(404).send('Order not found');
  }
});
// Remove
app.delete('/orders/:OrderID', function (req, res) {
    const orderID = parseInt(req.params.OrderID, 10);
    const index = data.findIndex(x => x.OrderID === orderID);
    if (index !== -1) {
        data.splice(index, 1);
        res.status(200).send('Row Deleted');
    } else {
        res.status(404).send('Order not found');
    }
});

// Update
app.put('/orders/:OrderID', function (req, res) {
    const orderID = parseInt(req.params.OrderID, 10);
    const index = data.findIndex(x => x.OrderID === orderID);
    if (index !== -1) {
        // Assuming req.body.value contains the updated record with the same OrderID
        data[index] = req.body.value;
        res.status(200).send('Row Updated');
    } else {
        res.status(404).send('Order not found');
    }
});

const port = xxxx; // Here xxxx denotes the port number.
app.listen(port, () => {
    console.log(`Server running on http://localhost:${port}`);
});
```

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

### GraphQL Query Example

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/gantt/connecting-to-adaptors/graphql-adaptor.md

A sample GraphQL query used to fetch task data including ID, name, start date, and total count.

```ts
query {
  getTasks {
    result {
      TaskID
      TaskName
      StartDate
    }
    count
  }
}
```

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

### Create and Navigate to Vue Project

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/getting-started/vue-cli3.md

Start a new Vue project using Vue CLI and navigate into the project directory.

```bash
vue create quickstart

cd quickstart
npm install
```

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

### Interactive CLI Configuration Prompts

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/chart/vue-3-getting-started.md

Example of the selection process when configuring a new project via the interactive CLI.

```text

√ Project name? ... my-project
√ Choose Framework: » Vue
√ Choose Language: » JavaScript
√ Choose Template: » Chart
√ Choose Theme: » Material3
√ Choose Style Format: » CSS
√ Would you like to integrate the Syncfusion MCP Server (AI Assistant) into this project? ... no
√ Would you like to install Syncfusion Component Skills for AI-powered development? ... no      
√ Install dependencies and start app now? ... no

```

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

### Configure GraphQLAdaptor for Filtering in Vue Grid

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/grid/connecting-to-adaptors/graphql-adaptor.md

This example shows the setup of the DataManager with a GraphQLAdaptor, including the query and response mapping required for filtering operations.

```html
<template>
  <div id="app">
    <ejs-grid :dataSource='data' :allowFiltering="true">
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey="true"></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width='160'></e-column>
        <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective Filter } from "@syncfusion/ej2-vue-grids";
import { DataManager, GraphQLAdaptor } from "@syncfusion/ej2-data";
export default {
  name: "App",
  components: {
    "ejs-grid": GridComponent,
    "e-columns": ColumnsDirective,
    "e-column": ColumnDirective,
  },
  data() {
    return {
      data: new DataManager({
        url: "http://localhost:xxxx/",
        adaptor: new GraphQLAdaptor({
          response: {
            result: 'getOrders.result',
            count: 'getOrders.count',
            aggregates: 'getOrder.aggregates'
          },
          query: `query getOrders($datamanager: DataManager) {
        getOrders(datamanager: $datamanager) {
         count,
         result{
          OrderID, CustomerID, ShipCity, ShipCountry}
         }
        }`,
        })
        });
    };
  },
  provide: {
    grid: [Filter]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material3.css";
</style>
```

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

### Install Server Dependencies

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/grid/data-binding/remote-data.md

Install Express, body-parser, and cors for the backend server.

```bash
npm install express body-parser cors
```

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

### Initialize Vite Project

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/grid/data-binding/remote-data.md

Command to scaffold a new Vite project.

```bash
npm create vite@latest
```

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

### Start Backend Server

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/diagram/mysql-server.md

Command to execute the ASP.NET Core backend application.

```bash
dotnet run
```

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

### Install WProofreader SDK

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/rich-text-editor/spell-grammar-check.md

Install the required WProofreader SDK package using npm or yarn.

```bash
npm install @webspellchecker/wproofreader-sdk-js

Or

yarn add @webspellchecker/wproofreader-sdk-js
```

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

### Create Vue 2 Project

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/3D-chart/getting-started.md

Commands to install Vue CLI and initialize a new project using npm or yarn.

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

```bash
yarn global add @vue/cli
vue create quickstart
```

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

### Install Vue CLI and create project with npm

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/combo-box/getting-started.md

Commands to install Vue CLI globally and scaffold a new project using npm.

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

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

### Create Vue and ASP.NET Core Project using Terminal

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/data/adaptors/remote-save-adaptor.md

Use the dotnet CLI to create a new Vue and ASP.NET Core project. Navigate into the project directory after creation.

```bash
dotnet new vue -n RemoteSaveAdaptor
cd RemoteSaveAdaptor
```

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

### Install Quasar CLI globally

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/diagram/quasar.md

Install the Quasar CLI globally to enable project initialization commands.

```bash
npm install -g @quasar/cli
```

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

### Create Vue and ASP.NET Core Project using Terminal

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/data/adaptors/graphql-adaptor.md

Use the dotnet CLI to create a new Vue and ASP.NET Core project. Navigate to the project directory after creation.

```bash
dotnet new vue -n GraphQLAdaptor
cd GraphQLAdaptor
```

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

### Start the MCP server

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/ai-assistview/ai-integrations/mcp-integration.md

Run the Node.js server from the project folder.

```bash
node mcp-server.mjs
```
Tokens:
Raw