---
product: "AG Charts"
title: "Installation"
description: "Learn how to install AG Charts and add Vue charts and Vue graphs to your application. Supports bundled and non-bundled projects. Upgrade to Enterprise for additional features."
framework: vue
version: "14.2.0"
related:
    - title: "Module Registry"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/vue/module-registry/"
    - title: "Enterprise Licence Key"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/vue/license-install/"
    - title: "Development Validation"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/vue/dev-validation/"
    - title: "Migration"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/vue/migration/"
    - title: "Server-Side Rendering"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/vue/server-side-rendering/"
llms: "https://www.ag-grid.com/charts/archive/14.2.0/llms.txt"
---

# Installation

AG Charts is available for download from NPM & Yarn. Once installed, you just need to import the package.

## Installation

Install the `ag-charts-vue3` package, which also installs `ag-charts-community`:

#### NPM

```bash
npm install ag-charts-vue3
```

#### Yarn

```bash
yarn add ag-charts-vue3
```

To use AG Charts Enterprise features, install the `ag-charts-enterprise` package:

#### NPM

```bash
npm install ag-charts-enterprise
```

#### Yarn

```bash
yarn add ag-charts-enterprise
```

> **Note**
>
> You can test AG Charts Enterprise locally without a licence. To test in production, access support and remove the watermark & console warnings, [request a trial licence](https://www.ag-grid.com/charts/archive/14.2.0/vue/community-vs-enterprise/#request-a-30-day-enterprise-bundle-trial-licence).

### Registering Modules

Register the `AllCommunityModule` to access all Community features:

```js
import { AllCommunityModule, ModuleRegistry } from 'ag-charts-community';

// Register all Community features
ModuleRegistry.registerModules([AllCommunityModule]);
```

Register the `AllEnterpriseModule` to access all Community and Enterprise features:

```js
import { AllEnterpriseModule, ModuleRegistry } from 'ag-charts-enterprise';

// Register all Community and Enterprise features
ModuleRegistry.registerModules([AllEnterpriseModule]);
```

> **Note**
>
> To minimise bundle size, only register the modules you want to use. See the [Selecting Modules](https://www.ag-grid.com/charts/archive/14.2.0/vue/module-registry/#selecting-modules) docs for more information.

## Importing

Import the `AgCharts` component from the `ag-charts-vue3` package:

```js
import { AgCharts } from 'ag-charts-vue3';
```

To use AG Charts Enterprise features, import the `ag-charts-enterprise` package:

```js
import 'ag-charts-enterprise';
```

See the [Installing Enterprise Licence Key](https://www.ag-grid.com/charts/archive/14.2.0/vue/license-install/) docs for more information on how to install your Enterprise or [Trial](https://www.ag-grid.com/charts/archive/14.2.0/vue/community-vs-enterprise/#request-a-30-day-enterprise-bundle-trial-licence) licence key.

## Accessing AG Charts

To use AG Charts in your Vue application, return the `ag-charts` component with your chart options:

```html
<template>
    <!-- The AG Charts component with chartsOptions as an attribute -->
    <ag-charts :options="options"> </ag-charts>
</template>

<script>
    setup() {
      return {
        ref<AgChartOptions>({/*...*/}),
      };
    },
</script>
```