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

Component Slots