{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/vue-data-grid/packages-modules/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There are two main ways to add AG Grid to your application depending on your requirements and priorities with respect to bundle size / developer effort. You can install AG Grid by either using our feature complete "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"packages"}]},{"type":"text","value":", or by cherry picking the feature "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"modules"}]},{"type":"text","value":" specific to your application's grid requirements. "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"which-to-use","style":"position:relative;"},"children":[{"type":"text","value":"Which to use?"},{"type":"element","tagName":"a","properties":{"href":"#which-to-use","ariaLabel":"which to use permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/packages/"},"children":[{"type":"text","value":"Packages"}]},{"type":"text","value":" are the easiest way to use AG Grid as every feature is implicitly available. However, this will mean that your application bundle includes every grid feature, some of which are not required by your application and so bloat your bundle size."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/modules"},"children":[{"type":"text","value":"Modules"}]},{"type":"text","value":" are suitable if bundle size is critical to your application. They enable you to only include the functionality you need resulting in a minimal bundle size at the cost of additional config required to register modules in your application."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're unsure whether to use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"packages"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"modules"}]},{"type":"text","value":" then we'd recommend starting with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"packages"}]},{"type":"text","value":" as every grid feature is available and you do not have to worry about registering modules."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"minimize-bundle-size","style":"position:relative;"},"children":[{"type":"text","value":"Minimize Bundle Size"},{"type":"element","tagName":"a","properties":{"href":"#minimize-bundle-size","ariaLabel":"minimize bundle size permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want to minimize your bundle size then you should definitely use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"modules"}]},{"type":"text","value":" to only include features that your application requires. "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["d-flex","justify-content-around"],"style":"height: 20rem;"},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"div","properties":{"className":["d-flex","flex-column"],"style":"max-width: 20rem; min-width: 10rem; height: 20rem; border: 1px solid lightgray; border-radius: 5px; overflow: hidden;"},"children":[{"type":"text","value":"\n        "},{"type":"element","tagName":"div","properties":{"className":["flex-grow-1","d-flex","justify-content-center","p-4"],"style":"background-color: #fffaf0;"},"children":[{"type":"text","value":"\n            "},{"type":"element","tagName":"a","properties":{"className":["d-flex","align-items-center"],"href":"../packages/"},"children":[{"type":"element","tagName":"img","properties":{"src":"/archive/29.3.5/4a7a3d79adc4c83617cb397baf487fff/packages.svg","style":"width: 100%; max-width: 6rem;","alt":"Grid Packages Overview"},"children":[]}]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"div","properties":{"className":["p-2"],"style":"border-top: 1px solid lightgray; background-color: #f8f9fa; text-align: center;"},"children":[{"type":"text","value":"\n            "},{"type":"element","tagName":"p","properties":{"className":["mb-0","btn","btn-primary"]},"children":[{"type":"element","tagName":"a","properties":{"href":"../packages/","style":"color: white"},"children":[{"type":"text","value":"Packages Overview"}]}]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n    "}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"div","properties":{"className":["d-flex","flex-column"],"style":"max-width: 20rem; min-width: 10rem; height: 20rem; border: 1px solid lightgray; border-radius: 5px; overflow: hidden;"},"children":[{"type":"text","value":"\n        "},{"type":"element","tagName":"div","properties":{"className":["flex-grow-1","d-flex","justify-content-center","p-4"],"style":"background-color: #fffaf0;"},"children":[{"type":"text","value":"\n            "},{"type":"element","tagName":"a","properties":{"className":["d-flex","align-items-center"],"href":"../modules/"},"children":[{"type":"element","tagName":"img","properties":{"src":"/archive/29.3.5/65e7defcf01d73d3ebfa26d80c2b4e50/modules.svg","style":"width: 100%; max-width: 6rem;","alt":"Grid Modules Overview"},"children":[]}]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"div","properties":{"className":["p-2"],"style":"border-top: 1px solid lightgray; background-color: #f8f9fa; text-align: center;"},"children":[{"type":"text","value":"\n            "},{"type":"element","tagName":"p","properties":{"className":["mb-0","btn","btn-primary"]},"children":[{"type":"element","tagName":"a","properties":{"href":"../modules/","style":"color: white"},"children":[{"type":"text","value":"Modules Overview"}]}]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n    "}]},{"type":"text","value":"\n"}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"AG Grid Packages vs Modules","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"which-to-use","depth":2,"value":"Which to use?"},{"id":"minimize-bundle-size","depth":3,"value":"Minimize Bundle Size"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"vue","srcPath":"/packages-modules","pageName":"packages-modules"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}