examples: add nuxt3 example

examples/nuxt3/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist

examples/nuxt3/README.md

@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install --shamefully-hoist
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.

examples/nuxt3/app.vue

@@ -0,0 +1,24 @@
+<template>
+  <NuxtPage />
+</template>
+
+<style>
+@import '@braks/vue-flow/dist/style.css';
+@import '@braks/vue-flow/dist/theme-default.css';
+
+html,
+body,
+#__nuxt {
+  margin: 0;
+  height: 100%;
+}
+
+#__nuxt {
+  text-transform: uppercase;
+  font-family: 'JetBrains Mono', monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+</style>

examples/nuxt3/components/BasicFlow.vue

@@ -0,0 +1,120 @@
+<script setup>
+import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
+import { ref } from 'vue'
+import { initialElements } from './initial-elements.js'
+
+/**
+ * useVueFlow provides all event handlers and store properties
+ * You can pass the composable an object that has the same properties as the VueFlow component props
+ */
+const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges } = useVueFlow()
+
+/**
+ * Our elements
+ */
+const elements = ref(initialElements)
+
+/**
+ * This is a Vue Flow event-hook which can be listened to from anywhere you call the composable, instead of only on the main component
+ *
+ * onPaneReady is called when viewpane & nodes have visible dimensions
+ */
+onPaneReady(({ fitView }) => {
+  fitView()
+})
+
+onNodeDragStop((e) => console.log('drag stop', e))
+
+/**
+ * onConnect is called when a new connection is created.
+ * You can add additional properties to your new edge (like a type or label) or block the creation altogether
+ */
+onConnect((params) => addEdges([params]))
+
+const dark = ref(false)
+
+/**
+ * To update node properties you can simply use your elements v-model and mutate the elements directly
+ * Changes should always be reflected on the graph reactively, without the need to overwrite the elements
+ */
+const updatePos = () =>
+  elements.value.forEach((el) => {
+    console.log(el, elements.value)
+    if (isNode(el)) {
+      el.position = {
+        x: Math.random() * 400,
+        y: Math.random() * 400,
+      }
+    }
+  })
+
+/**
+ * toObject transforms your current graph data to an easily persist-able object
+ */
+const logToObject = () => console.log(instance.value?.toObject())
+
+/**
+ * Resets the current viewpane transformation (zoom & pan)
+ */
+const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
+
+const toggleClass = () => {
+  dark.value = !dark.value
+  elements.value.forEach((el) => (el.class = dark.value ? 'dark' : 'light'))
+}
+</script>
+
+<template>
+  <VueFlow v-model="elements" class="basicflow" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
+    <Background pattern-color="#aaa" gap="8" />
+    <MiniMap />
+    <Controls />
+
+    <div class="controls">
+      <button style="background-color: #113285; color: white" @click="resetTransform">reset transform</button>
+      <button style="background-color: #6f3381; color: white" @click="updatePos">update positions</button>
+      <button
+        :style="{
+          backgroundColor: dark ? '#FFFFFB' : '#1C1C1C',
+          color: dark ? '#1C1C1C' : '#FFFFFB',
+        }"
+        @click="toggleClass"
+      >
+        toggle {{ dark ? 'light' : 'dark' }}
+      </button>
+      <button @click="logToObject">log toObject</button>
+    </div>
+  </VueFlow>
+</template>
+
+<style>
+.basicflow .vue-flow__node.dark {
+  background: #1c1c1c;
+  color: #fffffb;
+}
+
+.basicflow .controls {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  z-index: 4;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+}
+
+.basicflow .controls button {
+  padding: 5px;
+  border-radius: 5px;
+  font-weight: 500;
+  box-shadow: 0 5px 10px #0000004d;
+  cursor: pointer;
+}
+
+.basicflow .controls button:hover {
+  opacity: 0.8;
+  transform: scale(105%);
+  transition: 0.25s all ease;
+}
+</style>

examples/nuxt3/components/initial-elements.js

@@ -0,0 +1,55 @@
+import { MarkerType } from '@braks/vue-flow'
+
+/**
+ * You can pass elements together as a v-model value
+ * or split them up into nodes and edges and pass them to the `nodes` and `edges` props of Vue Flow (or useVueFlow composable)
+ */
+export const initialElements = [
+  {
+    id: '1',
+    type: 'input',
+    label: 'Node 1',
+    position: { x: 250, y: 5 },
+    class: 'light',
+  },
+  {
+    id: '2',
+    type: 'output',
+    label: 'Node 2',
+    position: { x: 100, y: 100 },
+    class: 'light',
+  },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
+  { id: '4', label: 'Node 4', position: { x: 150, y: 200 }, class: 'light' },
+  {
+    id: '5',
+    type: 'output',
+    label: 'Node 5',
+    position: { x: 300, y: 300 },
+    class: 'light',
+  },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  {
+    id: 'e1-3',
+    label: 'edge with arrowhead',
+    source: '1',
+    target: '3',
+    markerEnd: MarkerType.Arrow,
+  },
+  {
+    id: 'e4-5',
+    type: 'step',
+    label: 'step-edge',
+    source: '4',
+    target: '5',
+    style: { stroke: 'orange' },
+    labelBgStyle: { fill: 'orange' },
+  },
+  {
+    id: 'e3-4',
+    type: 'smoothstep',
+    label: 'smoothstep-edge',
+    source: '3',
+    target: '4',
+  },
+]

examples/nuxt3/nuxt.config.ts

@@ -0,0 +1,4 @@
+import { defineNuxtConfig } from 'nuxt'
+
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({})

examples/nuxt3/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "nuxt3-examples",
+  "version": "0.0.1",
+  "description": "Vue Flow Nuxt3 Example",
+  "productName": "Nuxt3 App",
+  "author": "bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt dev"
+  },
+  "dependencies": {
+    "@braks/vue-flow": "workspace:*"
+  },
+  "devDependencies": {
+    "nuxt": "3.0.0-rc.3"
+  }
+}

examples/nuxt3/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div style="height: 100%">
+    <BasicFlow />
+  </div>
+</template>

examples/nuxt3/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}