@qiankunjs/vue

qiankun vue binding

Usage

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:

<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:

<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:

<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.

<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:

<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:

<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