Ag-Grid с VueJS (vanillajs)

Question

Я пытаюсь реализовать Ag-Grid с VueJS, но в версии vanillajs (без какого-либо диспетчера пакетов или модулей).

Я пробовал использовать umd-версию ag-grid ( https://cdn.jsdelivr.net/npm/ag-grid-vue@22.1.1/dist/ag-grid-vue.umd.js), как показано ниже пример.

https://jsfiddle.net/p429h0sL/

Но ниже была выдана ошибка;

vue.js:634 [Vue warn]: Unknown custom element: <ag-grid-vue> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

Я тоже пробовал это решение, но и с этим не повезло.

Подскажите, как поступить?

Answer 1

Я нашел решение.

Первое, что мне нужно было сделать, добавить строку, как предлагается в этом решении.

После добавления этой строки в ag-grid-vue.umd.js;

window.AgGridVue = AgGridVue;

перед этой строкой;

     return AgGridVue;
}(external_commonjs_vue_commonjs2_vue_root_Vue_default.a));

Таким образом, я подключил переменную AgGridVue к объекту окна, в результате чего ее можно было использовать глобально в среде js.

Во-вторых, я назвал правильные файлы js

<script src="ag-grid-community.min.js"></script>
<script src="ag-grid-enterprise.min.js"></script> <!-- This line is optional, if you want to use enterprise features -->
<script src="vue.js"></script>
<script src="ag-grid-vue.umd.js"></script> <!-- This is the manipulated file -->

И после этого я создал Vue и ag-grid

<div id="vue" style="width:100%;height:600px">

    <ag-grid-vue style="width:100%;height:600px" class="ag-theme-bootstrap" :column-defs="columnDefs"
        :row-data="rowData" ></ag-grid-vue>

</div>

 <script>

    let vueData = {
        gridApi: null,
        rowData: [{test:1}],
        columnDefs: [{field:"test",headerName:"test"}]
    };

    window.onload = function () {



        Vue.component("ag-grid-vue", AgGridVue);

        let vue = new Vue({
            el: "#vue",
            data: vueData,
        })

    }
</script>

Важное примечание: вы не должны использовать имена свойств camelCase в тегеag-grid-vue ( как я объяснил здесь). Вместо этого вы должны использовать объявление kebap-case..

Так все работает нормально.