Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mitevpi/metavue

Library for charting the relationships between Vue.js components in an application structure.
https://github.com/mitevpi/metavue

application diagram frontend meta utility vue vuejs web

Last synced: 8 days ago
JSON representation

Library for charting the relationships between Vue.js components in an application structure.

Host: GitHub
URL: https://github.com/mitevpi/metavue
Owner: mitevpi
License: mit
Created: 2019-12-16T17:48:39.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2021-05-11T09:28:20.000Z (over 3 years ago)
Last Synced: 2024-04-23T22:20:06.249Z (9 months ago)
Topics: application, diagram, frontend, meta, utility, vue, vuejs, web
Language: JavaScript
Homepage: https://metavue-demo.now.sh/
Size: 4.52 MB
Stars: 1
Watchers: 3
Forks: 1
Open Issues: 9
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        # MetaVue

[![Generic badge](https://img.shields.io/badge/Docs-Web-Green.svg)](https://mitevpi.github.io/metavue/)

[![Generic badge](https://img.shields.io/badge/Docs-MD-Green.svg)](docs)

[![Generic badge](https://img.shields.io/badge/Demo-Web-Green.svg)](https://metavue-demo.now.sh/)

[![npm](https://img.shields.io/npm/v/metavue.svg)](https://www.npmjs.com/package/metavue)

[![npm bundle size](https://img.shields.io/bundlephobia/min/metavue.svg)](https://bundlephobia.com/result?p=metavue)

[![npm](https://img.shields.io/npm/dw/metavue.svg)](https://www.npmjs.com/package/metavue)

[![npm2](https://img.shields.io/npm/dt/metavue.svg)](https://www.npmjs.com/package/metavue)

[![GitHub issues](https://img.shields.io/github/issues/mitevpi/metavue.svg)](https://github.com/mitevpi/metavue/issues) ![David](https://img.shields.io/david/dev/mitevpi/metavue.svg)

[![GitHub last commit](https://img.shields.io/github/last-commit/mitevpi/metavue.svg)](https://github.com/mitevpi/metavue/commits/master)

Utility for extracting metadata between of Vue.js components in

application architecture. ([Demo](https://metavue-demo.now.sh/))

## Usage

### Install

Install globally by running the command below on a cmd/terminal:

```cmd

npm i -g metavue

```

### Use

Once installed, the CLI utility can be used from any cmd/terminal instance

using the following command:

```cmd

metavue -d PATH_TO_YOUR_VUE_APP

```

### Output

The CLI utility will generate a folder called `.metavue` in the root

directory of the Vue application with `.json` files containing the

metadata of your Vue application, and a static site at `index.html`

which can be used to visualize the data.

Deply or run the `index.html` file in the `.metavue` folder using a http

server to visualize the data export, or import the `json` files yourself

in a data visualization platform to explore your application's metadata.

#### Sample

##### Custom Visualization From Data (PowerBI)



##### Static Site Output (This CLI)



##### Data Output

`ComponentArchitecture.json`

```json

 {

    "path": "/Users/mitevpi/Documents/GitHub/stroll-app/src/App.vue",

    "name": "App",

    "lines": 149,

    "imports": null,

    "data": [],

    "dataCount": 0,

    "components": [

        "Footer",

        "Header",

        "LogIn",

        "Results",

        "About",

        "UserInterface",

        "Splash"

    ],

    "cssClasses": [

        ".main",

        ".v-card",

        ".fade-enter",

        ".fade-leave-to",

        ".fade-leave-active",

        ".delayed-fade-enter-active",

        ".delayed-fade-enter",

        ".delayed-fade-leave-active",

        ".delayed-fade-leave-to",

        ".fade-leave-active"

    ],

    "cssIdSelectors": [

        "#footer"

    ],

    "templateLength": 35,

    "scriptLength": 47,

    "styleLength": 64,

    "commentLength": 4,

    "cssClassesCount": 16,

    "cssIdSelectorsCount": 1

},

```

`ParentChildData.json`

```json

{

    "parent": "App",

    "child": "Footer"

},

{

    "parent": "App",

    "child": "Header"

},

{

    "parent": "App",

    "child": "LogIn"

},

```