update(docs): README.md

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

README.md

@@ -1,4 +1,5 @@
-# Vue Flow
+# Vue Flow 🌊
+
 [![vue flow](./src/assets/vue-flow.gif)](https://reactflow.dev/)
 ![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/vue-flow)
 [![dependencies Status](https://status.david-dm.org/gh/bcakmakoglu/vue-flow.svg)](https://david-dm.org/bcakmakoglu/vue-flow)
@@ -7,42 +8,68 @@
 ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/bcakmakoglu/vue-flow)
 ![GitHub last commit](https://img.shields.io/github/last-commit/bcakmakoglu/vue-flow)
 
-This repo is still a big construction site with nothing really finished.
+__A customizable Vue3 Flowchart.__
-You can check the examples to see what's working and what's not.
-Please visit [React Flow](https://reactflow.dev/) and support them if you like the idea. 
-They did most of the heavy lifting by writing the library in the first place.
-All I did is bring it to Vue.
 
-### Motivation
+### __🚧 This library is still under construction__
-Seeing as many libraries exist in the React ecosystem and Vue sadly does not get the same
-love and attention, I decided to port the React Flow library to Vue.js.
 
-## Usage
+_Docs aren't available yet_ but if you still want to try it out, check the available [examples](./examples) to get an
-Check the React Flow docs for usage. It's really the same.
+idea how to start using Vue Flow.
+
+## Features
+
+- 🎨 Customizable
+
+- 🦾 Fully written in TypeScript
+
+
+## Table of Contents
+
+* [🛠 Setup](#-setup)
+
+* [🎮 Quickstart](#-quickstart)
+
+* [🧪 Development](#-development)
+
+
+## 🛠 Setup
 
-### Vue 3
 ```bash
-# install vue flow
+$ npm i @braks/vue-flow
-$ pnpm add @braks/vue-flow
-
 # or
-$ npm i --save @braks/vue-flow
+$ yarn add @braks/vue-flow
 ```
 
-### Vue 2
+## 🎮 Quickstart
-Vue Flow doesn't work with Vue 2, sorry.
+
+```vue
+<template>
+  <Flow :elements="elements"></Flow>
+</template>
+<script setup>
+import { Flow, Elements } from '@braks/vue-flow'
+
+const elements = ref<Elements>([
+  {
+    id: '1',
+    data: {
+      label: 'This is a <strong>default node</strong>',
+    },
+    position: { x: 100, y: 100 },
+  },
+])
+</script>
+```
+
+### ▸ Vue 2
+
+**_This library doesn't work with Vue2._**
 
 ## 🧪 Development
+
 ```bash
 # start (dev)
-$ pnpm dev
+$ yarn dev
-
-# build app
-$ pnpm build
-
-# serve app from build
-$ pnpm serve
 
 # build dist
-$ pnpm build:dist
+$ yarn build
 ```

docs/components/Header.vue

@@ -27,7 +27,4 @@ a {
 .link {
   @apply bg-gray-200 rounded-lg px-4 py-2 !hover:text-yellow-500 text-black;
 }
-.router-link-active {
-  @apply rounded-lg bg-white font-semibold text-yellow-500;
-}
 </style>