Getting Started with the Vue Diagram Component in the Quasar Framework

18 Nov 20186 minutes to read

This section explains how to create a Quasar application from scratch and build a simple diagram using the Vue Diagram component with the Composition API.

The Quasar Framework is a Vue.js-based open-source framework that empowers developers to create high-performance and responsive applications across various platforms, such as web, mobile, and desktop.

Prerequisites

Before getting started, ensure that your development environment meets the system requirements for Syncfusion® Vue UI components

Before You Begin

This guide uses the Quasar application structure generated by the Quasar project initializer.

The main files used in this guide are:

  • src/App.vue — Defines the root Quasar application component.
  • src/pages/IndexPage.vue — Default page generated by Quasar, if the starter template includes routing.
  • quasar.config.js — Quasar project configuration file.
  • index.html — Root HTML file generated by Quasar.

NOTE

This guide adds the Diagram component directly in src/App.vue for simplicity. In a real application, you can move the Diagram code to a page component such as src/pages/IndexPage.vue.

NOTE

This guide uses the Composition API with <script setup>, which is commonly used in Vue 3-based Quasar applications.

Step 1: Set up the Quasar environment

Use the Quasar project initializer to create a Quasar application. Quasar provides a Vue-based application framework for building responsive web, mobile, and desktop applications.

Step 2: Create a Quasar application

Create a new Quasar application using the following command:

npm init quasar

During project creation, you will be prompted to configure the project. Use the following recommended options:

√ What would you like to build?
> App with Quasar CLI, let's go!

√ Project folder:
> quasar-project

√ Pick script type:
> Javascript

√ Pick Quasar App CLI variant:
> Quasar App CLI with Vite

√ Package name:
> quasar-project

√ Project product name:
> Quasar App

√ Project description:
> A Quasar Project

√ Check the features needed for your project:
> Sass CSS preprocessor
> Linting (vite-plugin-checker + ESLint)

√ Add Prettier for code formatting?
> Yes

√ Install project dependencies?
> Yes, use npm

NOTE

It is recommended to use Quasar App CLI with Vite and Composition API for better performance and modern Vue development.

NOTE

Additional features such as Pinia (state management) and i18n (internationalization) are not required for this getting started example and can be skipped.

NOTE

Selecting Yes, use npm automatically installs all required dependencies during project setup.

Navigate to the project folder:

cd quasar-project

Step 3: Install the Vue Diagram package

All Syncfusion Essential® JS 2 packages are available in the npmjs.com registry.

Install the Vue Diagram package using the following command:

npm install @syncfusion/ej2-vue-diagrams

NOTE

Installing @syncfusion/ej2-vue-diagrams automatically installs the required dependency packages.

Step 4: Add the required CSS references

Add the required Syncfusion® styles to the src/App.vue file in the <style> section:

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
  @import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
  @import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
  @import '../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css';
</style>

NOTE

Syncfusion® provides multiple built-in themes. If your application uses a different theme, replace the tailwind3.css references with the corresponding theme file, such as material3.css.

NOTE

In larger Quasar applications, you can also add Syncfusion® CSS references globally using Quasar’s application-level styling configuration.

Step 5: Add the Diagram component

Import DiagramComponent from @syncfusion/ej2-vue-diagrams and use it in your component. Then add the ejs-diagram element to the template.

Update the src/App.vue file as follows:

<template>
  <q-layout view="lHh Lpr lFf">
    <q-page-container>
      <q-page class="q-pa-md">
        <ejs-diagram
          id="diagram"
          width="100%"
          height="580px"
        />
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css';
</style>

At this stage, the Diagram component renders an empty canvas.

NOTE

The Diagram component must have a valid height. If the height is not set, the Diagram canvas may not be visible.

NOTE

If your Quasar project uses the generated router-based structure, you can place the Diagram markup inside src/pages/IndexPage.vue instead of src/App.vue.

Step 6: Create your first Diagram with nodes and connectors

This section explains how to create a simple flowchart by adding nodes, customizing their appearance, and connecting them using connectors.

The following example creates a flowchart with four nodes: Start, Process, Decision, and End. It also applies common node and connector settings using the getNodeDefaults and getConnectorDefaults properties.

Update the src/App.vue file as follows:

<template>
  <q-layout view="lHh Lpr lFf">
    <q-page-container>
      <q-page class="q-pa-md">
        <ejs-diagram
          id="diagram"
          width="100%"
          height="580px"
          :nodes="nodes"
          :connectors="connectors"
          :getNodeDefaults="nodeDefaults"
          :getConnectorDefaults="connectorDefaults"
        />
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';

const terminator = {
  type: 'Flow',
  shape: 'Terminator'
};

const process = {
  type: 'Flow',
  shape: 'Process'
};

const decision = {
  type: 'Flow',
  shape: 'Decision'
};

const nodes = [
  {
    id: 'node1',
    offsetX: 300,
    offsetY: 100,
    shape: terminator,
    annotations: [
      {
        content: 'Start'
      }
    ]
  },
  {
    id: 'node2',
    offsetX: 300,
    offsetY: 200,
    shape: process,
    annotations: [
      {
        content: 'Process'
      }
    ]
  },
  {
    id: 'node3',
    offsetX: 300,
    offsetY: 300,
    shape: decision,
    annotations: [
      {
        content: 'Decision?'
      }
    ]
  },
  {
    id: 'node4',
    offsetX: 300,
    offsetY: 400,
    shape: terminator,
    annotations: [
      {
        content: 'End'
      }
    ]
  }
];

const connectors = [
  {
    id: 'connector1',
    sourceID: 'node1',
    targetID: 'node2'
  },
  {
    id: 'connector2',
    sourceID: 'node2',
    targetID: 'node3'
  },
  {
    id: 'connector3',
    sourceID: 'node3',
    targetID: 'node4'
  }
];

function nodeDefaults(node) {
  node.width = 140;
  node.height = 50;
  node.style = {
    fill: '#E8F4FF',
    strokeColor: '#357BD2'
  };
  return node;
}

function connectorDefaults(connector) {
  connector.type = 'Orthogonal';
  connector.targetDecorator = {
    shape: 'Arrow',
    width: 10,
    height: 10
  };
  return connector;
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css';
</style>

In this example:

Step 7: Run the application

Run the application using the following command:

npm run dev

Open the generated local URL in the browser. The application displays the flowchart diagram as shown below:

Getting started

NOTE

Looking for the full Vue Diagram component overview, features, pricing, and documentation? Visit the Vue Diagram page.