CODEWITHSUNDEEP
vue.jsag-gridag-grid-vue
paroxit
paroxit

Reputation: 667

Ag-Grid with VueJS (vanillajs)

I'm trying to implement Ag-Grid with VueJS but in a vanillajs version(without any package or module manager).

I've tried to use umd version of ag-grid (https://cdn.jsdelivr.net/npm/[email protected]/dist/ag-grid-vue.umd.js) as in below example.

https://jsfiddle.net/p429h0sL/

But below error was thrown;

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>)

I've also tried this solution but no luck with that either.

Can you tell me how to proceed ?

Upvotes: 0

Views: 1021

Answers (1)

paroxit
paroxit

Reputation: 667

I've found the solution.

First thing I needed to do, add line as suggested in this solution.

After adding this line in ag-grid-vue.umd.js;

window.AgGridVue = AgGridVue;

before this line;

     return AgGridVue;
}(external_commonjs_vue_commonjs2_vue_root_Vue_default.a));

This way, I've wired AgGridVue variable into window object, which in result it can be used globally in js environment.

Second thing, I've called proper js files

<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 -->

And after that I've instantiated Vue and 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>

Important note : You should not use camelCase prop names within ag-grid-vue tag (as I explained in here). Instead you must use kebap-case declaration..

This way everything works fine.

Upvotes: 3

Related Questions