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 18:43:33 +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
docs/src/guide/getting-started.md
+50 -34
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 ## Prerequisites
- [Node.js v14+](https://nodejs.org/) Before you begin, ensure you have the following installed on your machine:
- [Vue 3](https://vuejs.org/)
- [Node.js v14 or above](https://nodejs.org/)
- [Vue 3.0 or above](https://vuejs.org/)
## Installation ## Installation
Install Vue Flow using any of the following package managers:
```bash ```bash
npm i --save @vue-flow/core npm i --save @vue-flow/core
@@ -17,53 +24,62 @@ pnpm i @vue-flow/core
## Usage ## Usage
A flow consists of [<span class="font-bold text-blue-500">nodes</span>](/typedocs/interfaces/Node) In Vue Flow, an application structure consists
and (optionally) [<span class="font-bold text-purple-500">edges</span>](/typedocs/types/Edge). of [<span class="font-bold text-blue-500">nodes</span>](/typedocs/interfaces/Node)
Together we call them 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-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> Below is a basic example:
A node also needs a [xy-position](/typedocs/interfaces/XYPosition). An edge needs at least a
source (node id) and a target (node id).
```vue ```vue
<script setup> <script setup>
import { VueFlow } from '@vue-flow/core' 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>
<template> <template>
<VueFlow v-model="elements" /> <VueFlow v-model="elements"/>
</template> </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 ::: warning To ensure Vue Flow's functionality and design are optimally displayed, make sure you include the necessary
Make sure you include the necessary styles. styles. Refer to the [Theming](/guide/theming) section for additional information. :::
See the [Theming](/guide/theming) section for more info.
:::
## TypeScript ## 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 As Vue Flow is entirely written in TypeScript, we highly recommend utilizing TypeScript for improved developer
avoid common mistakes. experience and prevention of common errors.
The types are included in the library. The necessary type definitions are included with the library.
[You can find the TypeDocs here](/typedocs/). For more information, review our [TypeDocs documentation](/typedocs).