{"id":22490468,"url":"https://github.com/martinascharrer/vuensight","last_synced_at":"2025-04-05T19:10:09.928Z","repository":{"id":40412554,"uuid":"430670215","full_name":"martinascharrer/vuensight","owner":"martinascharrer","description":"Visualize Vue.js component relationships and communication channels, i.e. props, events and slots. This developer tool operates on the command line and aims to give in-depth insight into a Vue.js project to support refactoring.","archived":false,"fork":false,"pushed_at":"2023-09-04T07:04:42.000Z","size":2595,"stargazers_count":210,"open_issues_count":7,"forks_count":8,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-29T18:08:22.100Z","etag":null,"topics":["javascript","typescript","visualize","vue","vue-components","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/martinascharrer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-22T10:58:04.000Z","updated_at":"2025-03-13T13:47:23.000Z","dependencies_parsed_at":"2024-06-19T01:26:56.498Z","dependency_job_id":"9c718a1c-2cb3-4ac2-894b-d1b1f34d3b4f","html_url":"https://github.com/martinascharrer/vuensight","commit_stats":{"total_commits":80,"total_committers":5,"mean_commits":16.0,"dds":0.5,"last_synced_commit":"e3f6681dacddea095f71ee56a4f5445deb6bda8b"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinascharrer%2Fvuensight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinascharrer%2Fvuensight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinascharrer%2Fvuensight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinascharrer%2Fvuensight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/martinascharrer","download_url":"https://codeload.github.com/martinascharrer/vuensight/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247386263,"owners_count":20930618,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","typescript","visualize","vue","vue-components","vuejs"],"created_at":"2024-12-06T17:22:14.221Z","updated_at":"2025-04-05T19:10:09.909Z","avatar_url":"https://github.com/martinascharrer.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# vuensight 👀\nVisualize Vue.js **component relationships** and **communication channels**, i.e. props, events and slots. This tool operates on the \ncommand line and is made for developers. The aim of vuensight is to provide visual insight into the components of a \nVue.js project and to support developers before and during refactoring, e.g. by visually analyzing which prop is used \nin which parent component or by highlighting unused components or channels.\n\nAn example visualization of vuensight itself:\n![demo image of vuensight](docs/vuensight-demo.png)\n\nThis tool is built on top of the two awesome packages:\n- [dependency-cruiser](https://github.com/sverweij/dependency-cruiser) for building the dependency tree \n- [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api) for parsing the Vue files\n\n## Getting started 🚀\n### Install\nFirst, install the cli package either locally in the project you want to visualize:\n```\nnpm i -D @vuensight/cli\n```\n\nOr globally on your machine if you intend to visualize multiple projects:\n```\nnpm i -g @vuensight/cli\n```\n\n### Run\nThen run the tool in your project folder:\n```\nvuensight\n```\n\n#### Options\n- `--dir` or `-d` (optional): Specify the directory that should be parsed relative from your current working directory, default is `src`\n- `--port` or `-p` (optional): Start the application in a different port, default is 4444\n- `--webpack-config` or `-wpc` (optional): Specify the path to your webpack-config (from your current working directory). This is particularly important if you use aliases.\n- `--ts-config` or `-tsc` (optional): Specify the path to your TypeScript config file (from your current working directory).\n\nAn example usage:\n```\nvuensight --dir resources/js --port 9999 --webpack-config ./webpack-config.json --ts-config ./tsconfig.json\n```\n\n## Licencse\n[MIT](LICENSE.txt)\n\n\n## Development\n### Requirements\n- `npm version \u003e= 7` (the project is a monorepo and uses npm workspaces which require at least npm version 7)  \n\n### Installing dependencies\n- `npm i` (in root directory) to install all dependencies of all packages\n- `npm i \u003cpackage-name\u003e` to add a global dependency for all packages \n- `npm i \u003cpackage-name\u003e --workspace @vuensight/\u003cvuensight-package-name\u003e` to add a new dependency to a specific package\n\n### Build packages\n- `npm run build` in root folder (to build all packages at the same time)\n- `npm run build` in each package\n\n#### or use a watcher\n- `npm run build:watch` in every package separately \n\n### Link locally\nFor testing vuensight locally in a Vue project run `npm link` in the cli package and `npm link @vuensight/cli` in the \nproject you want to test it on. Make sure you use a correct node version and ran `npm i` in the root directory \nbeforehand as this links the packages together internally.\n\n### Unit tests\n- `npm run test` in root (to run tests for all packages)\n- `npm run test` in each package\n\n### Publish\n- `npm publish` in each package\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinascharrer%2Fvuensight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmartinascharrer%2Fvuensight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinascharrer%2Fvuensight/lists"}