### Complete Getting Started Example (Options API)

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

A complete example demonstrating the setup of the Syncfusion Vue ComboBox component using the Options API.

```html
<template>
    <div id="app">
        <div id='container' style="margin:50px auto 0; width:250px;">
            <br>
            <ejs-combobox id='combobox' :dataSource='sportsData' placeholder='Select a game'></ejs-combobox>
        </div>
    </div>
</template>

<script>
import { ComboBoxComponent } from "@syncfusion/ej2-vue-dropdowns";

export default {
    components: {
        'ejs-combobox': ComboBoxComponent
    },
    data () {
        return {
            sportsData: [
                'Badminton',
                'Cricket',
                'Football',
                'Golf',
                'Tennis'
            ]
        }
    }
}
</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-dropdowns/styles/material.css';
</style>
```

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

### Complete Getting Started Example (Composition API)

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

A complete example demonstrating the setup of the Syncfusion Vue ComboBox component using the Composition API.

```html
<template>
    <div id="app">
        <div id='container' style="margin:50px auto 0; width:250px;">
            <br>
            <ejs-combobox id='combobox' :dataSource='sportsData' placeholder='Select a game'></ejs-combobox>
        </div>
    </div>
</template>

<script setup>
import { ComboBoxComponent as EjsCombobox } from "@syncfusion/ej2-vue-dropdowns";

const sportsData = [
    'Badminton',
    'Cricket',
    'Football',
    'Golf',
    'Tennis'
];
</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-dropdowns/styles/material.css';
</style>
```

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

### Complete Getting Started Example (Options API)

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

A complete example demonstrating the setup of the Vue MultiSelect component using the Options API, including import, registration, template, and data binding.

```html
<template>
    <div class="control_wrapper">
        <ejs-multiselect id='multiselect' :dataSource='sportsData' placeholder="Find a game"></ejs-multiselect>
    </div>
</template>

<script>
import { MultiSelectComponent } from "@syncfusion/ej2-vue-dropdowns";

export default {
  components: {
    'ejs-multiselect': MultiSelectComponent
  },
  data: function() {
    return {
      sportsData: [
        'Badminton',
        'Basketball',
        'Cricket',
        'Football',
        'Golf',
        'Gymnastics',
        'Hockey',
        'Rugby',
        'Snooker',
        'Tennis'
      ]
    };
  }
}
</script>

<style>
#app {
    height: 40px;
}
</style>
```

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

### Complete Getting Started Example (Composition API)

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

A complete example demonstrating the setup of the Vue MultiSelect component using the Composition API, including import, registration, template, and data binding.

```html
<template>
    <div id="app">
        <div id='container' style="margin:50px auto 0; width:250px;">
            <br>
            <ejs-multiselect id='multiselect' :dataSource='sportsData' placeholder="Find a game"></ejs-multiselect>
        </div>
    </div>
</template>

<script setup>
import { MultiSelectComponent as EjsMultiselect } from "@syncfusion/ej2-vue-dropdowns";

const sportsData = [
    'Badminton',
    'Basketball',
    'Cricket',
    'Football',
    'Golf',
    'Gymnastics',
    'Hockey',
    'Rugby',
    'Snooker',
    'Tennis'
];
</script>

<style>
#app {
    height: 40px;
}
</style>
```

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

### Complete Getting Started Example

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

This snippet combines the import, registration, and template structure for a functional Vue Toolbar component. Ensure all necessary components are imported and registered before using them in the template.

```html
<template>
    <div id="app">
    <ejs-toolbar >
    <e-items>
             <e-item text='Cut'></e-item>
             <e-item text='Copy'></e-item>
             <e-item text='Paste'></e-item>
             <e-item type='Separator'></e-item>
             <e-item text='Bold'></e-item>
             <e-item text='Italic'></e-item>
             <e-item text='Underline'></e-item>
          </e-items>
    </ejs-toolbar>
  </div>
</template>

<script>
import { ToolbarComponent, ItemDirective, ItemsDirective } from "@syncfusion/ej2-vue-navigations";

export default {
  components: {
    'ejs-toolbar': ToolbarComponent,
    'e-item': ItemDirective,
    'e-items': ItemsDirective
  }
}
</script>

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

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

### Vue 3D Chart Getting Started Sample

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

A complete example demonstrating the basic setup for the Vue 3D Chart component, including imports, registration, and template definition.

```html
<template>
  <div id="app">
    <ejs-chart3d id="container">
      <e-chart3d-series-collection>
        <e-chart3d-series type="Column"></e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>

<script>
import { 
  Chart3DComponent, 
  Chart3DSeriesCollectionDirective, 
  Chart3DSeriesDirective 
} from '@syncfusion/ej2-vue-charts';

export default {
  components: {
    'ejs-chart3d': Chart3DComponent,
    'e-chart3d-series-collection': Chart3DSeriesCollectionDirective,
    'e-chart3d-series': Chart3DSeriesDirective
  }
}
</script>

<style>
#app {
  margin-left: 30px;
}
</style>
```

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

### Vue Maps Getting Started

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

Basic setup for Vue Maps, demonstrating how to integrate and display map data with legend customization.

```html
<template>
    <div id="app">
        <div class='content-wrapper'>
            <div class="map-content-wrapper">
                <ejs-maps :legendSettings='legendSettings'>
                    <e-layers>
                        <e-layer :url='url' :shapeData='shapeData' :dataSource='dataSource' :shapePropertyPath='shapePropertyPath' :tooltipSettings='tooltipSettings' :dataLabelSettings='dataLabelSettings' :query='query' :shapeTitle='shapeTitle' :colorValuePath='colorValuePath' :legendSettings='layerLegendSettings'></e-layer>
                    </e-layers>
                </ejs-maps>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { MapsModule, DataLabel, Legend, MapsTooltip } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';

Vue.use(MapsModule);

export default {
    data() {
        return {
            legendSettings: {
                visible: true,
                position: 'Bottom',
                orientation: 'Horizontal'
            },
            url: 'https://ej2.syncfusion.com/vue/demos/source/maps/world.json',
            shapeData: world_map,
            dataSource: [
                { 'name': 'India', 'population': 1352617328 }, { 'name': 'United States', 'population': 331893745 },
                { 'name': 'Indonesia', 'population': 273523615 }, { 'name': 'Brazil', 'population': 212559417 },
                { 'name': 'Pakistan', 'population': 212174767 }, { 'name': 'Nigeria', 'population': 206139589 },
                { 'name': 'Bangladesh', 'population': 164669751 }, { 'name': 'Russia', 'population': 145958905 },
                { 'name': 'Mexico', 'population': 128932753 }, { 'name': 'Japan', 'population': 128080000 },
                { 'name': 'Ethiopia', 'population': 114963588 }, { 'name': 'Philippines', 'population': 109581078 },
                { 'name': 'Egypt', 'population': 102334404 }, { 'name': 'Vietnam', 'population': 97338579 },
                { 'name': 'DR Congo', 'population': 89564709 }, { 'name': 'Turkey', 'population': 84339067 },
                { 'name': 'Iran', 'population': 83992949 }, { 'name': 'Germany', 'population': 83783942 },
                { 'name': 'Thailand', 'population': 69799978 }, { 'name': 'United Kingdom', 'population': 67886011 },
                { 'name': 'France', 'population': 65273511 }, { 'name': 'Italy', 'population': 60461826 },
                { 'name': 'Tanzania', 'population': 59734218 }, { 'name': 'South Africa', 'population': 58592956 },
                { 'name': 'Myanmar', 'population': 54409752 }, { 'name': 'Kenya', 'population': 53771296 },
                { 'name': 'South Korea', 'population': 51269185 }, { 'name': 'Colombia', 'population': 50882891 },
                { 'name': 'Spain', 'population': 46754778 }, { 'name': 'Uganda', 'population': 45741007 },
                { 'name': 'Argentina', 'population': 45195774 }, { 'name': 'Algeria', 'population': 43851044 },
                { 'name': 'Sudan', 'population': 43849269 }, { 'name': 'Ukraine', 'population': 43719375 },
                { 'name': 'Iraq', 'population': 40222483 }, { 'name': 'Afghanistan', 'population': 38928346 },
                { 'name': 'Poland', 'population': 37958138 }, { 'name': 'Canada', 'population': 37742154 },
                { 'name': 'Morocco', 'population': 37112529 }, { 'name': 'Saudi Arabia', 'population': 34261293 },
                { 'name': 'Uzbekistan', 'population': 33469209 }, { 'name': 'Peru', 'population': 32971854 },
                { 'name': 'Malaysia', 'population': 32365999 }, { 'name': 'Angola', 'population': 30809762 },
                { 'name': 'Ghana', 'population': 30019880 }, { 'name': 'Yemen', 'population': 29161978 },
                { 'name': 'Mozambique', 'population': 30132451 }, { 'name': 'Nepal', 'population': 29136808 },
                { 'name': 'Venezuela', 'population': 28765400 }, { 'name': 'Madagascar', 'population': 27690741 },
                { 'name': 'Cameroon', 'population': 27690741 }, { 'name': 'Côte d\'Ivoire', 'population': 26388214 },
                { 'name': 'North Korea', 'population': 25778816 }, { 'name': 'Australia', 'population': 25499884 },
                { 'name': 'Niger', 'population': 24204943 }, { 'name': 'Taiwan', 'population': 23804752 },
                { 'name': 'Netherlands', 'population': 17590672 }, { 'name': 'Chad', 'population': 16926839 },
                { 'name': 'Ecuador', 'population': 17590672 }, { 'name': 'Guatemala', 'population': 17352192 },
                { 'name': 'Somalia', 'population': 17343729 }, { 'name': 'Romania', 'population': 19453177 },
                { 'name': 'Chile', 'population': 19107870 }, { 'name': 'Kazakhstan', 'population': 18771000 },
                { 'name': 'Malawi', 'population': 18379848 }, { 'name': 'Syria', 'population': 17570515 },
                { 'name': 'Portugal', 'population': 10270865 }, { 'name': 'Sweden', 'population': 10352475 },
                { 'name': 'Hungary', 'population': 9772341 }, { 'name': 'Belarus', 'population': 9460843 },
                { 'name': 'Honduras', 'population': 9877703 }, { 'name': 'Austria', 'population': 8917205 },
                { 'name': 'Papua New Guinea', 'population': 8917205 }, { 'name': 'Serbia', 'population': 8790510 },
                { 'name': 'Jordan', 'population': 9905549 }, { 'name': 'United Arab Emirates', 'population': 9819438 },
                { 'name': 'Tajikistan', 'population': 9777114 }, { 'name': 'Israel', 'population': 8650170 },
                { 'name': 'Togo', 'population': 8184187 }, { 'name': 'Switzerland', 'population': 8608540 },
                { 'name': 'Sierra Leone', 'population': 7976987 }, { 'name': 'Hong Kong', 'population': 7450786 },
                { 'name': 'Laos', 'population': 7275560 }, { 'name': 'Paraguay', 'population': 6861524 },
                { 'name': 'Libya', 'population': 6812330 }, { 'name': 'Bulgaria', 'population': 6979175 },
                { 'name': 'Lebanon', 'population': 5987026 }, { 'name': 'Nicaragua', 'population': 6624548 },
                { 'name': 'Kyrgyzstan', 'population': 6302400 }, { 'name': 'El Salvador', 'population': 6500000 },
                { 'name': 'Turkmenistan', 'population': 6031587 }, { 'name': 'Singapore', 'population': 5703569 },
                { 'name': 'Denmark', 'population': 5792939 }, { 'name': 'Finland', 'population': 5518000 },
                { 'name': 'Slovakia', 'population': 5450000 }, { 'name': 'Norway', 'population': 5379475 },
                { 'name': 'Oman', 'population': 4974941 }, { 'name': 'State of Palestine', 'population': 4974941 },
                { 'name': 'Costa Rica', 'population': 5091884 }, { 'name': 'Ireland', 'population': 4976000 },
                { 'name': 'Central African Republic', 'population': 4976000 }, { 'name': 'New Zealand', 'population': 4976000 },
                { 'name': 'Liberia', 'population': 5100000 }, { 'name': 'Panama', 'population': 4100000 },
                { 'name': 'Kuwait', 'population': 4100000 }, { 'name': 'Croatia', 'population': 4100000 },
                { 'name': 'Georgia', 'population': 3900000 }, { 'name': 'Uruguay', 'population': 3400000 },
                { 'name': 'Moldova', 'population': 2900000 }, { 'name': 'Mongolia', 'population': 3200000 },
                { 'name': 'Lithuania', 'population': 2900000 }, { 'name': 'Albania', 'population': 2900000 },
                { 'name': 'Jamaica', 'population': 2800000 }, { 'name': 'Armenia', 'population': 2900000 },
                { 'name': 'Qatar', 'population': 2700000 }, { 'name': 'Botswana', 'population': 2400000 },
                { 'name': 'Namibia', 'population': 2400000 }, { 'name': 'Gambia', 'population': 2400000 },
                { 'name': 'Gabon', 'population': 2200000 }, { 'name': 'Lesotho', 'population': 2200000 },
                { 'name': 'North Macedonia', 'population': 2100000 }, { 'name': 'Slovenia', 'population': 2100000 },
                { 'name': 'Guinea-Bissau', 'population': 1900000 }, { 'name': 'Latvia', 'population': 1900000 },
                { 'name': 'Bahrain', 'population': 1600000 }, { 'name': 'Trinidad and Tobago', 'population': 1400000 },
                { 'name': 'Estonia', 'population': 1300000 }, { 'name': 'Timor-Leste', 'population': 1300000 },
                { 'name': 'Mauritius', 'population': 1300000 }, { 'name': 'Cyprus', 'population': 1200000 },
                { 'name': 'Eswatini', 'population': 1200000 }, { 'name': 'Fiji', 'population': 900000 },
                { 'name': 'Djibouti', 'population': 900000 }, { 'name': 'Comoros', 'population': 800000 },
                { 'name': 'Guyana', 'population': 800000 }, { 'name': 'Bhutan', 'population': 790000 },
                { 'name': 'Solomon Islands', 'population': 650000 }, { 'name': 'Montenegro', 'population': 620000 },
                { 'name': 'Luxembourg', 'population': 600000 }, { 'name': 'Suriname', 'population': 590000 },
                { 'name': 'Cabo Verde', 'population': 550000 }, { 'name': 'Malta', 'population': 510000 },
                { 'name': 'Brunei', 'population': 440000 }, { 'name': 'Belize', 'population': 400000 },
                { 'name': 'Bahamas', 'population': 400000 }, { 'name': 'Iceland', 'population': 350000 },
                { 'name': 'Vanuatu', 'population': 300000 }, { 'name': 'Barbados', 'population': 280000 },
                { 'name': 'Sao Tome and Principe', 'population': 210000 }, { 'name': 'Samoa', 'population': 200000 },
                { 'name': 'Saint Lucia', 'population': 180000 }, { 'name': 'Kiribati', 'population': 120000 },
                { 'name': 'Grenada', 'population': 110000 }, { 'name': 'Saint Vincent and the Grenadines', 'population': 110000 },
                { 'name': 'Tonga', 'population': 100000 }, { 'name': 'Federated States of Micronesia', 'population': 100000 },
                { 'name': 'Antigua and Barbuda', 'population': 94000 }, { 'name': 'Seychelles', 'population': 94000 },
                { 'name': 'Andorra', 'population': 77000 }, { 'name': 'Saint Kitts and Nevis', 'population': 50000 },
                { 'name': 'Marshall Islands', 'population': 50000 }, { 'name': 'Monaco', 'population': 38000 },
                { 'name': 'Liechtenstein', 'population': 38000 }, { 'name': 'San Marino', 'population': 34000 },
                { 'name': 'Palau', 'population': 18000 }, { 'name': 'Tuvalu', 'population': 11000 },
                { 'name': 'Nauru', 'population': 11000 }, { 'name': 'Niue', 'population': 1600 },
                { 'name': 'Cook Islands', 'population': 17000 }
            ],
            shapePropertyPath: 'name',
            colorValuePath: 'population',
            tooltipSettings: {
                visible: true
            },
            dataLabelSettings: {
                visible: true,
                fontColor: 'white'
            },
            query: 'லக',
            shapeTitle: 'Population',
            layerLegendSettings: {
                visible: true
            }
        };
    },
    provide: {
        maps: [DataLabel, Legend, MapsTooltip]
    }
};
</script>

<style>
.map-content-wrapper {
    width: 800px;
    height: 500px;
}
</style>
```

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

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

```

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

### Complete App Setup (Options API)

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

A complete example of setting up the Vue Sidebar component using the Options API, including script and template sections.

```html
<template>
    <div id="app">
        <ejs-sidebar>
              <div class="title"> Sidebar content</div>
        </ejs-sidebar>
  </div>
</template>

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

export default {
    components: {
        'ejs-sidebar': SidebarComponent
    }
}
</script>

<style>
#app {
    position: relative;
    min-height: 300px;
    margin-left: 20%;
}
</style>
```

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

### Vue Breadcrumb Component - Getting Started

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

This is a summarized code example for setting up the Vue Breadcrumb component in App.vue. It includes both the script and template sections for a complete setup.

```html
<script>
import { BreadcrumbComponent } from "@syncfusion/ej2-vue-navigations";

export default {
   components:{
    'ejs-breadcrumb': BreadcrumbComponent
   }
}
</script>

<template>
<div>
<ejs-breadcrumb :enableNavigation='false'></ejs-breadcrumb>
</div>
</template>
```

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

### Summarized AutoComplete Setup (Options API)

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

A complete example demonstrating the setup of the Vue AutoComplete component using the Options API, including import, registration, and data binding.

```html
<!-- app.vue -->
<template>
    <div id="app">
        <ejs-autocomplete id='atcomp' :dataSource='sportsData' :placeholder='waterMark' ></ejs-autocomplete>
    </div>
</template>

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

export default {
    components: {
        'ejs-autocomplete': AutoCompleteComponent
    },
    name: 'app',
    data () {
        return {
            waterMark : 'e.g. Basketball',
            sportsData: [
                'American Football', 'Badminton', 'Basketball', 'Cricket',
                'Football', 'Golf', 'Gymnastics',
                'Hockey', 'Rugby', 'Snooker', 'Tennis'
            ]
        }
    }
}
</script>
<style>
#app {
    color: red;
}
</style>
```

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

### Complete App Setup (Composition API)

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

A complete example of setting up the Vue Sidebar component using the Composition API, including script and template sections.

```html
<template>
    <div id="app">
        <ejs-sidebar>
              <div class="title"> Sidebar content</div>
        </ejs-sidebar>
  </div>
</template>

<script setup>
import { SidebarComponent as EjsSidebar } from '@syncfusion/ej2-vue-navigations';
</script>

<style>
#app {
    position: relative;
    min-height: 300px;
    margin-left: 20%;
}
</style>
```

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

### Vue Range Navigator Getting Started with Options API

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/range-navigator/selecting-range.md

Demonstrates how to get started with the Vue Range Navigator component using the Options API. This snippet shows the basic setup for selecting a range.

```Vue
<template>
    <div id="app">
        <div class="col-lg-12 control-section">
            <div class="content-wrapper">
                <ejs-rangenavigator>
                    <e-rangenavigator-series-collection>
                        <e-rangenavigator-series type="Line" xName="x" yName="y" width="2"></e-rangenavigator-series>
                    </e-rangenavigator-series-collection>
                </ejs-rangenavigator>
            </div>
        </div>
    </div>
</template>
<script>
import {
    RangeNavigatorComponent as EjsRangenavigator,
    RangenavigatorSeriesCollectionDirective as ERangenavigatorSeriesCollection,
    RangenavigatorSeriesDirective as ERangenavigatorSeries
} from "@syncfusion/ej2-vue-charts";

export default {
    name: "App",
    components: {
        "ejs-rangenavigator": EjsRangenavigator,
        "e-rangenavigator-series-collection": ERangenavigatorSeriesCollection,
        "e-rangenavigator-series": ERangenavigatorSeries
    },
    data: function() {
        return {
            data: [
                { x: 1900, y: 1000 },
                { x: 1910, y: 1170 },
                { x: 1920, y: 1370 },
                { x: 1930, y: 1570 },
                { x: 1940, y: 1770 },
                { x: 1950, y: 1970 },
                { x: 1960, y: 2170 },
                { x: 1970, y: 2370 },
                { x: 1980, y: 2570 },
                { x: 1990, y: 2770 }
            ]
        };
    },
    provide: {
        rangeNavigator: []
    }
};
</script>
<style>
#app {
    height: 450px;
    width: 90%;
    margin: 0 auto;
    padding: 0;
}
.content-wrapper {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}
</style>
```

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

### Vue Range Navigator Getting Started with Composition API

Source: https://github.com/syncfusion-content/ej2-vue-docs/blob/development/ej2-vue/range-navigator/selecting-range.md

Demonstrates how to get started with the Vue Range Navigator component using the Composition API. This snippet shows the basic setup for selecting a range.

```Vue
<template>
    <div id="app">
        <div class="col-lg-12 control-section">
            <div class="content-wrapper">
                <ejs-rangenavigator>
                    <e-rangenavigator-series-collection>
                        <e-rangenavigator-series type="Line" xName="x" yName="y" width="2"></e-rangenavigator-series>
                    </e-rangenavigator-series-collection>
                </ejs-rangenavigator>
            </div>
        </div>
    </div>
</template>
<script setup>
import { provide } from 'vue';
import {
    RangeNavigatorComponent as EjsRangenavigator,
    RangenavigatorSeriesCollectionDirective as ERangenavigatorSeriesCollection,
    RangenavigatorSeriesDirective as ERangenavigatorSeries
} from "@syncfusion/ej2-vue-charts";

const data = [
    { x: 1900, y: 1000 },
    { x: 1910, y: 1170 },
    { x: 1920, y: 1370 },
    { x: 1930, y: 1570 },
    { x: 1940, y: 1770 },
    { x: 1950, y: 1970 },
    { x: 1960, y: 2170 },
    { x: 1970, y: 2370 },
    { x: 1980, y: 2570 },
    { x: 1990, y: 2770 }
];

provide('rangeNavigator', {});

</script>
<style>
#app {
    height: 450px;
    width: 90%;
    margin: 0 auto;
    padding: 0;
}
.content-wrapper {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}
</style>
```

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

### Complete Vue 3 Tooltip Setup (Options API)

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

A full example demonstrating the setup of the Vue Tooltip component using Options API, including template, script, and styles.

```html
<template>
  <div id="app">
    <ejs-tooltip content='Tooltip content' target="#target">
        <div style="display: inline-block; position: relative; left: 50%;top: 100px;transform: translateX(-50%);">
          <button id='target' class="e-control e-btn e-lib">Show Tooltip</button>
      </div>
    </ejs-tooltip>
  </div>
</template>

<script>
import { TooltipComponent  } from "@syncfusion/ej2-vue-popups";
//Component registration
export default {
  name: "App",
  components: {
    "ejs-tooltip": TooltipComponent
  },
  data() {
    return {
    };
  },
}
</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-vue-popups/styles/material3.css";
 </style>
```

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

### Vue Card Component - Getting Started Snippet

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

This is a summarized code example for setting up the Card component in your Vue application.

```html
<template>
    <div id="app">
        <div class="e-card">
            <div class="e-card-header">
                <div class="e-card-header-caption">
                    <div class="e-card-header-title">Card Title</div>
                </div>
            </div>
            <div class="e-card-content">
                Card Content
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'App'
};
</script>

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

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

### Complete Kanban Setup (Composition API)

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

A complete example of the App.vue file using Composition API, including template, imports, data, and card settings.

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

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

### Summarized AutoComplete Setup (Composition API)

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

A complete example demonstrating the setup of the Vue AutoComplete component using the Composition API, including import, registration, and data binding.

```html
<!-- app-composition.vue -->
<template>
    <div id="app">
        <ejs-autocomplete id='atcomp' :dataSource='sportsData' :placeholder='waterMark' ></ejs-autocomplete>
    </div>
</template>

<script setup>
import { AutoCompleteComponent as EjsAutocomplete } from '@syncfusion/ej2-vue-dropdowns';

const waterMark = 'e.g. Basketball';
const sportsData = [
    'American Football', 'Badminton', 'Basketball', 'Cricket',
    'Football', 'Golf', 'Gymnastics',
    'Hockey', 'Rugby', 'Snooker', 'Tennis'
];

</script>
<style>
#app {
    color: red;
}
</style>
```

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

### Clone SharePoint File Provider Example

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

Clone the sample project for the SharePoint ASP.NET Core file provider from GitHub to get started.

```bash
git clone https://github.com/SyncfusionExamples/sharepoint-aspcore-file-provider  sharepoint-aspcore-file-provider

cd sharepoint-aspcore-file-provider
```

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

### Complete Vue 3 Tooltip Setup (Composition API)

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

A full example demonstrating the setup of the Vue Tooltip component using Composition API, including template, script, and styles.

```html
<template>
  <div id="app">
    <ejs-tooltip content='Tooltip content' target="#target">
        <div style="display: inline-block; position: relative; left: 50%;top: 100px;transform: translateX(-50%);">
          <button id='target' class="e-control e-btn e-lib">Show Tooltip</button>
      </div>
    </ejs-tooltip>
  </div>
</template>

<script setup>
  import { TooltipComponent as EjsTooltip  } from "@syncfusion/ej2-vue-popups";
</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-vue-popups/styles/material3.css";
</style>
```

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

### Summarized Vue Splitter Getting Started Example

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

This is a summarized version of the App.vue file, combining the import, registration, and template definition for the Vue Splitter component.

```html
<template>
<div id="app" class="col-lg-12 control-section default-splitter">
    <ejs-splitter id='default-splitter' height='250px'>
        <e-panes>
            <e-pane content='Left Pane'></e-pane>
            <e-pane content='Middle Pane'></e-pane>
            <e-pane content='Right Pane'></e-pane>
        </e-panes>
    </ejs-splitter>
</div>
</template>

<script>
import { SplitterComponent, PanesDirective, PaneDirective } from '@syncfusion/ej2-vue-layouts';

export default {
  components: {
    'ejs-splitter': SplitterComponent,
    'e-pane': PaneDirective,
    'e-panes': PanesDirective
  },
  name: 'app',
  data () {
    return {
    }
  }
}
</script>

<style>

</style>
```

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

### Complete Vue App Setup (Options API)

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

A complete example of setting up the Vue Calendar component using Options API, including template, script, and styles.

```html
<template>
    <div class="control_wrapper">
        <ejs-calendar></ejs-calendar>
    </div>
</template>
<script>
import { CalendarComponent } from "@syncfusion/ej2-vue-calendars";
//Component registeration
export default {
    name: 'App',
    components: {
        "ejs-calendar": CalendarComponent
    }
}
</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-vue-calendars/styles/material3.css";
  .control_wrapper {
    max-width: 250px;
    margin: 0 auto;
  }
</style>
```

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

### Install Vue CLI and Create a Vue 2 Project

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

Use npm or yarn to install Vue CLI globally, create a new Vue 2 project named 'quickstart', navigate into the project directory, and start the development server.

```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 App.vue Example (Options API)

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

A full example of the `App.vue` file using the Options API, including component registration, template definition, and necessary Syncfusion Tailwind CSS imports.

```html
<template>
    <div class="control_wrapper">
        <ejs-aiassistview></ejs-aiassistview>
    </div>
</template>
<script>
    import { AIAssistViewComponent } from "@syncfusion/ej2-vue-interactive-chat";
    //Component registeration
    export default {
        name: "App",
        components: {
            'ejs-aiassistview': AIAssistViewComponent
        }, 
        data () {
            return {
            }
        }
    }
</script>
<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
    @import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
    @import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
    @import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css";
    @import "../node_modules/@syncfusion/ej2-interactive-chat/styles/tailwind3.css";
</style>
```

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

### Vue ListBox Getting Started with Composition API

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

This snippet demonstrates how to use the Vue ListBox component with the Composition API. It includes basic setup and usage for the ListBox.

```html
<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-listbox :dataSource='data' :fields='fields' :allowDragAndDrop='true'></ejs-listbox>
        </div>
    </div>
</template>

<script setup>
import { provide } from 'vue';
import { ListBoxComponent as EjsListbox } from "@syncfusion/ej2-vue-dropdowns";

const data = [
    { id: '1', text: 'Andrew', html: '<b>Andrew</b>' },
    { id: '2', text: 'Nancy', html: '<b>Nancy</b>' },
    { id: '3', text: 'Janet', html: '<b>Janet</b>' },
    { id: '4', text: 'Margaret', html: '<b>Margaret</b>' },
    { id: '5', text: 'Steven', html: '<b>Steven</b>' },
    { id: '6', text: 'Michael', html: '<b>Michael</b>' },
    { id: '7', text: 'Laura', html: '<b>Laura</b>' },
    { id: '8', text: 'Robert', html: '<b>Robert</b>' },
    { id: '9', text: 'Lavinia', html: '<b>Lavinia</b>' },
    { id: '10', text: 'Edwyn', html: '<b>Edwyn</b>' }
];
const fields = { text: 'text' };

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

<style>
#app {
    color: #232f3e;
    font-family: "Segoe UI";
    height: 300px;
    width: 250px;
    margin: 30px auto;
    border: 1px solid #ccc;
    padding: 10px;
}

.wrapper {
    min-height: 230px;
}
</style>
```

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

### Install Vue CLI and Create a Vue 2 Project using Yarn

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

Use Yarn to install Vue CLI globally, create a new Vue 2 project named 'quickstart', navigate into the project directory, and start the development server.

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