new Installation

[AxelGanter]

Hi all,
I tried to test vue-flow in a new project

npm init vue@latest flowchart22.2
cd flowchart22.2
npm i @braks/vue-flow

src/components/FlowChart.vue like example from here https://types.vueflow.dev/
FlowChart.vue.txt

at first I ran into "ReferenceError: ref is not defined"
after adding import { ref } from "vue" to FlowChart.vue the Error disappers, and a <div class="vue-flow"> appers inside the dom, but the <svg class="vue-flow__edges vue-flow__container"> is empty

no warnings, no errors

package.json.txt
HomeView.vue.txt

[AxelGanter]

git clone https://github.com/bcakmakoglu/vue-flow.git
npm i
npm run dev

gives error Failed to resolve entry for package "@braks/vue-flow"

[bcakmakoglu]

The README in types.vueflow.dev is old (will be updated today probably)

it should not be <VueFlow :elements="elements"></VueFlow> but <VueFlow v-model="elements"></VueFlow>.
Check the Examples either here or the ones on the docs page here.

The "ref" import is obviously mandatory if you're not using a vue global auto importer like unplugin-auto-import

For local development:
You're not reading the README instructions correctly.
Use yarn not npm. The repository is built with yarn workspaces.
Npm will not work.

[bcakmakoglu]

Also update to the latest version, it's not 0.4.0 anymore it's 0.4.7 and todays going to be 0.4.8 with heavy performance improvements :)

[AxelGanter]

thank you for your answers
now I tried the following

vue init webpack flowchart22.4
cd flowchart22.4
yarn add @braks/vue-flow
yarn install
yarn run dev

with your "Getting started"-example I get those errors

package.json.txt

and when I use your "Basic"-example I getother errors

with
yarn add ts-loader
I get those errors

[bcakmakoglu]

I think you misunderstood me:
For your own project you can use whatever package manager you want, npm, yarn pnpm - it doesn't matter.

If you want to set up this project you need yarn (i.e. this exact repository, not the package).

Anyway let's go through the basic setup steps:

# create a new vue project
$ npm init vue@latest

$ cd my-project

$ npm install
# or if you use yarn
$ yarn install

# add vue flow to your dependencies
$ npm i @braks/vue-flow

After these steps you have successfully created a basic vue project and installed vue flow.

For vue flow to work properly we need to import some styles before creating our first flow.

Go into your App.vue or any of your entry point files (index/main.js/ts) and import the following css files:

• @braks/vue-flow/dist/style.css
• @braks/vue-flow/dist/theme-default.css

Now create a new component in your components directory, let's name it Basic.vue.
Assuming you're using TypeScipt we follow the example and Basic.vue should look like this:

<script lang="ts" setup>
import {
  VueFlow,
  MiniMap,
  Controls,
  Background,
  isNode,
  useVueFlow,
} from "@braks/vue-flow";
import type { Elements } from "@braks/vue-flow";
import { ref } from "vue";

const elements = ref<Elements>([
  {
    id: "1",
    type: "input",
    label: "Node 1",
    position: { x: 250, y: 5 },
    class: "light",
  },
  { id: "2", label: "Node 2", position: { x: 100, y: 100 }, class: "light" },
  { id: "3", label: "Node 3", position: { x: 400, y: 100 }, class: "light" },
  { id: "4", label: "Node 4", position: { x: 400, y: 200 }, class: "light" },
  { id: "e1-2", source: "1", target: "2", animated: true },
  { id: "e1-3", source: "1", target: "3" },
]);
const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges } =
  useVueFlow({
    defaultZoom: 1.5,
    minZoom: 0.2,
    maxZoom: 4,
  });

onPaneReady(({ fitView }) => {
  fitView();
});
onNodeDragStop((e) => console.log("drag stop", e));
onConnect((params) => addEdges([params]));

const updatePos = () =>
  elements.value.forEach((el) => {
    if (isNode(el)) {
      el.position = {
        x: Math.random() * 400,
        y: Math.random() * 400,
      };
    }
  });

const logToObject = () => console.log(instance.value?.toObject());
const resetTransform = () =>
  instance.value?.setTransform({ x: 0, y: 0, zoom: 1 });
const toggleclass = () =>
  elements.value.forEach(
    (el) => (el.class = el.class === "light" ? "dark" : "light")
  );
</script>
<template>
  <VueFlow v-model="elements" class="vue-flow-basic-example">
    <Background />
    <MiniMap />
    <Controls />
    <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
      <button style="margin-right: 5px" @click="resetTransform">
        reset transform
      </button>
      <button style="margin-right: 5px" @click="updatePos">change pos</button>
      <button style="margin-right: 5px" @click="toggleclass">
        toggle class
      </button>
      <button @click="logToObject">toObject</button>
    </div>
  </VueFlow>
</template>

We're done, include the Basic.vue component in your view and you should have a nice looking flowchart on your screen 😄

[AxelGanter]

thanks a lot, now it is working! :-D