Does not render correctly

[William Morgenweck]

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";

Vue.use(SpreadsheetPlugin);

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');

}

}

});

[Vasanth Ravi]

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.

Regards,

Vasanth R


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

[William Morgenweck]

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.

[Vasanth Ravi]

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

[William Morgenweck]

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

[William Morgenweck]

Here my Quasar Project

Attachment: Catchment_68574045.zip

[Vasanth Ravi]

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.

[William Morgenweck]

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