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

docs(guide): update getting-started page

Browse Source
This commit is contained in:
braks
2023-11-05 10:51:41 +01:00
committed by Braks
parent 8ac5730314
commit ec66f90cb0
1 changed files with 50 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,19 @@
# Getting Started
# Getting Started 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
- [Node.js v14+](https://nodejs.org/)
- [Vue 3](https://vuejs.org/)
Before you begin, ensure you have the following installed on your machine:
- [Node.js v14 or above](https://nodejs.org/)
- [Vue 3.0 or above](https://vuejs.org/)
## Installation
Install Vue Flow using any of the following package managers:
```bash
npm i --save @vue-flow/core
@@ -17,53 +24,62 @@ pnpm i @vue-flow/core
## Usage
A flow consists of [<span class="font-bold text-blue-500">nodes</span>](/typedocs/interfaces/Node)
and (optionally) [<span class="font-bold text-purple-500">edges</span>](/typedocs/types/Edge).
Together we call them
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
target, both represented by node ids.
<span class="font-bold text-blue-500">Each element needs a unique id.</span>
A node also needs a [xy-position](/typedocs/interfaces/XYPosition). An edge needs at least a
source (node id) and a target (node id).
Below is a basic example:
```vue
<script setup>
import { VueFlow } from '@vue-flow/core'
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 } },
const elements = ref([
// Nodes
// An input node, specified by using `type: 'input'`
{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 } },
// 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}},
// An output node, specified by using `type: 'output'`
{ id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
// An output node, specified by using `type: 'output'`
{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' },
// Edges
// Most basic edge, only consists of an id, source-id and target-id
{id: 'e1-3', source: '1', target: '3'},
// An animated edge
{ id: 'e1-2', source: '1', target: '2', animated: true },
])
// An animated edge
{id: 'e1-2', source: '1', target: '2', animated: true},
])
</script>
<template>
<VueFlow v-model="elements" />
<VueFlow v-model="elements"/>
</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';
</style>
```
::: warning Necessary styles
Make sure you include the necessary styles.
See the [Theming](/guide/theming) section for more info.
:::
::: warning To ensure Vue Flow's functionality and design are optimally displayed, make sure you include the necessary
styles. Refer to the [Theming](/guide/theming) section for additional information. :::
## TypeScript
Vue Flow is fully written in [TypeScript](https://www.typescriptlang.org/), so it is highly recommended to use TypeScript to have the best possible DX and
avoid common mistakes.
The types are included in the library.
As Vue Flow is entirely written in TypeScript, we highly recommend utilizing TypeScript for improved developer
experience and prevention of common errors.
The necessary type definitions are included with the library.
[You can find the TypeDocs here](/typedocs/).
For more information, review our [TypeDocs documentation](/typedocs).