# Vue Data Grid Installation

> Install CoreUI Data Grid for Vue via npm and load its stylesheet.

## npm

```sh
npm install @coreui/vue-data-grid
```

Data Grid layers on the `.table` styles from `@coreui/coreui` or
`@coreui/coreui-pro` (≥ 5), so make sure one of them is loaded on the page. The
grid stylesheet ships in the `@coreui/data-grid` package (installed
automatically as a dependency).

```vue
<script setup>
import { CDataGrid } from '@coreui/vue-data-grid'
import '@coreui/data-grid/dist/css/data-grid.css'
</script>
```

## Stylesheet

The grid's CSS defines `--cui-data-grid-*` custom properties that resolve through
CoreUI's semantic variables, so it inherits your theme (including
`data-coreui-theme="dark"`) automatically. See
[Styling & theming](https://coreui.io/data-grid/vue/docs/customization/styling/) for the full token reference.

Next: the [Quickstart](https://coreui.io/data-grid/vue/docs/getting-started/quickstart/).