alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update getting-started page

Browse Source
This commit is contained in:
braks
2024-06-13 22:26:51 +02:00
parent 202d76777d
commit 1bacc926ed
1 changed files with 124 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
docs/src/guide/getting-started.md
View File

@@ -7,10 +7,10 @@ import LogosJavascript from '~icons/logos/javascript';
import LogosTypescript from '~icons/logos/typescript-icon'; import LogosTypescript from '~icons/logos/typescript-icon';
</script> </script>
# Kickstart Your Journey with Vue Flow! # Getting Started
This guide covers the basics of setting up and using Vue Flow. You'll learn how to install Vue Flow, configure it, and This guide covers the basics of setting up and using Vue Flow.
utilize it within your own projects. You'll learn how to install Vue Flow, configure it, and create your first flowchart.
## Prerequisites ## Prerequisites
@@ -45,78 +45,110 @@ $ yarn add @vue-flow/core
## Usage ## Usage
In Vue Flow, an application structure consists of [**nodes**](/typedocs/interfaces/Node) In Vue Flow, a graph consists of [**nodes**](/typedocs/interfaces/Node)and [**edges**](/typedocs/types/Edge), all of which are categorised as [**elements**](/typedocs/types/Elements).
and [**edges**](/typedocs/types/Edge), all of which are categorised as [**elements**](/typedocs/types/Elements).
**Each element requires a unique id.** **Each node and edge requires a unique id.**
Nodes additionally need an [XY-position](/typedocs/interfaces/XYPosition), while edges require a source and a Nodes also need an [XY-position](/typedocs/interfaces/XYPosition), while edges require a `source` and a
target, both represented by node ids. `target`, both represented by node ids.
::: warning NOTE! ::: warning NOTE!
To ensure Vue Flow's is correctly displayed, make sure you include the necessary styles. To ensure Vue Flow's is correctly displayed, make sure you include the necessary styles.
```css
/* these are necessary styles for vue flow */
@import '@vue-flow/core/dist/style.css';
/* this contains the default theme, these are optional styles */
@import '@vue-flow/core/dist/theme-default.css';
```
Refer to the [Theming](/guide/theming) section for additional information. Refer to the [Theming](/guide/theming) section for additional information.
::: :::
Here's a simple Vue Flow example to get you started: Here's a simple example to get you started:
::: code-group ::: code-group
```vue [<LogosJavascript />] ```vue [<LogosJavascript />]
<script setup> <script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core' import { VueFlow } from '@vue-flow/core'
// these components are only shown as examples of how to use a custom node or edge
// you can find many examples of how to create these custom components in the examples page of the docs
import SpecialNode from './components/SpecialNode.vue' import SpecialNode from './components/SpecialNode.vue'
import SpecialEdge from './components/SpecialEdge.vue' import SpecialEdge from './components/SpecialEdge.vue'
const elements = ref([ // these are our nodes
// nodes const nodes = ref([
// an input node, specified by using `type: 'input'` // an input node, specified by using `type: 'input'`
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } }, {
id: '1',
type: 'input',
position: { x: 250, y: 5 },
// all nodes can have a data object containing any data you want to pass to the node
// a label can property can be used for default nodes
data: { label: 'Node 1' },
},
// default node, you can omit `type: 'default'` as it's the fallback type // default node, you can omit `type: 'default'` as it's the fallback type
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, }, {
id: '2',
position: { x: 100, y: 100 },
data: { label: 'Node 2' },
},
// An output node, specified by using `type: 'output'` // An output node, specified by using `type: 'output'`
{ id: '3', type: 'output', label: 'Node 3', position: { x: 400, y: 200 } }, {
id: '3',
type: 'output',
position: { x: 400, y: 200 },
data: { label: 'Node 3' },
},
// A custom node, specified by using a custom type name // this is a custom node
// we choose `type: 'special'` for this example // we set it by using a custom type name we choose, in this example `special`
// the name can be freely chosen, there are no restrictions as long as it's a string
{ {
id: '4', id: '4',
type: 'special', type: 'special', // <-- this is the custom node type name
label: 'Node 4',
position: { x: 400, y: 200 }, position: { x: 400, y: 200 },
// pass custom data to the node
data: { data: {
// you can pass any data you want to the node label: 'Node 4',
hello: 'world', hello: 'world',
}, },
}, },
])
// edges // these are our edges
const edges = ref([
// default bezier edge
// consists of an edge id, source node id and target node id
{
id: 'e1->2',
source: '1',
target: '2',
},
// simple default bezier edge // set `animated: true` to create an animated edge path
// consists of an id, source-id and target-id {
{ id: 'e1-3', source: '1', target: '3' }, id: 'e2->3',
source: '2',
// an animated edge, specified by using `animated: true` target: '3',
{ id: 'e1-2', source: '1', target: '2', animated: true }, animated: true,
},
// a custom edge, specified by using a custom type name // a custom edge, specified by using a custom type name
// we choose `type: 'special'` for this example // we choose `type: 'special'` for this example
{ {
id: 'e1-4', id: 'e3->4',
type: 'special', type: 'special',
source: '1', source: '3',
target: '4', target: '4',
// pass custom data to the edge // all edges can have a data object containing any data you want to pass to the edge
data: { data: {
// You can pass any data you want to the edge
hello: 'world', hello: 'world',
} }
}, },
@@ -124,7 +156,7 @@ const elements = ref([
</script> </script>
<template> <template>
<VueFlow v-model="elements"> <VueFlow :nodes="nodes" :edges="edges">
<!-- bind your custom node type to a component by using slots, slot names are always `node-<type>` --> <!-- bind your custom node type to a component by using slots, slot names are always `node-<type>` -->
<template #node-special="specialNodeProps"> <template #node-special="specialNodeProps">
<SpecialNode v-bind="specialNodeProps" /> <SpecialNode v-bind="specialNodeProps" />
@@ -148,59 +180,84 @@ const elements = ref([
```vue [<LogosTypescript />] ```vue [<LogosTypescript />]
<script setup lang="ts"> <script setup lang="ts">
import type { Elements } from '@vue-flow/core' import { ref } from 'vue'
import type { Node, Edge } from '@vue-flow/core'
import { VueFlow } from '@vue-flow/core' import { VueFlow } from '@vue-flow/core'
// these components are only shown as examples of how to use a custom node or edge
// you can find many examples of how to create these custom components in the examples page of the docs
import SpecialNode from './components/SpecialNode.vue' import SpecialNode from './components/SpecialNode.vue'
import SpecialEdge from './components/SpecialEdge.vue' import SpecialEdge from './components/SpecialEdge.vue'
const elements = ref<Elements>([ // these are our nodes
// nodes const nodes = ref<Node[]>([
// an input node, specified by using `type: 'input'` // an input node, specified by using `type: 'input'`
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } }, {
id: '1',
type: 'input',
position: { x: 250, y: 5 },
// all nodes can have a data object containing any data you want to pass to the node
// a label can property can be used for default nodes
data: { label: 'Node 1' },
},
// default node, you can omit `type: 'default'` as it's the fallback type // default node, you can omit `type: 'default'` as it's the fallback type
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, }, {
id: '2',
position: { x: 100, y: 100 },
data: { label: 'Node 2' },
},
// An output node, specified by using `type: 'output'` // An output node, specified by using `type: 'output'`
{ id: '3', type: 'output', label: 'Node 3', position: { x: 400, y: 200 } }, {
id: '3',
// A custom node, specified by using a custom type name type: 'output',
// we choose `type: 'special'` for this example
{
id: '4',
type: 'special',
label: 'Node 4',
position: { x: 400, y: 200 }, position: { x: 400, y: 200 },
data: { label: 'Node 3' },
},
// pass custom data to the node // this is a custom node
// we set it by using a custom type name we choose, in this example `special`
// the name can be freely chosen, there are no restrictions as long as it's a string
{
id: '4',
type: 'special', // <-- this is the custom node type name
position: { x: 400, y: 200 },
data: { data: {
// you can pass any data you want to the node label: 'Node 4',
hello: 'world', hello: 'world',
}, },
}, },
])
// edges // these are our edges
const edges = ref<Edge[]>([
// simple default bezier edge // default bezier edge
// consists of an id, source-id and target-id // consists of an edge id, source node id and target node id
{ id: 'e1-3', source: '1', target: '3' }, {
id: 'e1->2',
source: '1',
target: '2',
},
// set `animated: true` to create an animated edge path
{
id: 'e2->3',
source: '2',
target: '3',
animated: true,
},
// an animated edge, specified by using `animated: true`
{ id: 'e1-2', source: '1', target: '2', animated: true },
// a custom edge, specified by using a custom type name // a custom edge, specified by using a custom type name
// we choose `type: 'special'` for this example // we choose `type: 'special'` for this example
{ {
id: 'e1-4', id: 'e3->4',
type: 'special', type: 'special',
source: '1', source: '3',
target: '4', target: '4',
// pass custom data to the edge // all edges can have a data object containing any data you want to pass to the edge
data: { data: {
// You can pass any data you want to the edge
hello: 'world', hello: 'world',
} }
}, },
@@ -208,7 +265,7 @@ const elements = ref<Elements>([
</script> </script>
<template> <template>
<VueFlow v-model="elements"> <VueFlow :nodes="nodes" :edges="edges">
<!-- bind your custom node type to a component by using slots, slot names are always `node-<type>` --> <!-- bind your custom node type to a component by using slots, slot names are always `node-<type>` -->
<template #node-special="specialNodeProps"> <template #node-special="specialNodeProps">
<SpecialNode v-bind="specialNodeProps" /> <SpecialNode v-bind="specialNodeProps" />