Portal Component for Vue 2

Overview

vue2-portal

Portal Component for Vue 2

Install

npm install vue2-portal

Usage

import Portal from 'vue2-portal';

Vue.use(Portal);

Wrap the component that you want to transfer inside a component

">
<portal to="name of portal-target">
  <your-component>
    
  your-component>
portal>

Then place the portal-target component somewhere else and give it a name

">
<portal-target name="destination-name">
  
portal-target>

You can also use the mount-to property to mount the component on an element by it's id (without #)

">
<portal mount-to="element-id">
  <your-component>
    
  your-component>
portal>

<div id="element-id">
  
div>
You might also like...
Rich flashcard component for vue js 2⚡
Rich flashcard component for vue js 2⚡

Vue Flashcard ⚡ This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐ if you like it ✅ Install 👌 npm i vue-flashcard ✅ Usage

A simple and elegant letter avatar component for vue.js
A simple and elegant letter avatar component for vue.js

vue-letter-avatar Introduction An elegant and easy to use letter avatar component for vue.js 2.0+ Install $ yarn add vue-letter-avatar or $ npm instal

Vue 2.x component based on embed.js https://github.com/ritz078/embed.js

vue-embed Embed component is based on embed.js for Vue 2.x. Embed.js is a lightweight JavaScript plugin to embed emojis, media, maps, tweets, code and

A Vue component for flat surface shader

vue-flat-surface-shader A Vue component for flat surface shader DEMO: Github Pages How to use npm install --save vue-flat-surface-shader Main.js impor

A Vue.js component of a simple maze game.
A Vue.js component of a simple maze game.

Vue-maze An itty-bitty maze game made as Vue.js component PLAY DEMO Fit to the component size automatically Mousemove/Touchmove/ArrowKey to move the p

This is a vue component, which is sliding to unlock some functionalities, such as login or sign up. This is used to protect your web app from attack.

vue-drag-verify This is a vue component, which is sliding to unlock for login or sign up. This is used to protect your web app from bot attack. demo I

Vue component, that helps to make sticky effects
Vue component, that helps to make sticky effects

vue-sticker Vue component, that helps to make sticky effects Installation # install component npm install --save-dev vue-sticker using like local comp

Vue component for drag-and-drop to design and build mobile website.
Vue component for drag-and-drop to design and build mobile website.

vue-page-designer Live Demo A drag-and-drop mobile website builder base on Vue. Install yarn add vue-page-designer You can start it quickly, in main.j

A Vue component to show status indicator as colored dots.

Status Indicator · A Vue component to show a status indicator as colored dots. This is a fork of status-indicator with a few changes for use it with V

Comments
  • Problem building for production

    Problem building for production

    Hi Rovak,

    I am having an issue and not sure if you have already run into it. I am using vue2-portal in a vue project generated from the vue-cli webpack template. When I run build I get this error:

    ERROR in assets/js/vendor.d05538202a6ab2d5fe47.js from UglifyJs
    Unexpected token: punc (() [./node_modules/vue2-portal/src/portal.js:6,0][assets/js/vendor.d05538202a6ab2d5fe47.js:36651,9]
      Build failed with errors.
    error Command failed with exit code 1.
    

    The project seems to be working fine, but the build appears to be broken.

    Any ideas how to resolve this? Thank you

    opened by graux 0
Owner
Roy van Kaathoven
Roy van Kaathoven
Simple portal vue cli plugin, done by rewriting vue files

vue-cli-plugin-portal Simple portal vue cli plugin, done by rewriting vue files Installation: vue add vue-cli-plugin-portal Or through vue ui, search

jarek 0 Mar 30, 2020
Event portal for associations that enables an information flow to the members and to simplify the member and event management

EventPortal Event portal for associations that enables an information flow to the members and to simplify the member and event management. Starting Vu

Mathilda 2 Feb 21, 2022
Singlepage.js is a pure Javascript portal platform for building modular Web applications

Singlepage.js is a pure Javascript portal platform for building modular Web applications.

Padmanabh Dabke 0 Jan 22, 2021
Vue Component to Make Google Material Design Ripple Effect. http://bosnaufal.github.io/vue-ripple/

Vue Ripple Vue Component to Make Google Material Design Ripple Effect. It's adopted from angular-ripple DEMO Install You can import vue-ripple to your

Naufal Rabbani 49 Aug 24, 2022
A beautiful chat rooms component made with Vue.js - compatible with Vue, React & Angular

vue-advanced-chat Vue 3 compatibility ?? Features Vue, Angular & React compatibility Customizeable realtime chat messaging Backend agnostic Images, vi

Antoine Dupont 988 Sep 28, 2022
Vue 3 + Vite - How to use vue Teleport component

Vue 3 + Vite - How to use vue Teleport component

null 2 Feb 15, 2022
Vue Cookies Consent - Nice and clean component to display message about cookies in Vue and Nuxt.js

Vue Cookies Consent Nice and clean component to display message about cookies in Vue and Nuxt.js ?? Demo ?? Installation NPM npm install --save @norvi

Norvik IT 8 Sep 26, 2022
Vue-easy-print: This is a vue.js-based printing component

这是一个基于vue 2.0的打印组件 中文文档 English 核心: 使用vue组件的slot插槽进行模板加载。

pcloth 79 Sep 3, 2022
An avatar component for vue.js

vue-avatar An avatar component for vue.js. This component display an avatar image and if none is provided fallback to the user initials. This componen

Elie 613 Sep 16, 2022
Vue component that simulates a user typing, selecting, and erasing text.

Vue component that simulates a user typing, selecting, and erasing text. Play with vue-typer in this interactive demo. Getting Started Usage Props tex

null 773 Sep 27, 2022