vue3-teleport-mount

Similar to the built-in Vue3 component <Teleport>, it renders components functionally to a specified location, solving the problem that when rendering components functionally, the components cannot obtain the provide values of their ancestor components.

English | 中文

Installation

npm install vue3-teleport-mount
# Or use pnpm
pnpm install vue3-teleport-mount

Usage

1. Register the Plugin TeleportPlugin

import { TeleportPlugin } from 'vue3-teleport-mount'

const app = createApp(App)
app.use(TeleportPlugin)

2. Set the "Teleport" Outlet <TeleportView />

<script setup>
import { TeleportView } from 'vue3-teleport-mount'
</script>

<template>
  <el-config-provider namespace="my-el">
    <TeleportView />
  </el-config-provider>
</template>

Example

<script setup lang="tsx">
import { useTeleport } from 'vue3-teleport-mount'

const { mount, unmount, getInstance } = useTeleport(
  defineAsyncComponent(() => import('./MyComponent.vue')), // Import the component via defineAsyncComponent to optimize performance.
)

const show = async () => {
  const res = await mount({
    title: 'Title', // Pass the props of the component.
  })
  res?.sayHi() // Call the component method.
}
</script>

<template>
  <el-button @click="show">
    Show
  </el-button>
  <el-button @click="unmount">
    Unmount
  </el-button>
</template>

Type Definitions

useTeleport

function useTeleport<T extends Component>(
  Comp: T,
  to?: string | symbol
): {
  getTeleportInstance: () => InstanceType<T> | undefined;
  mount: (props?: unknown) => Promise<InstanceType<T> | undefined;
  unmount: () => void;
}

TeleportView

• Props

interface TeleportViewProps {
  /**
   * Container Name
   * Default Value: default
   */
  name?: string | symbol
}

• Example

<!-- Set the container name to the default value: default -->
<TeleportView />
<!-- Set the container name to: my-name -->
<TeleportView name="my-name" />

<script setup lang="tsx">
import { useTeleport } from 'vue3-teleport-mount'
import MyComponent from './MyComponent.vue'
import MyComponent2 from './MyComponent2.vue'

const { mount } = useTeleport(MyComponent) // "Teleport" to <TeleportView/>
const { mount: mount2 } = useTeleport(MyComponent2, 'my-name') // "Teleport" to <TeleportView name="my-name" />


</script>

<template>
  <el-button @click="mount">
    Show Component 1
  </el-button>
  <el-button @click="mount2">
    Show Component 2
  </el-button>

</template>