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 source code can be found in [metronic]/theme/vue/ and available in separate app in various demos.
| Path |
Description |
| theme | The Metronic theme pacakge. |
| vue | The Vue's demo |
| demo1 | Vue application with sample pages. Demo URL See demo |
| demo2 | Vue application with sample pages. Demo URL See demo |
| demo3 | Vue application with sample pages. Demo URL See demo |
| demo4 | Vue application with sample pages. Demo URL See demo |
| demo5 | Vue application with sample pages. Demo URL See demo |
| demo6 | Vue application with sample pages. Demo URL See demo |
| demo7 | Vue application with sample pages. Demo URL See demo |
| package.json | Vue application with sample pages. Demo URL See demo |
Vue source code can be found in
[metronic]/theme/vue/[demo]/.
Below is the list of demo file structure in Vue app.
| Path |
Description |
| dist | The 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_modules | The package.json file in the app root defines what libraries will be installed into node_modules/ when you run npm install. |
| public | Any static assets placed in the public folder will simply be copied and not go through webpack. |
| src | Your 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. |
| assets | Metronic's assets similar to the Default package. |
| core | Configurations and integrations with 3rd party plugins. |
| config | The layout configurations. |
| mock | Example dummy data. |
| plugins | 3rd party plugins which integrated with Vue. |
| services | |
| store | Vuex - It serves as a centralized store for all the components in an application. See documentation. |
| api.service.js | The example service file for API. |
| htmlclass.service.js | The service for HTML class. |
| i18n.service.js | Multi language service |
| jwt.service.js | Example service file for login and authetication. |
| view | Vue's view files and partials. |
| base | The base layout. |
| demos | Demos pages |
| layout | The main layout components |
| pages | The demo pages |
| partials | Shared vue components |
| content | The components for content |
| layout | The layout components. |
| App.vue | A global vue main component. |
| main.js | Global import base components of app’s entry file. |
| router.js | Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js. |
| .eslintignore | ESLint to ignore specific files and directories by ignorePatterns in config files. |
| .eslintrc.js | ESLint configuration. |
| .gitignore | Git uses it to determine which files and directories to ignore, before you make a commit. |
| babel.config.js | Babel is a JavaScript compiler configuration |
| package.json | A 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.json | package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json |
| postcss.config.js | PostCSS loader for webpack. |
| vue.config.js | Optional config file that will be automatically loaded by @vue/cli-service |
| webpack-rtl.config.js | Webpack config for RTL version. |
