# @qiankunjs/vue

> vue binding for qiankun

Latest version **0.0.1-rc.2** (published 2026-01-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @qiankunjs/vue
pnpm add @qiankunjs/vue
yarn add @qiankunjs/vue
bun add @qiankunjs/vue
```

## Health

**Score 70/100 (B)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score; popular repo.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.0.1-rc.2 |
| Published | 2026-01-06 |
| First published | 2023-12-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 62.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 16701 |
| Author | linghaoSu |
| Maintainers | kuitos |

## Links

- npm: https://www.npmjs.com/package/@qiankunjs/vue
- Repository: https://github.com/umijs/qiankun
- Homepage: https://github.com/umijs/qiankun#readme
- Issues: https://github.com/umijs/qiankun/issues
- npm.io page: https://npm.io/package/@qiankunjs/vue

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [vue-demi](https://npm.io/package/vue-demi.md) ^0.14.6
- [@qiankunjs/ui-shared](https://npm.io/package/@qiankunjs/ui-shared.md) ^0.0.1-rc.1

## Recent versions

- 0.0.1-rc.2 (latest) — 2026-01-06
- 0.0.1-rc.3 (rc) — 2026-08-30
- 0.0.1-rc.1 — 2024-01-08
- 0.0.1-rc.0 — 2023-12-26

## README

# qiankun vue binding

## Usage

```bash
npm i @qiankunjs/vue
```

## MicroApp Component

Load (or unload) a sub-application directly through the `<MicroApp />` component, which provides capabilities related to loading and error capturing:

```vue
<script setup>
import { MicroApp } from '@qiankunjs/vue';
</script>
<template>
  <micro-app name="app1" entry="http://localhost:8000" />
</template>
```

When enabling the sub-application loading animation or error capturing capabilities, an additional style class `wrapperClassName` is accepted by the sub-application. The rendered result is as follows:

```vue
<div :class="wrapperClassName">
  <MicroAppLoader :loading="loading" />
  <ErrorBoundary :error="e" />
  <MicroApp :class="className" />
</div>
```

### Loading Animation

After enabling this feature, a loading animation will automatically be displayed while the sub-application is loading. When the sub-application finishes mounting and becomes in the MOUNTED state, the loading state ends, and the sub-application content is displayed.

Simply pass `autoSetLoading` as a parameter:

```vue
<script setup>
import { MicroApp } from '@qiankunjs/vue';
</script>
<template>
  <micro-app name="app1" entry="http://localhost:8000" autoSetLoading />
</template>
```

#### Custom Loading Animation

If you wish to override the default loading animation style, you can customize the loading component by using the loader slot as the sub-application's loading animation.

```vue
<script setup>
import CustomLoader from '@/components/CustomLoader.vue';
import { MicroApp } from '@qiankunjs/vue';
</script>
<template>
  <micro-app name="app1" entry="http://localhost:8000">
    <template #loader="{ loading }">
      <custom-loader :loading="loading" />
    </template>
  </micro-app>
</template>
```

Here, `loading` is a boolean type parameter; when true, it indicates that it is still in the loading state, and when false, it indicates that the loading state has ended.

### Error Capturing

After enabling this feature, when the sub-application encounters an exception while loading, an error message will automatically be displayed. You can pass the `autoCaptureError` property to the sub-application to enable error capturing capabilities:

```vue
<script setup>
import { MicroApp } from '@qiankunjs/vue';
</script>
<template>
  <micro-app name="app1" entry="http://localhost:8000" autoCaptureError />
</template>
```

#### Custom Error Capturing

If you wish to override the default error capturing component style, you can customize the error capturing component for the sub-application using the errorBoundary slot:

```vue
<script setup>
import CustomErrorBoundary from '@/components/CustomErrorBoundary.vue';
import { MicroApp } from '@qiankunjs/vue';
</script>
<template>
  <micro-app name="app1" entry="http://localhost:8000">
    <template #error-boundary="{ error }">
      <custom-error-boundary :error="error" />
    </template>
  </micro-app>
</template>
```

### Component Properties

| Property | Required | Description | Type | Default Value |
| --- | --- | --- | --- | --- |
| `name` | Yes | The name of the micro-application | `string` |  |
| `entry` | Yes | The HTML address of the micro-application | `string` |  |
| `autoSetLoading` | No | Automatically set the loading status of the micro-application | `boolean` | `false` |
| `autoCaptureError` | No | Automatically set error capturing for the micro-application | `boolean` | `false` |
| `className` | No | The style class for the micro-application | `string` | `undefined` |
| `wrapperClassName` | No | The style class wrapping the micro-application's loading and error components | `string` | `undefined` |
| `appProps` | No | Properties passed to the sub-application | `Record<string, any>` | `undefined` |

### Component Slots

| Slot            | Description          |
| --------------- | -------------------- |
| `loader`        | Loading state slot   |
| `errorBoundary` | Error capturing slot |

---
_Source: https://npm.io/package/@qiankunjs/vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._