Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-safe-teleport

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-safe-teleport

Recommended for teleporting inside a Vue app

  • 0.1.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
13K
increased by8.84%
Maintainers
1
Weekly downloads
 
Created
Source

vue-safe-teleport

Recommended for teleporting inside the app. You can replace all <Teleport> with <SafeTeleport>, it will wait for the target to be mounted before teleporting (or one frame if you don't use <TeleportTarget>, see below). Demo

No more "Failed to locate Teleport target with selector"!

💚️ Become a Sponsor

Sponsors

Usage

Install the vue-safe-teleport package:

pnpm i vue-safe-teleport

Install the plugin in your Vue app:

import { createApp } from 'vue'
import VueSafeTeleport from 'vue-safe-teleport'

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

Add a TeleportTarget (by default rendering a div) inside your app:

<template>
  <TeleportTarget
    id="target"
  />
</template>

Use the SafeTeleport component instead of Teleport (it has the same props):

<template>
  <SafeTeleport to="#target">
    <div>Teleported to target</div>
  </SafeTeleport>
</template>

The content will be teleported as soon as the corresponding target is mounted.

You can also use SafeTeleport without TeleportTarget, in that case it will work like the builtin Teleport but will wait one frame if the target DOM element isn't available yet:

<template>
  <SafeTeleport to="#target">
    <div>Teleported to target</div>
  </SafeTeleport>

  <div id="target"/>
</template>

TeleportTarget

This component will notify the SafeTeleport components when it is mounted. It will render a div by default, but you can change the tag.

Props:

  • id: the id of the target, used to match the to prop of SafeTeleport
  • tag: the tag of the target, defaults to div
  • disabled: disable all SafeTeleport targeting this target
<template>
  <TeleportTarget
    id="target"
    tag="span"
    disabled
  />
</template>

Will render:

<span id="target"></span>

Migration example

Before:

<template>
  <div id="target" />

  <Teleport to="#target">
    <div>Teleported to target</div>
  </Teleport>
</template>

After:

<template>
  <TeleportTarget id="target" />

  <SafeTeleport to="#target">
    <div>Teleported to target</div>
  </SafeTeleport>
</template>

FAQs

Package last updated on 13 Feb 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc