Alpine teleport

> A Vue style teleport for Alpine.js

Alpine teleport is an attempt to add a Vue style teleport functionality to Alpine.js.

The primary motivation behind the plugin is to create accessible dialogs and place them at the top level within the HTML body.

Demo

Checkout the demo dialog modal component built using alpine, alpine-teleport and tailwindcss.

Usage

You can either use the plugin from CDN via the script tag or import it as a standard package by installing it from npm.

$3

When using the CDN build, you must place the plugin script before the alpine core script.

``html





`

$3

Make sure first to install the package from the npm registry and then use it as follows.

`sh
npm i alpine-teleport
`

`js
import Alpine from 'alpinejs'
import teleport from 'alpine-teleport'

Alpine.plugin(teleport)
`

x-teleport


The x-teleport directive accepts only one argument, i.e., the DOM node inside which the contents should be teleported. Thus, the DOM node should be present in the DOM when x-teleport is evaluated.

`html



`

- The x-teleport directive can only be used with a template tag.
- The contents within the template tag must be wrapped inside a single root node. In other words:

`html


`

`html


`

Warnings


The following is the list of warnings raised by the x-teleport directive.

#### "x-teleport" can only be used with a template tag
The warning is raised when the x-teleport directive is used on a DOM element other than the template tag.

`html







`

---

#### "x-teleport" contents must have a single root node
The warning is raised when the x-teleport template tag has more than one root element. The fix is to wrap all the elements inside a parent div.

`html





`

---

#### "x-teleport" cannot locate the target DOM node
The warning is raised when we cannot find a DOM node with the selector expression passed to x-teleport.

Make sure you are using a valid query selector, or manually verify that the DOM node with the same selector exists. document.querySelector(yourExpression)` should be able to locate the DOM node.