vue-safe-teleport - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

		{
		"name": "vue-safe-teleport",
		"version": "0.1.0",
		"version": "0.1.1",
		"description": "Recommended for teleporting inside a Vue app",
		@@ -18,2 +18,3 @@ "license": "MIT",
		},
		"types": "./dist/index.d.ts",
		"peerDependencies": {
		@@ -20,0 +21,0 @@ "vue": "^3.2.0"

README.md

		# 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).
		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](https://vue-safe-teleport.netlify.app/)

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

		[💚️ Become a Sponsor](https://github.com/sponsors/Akryum)

		## Sponsors

		<p align="center">
		<a href="https://guillaume-chau.info/sponsors/" target="_blank">
		<img src='https://akryum.netlify.app/sponsors.svg'/>
		</a>
		</p>

		## Usage
		@@ -44,3 +56,3 @@

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

		@@ -82,1 +94,27 @@ ```vue
		```

		## Migration example

		Before:

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

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

		After:

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

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

New alerts