---
title: Overview
sidebar_position: 1
---

# Overview

This section describes configuration of the Runtime plugin.

## Configuration

### runtime

- **Type:** `Object`

The runtime is configured as follows:

#### Base

Configure in `modern.config.ts`:

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

export default defineConfig({
  runtime: {
    state: true,
    router: true,
  },
});
```

#### DefineConfig

Configure using [`defineConfig`](/apis/app/runtime/app/define-config) API:

:::info
When there is a function in the runtime configuration, it can only be configured this way.

:::

import { Tabs, Tab as TabItem } from "@theme";

<Tabs>
  <TabItem value="layout" label="Conventional Routing" default>

```tsx title="src/routes/layout.tsx"
import type { AppConfig } from '@modern-js/runtime';

export const config = (): AppConfig => {
  return {
    router: {
      supportHtml5History: false
    }
  }
};
```

  </TabItem>

  <TabItem value="app" label="Self-controlled Routing">

```ts title="src/App.tsx"
import { defineConfig } from '@modern-js/runtime';

const App = () => {
  /** */
};

defineConfig(App, {
  router: {
    supportHtml5History: false,
  },
});

export default App;
```

  </TabItem>
</Tabs>

:::info
Using runtime configuration, you can solve the problem that runtime plugin configuration needs to be at runtime to get specific content.

Runtime plugin runtime configuration and configuration directly in `modern.config.ts` are merged by default, and runtime configuration takes precedence.

:::

:::warning
The `defineConfig` API only accepts the specific configuration of Runtime plugins. Enabling the plugin is determined through `modern.config.ts` configuration."

:::

### runtimeByEntries

- **Type:** `Object`

#### Introduction

Add the runtime configuration according to the entry. The option attribute is consistent with the runtime. The specified value will be replaced and merged with the content of the runtime attribute.

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

export default defineConfig({
  runtime: {
    state: false,
  },
  runtimeByEntries: {
    entry1: {
      state: true, // { state: true }
    },
    entry2: {
      // { state: false, router: true }
      router: true,
    },
  },
});
```
