How to use ESM and Vue 3

[donnyv]

I see that you have docs on loading the lib using imports.

<script type="module">
    import { applyPolyfills, defineCustomElements } from "https://unpkg.com/@revolist/revogrid@latest/loader";
    defineCustomElements();
</script>

But how do I use this with Vue 3? Do I add it using "components"?

I tried this but it didn't work.

<script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3.2.45/dist/vue.esm-browser.js",
        "revo-grid": "https://unpkg.com/@revolist/revogrid@latest/loader"
      }
    }
</script>
<script type="module">
    import { createApp } from 'vue'
    import { defineCustomElements } from "revo-grid"

    const app = createApp({

        components: {
            VGrid: defineCustomElements()
        },

        data() {
            return {
                message: 'Hello World!',
                columns: [{ prop: "name" }, { prop: "details" }],
                rows: [{
                    name: "1",
                    details: "Item 1",
                }]
            }
        }

    }).mount('#app');
</script>

<div id="app">
    <h1>{{ message }}</h1>
    <v-grid 
        theme="compact"
        :source="rows"
        :columns="columns"/>
</div>

[awacode21]

I guess this is what you are searching for: https://revolist.github.io/revogrid/guide/framework.vue.overview.html#vue-3

[donnyv]

I tried that, doesn't seem to work. Console complains about no default export. The revolist/vue3-datagrid needs to be ESM compatible.

<script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3.2.45/dist/vue.esm-browser.js",
        "revo-grid": "https://unpkg.com/@revolist/vue3-datagrid"
      }
    }
</script>
<script type="module">
    import { createApp } from 'vue'
    import VGrid from "revo-grid"

    const app = createApp({

        components: {
            VGrid
        },

        data() {
            return {
                message: 'Hello World!',
                columns: [{ prop: "name" }, { prop: "details" }],
                rows: [{
                    name: "1",
                    details: "Item 1",
                }]
            }
        }

    }).mount('#app');
</script>

<div id="app">
    <h1>{{ message }}</h1>
    <v-grid 
        theme="compact"
        :source="rows"
        :columns="columns"/>
</div>