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

docs(guide): cleanup

Browse Source
This commit is contained in:
braks
2023-11-05 12:25:56 +01:00
committed by Braks
parent 39cf82431f
commit fcf3078d5b
1 changed files with 26 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,18 @@
# Getting Started with Vue Flow
# Kickstart Your Journey with Vue Flow!
This guide covers the basics of setting up and using Vue Flow. You'll learn how to install Vue Flow, configure it, and
utilize it within your own projects.
## Prerequisites
Before you begin, ensure you have the following installed on your machine:
Before you strap in, make sure you're equipped with:
- [Node.js v14 or above](https://nodejs.org/)
- [Node.js v16 or above](https://nodejs.org/)
- [Vue 3.0 or above](https://vuejs.org/)
## Installation
Install Vue Flow using any of the following package managers:
Use your preferred package manager to install Vue Flow:
```bash
npm i --save @vue-flow/core
@@ -25,19 +25,23 @@ pnpm i @vue-flow/core
## Usage
In Vue Flow, an application structure consists
of [<span class="font-bold text-blue-500">nodes</span>](/typedocs/interfaces/Node)
and [<span class="font-bold text-purple-500">edges</span>](/typedocs/types/Edge), all of which are categorised as
[<span class="font-bold text-green-500">elements</span>](/typedocs/types/Elements).
<span class="font-bold text-blue-500">Each element requires a unique id.</span>
Nodes additionally need a specific position, while edges require a source and a
of [<span class="font-bold">nodes</span>](/typedocs/interfaces/Node)
and [<span class="font-bold">edges</span>](/typedocs/types/Edge), all of which are categorised as
[<span class="font-bold">elements</span>](/typedocs/types/Elements).
<span class="font-bold">Each element requires a unique id.</span>
Nodes additionally need an [XY-position](/typedocs/interfaces/XYPosition), while edges require a source and a
target, both represented by node ids.
::: warning Attention!
::: warning Pay Attention!
To ensure Vue Flow's is correctly displayed, make sure you include the necessary styles.
Refer to the [Theming](/guide/theming) section for additional information.
:::
Here's a simple Vue Flow example to get you started:
```vue
<script setup>
import { VueFlow } from '@vue-flow/core'
@@ -45,21 +49,21 @@ import { VueFlow } from '@vue-flow/core'
const elements = ref([
// Nodes
// An input node, specified by using `type: 'input'`
{id: '1', type: 'input', label: 'Node 1', position: {x: 250, y: 5}},
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
// Default nodes, you can omit `type: 'default'`
{id: '2', label: 'Node 2', position: {x: 100, y: 100},},
{id: '3', label: 'Node 3', position: {x: 400, y: 100}},
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
// An output node, specified by using `type: 'output'`
{id: '4', type: 'output', label: 'Node 4', position: {x: 400, y: 200}},
{ id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
// Edges
// Most basic edge, only consists of an id, source-id and target-id
{id: 'e1-3', source: '1', target: '3'},
{ id: 'e1-3', source: '1', target: '3' },
// An animated edge
{id: 'e1-2', source: '1', target: '2', animated: true},
{ id: 'e1-2', source: '1', target: '2', animated: true },
])
</script>
@@ -68,11 +72,11 @@ const elements = ref([
</template>
<style>
/* import the necessary styles for Vue Flow to work */
@import '@vue-flow/core/dist/style.css';
/* import the default theme, this is optional but generally recommended */
@import '@vue-flow/core/dist/theme-default.css';
/* import the necessary styles for Vue Flow to work */
@import '@vue-flow/core/dist/style.css';
/* import the default theme, this is optional but generally recommended */
@import '@vue-flow/core/dist/theme-default.css';
</style>
```
@@ -82,4 +86,4 @@ As Vue Flow is entirely written in TypeScript, we highly recommend utilizing Typ
experience and prevention of common errors.
The necessary type definitions are included with the library.
For more information, review our [TypeDocs documentation](/typedocs).
For more information, review our [TypeDocs documentation](/typedocs/).