Implementing a Mind Map Application with PHP (Laravel) and Vue.js

Mind maps are visual tools that organize information in a tree structure, and combining the popular PHP backend stack with Vue.js on the frontend can deliver an efficient and user‑friendly web application.

The required features include creating, editing, deleting, and styling nodes, expanding/collapsing branches, maintaining parent‑child and sibling relationships, and supporting drag‑and‑drop reordering.

For the backend, a MySQL nodes table is defined with fields id , parent_id , name , and style . Laravel routes and controller methods implement CRUD operations:

// Route definitions
Route::get('/nodes', 'NodeController@index');
Route::post('/nodes', 'NodeController@store');
Route::put('/nodes/{id}', 'NodeController@update');
Route::delete('/nodes/{id}', 'NodeController@destroy');

// Controller
class NodeController extends Controller {
    public function index() {
        $nodes = Node::all();
        return response()->json($nodes);
    }
    public function store(Request $request) {
        $node = new Node();
        $node->parent_id = $request->input('parent_id');
        $node->name = $request->input('name');
        $node->style = $request->input('style');
        $node->save();
        return response()->json($node);
    }
    public function update(Request $request, $id) {
        $node = Node::find($id);
        if ($node) {
            $node->name = $request->input('name');
            $node->style = $request->input('style');
            $node->save();
            return response()->json($node);
        } else {
            return response()->json(['error' => 'Node not found'], 404);
        }
    }
    public function destroy($id) {
        $node = Node::find($id);
        if ($node) {
            $node->delete();
            return response()->json(['message' => 'Node deleted']);
        } else {
            return response()->json(['error' => 'Node not found'], 404);
        }
    }
}

On the frontend, a Vue CLI project is created, and a Mindmap.vue component is added. The component initializes the mind‑map, fetches nodes via Axios, and provides methods to add nodes:

<template>
  <div>
    <!-- Mind map container -->
    <div ref="mindmap" class="mindmap"></div>
    <!-- Toolbar -->
    <div class="toolbar">
      <button @click="addNode">Add Node</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  mounted() {
    this.initMindmap();
    this.fetchNodes();
  },
  methods: {
    initMindmap() {
      // initialize mind map library
    },
    fetchNodes() {
      axios.get('/nodes')
        .then(response => {
          // handle node data
        })
        .catch(error => console.error(error));
    },
    addNode() {
      axios.post('/nodes', {
        parent_id: null,
        name: 'New Node',
        style: ''
      })
        .then(response => {
          const node = response.data;
          // handle new node
        })
        .catch(error => console.error(error));
    }
  }
};
</script>

<style>
.mindmap { /* mind map styles */ }
.toolbar { /* toolbar styles */ }
</style>

After implementing both sides, developers can run the PHP server and Vue development server, use Chrome DevTools to inspect network requests, and perform performance tuning as needed.

In summary, the article demonstrates a complete workflow for building a functional mind‑map feature with PHP/Laravel backend APIs and a Vue.js frontend, providing practical code snippets and best‑practice guidance.