How to handle refs efficiently in Vue 3 composition API

[Ryan Sereno]

The syncfusion components are heavily reliant on the options api and this.$refs, this.grid, etc.
In the vue composition api, this seems to require quite verbose code and is difficult to implement.
All of the syncfusion documentation focuses exclusively on the options api.

For example, in the Sidebar component, if I want to toggle open/ close, the ref doesn't contain the necessary toggle/hide/show functions, I believe because the ref is declared prior to mounting.
onMount may solve this issue? but creates quite verbose components, especially if multiple DOM references are made to the syncfusion component.

What is the recommended approach to use syncfusion components in the vue 3 composition api?

<script setup>
const sidebar = ref(null)
function toggleSidebar() {
    sidebar.toggle()
}
</script>

[LeoLavanya Dhanaraj]

Hi Rynan,

Greetings from Syncfusion support.

Based on your request, we have evaluated your reported scenario and would like to convey that you intend to utilize the composition API in your Vue 3 application. We have created a simple Vue 3 Sidebar application and have attached a code sample for using the ref tag in a Vue3 application with the composition API and Vite for your reference. Refer to the code snippet and attached sample for your reference.

[sidebar.vue]

const sidebar = ref(null);

 

const toggleClick = () => {

    sidebar.value.toggle();

};

const closeClick = () => {

    sidebar.value.hide();

};

Please get back to us if you need further assistance.

Regards,

Leo Lavanya Dhanaraj

Attachment: viteprojectref_8de41c01_64f8321f.zip