If you’ve opened ntopng recently, you may have noticed something feels a little different — a little faster. That’s not your imagination. We’ve rebuilt the main menu, footer and top header, interfaces selector and the preferences pages using Vue.js, the first step in a broader effort to modernize ntopng’s entire interface.
What Changed
The menu and preferences sections have historically been built on server-rendered HTML — reliable, but not built for speed. Every click meant a round trip to the server and a full page reload, even for something as simple as opening a settings panel.
With the move to Vue.js, both areas are now fully reactive. Menus expand, preferences update, and the interface responds instantly to your input, with no server round trip for every interaction. If you live in ntopng all day managing and troubleshooting networks, the difference is noticeable.
Why Vue.js
Vue.js is built around reactivity: the interface updates automatically as the underlying data changes, without reloading or re-rendering the whole page. For a network monitoring tool like ntopng, where users are constantly switching between live traffic views, alerts, and configuration screens, that responsiveness matters.
Vue.js also gives us a component-based architecture that’s easier to maintain and extend. As we port more of ntopng’s interface, this foundation means new features and UI improvements can ship faster and with fewer regressions.
No More Full Page Reloads
One of the more noticeable changes under the hood is Vue Router for client-side navigation. Previously, moving between menu sections meant a full HTML page refresh, even if only a small part of the screen actually needed to change.
With Vue Router, navigation happens entirely client-side. Moving between menu items and preference sections is now instant, no full-page reloads, no flash of a blank screen while the server responds. It’s a small detail on its own, but across dozens of clicks in a normal working session, it adds up to an interface that simply feels quicker.
This Is Just the Beginning
The menu and preferences update is phase one of a larger initiative to port ntopng’s interface to Vue.js. We’re continuing this work across the rest of the application with the same goal: faster, more reactive, more consistent navigation throughout.
This builds directly on our earlier move from Webpack to Vite, which already cut the UI bundle size by roughly 8.7x and made page loads about twice as fast. If you missed it: ntopng Just Got Faster — Here’s What Changed. Together, the Vite build pipeline and the ongoing Vue.js migration are two halves of the same goal: a modern, fully reactive ntopng frontend.
Try It Out
The updated menu and preferences are available now in the latest ntopng release. If you haven’t upgraded recently, now’s a good time. As always, feedback and bug reports are welcome — let us know what you think.
Enjoy monitoring your network!