From 2d2ffb60ef261d7f709b9b8ea1537d60c8435300 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 19 Nov 2020 10:36:06 +0100
Subject: [PATCH] use functional component

---
 docs/src/demos/Examples/NodeView/Component.vue |  3 ++-
 packages/vue/src/VueRenderer.ts                | 15 ++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/docs/src/demos/Examples/NodeView/Component.vue b/docs/src/demos/Examples/NodeView/Component.vue
index 7c7f4f7b..dcc31796 100644
--- a/docs/src/demos/Examples/NodeView/Component.vue
+++ b/docs/src/demos/Examples/NodeView/Component.vue
@@ -7,7 +7,8 @@
     <component :is="inner" />
     <inner />
   </div> -->
-  <inner />
+  <inner as="p" class="hey" foo="bar" />
+  <!-- <component :is="inner" as="p" /> -->
 </template>
 
 <script>
diff --git a/packages/vue/src/VueRenderer.ts b/packages/vue/src/VueRenderer.ts
index ffe710bd..46053db7 100644
--- a/packages/vue/src/VueRenderer.ts
+++ b/packages/vue/src/VueRenderer.ts
@@ -38,16 +38,25 @@ class VueNodeView implements NodeView {
   mount(component: Vue | VueConstructor) {
     this.id = `id_${Math.random().toString(36).replace('0.', '')}`
 
+    const { id } = this
+
     const Inner = Vue.extend({
       functional: true,
-      render: createElement => {
+      // inheritAttrs: false,
+      props: {
+        as: {
+          type: String,
+          default: 'div',
+        },
+      },
+      render(createElement, context) {
         return createElement(
-          'div', {
+          context.props.as, {
             style: {
               whiteSpace: 'pre-wrap',
             },
             attrs: {
-              id: this.id,
+              id,
             },
           },
         )