Vue Integration

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


  1. Include the following dependencies in the header of your index.html file:
<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.

// optional ZingGrid npm import header
import ZingGrid from 'zinggrid';
  1. Put <zing-grid> tag inside your render() function.
<zing-grid ref="helloWorld" caption="Hello Doggos" :data.prop="datastore" loading></zing-grid>
  1. Initialize data in mounted() function.
data() {
  return {
    // model for datastore
    datastore: [
        "breed": "Dachshund",
        "name": "Sousage"
        "breed": "Corgi",
        "name": "Plop"
        "breed": "Pomeranian",
        "name": "Floof"


On This Page