# Install a Syncfusion component package
npm install @syncfusion/ej2-vue-calendars@latest @syncfusion/ej2-material-theme@latest --save

# Install multiple packages
npm install @syncfusion/ej2-vue-grids@latest @syncfusion/ej2-vue-charts@latest @syncfusion/ej2-material-theme@latest --save

# Windows
setx SYNCFUSION_LICENSE "Your_License_Key_Here"

# Mac/Linux
export SYNCFUSION_LICENSE='Your_License_Key_Here'

npx syncfusion-license activate

<template>
  <div class="app-container">
    <ejs-grid :dataSource="data" :allowPaging="true">
      <e-columns>
        <e-column field='OrderID' width='100'></e-column>
        <e-column field='CustomerID' width='100'></e-column>
        <e-column field='Freight' width='100' format='C2'></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { GridComponent as EjsGrid, ColumnsDirective as EColumns, ColumnDirective as EColumn, Page } from '@syncfusion/ej2-vue-grids';

const data = ref([
  { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
  { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 }
]);

// Provide services
provide('grid', [Page]);
</script>

<style>
/* Import theme CSS */
@import "../node_modules/@syncfusion/ej2-material-theme/styles/grid/index.css";
</style>

<template>
  <ejs-grid id="persistGrid" :dataSource="data" :enablePersistence="true"></ejs-grid>
</template>

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

export default {
  components: { 'ejs-grid': GridComponent },
  data() {
    return {
      data: [{ OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 }]
    };
  }
};
</script>

<template>
  <ejs-grid :dataSource="data" :enableRtl="true"></ejs-grid>
</template>

<script>
import { GridComponent } from '@syncfusion/ej2-vue-grids';
import { enableRtl } from '@syncfusion/ej2-base';

export default {
  components: { 'ejs-grid': GridComponent },
  data() {
    return { data: [{ OrderID: 10248 }] };
  },
  mounted() {
    enableRtl(true);
  }
};
</script>

<template>
  <div>
    <button @click="animateElement">Animate</button>
    <div ref="element">Animated Element</div>
  </div>
</template>

<script>
import { Animation } from '@syncfusion/ej2-base';

export default {
  data() {
    return { animation: null };
  },
  mounted() {
    this.animation = new Animation({ duration: 5000 });
  },
  methods: {
    animateElement() {
      this.animation.animate(this.$refs.element, { name: 'FadeOut' });
    }
  }
};
</script>

<template>
  <div>
    <div ref="draggable">Drag me</div>
    <div ref="droppable">Drop here</div>
  </div>
</template>

<script>
import { Draggable, Droppable } from '@syncfusion/ej2-base';

export default {
  mounted() {
    new Draggable(this.$refs.draggable, { clone: false });
    new Droppable(this.$refs.droppable);
  }
};
</script>