Dashboard Layout Dynamic Components with Vue Vite Laravel

[Tim]

Hi first of all thank you for this great platform,

I do however have a problem regarding building my app.

When I run "npm run dev "everything is working as intended with this setup.

<template>

  <div>

      <div class="control-section dashboard-dynamic">

        <div>

             <div style="width:100%;height: 30px;margin-bottom:5px">

              <ejs-button style="float:right;width:75px;" id="toggleBtn" ref="toggleBtn" :iconCss='iconCss' cssClass="e-outline e-flat e-primary" isToggle=true v-on:click='toggleClick'>Edit</ejs-button>

          </div>

          <div style="padding:5px;text-align: end;">

              <div class="add-widget-button e-control e-btn e-lib" id="dialogBtn" v-on:click="dialogButtonClick($event)">

                  Add New Widget

              </div>

          </div>

      </div>

      <ejs-dashboardlayout ref="DashbordInstance" :columns="2" id='edit_dashboard' :allowResizing="false" :allowDragging="false" :cellSpacing="spacing" :resizeStop="onPanelResize">

           <e-panels>

                  <e-panel :row="0" :col="0" :sizeX="1" :sizeY="1" header="<div>Line Chart</div>" :content="line"></e-panel>

                  <e-panel :row="0" :col="1" :sizeX="1" :sizeY="1" header="<div>Pie Chart</div>" :content="pie"></e-panel>

                  <e-panel :row="1" :col="0" :sizeX="2" :sizeY="1" header="<div>Spline Chart</div>" :content="spline"></e-panel>

              </e-panels>

      </ejs-dashboardlayout>  

   <ejs-dialog :header='header' ref="dialogObj" :content='contenttemplateVue'  :showCloseIcon='showCloseIcon' :target='target' :width='width' :visible='false' :isModal='true'></ejs-dialog>

  </div>

 

  </div>

  </template>

 

  <script>

  import { createApp } from "vue";

  import { DashboardLayoutComponent, PanelsDirective, PanelDirective } from "@syncfusion/ej2-vue-layouts";

  import lineTemplate from "./linetemplate.vue";

  import pieTemplate from "./pietemplate.vue";

  import splineTemplate from "./splinetemplate.vue";

  import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";

  import { DialogComponent } from '@syncfusion/ej2-vue-popups';

 

  export default {

      components: {

        'ejs-dashboardlayout': DashboardLayoutComponent,

        'e-panel': PanelDirective,

        'e-panels': PanelsDirective,

        'ejs-button': ButtonComponent,

        'ejs-dialog': DialogComponent

      },

      data: function() {

          return {

            spacing: [10,10],

            iconCss: 'edit',

            header:'Add a Content',

            target:'.control-section',

            width:'43%',

            showCloseIcon: true,

            contenttemplateVue:'<div id="dialogcontent"><div><div id="linetemplate"><p class="dialog-text">Linechart (1x1) </p></div><div id="pietemplate"><p class="dialog-text">Piechart (1x1) </p></div><div id="splinetemplate"><p class="dialog-text">Splinechart (2x1) </p></div></div></div></div>',

            spline: function () {

                  return { template : createApp({}).component('splineTemplate', splineTemplate) }

              },

            pie: function () {

                  return { template : createApp({}).component('pieTemplate', pieTemplate) }

              },

            line: function () {

                  return { template : createApp({}).component('lineTemplate', lineTemplate) }

              },

          };

      },

      methods: {

           toggleClick: function() {

                if (this.$refs.toggleBtn.$el.textContent == 'Edit') {

                      this.$refs.DashbordInstance.$el.allowResizing = true;

                      this.$refs.DashbordInstance.$el.allowDragging = true;

                      this.$refs.toggleBtn.$el.textContent = 'Save';

                      this.iconCss = "save";

                      document.getElementById('dialogBtn').style.display = 'block';

              } else {

                  this.$refs.DashbordInstance.$el.allowResizing = false;

                  this.$refs.DashbordInstance.$el.allowDragging = false;

                  this.$refs.toggleBtn.$el.textContent = 'Edit';

                  this.iconCss = "edit";

                  document.getElementById('dialogBtn').style.display = 'none';

              }

          },

          onPanelResize: function(args) {

              var dashboardObject = this.$refs.DashbordInstance;

          if (dashboardObject && args.element && args.element.querySelector('.e-panel-container .e-panel-content div')) {

              var chartObj = (args.element.querySelector('.e-panel-container .e-panel-content div.e-control')).ej2_instances[0];

              chartObj.height = '95%';

              chartObj.width = '100%';

              chartObj.refresh();

          }

          },

          dialogButtonClick: function() {

                this.$refs.dialogObj.show();

                var proxy = this;

                this.$refs.dialogObj.$el.querySelector('#linetemplate').onclick = function () {

                     var panel = {

                         sizeX: 1,

                         sizeY: 1,

                         header: '<div>Line Chart</div>',

                         row: 0,

                         col:0,

                         content: proxy.line

                     }

                     proxy.$refs.DashbordInstance.addPanel(panel);

                     proxy.$refs.dialogObj.hide();

                 }

                 this.$refs.dialogObj.$el.querySelector('#pietemplate').onclick = function () {

                     var panel = {

                         sizeX: 1,

                         sizeY: 1,

                         header: '<div>Pie Chart</div>',

                         row: 0,

                         col:0,

                         content: proxy.pie

                     }

                     proxy.$refs.DashbordInstance.addPanel(panel);

                     proxy.$refs.dialogObj.hide();

                 }

                 this.$refs.dialogObj.$el.querySelector('#splinetemplate').onclick = function () {

                     var panel = {

                         sizeX: 2,

                         sizeY: 1,

                         header: '<div>Spline Chart</div>',

                         row: 0,

                         col:0,

                         content: proxy.spline

                     }

                     proxy.$refs.DashbordInstance.addPanel(panel);

                     proxy.$refs.dialogObj.hide();

                 }

          }

      },

  }

  </script>

As seen on example : https://ej2.syncfusion.com/vue/demos/#/material/dashboard-layout/dynamic.html

But when i run "npm run build"

Im having empty content on my panels.

I run my application with Laravel Vue Vite

this is my vite.config.js just in case it would be of any help

import { defineConfig } from 'vite';

import laravel from 'laravel-vite-plugin';

import vue from '@vitejs/plugin-vue';

export default defineConfig({

    plugins: [

        laravel({

            input: 'resources/js/app.js',

            ssr: 'resources/js/ssr.js',

            refresh: true,

        }),

        vue({

            template: {

                transformAssetUrls: {

                    base: null,

                    includeAbsolute: false,

                },

            },

        })

    ],

    resolve: {

        alias: {

            "@": "/resources/js",

        },

    },

});

and this is my package.json

{

    "private": true,

    "type": "module",

    "scripts": {

        "dev": "vite",

        "build": "vite build && vite build --ssr"

    },

    "devDependencies": {

        "@inertiajs/vue3": "^1.2.0",

        "@vitejs/plugin-vue": "^5.0.5",

        "@vue/server-renderer": "^3.3.13",

        "autoprefixer": "^10.4.19",

        "axios": "^1.6.4",

        "laravel-vite-plugin": "^1.0",

        "postcss": "^8.4.40",

        "sass": "^1.77.6",

        "tailwindcss": "^3.4.6",

        "tailwindcss-primeui": "^0.3.4",

        "vite": "^5.3.1",

        "vue": "^3.4.34"

    },

    "dependencies": {

        "@primevue/themes": "^4.0.2",

        "@syncfusion/ej2-vue-layouts": "^26.1.38",

        "chart.js": "^4.4.3",

        "moment": "^2.30.1",

        "primeicons": "^7.0.0",

        "primevue": "^4.0.0",

        "vue-recaptcha-v3": "^2.0.1",

        "vue3-resize-text": "^0.1.0",

        "weather-icons": "^1.3.2"

    }

}

Thank you in advance.

[LeoLavanya Dhanaraj]

Hi Tim,

Greetings from Syncfusion support.

Based on the shared code details, we understand that you are experiencing an issue with the dynamic panel addition(with components as a content) in the Vue Dashboard Layout component of your Laravel project. To investigate this issue, we have created a sample using the provided code snippets and version details. However, the dynamic panel addition with content works properly on our end. For your reference, we have included the validated sample, which is similar to the code snippets you provided.

Please refer to the sample and make the necessary changes on your end. If you still to experience any issues, kindly provide us with the steps to replicate the problem along with video footage with our shared sample. This information will help us better understand your issue and provide a suitable solution.

Regards,

Leo Lavanya Dhanaraj

Attachment: VueLaravelDashboard_9308ba8b.zip