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

  1. 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';
  2. Add a <zing-grid> tag inside your render() function, like so:

    <zing-grid ref="helloWorld" caption="Hello Doggos" :data.prop="datastore" loading></zing-grid>
  3. 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: