The spreadsheet UI cannot be successfully rendered with Vue 3

[Yuki]

Hi, I followed your Getting Started instructions with Vue 3 updated on 09 Mar 2022.

- Vue CLI v4.5.11
- vue-class-component : 8.0.0-rc.1
- [email protected]

and I think that there might be some problems with the Vue 3 version.
The rendered page is like this:

with the sheet below:

And here's the warning:

 warning  in ./node_modules/@syncfusion/ej2-vue-base/src/template.js
"export 'extend' (imported as 'Vue') was not found in 'vue'

I think this might be occurred by the problem that Vue.extend is not supported any more in Vue 3. But this rendering problem seems cannot be solved by simply replacing Vue.extend with Vue.defineComponent, Vue.createApp, or something else. By doing these, the warning won't show up but the rendering remained the same.

This spreadsheet component works well with Vue 2 on my PC.

[Sangeetha Priya Murugan]

 

Hi Yuki, 

 

We have created the sample based on the documentation and the CSS issue occurs in our end. So, we have prepared the sample with below dependent CSS references and the spreadsheet render properly in our end. Please find the link below. 

 

 

<style> 

  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';   

  @import '../node_modules/@syncfusion/ej2-buttons/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-grids/styles/material.css'; 

  @import ../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css; 

</style> 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue3-grid-getting-started-main-1728041865  

 

However, we will consider this and correct our online help documentation site and we will let you know once it is refreshed in live. We appreciate your patience until then. 

 

Regards, 

Sangeetha M 

[Sangeetha Priya Murugan]

Hi Yuki, 

 

We are happy to hear that your issue has been achieved. Kindly get back to us if you need any further assistance. 

 

Regards, 

Sangeetha M 

[Yuki]

Thank you very much for kindly handling this. It works now.