Allow assigning a component for the default node with the template tag

[raf202]

I've been trying to assign a template for my default nodes and I have to do something like:

<VueFlow v-model:nodes="nodes" v-model:edges="edges" :node-types="nodeTypes">
import MyDefaultNode from "~/components/nodes/defaultnode.vue"; // Import your custom component
const nodeTypes = {
  default: MyDefaultNode
};

It would be much cleaner and readable to do it like this:

<VueFlow v-model:nodes="nodes" v-model:edges="edges">
   <template #node-default="props">
     <nodes-defaultnode :id="props.id" :data="props.data" />
   </template>
</Vueflow>

[bcakmakoglu]

Have you looked t the custom nodes example? That is quite literally what you can already do: https://vueflow.dev/examples/nodes/

[raf202]

Yes, it works for custom nodes, but not for editing the default node.

[bcakmakoglu]

You can do the same thing for the default node though 🤔

[bcakmakoglu]

Here's an example fyi: https://codesandbox.io/p/devbox/modest-rhodes-r8j69v?file=%2Fsrc%2FCustomNode.vue&workspaceId=ws_7iZPUfEyQC7Podbs7wwbxV

But I'm guessing the "issue" you encountered is that the default node still has its default styles applied to it.
Atm there's no "removing" default styles unless you just don't import the default theme altogether (which you can do, just remove this line @import '@vue-flow/core/dist/theme-default.css';