Is it possible to use ag-grid with vue without a builder?

Question

In particular, can the typescript source of the ag-grid-vue component be compiled then included in a regular html file?

Answer 1

I figured it out:

Download the ag-grid source code, go into the packages/ag-grid-vue directory and do npm install and npm run build. That will put compiled javascript modules in the dist directory that can be used without a build system.

I did have to modify the built javascript slightly to get the AgGridVue object into the global namespace, since I'm not using a module loader.

EDIT: To get the AgGridVue into the global namespace, add window.AgGridVue = AgGridVue; to the end of the function that returns AgGridVue in ag-grid-vue.umd.js

Answer 2

I found a way to do this without modifying the source. Near the top of ag-grid-vue.umd.js, you can see that the module does this:

root["ag-grid-vue"] = factory(root["Vue"], root["agGrid"]);

Here, "root" is the window, and the result of the factory call is what you'll want. But due to the dashes, you can't access it directly. But you can use the dictionary syntax (or whatever it's called):

let agVueObj = window["ag-grid-vue"];
//The component is a field on this object:
let AgGridVue = agVueObj.AgGridVue;
//Then register it as a component in your Vue instance:
//components: { AgGridVue }

And you should be able to use <ag-grid-vue> tags.