Vue3 Mindmap

Overview

The Vue3 Mindmap is a component inspired by MindNode, designed for creating mind maps within Vue3 applications. It offers a range of features for visualizing and organizing data in a structured manner, akin to traditional mind mapping techniques.

Features

• v-model: Sets the mind map data.
• x-gap: Specifies the horizontal spacing between nodes.
• y-gap: Defines the vertical spacing between nodes.
• branch: Sets the width of the connecting lines.
• scale-extent: Defines the zoom range.
• timetravel: Enables a feature for undo and redo actions.
• drag: Allows nodes to be draggable.
• zoom: Enables zoom and pan functionality.
• edit: Allows for node content editing.
• center-btn, fit-btn, add-node-btn, download-btn: Toggle buttons for various functions.
• sharp-corner, ctm, locale: Additional settings for customization.

Installation

To install the Vue3 Mindmap component, you can use npm. Run the following command in your project directory:

npm install vue3-mindmap

Once installed, you can include the component in your Vue3 project by importing it:

import Vue3Mindmap from 'vue3-mindmap';

Then, add the component to your template:

<vue3-mindmap v-model="mindmapData" :x-gap="84" :y-gap="18" :branch="4" :scale-extent="[0.1, 0.8]" :timetravel="false" :drag="false" :zoom="false" :edit="false" :center-btn="false" :fit-btn="false" :add-node-btn="false" :download-btn="false" :sharp-corner="false" :ctm="false" :locale="'en'"></vue3-mindmap>

Make sure to adjust the initial settings according to your application’s requirements.

Summary

The Vue3 Mindmap component is a versatile tool for creating interactive mind maps in Vue3 applications. With features like draggable nodes, zoom capabilities, and customizable options, it offers a user-friendly way to organize and visualize data in a structured format. By following the installation guide and customizing the settings as needed, developers can seamlessly integrate this component into their Vue3 projects for efficient data representation.