Syncfusion Vue UI Components (Essential JS 2)

https://ej2.syncfusion.com/vue/documentation/
Admin
Syncfusion Vue UI Components (Essential JS 2) is a modern, lightweight, responsive, modular, and...
Tokens:6,746,449
Snippets:31,997
Trust Score:10
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install Vue CLI and Create Vue 2 Project

Source: https://ej2.syncfusion.com/vue/documentation/accordion/getting-started

This snippet demonstrates how to install the Vue CLI globally and create a new Vue 2 project named 'quickstart'. It then navigates into the project directory and starts the development server. This is a prerequisite for integrating Syncfusion components.

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

```bash
yarn global add @vue/cli
vue create quickstart
cd quickstart
yarn run serve
```

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

### Complete Setup - Syncfusion Vue Message (Options API)

Source: https://ej2.syncfusion.com/vue/documentation/message/vue-3-getting-started

Provides a complete, summarized code example for setting up the Syncfusion Vue Message component using the Options API. It includes template, script (component import, registration, and data definition), and style sections.

```vue
<template>
  <ejs-message id="msg" :content="content"></ejs-message>
</template>

<script>
import { MessageComponent } from '@syncfusion/ej2-vue-notifications';
//Component registration
export default {
  name: "App",
  components: {
    'ejs-message': MessageComponent
  },
  data() {
    return {
        content: "Please read the comments carefully"
    };
  }
}
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/message/material.css";
</style>
```

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

### Complete Setup - Syncfusion Vue Message (Composition API)

Source: https://ej2.syncfusion.com/vue/documentation/message/vue-3-getting-started

Provides a complete, summarized code example for setting up the Syncfusion Vue Message component using the Composition API. It includes template, script (component import and content definition), and style sections.

```vue
<template>
  <ejs-message id="msg" :content="content"></ejs-message>
</template>

<script setup>
  import { MessageComponent as EjsMessage } from "@syncfusion/ej2-vue-notifications";

  const content = "Please read the comments carefully";
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/message/material.css";
</style>
```

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

### Complete Syncfusion Vue Tooltip Example (Options API)

Source: https://ej2.syncfusion.com/vue/documentation/tooltip/getting-started

Provides a comprehensive example of integrating the Syncfusion Tooltip and Button components using the Options API in Vue. This includes template, script, and style sections.

```vue
<template>
  <div id="app">
    <div id='container'>
      <ejs-tooltip class="tooltipcontainer" content='Tooltip content' target="#target">
        <div style="display: inline-block; position: relative; left: 50%;top: 100px;transform: translateX(-50%);">
          <ejs-button id='target'>Show Tooltip</ejs-button>
        </div>
      </ejs-tooltip>
    </div>
  </div>
</template>
<script>
import { TooltipComponent } from "@syncfusion/ej2-vue-popups";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";

export default {
  name: "App",
  components: {
    "ejs-tooltip": TooltipComponent,
    "ejs-button": ButtonComponent
  },
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
</style>
```

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

### Complete Syncfusion Vue Tooltip Example (Composition API)

Source: https://ej2.syncfusion.com/vue/documentation/tooltip/getting-started

Provides a comprehensive example of integrating the Syncfusion Tooltip and Button components using the Composition API in Vue. This includes template, script, and style sections.

```vue
<template>
  <div id="app">
    <div id='container'>
      <ejs-tooltip class="tooltipcontainer" content='Tooltip content' target="#target">
        <div style="display: inline-block; position: relative; left: 50%;top: 100px;transform: translateX(-50%);">
          <ejs-button id='target'>Show Tooltip</ejs-button>
        </div>
      </ejs-tooltip>
    </div>
  </div>
</template>
<script setup>
import { TooltipComponent as EjsTooltip } from "@syncfusion/ej2-vue-popups";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";

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

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

### Complete Vue Appbar Example (Composition API)

Source: https://ej2.syncfusion.com/vue/documentation/appbar/getting-started

A complete Vue component example using the Composition API, integrating the Syncfusion Appbar and Button components. It includes script setup for imports, the template for rendering, and styles for the Syncfusion components. Ensure Syncfusion Vue packages are installed.

```vue
<template>
  <ejs-appbar colorMode="Primary">
    <ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
    <span class="regular" style="margin:0 5px">Vue AppBar</span>
    <div class="e-appbar-spacer"></div>
    <ejs-button cssClass="e-inherit">FREE TRIAL</ejs-button>
  </ejs-appbar>
</template>

<script setup>
  import { AppBarComponent as EjsAppbar } from "@syncfusion/ej2-vue-navigations";
  import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
</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-navigations/styles/material.css";
</style>
```

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

### NumericTextBox Getting Started

Source: https://ej2.syncfusion.com/vue/documentation/numerictextbox/how-to/prevent-nullable-input-in-numerictextbox

Guides on how to get started with the Syncfusion Vue NumericTextBox component, including setup for Vue 3.

```APIDOC
## NumericTextBox Getting Started

### Description
Guides on how to get started with the Syncfusion Vue NumericTextBox component, including setup for Vue 3, number formats, globalization, and accessibility.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Dialog - Getting Started

Source: https://ej2.syncfusion.com/vue/documentation/dialog/how-to/prevent-the-focus-to-the-previous-element

Guides on how to get started with the Syncfusion Vue Dialog component, including basic setup and initialization.

```APIDOC
## Dialog - Getting Started

### Description
Instructions and code examples for initializing and using the Syncfusion Vue Dialog component in a Vue application.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (N/A)
N/A

#### Response Example
N/A
```

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

### Complete Kanban Component Setup (Composition API)

Source: https://ej2.syncfusion.com/vue/documentation/kanban/getting-started-page

A comprehensive example of setting up the Kanban component using Composition API, including template, script, and styles with necessary imports and data.

```vue
<template>
      <ejs-kanban id="kanban" keyField="Status" :dataSource="data" :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>
</template>

<script setup>
  import { KanbanComponent as EjsKanban , ColumnsDirective as EColumns, ColumnDirective as EColumn } from '@syncfusion/ej2-vue-kanban';
    const data = [
        {
            Id: 1,
            Status: 'Open',
            Summary: 'Analyze the new requirements gathered from the customer.',
            Assignee: 'Andrew Fuller'
        },
        {
            Id: 2,
            Status: 'InProgress',
            Summary: 'Improve application performance',
            Assignee: 'Andrew Fuller'
        },
        {
            Id: 3,
            Status: 'Close',
            Summary: 'Arrange a web meeting with the customer to get new requirements.',
            Assignee: 'Janet Leverling'
        }
        ];
    let cardSettings = {
        contentField: "Summary",
        headerField: "Id",
    }
  </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-layouts/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-kanban/styles/material.css';
</style>
```

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

### Uploader Component - Getting Started

Source: https://ej2.syncfusion.com/vue/documentation/uploader/how-to/determine-whether-uploader-has-file-input

Guides on how to get started with the Syncfusion Vue Uploader component, including basic setup and integration into your Vue application.

```APIDOC
## Uploader Component - Getting Started

### Description
This section covers the initial steps to integrate and use the Syncfusion Vue Uploader component in your project.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A
```

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

### Install Project Dependencies

Source: https://ej2.syncfusion.com/vue/documentation/dialog/vue3-getting-started

Installs all necessary packages for a newly created Vite project. This command should be run after creating the project directory.

```bash
cd my-project
npm install

cd my-project
yarn install
```

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

### Textbox - Getting Started

Source: https://ej2.syncfusion.com/vue/documentation/textbox/how-to/customize-the-textbox-background-color-and-text-color

Guides on how to get started with the Syncfusion Vue Textbox component, including basic setup and usage.

```APIDOC
## Textbox - Getting Started

### Description
This section provides instructions on how to quickly integrate and use the Syncfusion Vue Textbox component in your Vue.js applications.

### Method
N/A (Component usage guide)

### Endpoint
N/A (Component usage guide)

### Parameters
N/A (Component usage guide)

### Request Example
```html
<template>
  <ejs-textbox placeholder="Enter your name"></ejs-textbox>
</template>
```

### Response
N/A (Component usage guide)
```

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

### Install npm Packages and Configure Start Script

Source: https://ej2.syncfusion.com/vue/documentation/file-manager/file-system-provider

After cloning the repository, navigate to the project's root directory and run 'npm install' to install all required dependencies. The 'start' script in package.json is then configured to run the 'filesystem-server.js' file, specifying the root directory for file system operations.

```json
"start": "node filesystem-server.js -d D:/Projects"
```

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

### TreeView - Getting Started

Source: https://ej2.syncfusion.com/vue/documentation/treeview/how-to/restrict-the-drag-and-drop-for-particular-tree-nodes

Guide to get started with the Syncfusion Vue TreeView component, including initial setup and basic configuration.

```APIDOC
## TreeView - Getting Started

### Description
Instructions on how to set up and begin using the Syncfusion Vue TreeView component in your project.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
N/A

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Install Vue CLI and Initialize Project

Source: https://ej2.syncfusion.com/vue/documentation/datetimepicker/getting-started

Installs Vue CLI globally and initializes a new Vue project using the webpack-simple template. It then navigates into the project directory and installs the project dependencies.

```bash
npm install -g @vue/cli
npm install -g @vue/cli-init

vue init webpack-simple quickstart

cd quickstart
npm install
```

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

### Syncfusion Vue Tab - Getting Started

Source: https://ej2.syncfusion.com/vue/documentation/tab/how-to/load-tab-items-dynamically

Guides users through the initial setup and basic usage of the Syncfusion Vue Tab component, including installation and integration with Vue projects.

```APIDOC
## Getting Started with Syncfusion Vue Tab

### Description
This guide provides step-by-step instructions to quickly set up and start using the Syncfusion Vue Tab component in your Vue.js application.

### Installation
Install the Syncfusion Vue Tab component using npm or yarn:

```bash
npm install @syncfusion/ej2-vue
# or
yarn add @syncfusion/ej2-vue
```

### Basic Usage
Import and register the Tab component in your Vue application.

```html
<template>
  <div>
    <ejs-tab id="tab_default" :items='tabItems'></ejs-tab>
  </div>
</template>

<script>
import { Tab } from '@syncfusion/ej2-vue';

export default {
  components: {
    'ejs-tab': Tab
  },
  data() {
    return {
      tabItems: [
        { header: { text: 'Tab 1' }, content: 'Content for Tab 1' },
        { header: { text: 'Tab 2' }, content: 'Content for Tab 2' },
        { header: { text: 'Tab 3' }, content: 'Content for Tab 3' }
      ]
    };
  }
}
</script>
```

### Vue 3 Composition API
Example demonstrating how to use the Tab component with Vue 3's Composition API.

```html
<template>
  <div>
    <ejs-tab id="tab_composition" :items='tabItems'></ejs-tab>
  </div>
</template>

<script setup>
import { Tab } from '@syncfusion/ej2-vue';
import { ref } from 'vue';

const tabItems = ref([
  { header: { text: 'Tab A' }, content: 'Content for Tab A' },
  { header: { text: 'Tab B' }, content: 'Content for Tab B' }
]);
</script>

<style>
  /* Add necessary styles */
</style>
```

### Further Information
Refer to the full API reference for advanced customization options and event handling.
```

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

### Complete Vue App Example with Signature Component (Composition API)

Source: https://ej2.syncfusion.com/vue/documentation/signature/vue-3-getting-started

A full Vue component example demonstrating the integration of the Syncfusion Signature component using the Composition API. It includes the template, script setup for component import, and CSS styles for the Material theme.

```vue
<template>
<div class='wrap'>
    <h4>Sign here</h4>
    <ejs-signature id="signature"></ejs-signature>
</div>
</template>

<script setup>
import { SignatureComponent as EjsSignature} from '@syncfusion/ej2-vue-inputs';
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
</style>
```

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

### Summarized Syncfusion Vue Chips Component (Options API)

Source: https://ej2.syncfusion.com/vue/documentation/chips/vue-3-getting-started

This is a complete summarized code example for integrating the Syncfusion Vue Chips component using the Options API. It includes the template, script for component registration, and the necessary CSS styles.

```vue
<template>
  <ejs-chiplist id="chip">
      <e-chips>
        <e-chip text="Andrew"></e-chip>
        <e-chip text="Janet"></e-chip>  
        <e-chip text="Laura"></e-chip>
        <e-chip text="Margaret"></e-chip>
      </e-chips>
  </ejs-chiplist>
</template>

<script>
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-vue-buttons';
//Component registration
export default {
  name: "App",
  components: {
    'ejs-chiplist': ChipListComponent,
    "e-chips": ChipsDirective,
    "e-chip": ChipDirective
  }
}
</script>

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

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

### Initialize Nuxt Project

Source: https://ej2.syncfusion.com/vue/documentation/getting-started/nuxt-3

Commands to create a new Nuxt project, navigate into its directory, and install initial dependencies. This sets up the basic structure for a Nuxt application.

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

cd my-project

npm install
```

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

### Install Vue CLI and Create Project

Source: https://ej2.syncfusion.com/vue/documentation/diagram/getting-started

Installs the Vue CLI globally and creates a new Vue 2 project named 'my-diagram-app'. It then navigates into the project directory and starts the development server.

```shell
npm install -g @vue/cli
vue create my-diagram-app
cd my-diagram-app
npm run serve
```

```shell
yarn global add @vue/cli
vue create my-diagram-app
cd my-diagram-app
yarn run serve
```

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

### Summarized Syncfusion Vue Chips Component (Composition API)

Source: https://ej2.syncfusion.com/vue/documentation/chips/vue-3-getting-started

This is a complete summarized code example for integrating the Syncfusion Vue Chips component using the Composition API. It includes the template, script setup for component imports, and the necessary CSS styles.

```vue
<template>
  <ejs-chiplist id="chip">
      <e-chips>
        <e-chip text="Andrew"></e-chip>
        <e-chip text="Janet"></e-chip>  
        <e-chip text="Laura"></e-chip>
        <e-chip text="Margaret"></e-chip>
      </e-chips>
  </ejs-chiplist>
</template>

<script setup>
  import { ChipListComponent as EjsChiplist, ChipsDirective as EChips, ChipDirective as EChip } from '@syncfusion/ej2-vue-buttons';
</script>

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

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

### Vue Accordion Initialization using Options API

Source: https://ej2.syncfusion.com/vue/documentation/accordion/getting-started

This code example demonstrates how to initialize and render the Syncfusion Vue Accordion component using the Options API in a Vue.js application. It includes template setup, component registration, and necessary CSS imports for styling.

```vue
<template>
    <div id="app">
        <ejs-accordion>
            <div>
                <div>
                    <div> ASP.NET </div>
                </div>
                <div>
                    <div> Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web
                        applications
                        and XML Web services </div>
                </div>
            </div>
            <div>
                <div>
                    <div> ASP.NET MVC </div>
                </div>
                <div>
                    <div> The Model-View-Controller (MVC) architectural pattern separates an application into three main
                        components:
                        the model, the view, and the controller </div>
                </div>
            </div>
            <div>
                <div>
                    <div> JavaScript </div>
                </div>
                <div>
                    <div> JavaScript (JS) is an interpreted computer programming language.It was originally implemented
                        as part
                        of web browsers so that client-side scripts could interact with the user, control the browser
                    </div>
                </div>
            </div>
        </ejs-accordion>
    </div>
</template>
<script>
import { AccordionComponent } from '@syncfusion/ej2-vue-navigations';

export default {
    name: 'app',
    components: {
        'ejs-accordion': AccordionComponent
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>
```

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

### Complete App.vue Example with Badge Component and Styles

Source: https://ej2.syncfusion.com/vue/documentation/badge/vue-3-getting-started

This comprehensive example combines the HTML template for the Badge component with its necessary CSS imports and additional styling for the wrapper element. It provides a fully functional structure for integrating the Syncfusion Vue Badge.

```vue
<template>
  <div id='element'>
    <h1>Badge Component <span class="e-badge e-badge-primary">New</span></h1>
  </div>
</template>

<style>
 @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css";
 #element {
    display: flex;
    width: 400px;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
    justify-content: center;
 }
 </style>
```

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

### Vue Accordion Initialization using Composition API

Source: https://ej2.syncfusion.com/vue/documentation/accordion/getting-started

This code example demonstrates how to initialize and render the Syncfusion Vue Accordion component using the Composition API in a Vue.js application. It includes template setup, component import, and necessary CSS imports for styling.

```vue
<template>
    <div id="app">
    <ejs-accordion>
          <div>
                <div>
                    <div> ASP.NET </div>
                </div>
                <div>
                    <div> Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications
                        and XML Web services </div>
                </div>
            </div>
            <div>
                <div>
                    <div> ASP.NET MVC </div>
                </div>
                <div>
                    <div> The Model-View-Controller (MVC) architectural pattern separates an application into three main components:
                        the model, the view, and the controller </div>
                </div>
            </div>
            <div>
                <div>
                    <div> JavaScript </div>
                </div>
                <div>
                    <div> JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part
                        of web browsers so that client-side scripts could interact with the user, control the browser </div>
                </div>
            </div>
    </ejs-accordion>
  </div>
</template>
<script setup>
import { AccordionComponent as EjsAccordion } from '@syncfusion/ej2-vue-navigations';
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>
```

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

### Vue Rich Text Editor with Setup Script

Source: https://ej2.syncfusion.com/vue/documentation/rich-text-editor/getting-started

Vue.js component using the Composition API (<script setup>) to integrate the Syncfusion Rich Text Editor. It demonstrates component import, configuration of value, quick toolbar settings, and toolbar items, along with providing necessary modules.

```vue
<template>
    <div>
        <div class="control-section">
            <div class="sample-container">
                <div class="default-section">
                <ejs-richtexteditor ref="rteObj" :value="rteValue" :quickToolbarSettings="quickToolbarSettings" :height="340" :toolbarSettings="toolbarSettings"></ejs-richtexteditor>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { provide } from 'vue';
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Image, Link, HtmlEditor, QuickToolbar } from "@syncfusion/ej2-vue-richtexteditor";

const rteValue=`<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>`;
const height = 400;
const quickToolbarSettings = {
    image: [
        'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'OpenImageLink', '-',
        'EditImageLink', 'RemoveImageLink', 'Display', 'AltText', 'Dimension',
    ]
};
const toolbarSettings = {
    items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
    'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
    'LowerCase', 'UpperCase', '|',
    'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
    'Outdent', 'Indent', '|',
    'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
    'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
  ]
};
provide('richtexteditor', [Toolbar, Image, Link, HtmlEditor, QuickToolbar]);
</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-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/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-vue-richtexteditor/styles/material.css";
</style>
```

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

### Complete App.vue Example (Composition API)

Source: https://ej2.syncfusion.com/vue/documentation/smart-paste-button/vue-3-getting-started

A comprehensive example of `App.vue` using the Composition API, combining template, script setup, and component imports for the Smart Paste Button.

```vue
<template>
  <ejs-smart-paste-button id="smart-paste" content="Smart Paste" iconCss="e-icons e-paste"
          :aiAssistHandler="serverAIRequest"></ejs-smart-paste-button>
</template>

<script setup>
import { SmartPasteButtonComponent as EjsSmartPasteButton, ChatOptions } from "@syncfusion/ej2-vue-buttons";

const serverAIRequest = async (options: ChatOptions) => {
  let output: string | null = '';
  try {
    output = await getAzureChatAIRequest(options) as string;
    output = output.replace('END_RESPONSE', '')
  } catch (error) {
    console.error("Error:", error);
  }
  return output;
}

</script>

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

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

### Complete Vue Appbar Example (Options API)

Source: https://ej2.syncfusion.com/vue/documentation/appbar/getting-started

A complete Vue component example using the Options API, integrating the Syncfusion Appbar and Button components. It includes script for component registration, the template for rendering, and styles for the Syncfusion components. Ensure Syncfusion Vue packages are installed.

```vue
<template>
  <ejs-appbar colorMode="Primary">
    <ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
    <span class="regular" style="margin:0 5px">Vue AppBar</span>
    <div class="e-appbar-spacer"></div>
    <ejs-button cssClass="e-inherit">FREE TRIAL</ejs-button>
  </ejs-appbar>
</template>

<script>
import { AppBarComponent } from "@syncfusion/ej2-vue-navigations";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";

export default {
  name: "App",
  components: {
    "ejs-appbar": AppBarComponent,
    "ejs-button": ButtonComponent
  },
  data: function () {
    return {};
  },
};
</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-navigations/styles/material.css";
</style>
```

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

### Complete Syncfusion Vue Card Component Example

Source: https://ej2.syncfusion.com/vue/documentation/card/getting-started

Provides a comprehensive example of a Syncfusion Vue Card component within the `App.vue` file. It includes the template structure with header, title, and content, along with the necessary CSS imports for the Material theme. This snippet serves as a ready-to-use integration of the Card component.

```vue
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:100%;">
        <br>
          <div tabindex="0" class="e-card" id="basic">
            <div class="e-card-header">
                <div class="e-card-header-caption">
                    <div class="e-card-title">Advanced UWP</div>
                </div>
            </div>
            <div class="e-card-content">
                Communicating with Windows 10 and Other Apps, the second in a five-part series written by Succinctly series
                author Matteo Pagani. To download the complete white paper, and other papers in the series, visit
                the White Paper section of Syncfusion’s Technology Resource Portal.
            </div>
        </div>
    </div>
  </div>
</template>

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

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

### Install Syncfusion Vue Ribbon Package (yarn)

Source: https://ej2.syncfusion.com/vue/documentation/ribbon/getting-started

Installs the Syncfusion Vue Ribbon component package using yarn. This is an alternative to npm for integrating the component into your Vue 2 project.

```bash
yarn add @syncfusion/ej2-vue-ribbon
```

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

### Complete Syncfusion Vue Grid Example (Options API)

Source: https://ej2.syncfusion.com/vue/documentation/grid/vue-3-getting-started

A complete example of the App.vue file using the Options API, including template, script with component registration and data, and necessary CSS imports for the Syncfusion Vue Grid.

```vue
<template>
  <ejs-grid :dataSource='data'>
    <e-columns>
      <e-column field='OrderID' width='100' textAlign="Right"></e-column>
      <e-column field='CustomerID' width='100'></e-column>
      <e-column field='EmployeeID' width='100' textAlign="Right"></e-column>
      <e-column field='Freight' width='100' format="C2" textAlign="Right"></e-column>
      <e-column field='ShipCountry' width='100'></e-column>
    </e-columns>
  </ejs-grid>
</template>

<script>
  import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-vue-grids';
  // Component registration
  export default {
    name: "App",
    // Declaring component and its directives
    components: {
      'ejs-grid': GridComponent,
      'e-columns': ColumnsDirective,
      'e-column': ColumnDirective
    },
    data() {
      return {
        data:[
          {
            OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCountry: 'France', Freight: 32.38 
          },
          {
            OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipCountry: 'Germany', Freight: 11.61 
          },
          {
            OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipCountry: 'Brazil', Freight: 65.83 
          }
        ],
      };
    }
  }
</script>
```

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

### Install Syncfusion Vue Ribbon Package (npm)

Source: https://ej2.syncfusion.com/vue/documentation/ribbon/getting-started

Installs the Syncfusion Vue Ribbon component package using npm. This is a primary step for integrating the component into your Vue 2 project.

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

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

### Install Syncfusion Vue Accordion Package

Source: https://ej2.syncfusion.com/vue/documentation/accordion/getting-started

This code installs the Syncfusion Vue Accordion component package, which is necessary for using the Accordion UI element in your Vue 2 application. It can be installed using either npm or yarn.

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

```bash
yarn add @syncfusion/ej2-vue-navigations
```

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

### DropDownList API - Getting Started

Source: https://ej2.syncfusion.com/vue/documentation/drop-down-list/how-to/remove-item

Guidance on how to get started with the DropDownList component, including basic setup and data binding.

```APIDOC
## DropDownList API - Getting Started

### Description
This section covers the initial steps to integrate and configure the DropDownList component, including data binding scenarios.

### Setup
To use the DropDownList, import it from the `ej2-vue` package and register it in your Vue application.

```html
<template>
  <ejs-dropdownlist :dataSource='data' :fields='fields'></ejs-dropdownlist>
</template>

<script>
import { DropDownList } from '@syncfusion/ej2-vue';

export default {
  components: {
    'ejs-dropdownlist': DropDownList
  },
  data() {
    return {
      data: [
        { id: '1', text: 'Item 1' },
        { id: '2', text: 'Item 2' },
        { id: '3', text: 'Item 3' }
      ],
      fields: { text: 'text', value: 'id' }
    };
  }
}
</script>
```

### API Details

#### Properties
- **dataSource** (Object[] | DataManager) - Data source for the list items.
- **fields** (Object) - Specifies the mapping of fields from the data source (e.g., `text`, `value`, `groupBy`).
- **placeholder** (string) - Text to be displayed when the DropDownList is empty.
- **popupHeight** (string) - Sets the height of the popup list.

#### Methods
- **focus**() - Sets the focus to the DropDownList element.
- **openPopup**() - Opens the popup list.
- **closePopup**() - Closes the popup list.

#### Events
- **change** - Triggered when the selected item is changed.
- **open** - Triggered when the popup list is opened.
- **close** - Triggered when the popup list is closed.
- **filtering** - Triggered before filtering the data source.
```

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

### Complete Vue App with OTP Input (Options API)

Source: https://ej2.syncfusion.com/vue/documentation/otp-input/vue-3-getting-started

A complete example of a Vue application using the Options API to integrate the Syncfusion Vue OTP Input component. It includes template, script, and style sections with component registration and CSS imports.

```html
<template>
    <ejs-otpinput id="otpinput"></ejs-otpinput>
</template>

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

export default {
    name: "App",
    components: {
    "ejs-otpinput": OtpInputComponent
    }
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
</style>
```

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

### Complete Vue App Example with Signature Component (Options API)

Source: https://ej2.syncfusion.com/vue/documentation/signature/vue-3-getting-started

A full Vue component example showcasing the Syncfusion Signature component integration using the Options API. It includes the template, script for component registration, and CSS styles for the Material theme and component-specific styling.

```vue
<template>
<div class='wrap'>
    <h4>Sign here</h4>
    <ejs-signature id="signature"></ejs-signature>
</div>
</template>

<script>
  import { SignatureComponent } from '@syncfusion/ej2-vue-inputs';
  // Component registration
  export default {
    name: "App",
    // Declaring component and its directives
    components: {
      'ejs-signature': SignatureComponent
    },
    // Bound properties declarations
    data() {
      return {
      };
    }
  };
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
#signature {
    border: 1px solid lightgray;
    height: 100%;
    width: 100%;
}

.wrap {
    height: 300px;
    width: 550px;
}
</style>
```

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

### NumericTextBox - Getting Started

Source: https://ej2.syncfusion.com/vue/documentation/numerictextbox/how-to/perform-custom-validation-using-form-validator

Guides on how to get started with the Syncfusion Vue NumericTextBox component, including Vue 3 integration.

```APIDOC
## NumericTextBox - Getting Started

### Description
Instructions and examples for setting up and using the Syncfusion Vue NumericTextBox component in your Vue applications.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A

#### Getting Started with Vue 3
This subsection provides specific guidance for integrating the NumericTextBox with Vue 3 projects, including any necessary setup or configuration steps unique to Vue 3.
```
Tokens:
Raw