How to add a costum Node component?

[Elektrokiste]

Maybe its due to my inkompetenze, but i am not able to create a custom node component at all. I'd try to follow the Guide in the Doc, use the default component as a base, copied the content of the file Node.vue to a new file inside my projekt. then use the Example from the doc

<script setup> import { BaklavaEditor, Components } from "@baklavajs/renderer-vue"; const BaklavaNode = Components.Node; // example, replace with your component: import MyNodeRenderer from "./MyNodeRenderer.vue"; </script>

Tryed to fix the Imports of the vue-File, which doesn't really work, since the files on the Repo are normal vue files, but the npm installed version is only vue.d.ts which does not seem to fit together in any way

what do I do wrong? I dont get it

[irminsul]

Here's how I did it to color the title bar of failed nodes red and show an error message:

<script setup lang="ts">
import {computed, useAttrs} from 'vue';
import {Components, useViewModel} from "@baklavajs/renderer-vue";

const BaklavaNode = Components.Node;
const BaklavaNodeInterface = Components.NodeInterface;

const attrs = useAttrs();
const {viewModel} = useViewModel();

const classesContent = computed(() => ({
  "--reverse-y": attrs.node.reverseY ?? viewModel.value.settings.nodes.reverseY,
}));

const displayedInputs = computed(() => Object.values(attrs.node.inputs).filter((ni) => !ni.hidden));
const displayedOutputs = computed(() => Object.values(attrs.node.outputs).filter((ni) => !ni.hidden));

const hasError = computed(() => attrs.node.state == 'FAILED');
</script>

<template>
  <component :is="BaklavaNode" v-bind="$attrs" :class="{ 'has-error': hasError }">
    <template #content>
      <div class="__content" :class="classesContent" @keydown.delete.stop>
        <!-- Error -->
        <div class="__error" v-if="hasError">{{ $attrs.node.lastError }}</div>

        <!-- Outputs -->
        <div class="__outputs">
          <template v-for="output in displayedOutputs" :key="output.id">
            <component :is="BaklavaNodeInterface" :node="$attrs.node" :intf="output"/>
          </template>
        </div>

        <!-- Inputs -->
        <div class="__inputs">
          <template v-for="input in displayedInputs" :key="input.id">
            <component :is="BaklavaNodeInterface" :node="$attrs.node" :intf="input"/>
          </template>
        </div>
      </div>
    </template>
  </component>
</template>

<style>
.baklava-node.has-error > .__title {
  background: #c40000;
}
</style>

You also need to tell the editor to use your custom component:

<template>
  <BaklavaEditor :view-model="baklavaViewModel">
    <template #node="nodeProps">
      <GraphNode :key="nodeProps.node.id" v-bind="nodeProps"/>
    </template>
  </BaklavaEditor>
</template>

I'm still learning Vue, so this might not be the best way to do it 🤷