SyncfusionExamples · maheshtps · Oct 25, 2023 · Oct 25, 2023 · Oct 25, 2023
diff --git a/README.md b/README.md
@@ -1,2 +1,15 @@
-# getting-started-with-the-vue-dashboard-layout-component
+# Getting Started with the Vue Dashboard Layout Component
+
 A quick-start project that helps you to integrate a Vue Dashboard Layout component in a Vue application. This project contains code to add multiple panels and configure them, drag, and resize the panels dynamically.
+
+Refer to the following documentation to learn about the Vue Dashboard Layout component: 
+https://ej2.syncfusion.com/vue/documentation/dashboard-layout/getting-started
+
+Check out this online example of the Vue Dashboard Layout component:
+https://ej2.syncfusion.com/vue/demos/#/material/dashboard-layout/default.html 
+
+## Project prerequisites
+Make sure that you have the compatible versions of [Visual Studio Code](https://code.visualstudio.com/download ) and [NodeJS](https://nodejs.org/en/download) or later version in your machine before starting to work on this project.
+
+## How to run this application
+To run this application, you need to first clone the `getting-started-with-the-vue-dashboard-layout-component` repository and then open it in Visual Studio Code. Now, simply build and run your project to view the output.
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "myvueapp",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@syncfusion/ej2-vue-layouts": "^23.1.36",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "vite": "^4.4.5"
+  }
+}
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,34 @@
+<script>
+import { DashboardLayoutComponent, PanelsDirective, PanelDirective } from '@syncfusion/ej2-vue-layouts';
+
+export default {
+  components: {
+    'ejs-dashboardlayout' : DashboardLayoutComponent,
+    'e-panels' : PanelsDirective,
+    'e-panel' : PanelDirective
+  }
+}
+</script>
+
+<template>
+  <ejs-dashboardlayout columns="3" :allowDragging="false" :allowResizing="true">
+    <e-panels>
+      <e-panel :row="0" :col="0" :sizeY="2" :minSizeY="1" :maxSizeY="2" header="<div>Panel 1</div>" content="<div>Content of Panel 1</div>"></e-panel>
+      <e-panel :row="0" :col="1" header="<div>Panel 2</div>" content="<div>Content of Panel 2</div>"></e-panel>
+      <e-panel :col="2" header="<div>Panel 3</div>" content="<div>Content of Panel 3</div>"></e-panel>
+      <e-panel :row="1" :col="1" :sizeX="2" :minSizeX="1" :maxSizeX="2" header="<div>Panel 4</div>" content="<div>Content of Panel 4</div>"></e-panel> 
+    </e-panels>
+  </ejs-dashboardlayout>
+</template>
+
+<style>
+  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
+
+  .e-panel-header {
+    text-align: center;
+  }
+  .e-panel-content {
+    text-align: center;
+  }
+</style>
diff --git a/src/assets/vue.svg b/src/assets/vue.svg
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import {registerLicense} from '@syncfusion/ej2-base';
+registerLicense("Ngo9BigBOggjHTQxAR8/V1NHaF5cWWNCf1JpRGNGfV5yd0VAalxRTnJZUiweQnxTdEZiWX5YcHxQRGRfV0Z3XA==");
+createApp(App).mount('#app')
diff --git a/src/style.css b/src/style.css
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})