Fix component names in Vue 3 devtools

ueberdosis · Apr 18, 2023 · 74cf18e · 74cf18e
1 parent 56288d7
commit 74cf18e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/packages/vue-3/src/NodeViewContent.ts b/packages/vue-3/src/NodeViewContent.ts
@@ -1,6 +1,8 @@
 import { defineComponent, h } from 'vue'
 
 export const NodeViewContent = defineComponent({
+  name: 'NodeViewContent',
+
   props: {
     as: {
       type: String,

diff --git a/packages/vue-3/src/NodeViewWrapper.ts b/packages/vue-3/src/NodeViewWrapper.ts
@@ -1,6 +1,8 @@
 import { defineComponent, h } from 'vue'
 
 export const NodeViewWrapper = defineComponent({
+  name: 'NodeViewWrapper',
+
   props: {
     as: {
       type: String,

diff --git a/packages/vue-3/src/VueNodeViewRenderer.ts b/packages/vue-3/src/VueNodeViewRenderer.ts
@@ -108,6 +108,13 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
       // @ts-ignore
       // eslint-disable-next-line
       __cssModules: this.component.__cssModules,
+      // add support for vue devtools
+      // @ts-ignore
+      // eslint-disable-next-line
+      __name: this.component.__name,
+      // @ts-ignore
+      // eslint-disable-next-line
+      __file: this.component.__file,
     })
 
     this.renderer = new VueRenderer(extendedComponent, {