Ag-Grid in Vue no npm install example?

Question

I want to use ag-grid-vue without npm installing it.

code: https://codepen.io/riodw/pen/zYYOjdE

---

So I found this: Is it possible to use ag-grid with vue without a builder? . Followed that guid, and was basically able to get something to render but it get's stuck on "Loading..."

1. I downloaded ag-grid (from here: https://github.com/ag-grid/ag-grid )
2. Went into cd ag-grid-master/packages/ag-grid-vue
3. npm installed npm install
4. Then built npm run build

This generated the " ag-grid-vue.umd.js " file.
Modified that file to put AgGridVue on the window where AgGridVue is returned:

window.AgGridVue = AgGridVue;
return AgGridVue;

Then include that file with the ag-grid-community file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/21.2.1/ag-grid-community.min.js"></script>
<script src="/global/js/ag-grid/ag-grid-vue.umd.js"></script>

And ag-grid renders!
Problem is it get's stuck on loading and I don't know if there is a solution.
Are there any possibilities to help here?
Any help would be great. If not I'll have to use something else as installing is not an option for me unfortunately.

Image of render:

Debug mode codepen:
https://cdpn.io/riodw/debug/zYYOjdE/LDkmdEDdQpzA

Answer 1

Everything you do is correct except one tiny thing.

I've found the solution, when I've used vue.js (not minified version), then Vue itself has thrown a warning;

Indicating that, in the " ag-grid-vue " tag, you should not use :rowData as below;

<ag-grid-vue :rowData="rowData" :columnDefs="columnDefs"/>

this usage is wrong as stated in the console warning from Vue.

You should use kebab-case instead of camel-case as below;

<ag-grid-vue :row-data="rowData" :column-defs="columnDefs"/>

This actually works as expected.

I beleive, camel-case works in an environment with the presence of module-loader.