Nx plugins

Learn what Nx plugins are, how they extend Nx with generators, executors, and project graph inference, and how to install and use them.

Nx plugins help developers integrate tools and frameworks with Nx. A plugin author who knows the best way to use a tool with Nx can codify that expertise and share it with the entire community. Plugins reduce the amount of configuration you need to write manually and keep it up to date automatically as tools evolve.

What plugins can do

Infer tasks

Automatically configure Nx cache settings, inputs, outputs, and task dependencies based on your existing tool configuration files. No manual project.json entries needed.

Generate code

Provide generators that scaffold new projects, add libraries, configure tools, or modify existing files. Run with nx generate @nx/react:app myapp.

Maintain dependencies

Provide migrations that automatically update package versions and tooling configuration when you run nx migrate. For example, when Storybook introduced CSF3, the @nx/storybook plugin applied those changes automatically.

Enhance tooling with executors

Run tools in ways that wouldn’t be possible from the command line alone. For example, @nx/js:tsc combines Nx’s workspace awareness with TypeScript’s batch mode to make builds more performant.

Official plugins

The Nx team maintains official plugins for major frameworks and tools. Install any of them with nx add:

nx add @nx/react
nx add @nx/angular
nx add @nx/node
nx add @nx/next
nx add @nx/vue
nx add @nx/vite
nx add @nx/jest
nx add @nx/webpack
nx add @nx/playwright
nx add @nx/storybook

nx add installs the package, runs its initialization generator, and registers it in nx.json.

@nx/react

Supports React applications and libraries. Infers tasks from Vite or Webpack config. Provides generators for components, pages, and libraries.

nx add @nx/react
nx generate @nx/react:app myapp --bundler=vite

@nx/angular

Full Angular support including Angular CLI compatibility. Provides generators for components, services, modules, and libraries.

nx add @nx/angular
nx generate @nx/angular:app myapp

@nx/node

Node.js applications using Express, Fastify, Koa, or plain Node. Provides generators for APIs and serverless functions.

nx add @nx/node
nx generate @nx/node:app myapi --framework=fastify

@nx/vite

Infers build, serve, preview, and test (via Vitest) tasks from vite.config.ts. Automatically configures cache inputs and outputs.

nx add @nx/vite

Community plugins

The Nx community maintains hundreds of additional plugins. Browse them at the Nx Plugin Registry. Community plugins follow the same API as official plugins and can do everything official plugins can do.

How plugins are registered

Plugins are listed in the plugins array in nx.json. When you run nx add, this entry is created automatically:

nx.json

{
  "plugins": [
    {
      "plugin": "@nx/vite/plugin",
      "options": {
        "buildTargetName": "build",
        "serveTargetName": "serve",
        "previewTargetName": "preview",
        "testTargetName": "test"
      }
    },
    {
      "plugin": "@nx/jest/plugin",
      "options": {
        "targetName": "test"
      }
    }
  ]
}

Plugins in this array are processed in order. If two plugins create a target with the same name for the same project, the plugin listed last wins.

How plugins extend the project graph

Plugins participate in the project graph build process in two ways:

1. Task inference — A plugin’s createNodes function scans the workspace for tool-specific config files (e.g., vite.config.ts, jest.config.ts) and creates project nodes and target configurations from them. See Inferred Tasks.

2. Dependency detection — A plugin’s createDependencies function analyzes files to find relationships between projects that static import analysis alone cannot detect.

Scoping plugins to specific projects

Use include and exclude glob patterns to apply a plugin only to certain projects:

nx.json

{
  "plugins": [
    {
      "plugin": "@nx/jest/plugin",
      "include": ["packages/**/*"],
      "exclude": ["**/*-e2e/**/*"]
    }
  ]
}

This is also useful for applying the same plugin twice with different options for different project groups.

Building your own plugin

You can build a plugin for internal use or to share with the community. Nx provides a generator to scaffold a new plugin package:

nx add @nx/plugin
nx generate @nx/plugin:plugin my-plugin

See Build Your Own Plugin for a complete walkthrough.