1
- # Getting Started with Vue Flow
1
+ # Kickstart Your Journey with Vue Flow!
2
2
3
3
This guide covers the basics of setting up and using Vue Flow. You'll learn how to install Vue Flow, configure it, and
4
4
utilize it within your own projects.
5
5
6
6
## Prerequisites
7
7
8
- Before you begin, ensure you have the following installed on your machine :
8
+ Before you strap in, make sure you're equipped with :
9
9
10
- - [ Node.js v14 or above] ( https://nodejs.org/ )
10
+ - [ Node.js v16 or above] ( https://nodejs.org/ )
11
11
- [ Vue 3.0 or above] ( https://vuejs.org/ )
12
12
13
13
## Installation
14
14
15
- Install Vue Flow using any of the following package managers :
15
+ Use your preferred package manager to install Vue Flow :
16
16
17
17
``` bash
18
18
npm i --save @vue-flow/core
@@ -25,41 +25,45 @@ pnpm i @vue-flow/core
25
25
## Usage
26
26
27
27
In Vue Flow, an application structure consists
28
- of [ <span class =" font-bold text-blue-500 " >nodes</span >] ( /typedocs/interfaces/Node )
29
- and [ <span class =" font-bold text-purple-500 " >edges</span >] ( /typedocs/types/Edge ) , all of which are categorised as
30
- [ <span class =" font-bold text-green-500 " >elements</span >] ( /typedocs/types/Elements ) .
31
- <span class =" font-bold text-blue-500 " >Each element requires a unique id.</span >
32
- Nodes additionally need a specific position, while edges require a source and a
28
+ of [ <span class =" font-bold " >nodes</span >] ( /typedocs/interfaces/Node )
29
+ and [ <span class =" font-bold " >edges</span >] ( /typedocs/types/Edge ) , all of which are categorised as
30
+ [ <span class =" font-bold " >elements</span >] ( /typedocs/types/Elements ) .
31
+
32
+ <span class =" font-bold " >Each element requires a unique id.</span >
33
+
34
+ Nodes additionally need an [ XY-position] ( /typedocs/interfaces/XYPosition ) , while edges require a source and a
33
35
target, both represented by node ids.
34
36
35
- ::: warning Attention!
37
+ ::: warning Pay Attention!
36
38
To ensure Vue Flow's is correctly displayed, make sure you include the necessary styles.
37
39
38
40
Refer to the [ Theming] ( /guide/theming ) section for additional information.
39
41
:::
40
42
43
+ Here's a simple Vue Flow example to get you started:
44
+
41
45
``` vue
42
46
<script setup>
43
47
import { VueFlow } from '@vue-flow/core'
44
48
45
49
const elements = ref([
46
50
// Nodes
47
51
// An input node, specified by using `type: 'input'`
48
- {id: '1', type: 'input', label: 'Node 1', position: {x: 250, y: 5} },
52
+ { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
49
53
50
54
// Default nodes, you can omit `type: 'default'`
51
- {id: '2', label: 'Node 2', position: {x: 100, y: 100}, },
52
- {id: '3', label: 'Node 3', position: {x: 400, y: 100} },
55
+ { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
56
+ { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
53
57
54
58
// An output node, specified by using `type: 'output'`
55
- {id: '4', type: 'output', label: 'Node 4', position: {x: 400, y: 200} },
59
+ { id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
56
60
57
61
// Edges
58
62
// Most basic edge, only consists of an id, source-id and target-id
59
- {id: 'e1-3', source: '1', target: '3'},
63
+ { id: 'e1-3', source: '1', target: '3' },
60
64
61
65
// An animated edge
62
- {id: 'e1-2', source: '1', target: '2', animated: true},
66
+ { id: 'e1-2', source: '1', target: '2', animated: true },
63
67
])
64
68
</script>
65
69
@@ -68,11 +72,11 @@ const elements = ref([
68
72
</template>
69
73
70
74
<style>
71
- /* import the necessary styles for Vue Flow to work */
72
- @import '@vue-flow/core/dist/style.css';
73
-
74
- /* import the default theme, this is optional but generally recommended */
75
- @import '@vue-flow/core/dist/theme-default.css';
75
+ /* import the necessary styles for Vue Flow to work */
76
+ @import '@vue-flow/core/dist/style.css';
77
+
78
+ /* import the default theme, this is optional but generally recommended */
79
+ @import '@vue-flow/core/dist/theme-default.css';
76
80
</style>
77
81
```
78
82
@@ -82,4 +86,4 @@ As Vue Flow is entirely written in TypeScript, we highly recommend utilizing Typ
82
86
experience and prevention of common errors.
83
87
The necessary type definitions are included with the library.
84
88
85
- For more information, review our [ TypeDocs documentation] ( /typedocs ) .
89
+ For more information, review our [ TypeDocs documentation] ( /typedocs/ ) .
0 commit comments