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"
         }
       ]
     };
   }

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

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

Vue Integrated Grid

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