Vue Quasar Manage

screenshot of Vue Quasar Manage

Vue Quasar Manage

Management system template based on Vue / quasar


Vue-Quasar-Manage is a frontend solution for middle and back-office applications. It is built on top of Vue and Quasar-UI, with design specifications derived from Material Design. The solution includes features such as dynamic routing, dynamic caching, and permission authentication. It is designed to be responsive and compatible with SPA, Electron, Mobile, and Cordova platforms. The solution also includes common functionalities for SPA applications, such as tagView for quick navigation and breadcrumb navigation. It is highly customizable, with only 1600 lines of code, and is completely open-source and free to use. There is also a version available with Quasar-cli called Quasar-Manage that developers can utilize.


  • Dynamic routing and caching
  • Permission authentication
  • SPA/Electron/Mobile/Cordova compatibility
  • tagView for quick navigation
  • Breadcrumb navigation
  • Material Design icon set
  • Simple code logic with customizable components
  • Completely open-source and free to use


To use Vue-Quasar-Manage, follow these steps:

  1. Clone the project
  2. Navigate to the project folder in the command line
  3. Install the project dependencies
npm install
  1. Start the development server
npm run serve


Vue-Quasar-Manage is a frontend solution for middle and back-office applications. It is built on top of Vue and Quasar-UI, with Material Design specifications. The solution offers various features such as dynamic routing, caching, permission authentication, and more. It is highly customizable, responsive, and compatible with SPA, Electron, Mobile, and Cordova platforms. Vue-Quasar-Manage is open-source and free to use. Developers can follow the installation guide to set up the project and start developing their applications.


Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.


SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.


ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

Material Design

Material Design is a design system developed by Google that provides a set of guidelines, components, and tools for creating visually appealing and functional user interfaces. Material Design is designed to be flexible and customizable, making it a great choice for a wide range of applications and use cases.


Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.