Plugin

In NocoBase, Client Plugin is the main way to extend and customize frontend functionality. You can inherit from the Plugin base class provided by @nocobase/client-v2 in your plugin's src/client-v2/plugin.tsx file, then register routes, models, and other resources in lifecycle methods like load().

Most of the time, you only need to focus on load() -- typically, core logic is registered during the load() phase.

:::tip Prerequisites

Before developing a client plugin, make sure you have read the Writing Your First Plugin section and generated the basic plugin directory structure and files.

:::

Basic Structure

// src/client-v2/plugin.tsx
import { Plugin } from '@nocobase/client-v2';

export class PluginHelloClient extends Plugin {
  async afterAdd() {
    // Executed after plugin is added
    console.log('Plugin added');
  }

  async beforeLoad() {
    // Executed before all plugins' load()
    console.log('Before load');
  }

  async load() {
    // Executed when plugin loads, register routes, models, etc.
    console.log('Plugin loaded');
  }
}

export default PluginHelloClient;

Lifecycle

Each time the browser refreshes or the application initializes, plugins execute afterAdd() -> beforeLoad() -> load() in sequence:

Typically, developing a client plugin only requires writing load().

What to Do in load()

load() is the core entry point for registering plugin functionality. Common operations:

Register page routes:

async load() {
  // Register a standalone page
  this.router.add('hello', {
    path: '/hello',
    componentLoader: () => import('./pages/HelloPage'),
  });

  // Register a plugin settings page (menu + page)
  this.pluginSettingsManager.addMenuItem({
    key: 'hello-settings',
    title: this.t('Hello Settings'),
    icon: 'SettingOutlined',
  });
  this.pluginSettingsManager.addPageTabItem({
    menuKey: 'hello-settings',
    key: 'index',
    title: this.t('Hello Settings'),
    componentLoader: () => import('./pages/HelloSettingPage'),
  });
}

For detailed usage, see Router.

Register FlowModels:

async load() {
  this.flowEngine.registerModelLoaders({
    HelloModel: {
      // Dynamic import: the module is loaded only when the model is first used
      loader: () => import('./HelloModel'),
    },
  });
}

registerModelLoaders uses lazy loading (dynamic imports), loading the corresponding module only when the model is first used. This is the recommended registration method. For detailed usage, see FlowEngine.

Common Plugin Properties

Within the plugin class, the following properties can be accessed directly via this:

If you need to access more NocoBase capabilities (such as api, t (i18n), logger), you can get them through this.context:

async load() {
  const { api, t, logger } = this.context;
}

For more context capabilities, see Context.

Related Links

• Router -- Register page routes and plugin settings pages
• Component -- How to write React components mounted by routes
• Context -- Use NocoBase built-in capabilities through context
• FlowEngine -- Register blocks, fields, actions, and other visually configurable components
• Writing Your First Plugin -- Create a plugin from scratch