Getting Started with the Vue Diagram Component in Vue 3

This sample project demonstrates how to create an organizational chart using the Syncfusion Vue Diagram component in a Vue 3 application. The project showcases hierarchical data binding and automatic layout features to create a professional-looking organizational structure.

Project Overview

The sample implements the following key features:

1. Organizational Chart Layout
2. Hierarchical Data Binding
3. Custom Node and Connector Styling
4. Automatic Layout Arrangement

Prerequisites

System requirements for Syncfusion® Vue UI components

Set up the Vite project

A recommended approach for beginning with Vue is to scaffold a project using Vite. To create a new Vite project, use one of the commands that are specific to either NPM or Yarn.

npm create vite@latest

or

yarn create vite

Using one of the above commands will lead you to set up additional configurations for the project as below:

1.Define the project name: We can specify the name of the project directly. Let's specify the name of the project as my-project for this article.

? Project name: » my-project

2.Select Vue as the framework. It will create a Vue 3 project.

? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
> Vue
  React
  Preact
  Lit
  Svelte
  Others

3.Choose JavaScript as the framework variant to build this Vite project using JavaScript and Vue.

? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
  TypeScript
  Customize with create-vue ↗
  Nuxt ↗

4.Upon completing the aforementioned steps to create the my-project, run the following command to install its dependencies:

cd my-project
npm install

or

cd my-project
yarn install

Now that my-project is ready to run with default settings, let's add Syncfusion® components to the project.

Run the project

To run the project, use the following command:

npm run dev

or

yarn run dev

For migrating from Vue 2 to Vue 3, refer to the migration documentation.