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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Vue/Nuxt Unexpected token export

Thread ID:

Created:

Updated:

Platform:

Replies:

145589 Jun 29,2019 09:10 PM UTC Jul 6,2019 11:04 AM UTC Vue 3
loading
Tags: DashboardLayout
William
Asked On June 29, 2019 09:10 PM UTC

When I try to import the "DashboardLayoutPlugin" per the Documentation, I get an error of "Syntax Error: Unexpected token export".

As I'm still learning programming, I have no idea even where to start. Google hasn't got me anywhere. I installed the NPM package correctly and the other components seem to be working so far, just not the Dashboard Layout.

Ashokkumar Balasubramanian [Syncfusion]
Replied On July 1, 2019 11:58 AM UTC

Hi William, 
 
Good day to you. 
 
We have checked your reported problem at our end, but unfortunately, we were unable to replicate your reported problem at our end. Could you please check the below sample?  
 
 
We suspect that, you are not following our help documentation to render our Syncfusion components in your application. Could you please follow the below getting started documentation to render our Dashboard Layout component in your application? 
 
 
Still issue persist, please share the below details. 
 
a.       Screenshot or Video of your problem 
b.       Component rendering code block 
c.       Packager version of Syncfusion components 
d.       If possible, share the sample 
 
Regards, 
Ashokkumar B. 


William
Replied On July 5, 2019 08:35 PM UTC

Thanks Ashokkumar. I'm sure I'm doing something wrong on my end. I'll keep playing with it. As I said, I'm learning. Here's the code I'm using:

<template>
<div class="control-section">
<!-- DashboardLayout element declaration -->
<ejs-dashboardlayout
id="dashboard_default"
ref="dashboard"
:cellSpacing="cellSpacing"
:allowResizing="true"
:resizableHandles="resizableHandles"
:columns="6"
:resizeStart="onResizeStart"
:resize="onResize"
:resizeStop="onResizeStop"
>
<e-panels>
<e-panel :sizeX="1" :sizeY="1" :row="0" :col="0" content="<div class='content'>0</div>"></e-panel>
<e-panel :sizeX="3" :sizeY="2" :row="0" :col="1" content="<div class='content'>1</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="3" :row="0" :col="4" content="<div class='content'>2</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="1" :col="0" content="<div class='content'>3</div>"></e-panel>
<e-panel :sizeX="2" :sizeY="1" :row="2" :col="0" content="<div class='content'>4</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="2" :col="2" content="<div class='content'>5</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="2" :col="3" content="<div class='content'>6</div>"></e-panel>
</e-panels>
</ejs-dashboardlayout>
<!-- end of dashboardlayout element -->
</div>
</template>

<script>
import Vue from "vue";
// Import syncfusion dashboardlayout component from layouts package
import { DashboardLayoutPlugin } from "@syncfusion/ej2-vue-layouts";

Vue.use(DashboardLayoutPlugin);

export default {
data: function() {
return {
cellSpacing: [10, 10],
resizableHandles: [
"e-south-east",
"e-east",
"e-west",
"e-north",
"e-south"
]
};
},
methods: {
//Dashboard Layout's resizestart event function
onResizeStart: function(args) {
console.log("Resize Start");
},
//Dashboard Layout's resize event function
onResize: function(args) {
console.log("Resizing");
},
//Dashboard Layout's resizestop event function
onResizeStop: function(args) {
console.log("Resize Stop");
}
}
};
</script>

<style>
/* DashboardLayout element styles */
#dashboard_default .e-panel .e-panel-container .content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 80px;
}
</style>


Ashokkumar Balasubramanian [Syncfusion]
Replied On July 6, 2019 11:04 AM UTC

Hi William, 
 
Thank you for providing the code block. 
 
Based on your provided code block, we have prepared the sample and ensure our Dashboard Layout component at our end, but we were unable to get your reported script error at our end, bur our components styles are not applied properly. You can resolve this problem by referring our component styles in application. Please find the style reference below. 
 
<style> 
@import "../node_modules/@syncfusion/ej2-base/styles/material.css"; 
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css"; 
</style> 
 
 
Could you please let us know, if the provided information’s are helpful to resolve your problem or not? 
 
Regards, 
Ashokkumar B. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon