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

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, and apply it at startup using LicenseManager.setLicenseKey() in 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.

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, the configuration reads process.env.NUXT_AGGRID_LICENSE and exposes it through the public runtime config.

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, 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.

<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 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 exposes the key via runtimeConfig.public.aggridLicense (lines 11-12), making it available to client-side code without hardcoding.
• Startup Initialization: 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 (lines 11-12), and 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}