Vue Integration

ZingGrid works with your development stack, including Vue! Below is a quick walkthrough on how to add ZingGrid to your Vue project.


Include the following dependencies in the header of your index.html file:

CloseCopy Copied
<script src="path/to/zinggrid.min.js" defer></script>


Download ZingGrid from npm using npm i zinggrid and import that package to your main.js file or .vue component file.

CloseCopy Copied
// optional ZingGrid npm import header
import ZingGrid from 'zinggrid';

Put <zing-grid> tag inside your render() function.

CloseCopy Copied
<zing-grid ref="helloWorld" caption="Hello Doggos" :data="stringData" loading></zing-grid>

Initialize data in mounted() function.

CloseCopy Copied
data() {
  return {
    // model for datastore
    datastore: [
        "breed": "Dachshund",
        "name": "Sousage"
        "breed": "Corgi",
        "name": "Plop"
        "breed": "Pomeranian",
        "name": "Floof"
    // assign stringified data
    stringData: null,

// initialize grid data on mount
mounted() {
  // set state and reflect that change through attribute mutation
  this.stringData = JSON.stringify(this.datastore);

  // Alternatively you can use ZingGrid api to setdata if you do
  // not want a string form of data in the DOM tied to an attribute
  // this.$refs.helloWorld.setData(this.datastore);


On This Page