Vue Integration
ZingGrid works with your development stack, including Vue! In this guide, we'll walk you through how to add ZingGrid to your Vue project.
Usage
Include the following dependencies in the header of your index.html file:
<script src="path/to/zinggrid.min.js" defer></script>
OR
Download ZingGrid from npm using
npm i zinggrid
and import that package to yourmain.js
file or.vue
component file:// optional ZingGrid npm import header import ZingGrid from 'zinggrid';
Add a
<zing-grid>
tag inside yourrender()
function, like so:<zing-grid ref="helloWorld" caption="Hello Doggos" :data.prop="datastore" loading></zing-grid>
Initialize data in
mounted()
function, like so:data() { return { // model for datastore datastore: [ { "breed": "Dachshund", "name": "Sousage" }, { "breed": "Corgi", "name": "Plop" }, { "breed": "Pomeranian", "name": "Floof" } ] }; }
Vue Integrated Grid
Here is our complete grid that is successfully integrated with Vue: