The latest Mantis Vue release focuses entirely on code quality, performance, and developer experience. Instead of adding unnecessary features, we focused on refactoring the core architecture, updating dependencies, and making the components easier to customize in production.
Core Upgrades and Changelog
- Dependencies: Upgraded to Vuetify 4 and Vue Router 5 for better performance, composition API support, and a future-proof stack.
- UI Components: Redesigned component pages to match the latest Figma specs.
- Forms and Navigation: Overhauled form inputs and navigation elements for cleaner state handling and better responsiveness.
- Modals and Dialogs: Cleaned up layout constraints on modals to make them fully composable.
- Data Display & Treeview: Refactored the data components and Treeview examples to handle complex data structures more efficiently.
- Dynamic Colors: Updated the color page, making runtime theme changes easier to implement.
- Icons: Standardized icon usage across the entire template for a consistent UI.
Why we made these changes?
Rather than continue with the old code structure, the Mantis Vue team rewrote certain sections to fit better into the modern Vue ecosystem. This leads to a better code style that is more practical to build upon for product development.
For developers building SaaS platforms, analytics dashboards, admin panels, or enterprise web applications, this makes a noticeable difference.
A Cleaner Project Structure
One of the most useful improvements in this release is the new routing setup.
With Vue Router 5, routing now feels much simpler. Developers no longer need to manually configure every page route. Pages can be managed more naturally based on the project structure, reducing repetitive setup work.
This means:
- Faster page creation
- Easier file organization
- Less routing maintenance
- Cleaner scaling for large web applications
When building dashboards with many pages, this saves time immediately.
Improved UI Components for Faster Product Building
A major part of this release focuses on updating UI component pages.
The entire component system has been refreshed using updated Figma design references. This gives developers a more polished library to build from.
- Improved form components with better layout, spacing, and usability.
- Improved navigation components for cleaner and more flexible admin layouts.
- Updated tables, cards, alerts, badges, and informational layouts for better consistency.
- Refined utility pages with updated structure and improved usability for dashboard workflows.
Better Theme Customization
The Color page has been refactored. It is especially useful for teams that need brand customization. Instead of editing multiple style files manually, theme changes can now be handled more efficiently.
You can adapt:
- Primary colors
- Secondary colors
- Surface styles
- Layout themes
- Component accents
Updated Treeview and Icons
The Treeview examples have also been updated for better hierarchical navigation patterns.
This is helpful for projects such as:
- File managers
- Document systems
- Permission management
- Nested content dashboards
- Icon usage across all pages has also been refreshed, giving the UI a more consistent and modern appearance.
What this update means for Developers?
For developers, this update reduces a lot of small friction points that usually slow projects down.
With the new version of Mantis Vue, you spend less time on setup and more time building actual features.
Benefits include:
- Cleaner codebase
- Improved scalability
- Modern UI pages
- Less manual configuration
- Easier theme management
- Updated Vue ecosystem compatibility
Whether you are building an internal admin tool or a full SaaS product, these improvements help to simplify the workflow.
If you are building with Vuetify, this version will save time without even noticing it.
For more details one can refer to changelog.
Comments