---
title: "Vue Integration | Docs"
description: "Use ZingGrid with Vue. Check out this quick walkthrough on how to add ZingGrid to your Vue project."
url: https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/vue
---
```text
experiment_id: web-retrieval-v1
fixture_id: /docs/integrations/js-frameworks-&-libs/vue.md
mode: provenance
representation: markdown
origin_response_id: 76b0677b7f1a5f563b7b3c49799e7409
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.732Z
version_nonce: f328da362aa4e2899589d8c222061e89
generated_at_utc: 2026-10-25T18:23:21.937Z
response_nonce: dd4f4fccffda5c8c23c537cf4a5cb425
```
# 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:
```javascript
```
**OR**
Download ZingGrid from npm using `npm i zinggrid` and import that package to your `main.js` file or `.vue` component file:
```javascript
// optional ZingGrid npm import header
import ZingGrid from 'zinggrid';
```
2. Add a `` tag inside your `render()` function, like so:
```html
```
3. Initialize data in `mounted()` function, like so:
```javascript
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.
```javascript
```
### Vue Integrated Grid
Here is our complete grid that is successfully integrated with Vue: