{"_id":"@awaddev/vue-flow","name":"@awaddev/vue-flow","dist-tags":{"latest":"1.27.2"},"versions":{"1.27.2":{"name":"@awaddev/vue-flow","version":"1.27.2","private":false,"license":"MIT","author":{"name":"Burak Cakmakoglu","email":"78412429+bcakmakoglu@users.noreply.github.com"},"repository":{"type":"git","url":"git+https://github.com/bcakmakoglu/vue-flow.git"},"homepage":"https://github.com/bcakmakoglu/vue-flow#readme","bugs":{"url":"https://github.com/bcakmakoglu/vue-flow/issues"},"keywords":["vue","flow","diagram","editor","graph","node","link","port","slot","vue3","composition-api","vue-flow","vueflow","typescript"],"main":"./dist/vue-flow-core.js","module":"./dist/vue-flow-core.mjs","types":"./dist/index.d.ts","unpkg":"./dist/vue-flow-core.iife.js","jsdelivr":"./dist/vue-flow-core.iife.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/vue-flow-core.mjs","require":"./dist/vue-flow-core.js"},"./dist/style.css":"./dist/style.css","./dist/theme-default.css":"./dist/theme-default.css"},"sideEffects":["*.css"],"peerDependencies":{"vue":"^3.3.0"},"dependencies":{"@vueuse/core":"^10.5.0","d3-drag":"^3.0.0","d3-selection":"^3.0.0","d3-zoom":"^3.0.0"},"devDependencies":{"@rollup/plugin-replace":"^5.0.3","@types/d3-drag":"^3.0.4","@types/d3-selection":"^3.0.7","@types/d3-zoom":"^3.0.5","@vitejs/plugin-vue":"^4.4.0","autoprefixer":"^10.4.16","postcss":"^8.4.31","postcss-cli":"^10.1.0","postcss-nested":"^6.0.1","vite":"^4.4.11","vue-tsc":"^1.8.16","@tooling/eslint-config":"0.0.0","@tooling/tsconfig":"0.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"np":{"branch":"master","message":"v%s"},"scripts":{"dev":"pnpm types:watch & pnpm build:watch","build":"vite build && vite build -c vite.config.iife.ts","build:watch":"vite build --watch & vite build -c vite.config.iife.ts --watch","types":"vue-tsc --declaration --emitDeclarationOnly && tsc -p ./tsconfig.build.json && shx rm -rf tmp && pnpm lint:dist","types:watch":"vue-tsc --declaration --emitDeclarationOnly --watch & tsc -p ./tsconfig.build.json --watch","theme":"postcss src/style.css -o dist/style.css && postcss src/theme-default.css -o dist/theme-default.css","lint":"eslint --ext .js,.ts,.vue ./","lint:dist":"eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix --ignore-pattern !**/* ./dist","test":"exit 0"},"description":"[](https://vueflow.dev/)   ![GitHub code size in bytes](ht","_id":"@awaddev/vue-flow@1.27.2","_integrity":"sha512-ohGz9+1xh5qCevd3V4o8IgslbxebDl+RtZlVATO/E4pvtpAV+xXaYI7r2/uDx7tpFylzPZ4AeHyaXX+4DBbtGQ==","_resolved":"/private/var/folders/6l/y0k05qkj2p97v3qz05lrvcyc0000gn/T/5e2a0ea32ef188f855016bdff787bd12/awaddev-vue-flow-1.27.2.tgz","_from":"file:awaddev-vue-flow-1.27.2.tgz","_nodeVersion":"21.4.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-ohGz9+1xh5qCevd3V4o8IgslbxebDl+RtZlVATO/E4pvtpAV+xXaYI7r2/uDx7tpFylzPZ4AeHyaXX+4DBbtGQ==","shasum":"db464e356d682450043f0995716f628517bd59ef","tarball":"https://registry.npmjs.org/@awaddev/vue-flow/-/vue-flow-1.27.2.tgz","fileCount":95,"unpackedSize":1166164,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8C5QjbColSq3CqFAx8ASS+C8dnetwquY25NDYNR96ZQIgfn//AQHTV9dj3zEvUURpC7Y4aooP89ajn5baAgU0yPQ="}]},"_npmUser":{"name":"logaretm","email":"logaretm1@gmail.com"},"directories":{},"maintainers":[{"name":"logaretm","email":"logaretm1@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-flow_1.27.2_1703519460702_0.9126330269105658"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-25T15:51:00.622Z","1.27.2":"2023-12-25T15:51:01.045Z","modified":"2023-12-25T15:51:01.519Z"},"maintainers":[{"name":"logaretm","email":"logaretm1@gmail.com"}],"description":"[](https://vueflow.dev/)   ![GitHub code size in bytes](ht","homepage":"https://github.com/bcakmakoglu/vue-flow#readme","keywords":["vue","flow","diagram","editor","graph","node","link","port","slot","vue3","composition-api","vue-flow","vueflow","typescript"],"repository":{"type":"git","url":"git+https://github.com/bcakmakoglu/vue-flow.git"},"author":{"name":"Burak Cakmakoglu","email":"78412429+bcakmakoglu@users.noreply.github.com"},"bugs":{"url":"https://github.com/bcakmakoglu/vue-flow/issues"},"license":"MIT","readme":"# Vue Flow ๐\n\n[](https://vueflow.dev/)\n\n\n\n\n\n__Vue Flow: A highly customizable Vue 3 Flowchart component.__\n\nWith Vue Flow, you can build your own, customized node-based applications like static diagrams or even more complex and\ninteractive editors!\n\nYou can find a detailed explanation of how to get started in the [documentation](https://vueflow.dev/guide/) or check\nthe [examples](https://vueflow.dev/examples/).\n\n## Table of contents\n\n* [โญ๏ธ Features](#-features)\n\n* [๐ Setup](#-setup)\n\n* [๐ฎ Quickstart](#-quickstart)\n \n + [๐ชด Vue 2](#-vue-2)\n\n* [๐งช Development](#-development)\n \n + [๐ณ Dev Container](#-dev-container)\n\n* [ Discord](#-discord)\n\n* [๐ Special Thanks](#-special-thanks)\n\n* [โญ Stargazers](#-stargazers)\n\n## โญ๏ธ Features\n\n- ๐ถ __Easy setup__: Get started hassle-free - Built-in zoom- & pan features, element dragging, selection and much more\n\n- ๐จ __Customizable__: Use your custom nodes, edges and connection lines and expand on Vue Flows' functionality\n\n- ๐ __Fast__: Tracks changes reactively and only re-renders the appropriate elements\n\n- ๐งฒ __Utils & Composition__: Comes with graph helper and state composable functions for advanced uses\n\n- ๐ฆ __Additional Components__:\n\n - ๐ผ Background: With two built-in patterns and some configuration options like height, width or color.\n\n - ๐งญ Minimap: Shows current nodes in a small map shape in the bottom right corner\n\n - ๐น Controls: Control zoom behavior from a panel on the bottom left\n\n - ๐ค And (many) more to come...\n\n- ๐ฆพ __Reliable__: Fully written in TypeScript\n\n## ๐ Setup\n\n```bash\n$ npm i @vue-flow/core\n\n# or\n$ yarn add @vue-flow/core\n```\n\n## ๐ฎ Quickstart\n\nA flow consists of __nodes__ and __edges__ (or just nodes). \nTogether they are called __elements__.\n\n__Each element needs a unique id.__ \n\nA node also needs an XY position.\nAn edge needs a source (node id) and a target (node id). \n\nA basic setup looks like this:\n\n```vue\n\n\n\n\n \n\n```\n\n\nโ ๏ธ __Make sure to import the necessary styles:__\n\n```css\n/* import the required styles */\n@import \"@vue-flow/core/dist/style.css\";\n\n/* import the default theme (optional) */\n@import \"@vue-flow/core/dist/theme-default.css\";\n```\n\n### ๐ชด Vue 2\n\n**_This library doesn't work with Vue 2._**\n\nVue Flow uses features that are exclusive to Vue 3, therefore\nthere is no support for Vue 2, nor will there be any support in the future, sorry.\n\n## ๐งช Development\n\n### Prerequisites\n\n- [Node.js v14+](https://nodejs.org/)\n- [PnPm](https://pnpm.io/)\n\n\n```bash\n# skip if you already have pnpm installed\n$ npm i -g pnpm\n\n# start examples\n$ pnpm dev\n\n# build all packages\n$ pnpm build\n```\n\n### ๐ณ Dev Container\n\nTo start using development containers, install the `Docker` extension\nfor VSCode.\nAfter installing the extension, open the connection menu either\non the bottom left or open it via the commands tab.\nSelect the `Open Folder in Container` option to mount the project.\n\nThe development container will spin up all packages example apps and forward\nthe ports to your machine.\n\n##  Discord\n\n[Join the Vue Flow Discord server!](https://discord.gg/rwt6CBk4b5)\n\nHere you can ask questions to the community, propose ideas for new features\nor share your work that you have built with Vue Flow.\n\n## ๐ Special Thanks\n\nThis project is built with\n\n- [React Flow](https://reactflow.dev/)\n - Vue flow is heavily based on [webkids'](https://webkid.io/) [react flow](https://reactflow.dev/). I wholeheartedly thank\n them for their amazing work! Without them Vue Flow would not exist.\n Please consider [donating](https://github.com/sponsors/wbkd) to them.\n\n- [D3.js](https://d3js.org/)\n - D3 makes all the zoom and pan actions in Vue Flow possible.\n\n- [VueUse](https://vueuse.org/)\n - VueUse is a collection of essential vue composition utilities\n\n## โญ Stargazers\n\nMany thanks to the kind individuals who leave a star.\nYour support is much appreciated!\n\n[](https://github.com/bcakmakoglu/vue-flow/stargazers)\n","readmeFilename":"README.md"}