{"library":"portal-vue","title":"PortalVue for Vue 3","description":"PortalVue is a Vue 3 component library that enables developers to render DOM elements outside of their natural component hierarchy, placing content anywhere in the document. The current stable version is 3.0.0, which targets Vue 3 and ships with full TypeScript types. While the project had a prolonged beta period, the 3.x line is now considered stable and actively maintained, receiving dependency updates and bug fixes as needed. Its primary differentiator is providing a robust, battle-tested solution for portal functionality directly within the Vue ecosystem, often used for modals, tooltips, and other overlay elements, without relying on imperative DOM manipulation. Vue 3 also offers its native `<Teleport>` component, which addresses many typical portal use cases, but PortalVue remains relevant for scenarios involving content movement between application components rather than simply moving to a specific DOM target.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install portal-vue"],"cli":null},"imports":["import PortalVue from 'portal-vue';","import { Portal } from 'portal-vue';","import { PortalTarget } from 'portal-vue';","import { Wormhole } from 'portal-vue';","import type { PortalProps } from 'portal-vue';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createApp } from 'vue';\nimport PortalVue from 'portal-vue';\n\nconst App = {\n  template: `\n    <div>\n      <h1>PortalVue Example</h1>\n      <button @click=\"count++\">Increment Count: {{ count }}</button>\n      <Portal to=\"destination\">\n        <p>This slot content, including reactive data, will be rendered wherever the <PortalTarget> with name 'destination' is located.</p>\n        <p>Current Portal Count: {{ count }}</p>\n      </Portal>\n\n      <div style=\"border: 2px dashed #007bff; padding: 20px; margin-top: 30px; background-color: #e6f7ff;\">\n        <h2>Outside the Component Tree (Portal Target)</h2>\n        <PortalTarget name=\"destination\">\n          <!-- Content from the Portal above will appear here -->\n        </PortalTarget>\n      </div>\n    </div>\n  `,\n  data() {\n    return {\n      count: 0\n    };\n  }\n};\n\nconst app = createApp(App);\napp.use(PortalVue); // Globally registers <Portal> and <PortalTarget> components\napp.mount('#app');","lang":"typescript","description":"Demonstrates a basic Vue 3 application using PortalVue to 'teleport' reactive content from one part of the component tree to a `PortalTarget` located elsewhere in the DOM.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}