Syncfusion Vue Components are Compatible with Version 2.7
Tags: vue, webdev, whatsnew, development
Published: 2022-10-17 04:32:38

---
title: Syncfusion Vue Components are Compatible with Version 2.7
published: true
date: 2022-10-13 10:45:08 UTC
tags: vue, webdev, whatsnew, development
canonical_url: https://www.syncfusion.com/blogs/post/syncfusion-vue-components-are-compatible-with-version-2-7.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vh89lmcziggn6auvdi2g.png
---

Many users want to stay on Vue 2 due to dependency compatibility, browser support requirements, and deficiency in bandwidth to upgrade to Vue 3 since it is the default version.

Vue.js released [Vue 2.7](https://blog.vuejs.org/posts/vue-2-7-naruto.html "Vue 2.7 Naruto Released") on July 1, 2022, which backported some of the most important features from Vue 3, allowing Vue 2 users to also use them.

[Syncfusion](https://www.syncfusion.com "Syncfusion UI Components") always keeps up with the latest platform and framework releases, and we are very happy to announce that [Syncfusion Vue components](https://www.syncfusion.com/vue-components "Vue Components") are now compatible with Vue 2.7 starting with the [Essential Studio 2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3") release.

**Note:** Syncfusion Vue components also support the latest version of Vue 3.

First, let’s see the backported features added in Vue 2.7 from version 3.

## Backported features

### Composition API

Composition API is the alternative to Options API with less code. Use it as an imported function. Refer to the [Composition API in Vue documentation](https://vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api "Composition API in Vue documentation") for more details.

### SFC script setup

Script setup helps us to define variables, and you can use it without having any default or named exports in a single-file component (SFC). Refer to the [script setup documentation](https://vuejs.org/api/sfc-script-setup.html "Script SetUp in Vue documentation") for more details.

### SFC CSS v-bind

This allows us to use any of the data variables, properties, or computed properties directly in the style section of a single-file component (SFC). Refer to the [CSS v-bind documentation](https://vuejs.org/api/sfc-css-features.html#v-bind-in-css "CSS V-Bind documentation") for more details.

**Note:** The **vue-template-compiler dependency** is no longer needed in Vue 2.7. Refer to the [Vue documentation](https://blog.vuejs.org/posts/vue-2-7-naruto.html "Vue documentation") to know more.

## Syncfusion Vue components

Syncfusion [Vue components](https://www.syncfusion.com/vue-components "Vue UI Components") are now compatible with Vue 2.7, so we can use them in Vue 2.7 applications and make use of their features without any issues.

Refer to the [getting started](https://ej2.syncfusion.com/vue/documentation/introduction/ "Getting Started Vue UI components documentation") documentation to know more about how to add the Syncfusion components to your apps.

Refer to the following code example. Here, we have rendered the Syncfusion [Vue Button](https://www.syncfusion.com/vue-components/vue-button "Vue Button") and [Data Grid](https://www.syncfusion.com/vue-components/vue-grid "Vue Data Grid") components with Vue 2.7 features using the **script setup** concept.

We have changed the Data Grid border while clicking the toggle button by using the CSS v-bind and Composition API concepts.

```js
<template>
 <div id="app">
   Change the border color of Grid: <ejs-button cssClass="e-primary" v-on:click.native="changeColor">Toggle
   </ejs-button>
   <div>
    <ejs-grid :dataSource="data" cssClass="custom">
     <e-columns>
      <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
      <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column>
      <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column>
      <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>
      <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'></e-column>
      <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
     </e-columns>
    </ejs-grid>
   </div>
 </div>
</template>
 
<script setup>
 import Vue, { ref } from 'vue';
 import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
 import { GridPlugin } from '@syncfusion/ej2-vue-grids';
 import { enableRipple } from '@syncfusion/ej2-base';
 
 enableRipple(true);
 Vue.use(GridPlugin);
 Vue.use(ButtonPlugin);
 
 let color = ref('blue');
 let data = [
 {
   "OrderID": 10248,
   "CustomerID": "VINET",
   "CustomerName": "Maria",
   "OrderDate": new Date("7/4/1996"),
   "ShippedDate": new Date("7/16/1996"),
   "Freight": 32.38,
   "ShipName": "Vins et alcools Chevalier",
   "ShipAddress": "59 rue de l'Abbaye",
   "ShipCity": "Reims",
   "ShipRegion": null,
   "ShipCountry": "France",
   "Verified": true
 },
 {
   "OrderID": 10249,
   "CustomerID": "TOMSP",
   "CustomerName": "Ana Trujillo",
   "OrderDate": new Date("7/5/1996"),
   "ShippedDate": new Date("7/10/1996"),
   "Freight": 11.61,
   "ShipName": "Toms Spezialitäten",
   "ShipAddress": "Luisenstr. 48",
   "ShipCity": "Münster",
   "ShipRegion": null,
   "ShipCountry": "Germany"
 },
 {
   "OrderID": 10250,
   "CustomerID": "HANAR",
   "CustomerName": "Antonio Moreno",
   "OrderDate": new Date("7/8/1996"),
   "ShippedDate": new Date("7/12/1996"),
   "Freight": 65.83,
   "ShipName": "Hanari Carnes",
   "ShipAddress": "Rua do Paço, 67",
   "ShipCity": "Rio de Janeiro",
   "ShipRegion": "RJ",
   "ShipCountry": "Brazil",
   "Verified": true
 },
 {
   "OrderID": 10251,
   "CustomerID": "VICTE",
   "CustomerName": "Thomas Hardy",
   "OrderDate": new Date("7/8/1996"),
   "ShippedDate": new Date("7/15/1996"),
   "Freight": 41.34,
   "ShipName": "Victuailles en stock",
   "ShipAddress": "2, rue du Commerce",
   "ShipCity": "Lyon",
   "ShipRegion": null,
   "ShipCountry": "France",
   "Verified": true
 },
 {
   "OrderID": 10252,
   "CustomerID": "SUPRD",
   "CustomerName": "Christina Berglund",
   "OrderDate": new Date("7/9/1996"),
   "ShippedDate": new Date("7/11/1996"),
   "Freight": 51.3,
   "ShipName": "Suprêmes délices",
   "ShipAddress": "Boulevard Tirou, 255",
   "ShipCity": "Charleroi",
   "ShipRegion": null,
   "ShipCountry": "Belgium"
 },
 {
   "OrderID": 10253,
   "CustomerID": "HANAR",
   "CustomerName": "Hanna Moos",
   "OrderDate": new Date("7/10/1996"),
   "ShippedDate": new Date("7/16/1996"),
   "Freight": 58.17,
   "ShipName": "Hanari Carnes",
   "ShipAddress": "Rua do Paço, 67",
   "ShipCity": "Rio de Janeiro",
   "ShipRegion": "RJ",
   "ShipCountry": "Brazil",
   "Verified": true
 },
 {
   "OrderID": 10254,
   "CustomerID": "CHOPS",
   "CustomerName": "Frédérique Citeaux",
   "OrderDate": new Date("7/11/1996"),
   "ShippedDate": new Date("7/23/1996"),
   "Freight": 22.98,
   "ShipName": "Chop-suey Chinese",
   "ShipAddress": "Hauptstr. 31",
   "ShipCity": "Bern",
   "ShipRegion": null,
   "ShipCountry": "Switzerland",
   "Verified": true
 },
 {
   "OrderID": 10255,
   "CustomerID": "RICSU",
   "CustomerName": "Martín Sommer",
   "OrderDate": new Date("7/12/1996"),
   "ShippedDate": new Date("7/15/1996"),
   "Freight": 148.33,
   "ShipName": "Richter Supermarkt",
   "ShipAddress": "Starenweg 5",
   "ShipCity": "Genève",
   "ShipRegion": null,
   "ShipCountry": "Switzerland"
 },
 {
   "OrderID": 10256,
   "CustomerID": "WELLI",
   "CustomerName": "Laurence Lebihan",
   "OrderDate": new Date("7/15/1996"),
   "ShippedDate": new Date("7/17/1996"),
   "Freight": 13.97,
   "ShipName": "Wellington Importadora",
   "ShipAddress": "Rua do Mercado, 12",
   "ShipCity": "Resende",
   "ShipRegion": "SP",
   "ShipCountry": "Brazil"
 },
 {
   "OrderID": 10257,
   "CustomerID": "HILAA",
   "CustomerName": "Elizabeth Lincoln",
   "OrderDate": new Date("7/16/1996"),
   "ShippedDate": new Date("7/22/1996"),
   "Freight": 81.91,
   "ShipName": "HILARION-Abastos",
   "ShipAddress": "Carrera 22 con Ave. Carlos Soublette #8-35",
   "ShipCity": "San Cristóbal",
   "ShipRegion": "Táchira",
   "ShipCountry": "Venezuela"
 }
];
 
function changeColor() {
  color.value = color.value == 'blue' ? 'green' : 'blue';
}
</script>
 
<style>
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
 
 .custom {
   margin: 10px 0;
   overflow: auto;
   border: 1px solid;
   border-color: v-bind(color);
 }
</style>
```

After executing the above code example, we will get the output shown in the following image.

![Result of the above code](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Result-of-the-above-code.png)

## Conclusion

Thanks for reading! Refer to our [Vue 2.7 demos](https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue_2.7144973909.zip "Vue 2.7 Demos") for more details.

Also, we hope you’ll check out the other updates in [Essential Studio 2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3") on our [Release Notes ](https://help.syncfusion.com/common/essential-studio/release-notes/v20.3.0.47 "Syncfusion Essential Studio Release Notes")and [What’s New](https://www.syncfusion.com/products/whatsnew "Syncfusion Essential Studio What's New") pages.

For existing customers, the new version of Essential Studio is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out our available features.

Also, you can reach us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/?_gl=1*e5jbcr*_ga*MTc0OTQ0NjYwNi4xNjU3ODgyMjE1*_ga_WC4JKKPHH0*MTY2NTM2ODQ5NC4zMjQuMS4xNjY1MzY5MDkxLjAuMC4w "Syncfusion Support Portal"), and [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

### **Related blogs**

- [Syncfusion Essential Studio 2022 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-3-is-here.aspx "Blog: Syncfusion Essential Studio 2022 Volume 3 Is Here!")
- [Vue Composition API vs. React Hooks](https://www.syncfusion.com/blogs/post/vue-composition-api-vs-react-hooks.aspx "Blog: Vue Composition API vs. React Hooks")
- [Can the Composition API Replace Vue Mixins?](https://www.syncfusion.com/blogs/post/can-the-composition-api-replace-vue-mixins.aspx "Blog: Can the Composition API Replace Vue Mixins?")
- [Introducing Slot Template Support for Syncfusion Vue Components](https://www.syncfusion.com/blogs/post/introducing-slot-template-support-for-syncfusion-vue-components.aspx "Blog: Introducing Slot Template Support for Syncfusion Vue Components")