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

Vue/Nuxt Unexpected token export

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.

3 Replies

AB Ashokkumar Balasubramanian Syncfusion Team 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 
Ashokkumar B. 

WI William 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:

<div class="control-section">
<!-- DashboardLayout element declaration -->
<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>
<!-- end of dashboardlayout element -->

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


export default {
data: function() {
return {
cellSpacing: [10, 10],
resizableHandles: [
methods: {
//Dashboard Layout's resizestart event function
onResizeStart: function(args) {
console.log("Resize Start");
//Dashboard Layout's resize event function
onResize: function(args) {
//Dashboard Layout's resizestop event function
onResizeStop: function(args) {
console.log("Resize Stop");

/* 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;

AB Ashokkumar Balasubramanian Syncfusion Team 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. 
@import "../node_modules/@syncfusion/ej2-base/styles/material.css"; 
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css"; 
Could you please let us know, if the provided information’s are helpful to resolve your problem or not? 
Ashokkumar B. 

Live Chat Icon For mobile
Up arrow icon