---
sidebar_position: 22
---

# autoLoadPlugins

- **Type:** `boolean`
- **Default:** `false`

Used to configure whether Modern.js enables auto-registration of plugins.

:::warning
This configuration is not recommended. Compared with manually registering plugin, this configuration is relatively black box and cannot add custom configurations to plugin.
:::

### Manual Registration Plugin

By default, installing the plugin requires you to register the plugin manually in the `modern.config.ts`.

```ts title="modern.config.ts"
import { appTools, defineConfig } from '@modern-js/app-tools';
import { bffPlugin } from '@modern-js/plugin-bff';

export default defineConfig({
  plugins: [appTools(), bffPlugin()],
});
```

### Auto Registration plugin

In addition to means registration, Modern.js also provides a way to automatically register plugins: set the `autoLoadPlugin` configuration option to `true`.

```ts title="modern.config.ts"
import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  autoLoadPlugins: true,
});
```

Modern.js will help you automatically register the plugin by following these steps

1. Modern.js maintains an official list of plugins internally.

```js
const InternalPlugins = ['@modern-js/app-tools', '@modern-js/plugin-tailwindcss', ...];
```

2. Modern.js will read your `package.json` and collect the dependency information.

```json title="package.json"
"dependencies": {
  "@modern-js/plugin-tailwindcss": "x.x.x"
  ...
},
"devDependencies": {
  "@modern-js/app-tools": "x.x.x"
  ...
}
```

3. Modern.js observes that when you install dependencies such as `@modern-js/plugin-tailwindcss` and `@modern-js/app-tools`, automatic plugin registration will be imported.

You can notice that this approach is relatively black-box and you are not even aware of the process of loading the plugin. We want to expose more details to the developer and be able to let the developer control the process.

**Therefore we recommend you to register the plugin manually.**
