Skip to content

Commit fcf3078

Browse files
committed
docs(guide): cleanup
1 parent 39cf824 commit fcf3078

File tree

1 file changed

+26
-22
lines changed

1 file changed

+26
-22
lines changed

docs/src/guide/getting-started.md

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
# Getting Started with Vue Flow
1+
# Kickstart Your Journey with Vue Flow!
22

33
This guide covers the basics of setting up and using Vue Flow. You'll learn how to install Vue Flow, configure it, and
44
utilize it within your own projects.
55

66
## Prerequisites
77

8-
Before you begin, ensure you have the following installed on your machine:
8+
Before you strap in, make sure you're equipped with:
99

10-
- [Node.js v14 or above](https://nodejs.org/)
10+
- [Node.js v16 or above](https://nodejs.org/)
1111
- [Vue 3.0 or above](https://vuejs.org/)
1212

1313
## Installation
1414

15-
Install Vue Flow using any of the following package managers:
15+
Use your preferred package manager to install Vue Flow:
1616

1717
```bash
1818
npm i --save @vue-flow/core
@@ -25,41 +25,45 @@ pnpm i @vue-flow/core
2525
## Usage
2626

2727
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
3335
target, both represented by node ids.
3436

35-
::: warning Attention!
37+
::: warning Pay Attention!
3638
To ensure Vue Flow's is correctly displayed, make sure you include the necessary styles.
3739

3840
Refer to the [Theming](/guide/theming) section for additional information.
3941
:::
4042

43+
Here's a simple Vue Flow example to get you started:
44+
4145
```vue
4246
<script setup>
4347
import { VueFlow } from '@vue-flow/core'
4448
4549
const elements = ref([
4650
// Nodes
4751
// 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 } },
4953
5054
// 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 } },
5357
5458
// 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 } },
5660
5761
// Edges
5862
// 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' },
6064
6165
// An animated edge
62-
{id: 'e1-2', source: '1', target: '2', animated: true},
66+
{ id: 'e1-2', source: '1', target: '2', animated: true },
6367
])
6468
</script>
6569
@@ -68,11 +72,11 @@ const elements = ref([
6872
</template>
6973
7074
<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';
7680
</style>
7781
```
7882

@@ -82,4 +86,4 @@ As Vue Flow is entirely written in TypeScript, we highly recommend utilizing Typ
8286
experience and prevention of common errors.
8387
The necessary type definitions are included with the library.
8488

85-
For more information, review our [TypeDocs documentation](/typedocs).
89+
For more information, review our [TypeDocs documentation](/typedocs/).

0 commit comments

Comments
 (0)