Plugin API Reference
Glue provides framework plugins for Next.js and Vite that enable compile-time JSX instrumentation.
Installation
npm install --save-dev @getglue/next-plugin @getglue/jsx-runtime
npm install --save-dev @getglue/vite-plugin @getglue/jsx-runtime
These are devDependencies. Glue only runs in development when GLUE_INSTRUMENT=1 is set.
Basic Usage
const { withGlue } = require('@getglue/next-plugin');
module.exports = withGlue({
reactStrictMode: true,
// your config
});
import { withGlue } from '@getglue/next-plugin';
export default withGlue({
reactStrictMode: true,
});
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import glue from '@getglue/vite-plugin';
export default defineConfig({
plugins: [react(), glue()],
});
glue() plugin should be placed after the React plugin.Configuration Options
enabled
Type: boolean
Default: process.env.NODE_ENV === 'development' (Next.js) / process.env.GLUE_INSTRUMENT === '1' (Vite)
// Next.js
withGlue(config, { enabled: true })
// Vite
glue({ enabled: true })
attributePrefix
Type: string
Default: 'data-agent'
Customize the prefix for injected attributes (e.g., data-agent-id becomes data-glue-id).
// Next.js
withGlue(config, { attributePrefix: 'data-glue' })
// Vite
glue({ attributePrefix: 'data-glue' })
debugMode (Next.js only)
Type: boolean
Default: false
Enable debug logging for the Next.js plugin.
Compatibility
- Next.js: 14.0.0+ (including 16+)
- React: 17.0.0+
- Node.js: 18.0.0+
Next.js 16+ requires webpack mode. Use glue run which forces this automatically.
- Vite: 5.0.0+
- React: 17.0.0+
- Node.js: 18.0.0+
- Works with both
@vitejs/plugin-react (Babel) and @vitejs/plugin-react-swc (SWC)
Examples
Composing with Other Plugins
const { withGlue } = require('@getglue/next-plugin');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer(withGlue({
reactStrictMode: true,
}));
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import glue from '@getglue/vite-plugin';
import tsconfigPaths from 'vite-tsconfig-paths';
export default defineConfig({
plugins: [react(), tsconfigPaths(), glue()],
});
Conditional Enabling
const { withGlue } = require('@getglue/next-plugin');
const config = { reactStrictMode: true };
module.exports = process.env.ENABLE_GLUE === 'true'
? withGlue(config)
: config;
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import glue from '@getglue/vite-plugin';
export default defineConfig({
plugins: [
react(),
glue({ enabled: process.env.ENABLE_GLUE === 'true' }),
],
});
