# How AG Grid Enterprise License Is Managed in Nuxt 3: A Complete Implementation Guide

> Learn to manage your AG Grid Enterprise license in Nuxt 3. This guide details storing your key securely, exposing it in runtimeConfig, and applying it for seamless integration.

- Repository: [公众号文章工具箱/wechat-article-exporter](https://github.com/wechat-article/wechat-article-exporter)
- Tags: how-to-guide
- Published: 2026-05-26

---

**AG Grid Enterprise license management in Nuxt 3 follows a three-step pattern: store the key in a `.env` file as `NUXT_AGGRID_LICENSE`, expose it via `runtimeConfig.public` in [`nuxt.config.ts`](https://github.com/wechat-article/wechat-article-exporter/blob/main/nuxt.config.ts), and apply it at startup using `LicenseManager.setLicenseKey()` in [`app.vue`](https://github.com/wechat-article/wechat-article-exporter/blob/main/app.vue).**

Managing commercial component licenses in modern JavaScript frameworks requires balancing security with client-side accessibility. In the `wechat-article/wechat-article-exporter` repository, the AG Grid Enterprise license is configured using Nuxt 3’s native runtime configuration system, ensuring the key remains out of source control while remaining accessible to the grid components. This approach leverages Nuxt’s environment variable handling to securely inject the license into the client bundle at build time.

## Configuring the AG Grid Enterprise License

The implementation creates a clear pipeline from environment variable to active license, utilizing Nuxt 3’s layered configuration architecture to keep secrets out of source code.

### Storing the License Key in Environment Variables

The license key originates in the project's environment configuration. In `.env.example`, the variable `NUXT_AGGRID_LICENSE` serves as the template for the actual license key.

```env
NUXT_AGGRID_LICENSE=YOUR_AG_GRID_ENTERPRISE_LICENSE_KEY

```

Storing the key in `.env` keeps sensitive credentials out of version control while allowing different keys for development and production environments.

### Exposing the License via Runtime Configuration

Nuxt 3's `runtimeConfig` system bridges server-side environment variables and client-side code. In [`nuxt.config.ts`](https://github.com/wechat-article/wechat-article-exporter/blob/main/nuxt.config.ts), the configuration reads `process.env.NUXT_AGGRID_LICENSE` and exposes it through the public runtime config.

```ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      aggridLicense: process.env.NUXT_AGGRID_LICENSE,
    },
  },
});

```

By placing the key inside `runtimeConfig.public`, Nuxt automatically injects the value into the client bundle, making it available to browser-side AG Grid initialization code without additional network requests.

### Initializing the License at Application Startup

The final step occurs in [`app.vue`](https://github.com/wechat-article/wechat-article-exporter/blob/main/app.vue), where the AG Grid Enterprise modules are registered and the license key is activated. The application imports `LicenseManager` from `ag-grid-enterprise` and calls `setLicenseKey()` with the runtime configuration value.

```vue
<script setup lang="ts">
import { ModuleRegistry } from 'ag-grid-community';
import { AllEnterpriseModule, LicenseManager } from 'ag-grid-enterprise';
import { useRuntimeConfig } from '#app';

const runtimeConfig = useRuntimeConfig();

// Register all enterprise modules including charts and advanced features
ModuleRegistry.registerModules([AllEnterpriseModule]);

// Activate enterprise features by setting the license key
LicenseManager.setLicenseKey(runtimeConfig.public.aggridLicense);
</script>

```

This initialization runs when the Nuxt application mounts, ensuring all AG Grid Enterprise features are available immediately without additional server-side validation.

## Supporting Configuration Files

Beyond the core license management setup, the repository includes shared configuration for grid behavior. The [`config/shared-grid-options.ts`](https://github.com/wechat-article/wechat-article-exporter/blob/main/config/shared-grid-options.ts) file imports locale settings and other shared grid configurations, demonstrating the integration point for AG Grid's extensive customization options and advanced features.

## Security Considerations

While the license key is exposed to the client through `runtimeConfig.public`, this pattern is necessary for AG Grid Enterprise to function in browser environments. The security benefit comes from keeping the actual value out of source code via the `.env` file, reducing the risk of accidental exposure in version control while allowing seamless deployment across different environments.

## Summary

- **Environment Variable Storage**: The license key is defined in `.env.example` as `NUXT_AGGRID_LICENSE`, keeping it out of source control and allowing environment-specific values.
- **Runtime Configuration Bridge**: [`nuxt.config.ts`](https://github.com/wechat-article/wechat-article-exporter/blob/main/nuxt.config.ts) exposes the key via `runtimeConfig.public.aggridLicense` (lines 11-12), making it available to client-side code without hardcoding.
- **Startup Initialization**: [`app.vue`](https://github.com/wechat-article/wechat-article-exporter/blob/main/app.vue) registers enterprise modules with `ModuleRegistry.registerModules([AllEnterpriseModule])` and activates the license using `LicenseManager.setLicenseKey(runtimeConfig.public.aggridLicense)` (lines 18-22).
- **File Locations**: Key implementation files include `.env.example` (line 5), [`nuxt.config.ts`](https://github.com/wechat-article/wechat-article-exporter/blob/main/nuxt.config.ts) (lines 11-12), and [`app.vue`](https://github.com/wechat-article/wechat-article-exporter/blob/main/app.vue) (lines 13-22).

## Frequently Asked Questions

### How do I keep my AG Grid Enterprise license key secure in a Nuxt 3 application?

Store the license key in a `.env` file using the `NUXT_AGGRID_LICENSE` variable name, which prevents it from being committed to version control. While the key must be exposed to the client via `runtimeConfig.public` for AG Grid to function in the browser, keeping it in environment variables allows you to use different keys for development and production without hardcoding values in your source code.

### Why does the license need to be in public runtime config rather than private?

AG Grid Enterprise runs entirely in the browser, so the license key must be accessible to client-side JavaScript. Nuxt 3's `runtimeConfig.public` automatically injects values into the client bundle, whereas private runtime config remains server-side only. Since the grid cannot access server-only variables, the public config is required for `LicenseManager.setLicenseKey()` to receive the key at runtime.

### What happens if I forget to register the enterprise modules before setting the license?

If you call `LicenseManager.setLicenseKey()` without first registering the enterprise modules via `ModuleRegistry.registerModules([AllEnterpriseModule])`, AG Grid will operate in community mode and enterprise features will remain disabled. The initialization order in [`app.vue`](https://github.com/wechat-article/wechat-article-exporter/blob/main/app.vue) ensures modules are registered before the license is applied, unlocking the full enterprise feature set including advanced filtering, grouping, and integrated charts.

### Can I use different license keys for development and production environments?

Yes. By using environment variables in `.env` files, you can specify different `NUXT_AGGRID_LICENSE` values for each environment. Nuxt 3 will load the appropriate value based on the active environment, and `runtimeConfig` will expose the correct key to the application without requiring code changes between deployments.