{"id":13503548,"url":"https://github.com/r3code/vue-vis-network","last_synced_at":"2025-07-26T16:31:35.447Z","repository":{"id":54305230,"uuid":"205844241","full_name":"r3code/vue-vis-network","owner":"r3code","description":"Vue 2 integration with https://github.com/visjs/vis-network/","archived":false,"fork":false,"pushed_at":"2021-02-25T09:13:08.000Z","size":2387,"stargazers_count":65,"open_issues_count":10,"forks_count":14,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-01T00:31:42.750Z","etag":null,"topics":["diagram-generator","graph-visualization","javascript","vis-network","visjs","vue","vuejs","vuejs-components"],"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/r3code.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-02T11:41:18.000Z","updated_at":"2024-09-24T04:12:07.000Z","dependencies_parsed_at":"2022-08-13T11:31:01.355Z","dependency_job_id":null,"html_url":"https://github.com/r3code/vue-vis-network","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r3code%2Fvue-vis-network","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r3code%2Fvue-vis-network/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r3code%2Fvue-vis-network/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r3code%2Fvue-vis-network/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/r3code","download_url":"https://codeload.github.com/r3code/vue-vis-network/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227695218,"owners_count":17805704,"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":["diagram-generator","graph-visualization","javascript","vis-network","visjs","vue","vuejs","vuejs-components"],"created_at":"2024-07-31T23:00:39.405Z","updated_at":"2024-12-02T08:28:25.477Z","avatar_url":"https://github.com/r3code.png","language":"Vue","funding_links":[],"categories":["Vue","Libraries"],"sub_categories":["vis.js based libraries"],"readme":"# vue-vis-network\n\n***!!! NOTE !!! Hi developer. Please contribute to the project if you find a bug or suggest an improvement / feature. Because I’m very, very busy these days, and it won’t end in the next 2-4 months. Hope you can do it faster than me )***\n\n\u003e Vue2 component to integrate with \u003ca href=\"Vue2 component to integrate with vis-network\"\u003eVis-Network\u003c/a\u003e views\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://travis-ci.org/r3code/vue-vis-network\"\u003e\n    \u003cimg src=\"https://travis-ci.org/r3code/vue-vis-network.svg?branch=master\" alt=\"Build Status\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://coveralls.io/github/r3code/vue-vis-network?branch=master\"\u003e\n    \u003cimg src=\"https://coveralls.io/repos/github/r3code/vue-vis-network/badge.svg?branch=master\" alt=\"Coverage Status\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-brightgreen.svg?\" alt=\"Software License\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/vue-vis-network\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/vue-vis-network.svg?\" alt=\"Packagist\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/r3code/vue-vis-network/releases\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/release/r3code/vue-vis-network.svg?\" alt=\"Latest Version\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/r3code/vue-vis-network/issues\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/issues/r3code/vue-vis-network.svg?\" alt=\"Issues\" /\u003e\n  \u003c/a\u003e  \n\u003c/p\u003e \n\nBest reagrds to the https://github.com/alexcode/vue2vis which is the base for this component. This project might have some issues from https://github.com/alexcode/vue2vis\n\n### Installation\n```\nnpm install --save vis-util vis-data vis-network vue-vis-network\n```\n\nor\n\n```\nyarn add vis-util vis-data vis-network vue-vis-network\n```\n\n## Usage\n\nDeclare the component\n``` javascript\nimport { Network } from \"vue-vis-network\";\nVue.component('network', Network);\n```\n\nAdd the component in the template.\n\n```html\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cnetwork ref=\"network\"\n    :nodes=\"nodes\"\n    :edges=\"edges\"\n    :options=\"options\"\u003e\n    \u003c/network\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n```\n\nAdd groups, items and options in your observed data or computed.\n``` javascript\nnew Vue({\n  el: '#app',\n  data() {\n    return {\n      nodes: [\n        {id: 1,  label: 'circle',  shape: 'circle' },\n        {id: 2,  label: 'ellipse', shape: 'ellipse'},\n        {id: 3,  label: 'database',shape: 'database'},\n        {id: 4,  label: 'box',     shape: 'box'    },\n        {id: 5,  label: 'diamond', shape: 'diamond'},\n        {id: 6,  label: 'dot',     shape: 'dot'},\n        {id: 7,  label: 'square',  shape: 'square'},\n        {id: 8,  label: 'triangle',shape: 'triangle'},\n      ],\n      edges: [\n        {from: 1, to: 2},\n        {from: 2, to: 3},\n        {from: 2, to: 4},\n        {from: 2, to: 5}, \n        {from: 5, to: 6},\n        {from: 5, to: 7},\n        {from: 6, to: 8}\n      ],\n      options: {\n         nodes: {\n          borderWidth: 4\n         },\n         edges: {\n          color: 'lightgray'\n        }\n      }\n    }\n  },\n});\n```\n\nAdd Visjs CSS\n``` css\nimport \"vue-vis-network/node_modules/vis-network/dist/vis-network.css\";\n```\n\nHere is a [basic working demo](https://codepen.io/r3code/pen/abOjJbQ)\n\n## Events\n\n### Component Events\nBy default all Vis-network events are emitted by your component. You can subscribe to a subset by passing an array in the prop `events` [Vis-network event](https://visjs.github.io/vis-network/docs/network/#Events).\n\n```html\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cnetwork ref=\"network\"\n    :nodes=\"nodes\"\n    :edges=\"edges\"\n    :options=\"options\"\n    :events=\"['selectNode', 'hoverNode']\"\n    @select-node=\"onNodeSelected\"\n    @hover-node=\"onNodeHovered\"\u003e\n    \u003c/network\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n```\n\n### Data Events\n\nWhen you pass an Array of data object, it is converted internally as a DataSet.\nAn event with the DataSet object will be fired at mounted. It's name will be prepend with the prop name (Ex: `items-mounted`, `groups-mounted`). You could use it to interact with the DataSet.\n\nAll the [Visjs DataSet event](https://visjs.github.io/vis-data/data/dataset.html#Events) will be prepened the same fashion (`items-add`, `items-remove`, `items-update`). For example, pushing a new object to the `items` prop will fire a `items-add` event with the following payload:\n```javascript\n{\n  event: 'add',\n  properties: {\n    items: [7],\n  },\n  senderId: null,\n}\n```\n\n#### Advanced\n\nYou can also manage your own data bindings by passing your own DataSet or DataView instead of an Array.\n\n``` javascript\nimport { DataSet } from 'vue-vis-network';\n\nnew Vue({\n  el: '#app',\n  data() {\n    return {\n      nodes: new DataSet([\n        {id: 1,  label: 'circle',  shape: 'circle' },\n        {id: 2,  label: 'ellipse', shape: 'ellipse'},\n        {id: 3,  label: 'database',shape: 'database'}\n      ]),\n      edges: new DataSet([\n        {from: 1, to: 2},\n        {from: 1, to: 3}\n      ]),\n      options: {\n        nodes: {\n          borderWidth: 4\n         }\n      }\n    }\n  },\n});\n```\n\n## Vis-network documentation\n\nFor the full reference see: \n* [Network](https://visjs.github.io/vis-network/docs/network/)\n* [DataSet](https://visjs.github.io/vis-data/data/dataset.html)\n* [DataView](https://visjs.github.io/vis-data/data/dataview.html)\n\n## Change log\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n## Testing\n\n``` bash\n$ npm run test\n```\n\n## Contributing\nPlease see [CONTRIBUTING](CONTRIBUTING.md) and [CONDUCT](CONDUCT.md) for details.\n\n### Build Setup\n\n``` bash\n# Once you have cloned this repo, install dependencies\n$ npm install\n\n# Build for development and production with minification\n$ npm run build\n\n```\n**Build for production**\n```\n# Linux\nNODE_ENV=production npm run build\n# Windows\nset NODE_ENV=production \u0026\u0026 npm run build\n# Prepare for NPM\nset NODE_ENV=production \u0026\u0026 npm run build:bundle\n\n```\n\n### Run demo locally  \n\n``` bash\n# install vue-vis-network local module  \ncd ..  \nnpm link       \n# prepare example\ncd example\n# install the example dependencies\nnpm install \n# add local vue-vis-network module to node_modules\nnpm link vue-vis-network\n# run demo server\nnpm run serve\n```\nGo to \u003chttp://localhost:8080/\u003e to see running examples\n\nNOTE: If you make changes to the library you should run `npm run build` again in the root folder.\nThe dev server should detect modification and reload the demo\n\n## Security\n\nIf you discover any security related issues, please email contact@r3code.ru instead of using the issue tracker.\n\n## Credits\n\n- [Dmitriy S. Sinyavskiy][link-author] \n- [Alex Couturon](https://github.com/alexcode)\n- [All Contributors][link-contributors]\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n\n[link-author]: https://github.com/r3code\n[link-contributors]: ../../contributors\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr3code%2Fvue-vis-network","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fr3code%2Fvue-vis-network","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr3code%2Fvue-vis-network/lists"}