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 your main.js file or .vue component file:
```
// optional ZingGrid npm import header
import ZingGrid from 'zinggrid';
```

Add a <zing-grid> tag inside your render() 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"
      }
    ]
  };
}

Add styles (Optional). Note: You must use deep selectors when using scoped styles.

<style scoped>
    zing-grid >>> zg-row { ... }
  </style>

Here is our complete grid that is successfully integrated with Vue:

Vue Integration

Usage

Vue Integrated Grid