The World’s #1 Bootstrap 5 HTML,
VueJS, React, Angular, Laravel, Asp.Net Core, Blazor, Django & Flask

Admin Dashboard Ecosystem

This is Metronic 7 documentation!

Upon purchase you can get Metronic 7 version from our Github Repository.
Request Github access
The new Metronic 8 is now available with the most advanced Bootstrap 5, VueJS, React and Laravel foundation with a solid light and dark mode design system, extensive utility classes and custom made in-house components.
View Metronic 8 documentation

To use most of the Metronic build tools, Node.js LTS version is required. Version 14.x LTS is recommended. Some of the plugins and framework in Metronic v7 does not support the latest Node.js version. https://nodejs.org/en/



Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries..

The html version theme has static CSS only components. Those components are by default available in the vue version as well. You can copy and paste the html and use it in vue components.

Vue with Full Demo Pages

Vue source code can be found in [metronic]/theme/vue/ and available in separate app in various demos.

Path Description
themeThe Metronic theme pacakge.
vueThe Vue's demo
demo1Vue application with sample pages. Demo URL See demo
demo2Vue application with sample pages. Demo URL See demo
demo3Vue application with sample pages. Demo URL See demo
demo4Vue application with sample pages. Demo URL See demo
demo5Vue application with sample pages. Demo URL See demo
demo6Vue application with sample pages. Demo URL See demo
demo7Vue application with sample pages. Demo URL See demo
package.jsonVue application with sample pages. Demo URL See demo

Vue Files Structure

Vue source code can be found in [metronic]/theme/vue/[demo]/.
Below is the list of demo file structure in Vue app.
Path Description
distThe build output of Vue. This folder does not included in the package. Run command npm run build to build it. For more information, see deployment docs.
node_modulesThe package.json file in the app root defines what libraries will be installed into node_modules/ when you run npm install.
publicAny static assets placed in the public folder will simply be copied and not go through webpack.
srcYour app lives in the src folder. All components, templates, styles, images, and anything else your app needs go here. Any files outside of this folder are meant to support building your app.
assetsMetronic's assets similar to the Default package.
coreConfigurations and integrations with 3rd party plugins.
configThe layout configurations.
mockExample dummy data.
plugins3rd party plugins which integrated with Vue.
storeVuex - It serves as a centralized store for all the components in an application. See documentation.
api.service.jsThe example service file for API.
htmlclass.service.jsThe service for HTML class.
i18n.service.jsMulti language service
jwt.service.jsExample service file for login and authetication.
viewVue's view files and partials.
baseThe base layout.
demosDemos pages
layoutThe main layout components
pagesThe demo pages
partialsShared vue components
contentThe components for content
layoutThe layout components.
App.vueA global vue main component.
main.jsGlobal import base components of app’s entry file.
router.jsVue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js.
.eslintignoreESLint to ignore specific files and directories by ignorePatterns in config files.
.eslintrc.jsESLint configuration.
.gitignoreGit uses it to determine which files and directories to ignore, before you make a commit.
babel.config.jsBabel is a JavaScript compiler configuration
package.jsonA package.json file contains meta data about app or module. Most importantly, it includes the list of dependencies to install from npm when running npm install.
package-lock.jsonpackage-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json
postcss.config.jsPostCSS loader for webpack.
vue.config.jsOptional config file that will be automatically loaded by @vue/cli-service
webpack-rtl.config.jsWebpack config for RTL version.
Think About The Future, Stay Connected With Us
The More We Learn, The More We Are Able To Innovate & To Develop