#Plugin

In NocoBase, Client Plugin is the main way to extend and customize frontend functionality. By extending the Plugin base class provided by @nocobase/client, developers can register logic, add page components, extend menus, or integrate third-party functionality at different lifecycle stages.

#Plugin Class Structure

A basic client-side plugin structure is as follows:

import { Plugin } from '@nocobase/client';

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

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

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

export default PluginHelloClient;

#Lifecycle Description

Each plugin goes through the following lifecycle in sequence when the browser refreshes or the application initializes:

#Execution Order

Every time the browser refreshes, afterAdd() → beforeLoad() → load() will be executed

#Plugin Context and FlowEngine

Starting from NocoBase 2.0, client-side extension APIs are mainly concentrated in FlowEngine. In the plugin class, you can get the engine instance through this.engine.

// Access engine context in load() method
async load() {
  const { app, router, apiClient } = this.engine.context;
  console.log('Current app:', app);
}

For more content, see:

• FlowEngine
• Context