Home Metronic Hire Us Buy Now
The World’s #1 Bootstrap 4 & 5 HTML, Angular 11, React, VueJS & Laravel
Admin Dashboard Theme

## Vue

### Overview

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
--- | ---
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
yarn.lock | Vue 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
--- | ---
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.