Skip to content

Commit a3c46ba

Browse files
Merge pull request #2 from abinayabalakrishnan-syncfusion/ReadmeUpdate
Documentation update for README
2 parents d3ea359 + 3c7e7dd commit a3c46ba

1 file changed

Lines changed: 50 additions & 10 deletions

File tree

README.md

Lines changed: 50 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,55 @@
11
# Getting Started with the Vue Dashboard Layout Component
22

3-
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.
4-
5-
Refer to the following documentation to learn about the Vue Dashboard Layout component:
6-
https://ej2.syncfusion.com/vue/documentation/dashboard-layout/getting-started
3+
**Repository Description**
4+
This repository contains a quick‑start Vue sample that demonstrates how to integrate and configure the Syncfusion Vue Dashboard Layout component in a Vue application.
5+
6+
A quick‑start project that helps you integrate the Vue Dashboard Layout component into a Vue application. This project includes sample code to add multiple dashboard panels, configure their layout, and dynamically drag and resize the panels.
7+
8+
## Project Overview
9+
The purpose of this project is to help developers understand the basic usage and configuration of the Syncfusion Vue Dashboard Layout component. It demonstrates how dashboards can be built using movable and resizable panels to create customizable and interactive layouts.
10+
11+
## Features
12+
- Integration of the Syncfusion Vue Dashboard Layout component
13+
- Support for multiple dashboard panels
14+
- Drag‑and‑drop panel positioning
15+
- Dynamic resizing of panels
16+
- Flexible dashboard layout configuration
17+
18+
## Examples
19+
- Online demo:<br>
20+
https://ej2.syncfusion.com/vue/demos/#/material/dashboard-layout/default.html
721

8-
Check out this online example of the Vue Dashboard Layout component:
9-
https://ej2.syncfusion.com/vue/demos/#/material/dashboard-layout/default.html
22+
## Prerequisites
23+
Before starting this project, ensure the following are installed:
24+
- [NodeJS](https://nodejs.org/en/download) (latest version recommended)
25+
- [Visual Studio Code](https://code.visualstudio.com/download )
26+
27+
## Installation and Running the Application
28+
1. Clone the repository.
29+
```bash
30+
git clone https://github.com/SyncfusionExamples/getting-started-with-the-vue-dashboard-layout-component.git
31+
```
32+
2. Open the project directory in Visual Studio Code.
33+
3. Install the required dependencies using:`npm install`.
34+
4. Run the application using the project’s configured development command `npm run dev`.
35+
5. Open the browser and navigate to the URL shown in the terminal `http://localhost:5173/` to view the Dashboard Layout output.
36+
37+
## Usage
38+
Run the application and interact with the dashboard panels to drag, resize, and rearrange them dynamically. Modify panel properties to explore different layout configurations.
39+
40+
## Documentation
41+
- General Syncfusion documentation:<br>
42+
https://help.syncfusion.com/
43+
- Vue Introduction:<br>
44+
https://ej2.syncfusion.com/vue/documentation/introduction
45+
- Vue Dashboard Layout Getting Started:<br>
46+
https://ej2.syncfusion.com/vue/documentation/dashboard-layout/getting-started
1047

11-
## Project prerequisites
12-
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.
48+
## Troubleshooting
49+
- Ensure NodeJS and npm are installed correctly.
50+
- Reinstall dependencies if the application fails to start.
51+
- Restart the development server if layout changes are not reflected.
52+
- Check browser console for runtime or rendering errors.
1353

14-
## How to run this application
15-
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.
54+
## Support
55+
For detailed API references, configuration options, and additional usage examples, refer to the Syncfusion Vue documentation links provided above.

0 commit comments

Comments
 (0)