Support for static imports in custom vue components

[simontaurus]

Description

Following the examples and built-in components like plotly I've created a custom component based on an external lib (https://github.com/json-editor/json-editor):

class JsonEditor(Element,
                   component='jsoneditor.vue',
                   dependencies=[
                       'node_modules/@json-editor/json-editor/dist/jsoneditor.js'
                    ]):
  pass

---

A dynamic import inside jsoneditor.vue works correctly

<script>
export default { 
  async mounted() {
    await import("jsoneditor");
    var editor = new JSONEditor(this.$el);
  }
}
</script>

generating the following index.js

var jsoneditor = app.component('nicegui-jsoneditor', {template:'#tpl-jsoneditor',

  async mounted() {
    var editor = new JSONEditor(this.$el);
});

---

A static import

<script>
import {JSONEditor} from "@json-editor/json-editor"

export default { 
  async mounted() {
    var editor = new JSONEditor(this.$el);
  }
}
</script>

generates invalid javascript with a syntax error:

var jsoneditor = app.component('nicegui-jsoneditor', {template:'#tpl-jsoneditor',JSONEditor} from "@json-editor/json-editor";

export default {
  async mounted() {
    var editor = new JSONEditor(this.$el);
  }
});

---

A plain static import is simply removed leading to JSONEditor is not defined

<script>
import "@json-editor/json-editor";

export default { 
  async mounted() {
    var editor = new JSONEditor(this.$el);
  }
}
</script>

var jsoneditor = app.component('nicegui-jsoneditor', {template:'#tpl-jsoneditor',
  async mounted() {
    var editor = new JSONEditor(this.$el);
  }
});

Can I assume that static imports are currently not supported?

[falkoschindler]

Hi @simontaurus,

The problem seems to be that import "@..."; requires Vue3 which, unfurtunately, isn't supported for custom Vue components. NiceGUI uses vbuild, which is not very actively maintained and doesn't plan to support Vue3, as discussed in manatlan/vbuild#8.

Here is a related feature request: #1992. Let's continue the discussion over there.