Skip to content

Commit 1035393

Browse files
joaopedrodcf43081j
andauthored
feat: add portal-vue to module replacements (#271)
* Add portal-vue to module replacements * chore: move to .md * chore: minor formatting changes * chore: sort manifests --------- Co-authored-by: James Garbutt <43081j@users.noreply.github.com>
1 parent d54194b commit 1035393

File tree

3 files changed

+35
-0
lines changed

3 files changed

+35
-0
lines changed

docs/modules/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ ESLint plugin.
6363
- [`object-hash`](./object-hash.md)
6464
- [`ora`](./ora.md)
6565
- [`path-exists`](./path-exists.md)
66+
- [`portal-vue`](./portal-vue.md)
6667
- [`pkg-dir`](./pkg-dir.md)
6768
- [`qs`](./qs.md)
6869
- [`read-pkg`](./read-pkg.md)

docs/modules/portal-vue.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
description: Modern alternatives to the `portal-vue` package for making portals in Vue applications
3+
---
4+
5+
# Replacements for `portal-vue`
6+
7+
## Vue `Teleport` API
8+
9+
Since Vue 3, the [Teleport](https://vuejs.org/guide/built-ins/teleport.html) component has been introduced which replaces portal-vue for most use cases, especially modals and overlays.
10+
11+
`<Teleport>` only moves DOM nodes to an existing target — it does not manage destinations, layouts, or component structure.
12+
13+
```html
14+
<!-- Using a modal -->
15+
<div class="outer">
16+
<h3>Vue Teleport Example</h3>
17+
<div>
18+
<MyModal />
19+
</div>
20+
</div>
21+
```
22+
23+
```html
24+
<!-- MyModal.vue -->
25+
<Teleport to="body">
26+
<p>The content inside of Teleport will render in html body</p>
27+
</Teleport>
28+
```

manifests/preferred.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2280,6 +2280,12 @@
22802280
"docPath": "find-up",
22812281
"category": "preferred"
22822282
},
2283+
{
2284+
"type": "documented",
2285+
"moduleName": "portal-vue",
2286+
"docPath": "portal-vue",
2287+
"category": "preferred"
2288+
},
22832289
{
22842290
"type": "documented",
22852291
"moduleName": "q",

0 commit comments

Comments
 (0)