We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Does not render correctly

I've created a new project using Quasar and have added a chart which works fine. I feeling that I'm missing some type of install because I get. I don't get any errors on compile.

and my code is from your sample

import Vue from "vue";

import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

//import * as dataSource from "./default-data.json";


export default Vue.extend({

data: () => {

return {

dataSource: dataSource.defaultData,

rowIndex: 30,

colIndex: 4,

cells: [

{ index: 4, value: 'Total Amount:', style: { fontWeight: 'bold', textAlign: 'right' } },

{ formula: '=SUM(F2:F30)', style: { fontWeight: 'bold' } },


width1: 180,

width2: 130,

width3: 120,

openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',

saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save'



methods: {

created: function() {

var spreadsheet = this.$refs.spreadsheet;

spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');

spreadsheet.numberFormat('$#,##0.00', 'F2:F31');




7 Replies 1 reply marked as answer

VR Vasanth Ravi Syncfusion Team November 22, 2022 01:05 PM

Hi William,

We have prepared a runnable sample and attached below. Please refer to it. The issue may arise due to improper referral <style> and importable packages. We strongly recommend you use DOCTYPE in index.html and proper <style> reference in App.vue as mentioned in sample.

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/178983_VueSample-1613081622

Please do refer to the attached image for reference.

Get back to us if you need further assistance regarding.


Vasanth R

Note: If this post is helpful, please mark it as an answer so that other members can locate it more quickly.

WM William Morgenweck November 23, 2022 01:11 PM

On your sample I opened in Visual Studio Code and did Yarn install. Went I went to run I got "Cannot find module 'autoprefixer'" I then deleted and and extracted again and did npm install this time I get the same error of "Cannot find module 'autoprefixer'" plus ERROR in Conflict: Multiple assets emit different content to the same filename index.html webpack compiled with 2 errors

That being said I took out all of my code and put your code into my QUASAR 1.0 Project and put the

in the index.template.html and confirmed in the app.vue:

Both were there. So I have none of my original code and I get 100% the same thing.

VR Vasanth Ravi Syncfusion Team November 24, 2022 10:25 AM

The previously shared sample is working fine at our end. We hereby attach a video for your reference. We suspect that, issue may arise due to any cache files available on your system. We recommend you clear the npm cache  and browser cache from your system and then check the reported query once.

If your issue still gets replicated, kindly replicate it on the attached sample or provide the issue's replicable sample for further validation.

Video Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/178983_Video_Attachment-1123563616

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/178983_VueSample-1613081622

WM William Morgenweck November 29, 2022 08:35 AM

How can I send you my Quasar project?  I still have the same problem

WM William Morgenweck November 30, 2022 01:54 PM

Here my Quasar Project

Attachment: Catchment_68574045.zip

VR Vasanth Ravi Syncfusion Team December 1, 2022 08:40 PM

William, we have checked your provided sample and figured out the issue. The issue was due to - not importing the CSS properties to the spreadsheet. We have imported the CSS property and checked. The sample works fine. We have attached the sample and screenshot for your kind reference.

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample_Vue-953054825

Get back to us if you need further assistance regarding.

Note: If this post is helpful, please mark it as an answer so that other members can locate it more quickly.

Marked as answer

WM William Morgenweck December 2, 2022 07:08 AM

I feel so stupid-- obviously I missed the most important  css

Live Chat Icon For mobile
Up arrow icon