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 18:43:33 +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
docs/src/guide/getting-started.md
+26 -22
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 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. utilize it within your own projects.
## Prerequisites ## 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/) - [Vue 3.0 or above](https://vuejs.org/)
## Installation ## Installation
Install Vue Flow using any of the following package managers: Use your preferred package manager to install Vue Flow:
```bash ```bash
npm i --save @vue-flow/core npm i --save @vue-flow/core
@@ -25,19 +25,23 @@ pnpm i @vue-flow/core
## Usage ## Usage
In Vue Flow, an application structure consists In Vue Flow, an application structure consists
of [<span class="font-bold text-blue-500">nodes</span>](/typedocs/interfaces/Node) of [<span class="font-bold">nodes</span>](/typedocs/interfaces/Node)
and [<span class="font-bold text-purple-500">edges</span>](/typedocs/types/Edge), all of which are categorised as and [<span class="font-bold">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">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 <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. 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. 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. Refer to the [Theming](/guide/theming) section for additional information.
::: :::
Here's a simple Vue Flow example to get you started:
```vue ```vue
<script setup> <script setup>
import { VueFlow } from '@vue-flow/core' import { VueFlow } from '@vue-flow/core'
@@ -45,21 +49,21 @@ import { VueFlow } from '@vue-flow/core'
const elements = ref([ const elements = ref([
// Nodes // Nodes
// 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', label: 'Node 1', position: { x: 250, y: 5 } },
// Default nodes, you can omit `type: 'default'` // Default nodes, you can omit `type: 'default'`
{id: '2', label: 'Node 2', position: {x: 100, y: 100},}, { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
{id: '3', label: 'Node 3', position: {x: 400, y: 100}}, { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
// An output node, specified by using `type: 'output'` // 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 // Edges
// Most basic edge, only consists of an id, source-id and target-id // 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 // An animated edge
{id: 'e1-2', source: '1', target: '2', animated: true}, { id: 'e1-2', source: '1', target: '2', animated: true },
]) ])
</script> </script>
@@ -68,11 +72,11 @@ const elements = ref([
</template> </template>
<style> <style>
/* import the necessary styles for Vue Flow to work */ /* import the necessary styles for Vue Flow to work */
@import '@vue-flow/core/dist/style.css'; @import '@vue-flow/core/dist/style.css';
/* import the default theme, this is optional but generally recommended */ /* import the default theme, this is optional but generally recommended */
@import '@vue-flow/core/dist/theme-default.css'; @import '@vue-flow/core/dist/theme-default.css';
</style> </style>
``` ```
@@ -82,4 +86,4 @@ As Vue Flow is entirely written in TypeScript, we highly recommend utilizing Typ
experience and prevention of common errors. experience and prevention of common errors.
The necessary type definitions are included with the library. 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/).