target-el does not work at-all

[kfirba]

Hello,

I have a Vue app component that only mounts on my left sidebar. What I want to do is to be able to render some content from the left sidebar (which is controlled by Vue) to my main content area. I thought that Portal is the best solution for this as I can keep the logic grouped and not start firing events all over to get things synced.

Initially, I thought I could get away with vue-simple-portal but I just could not get it to work. I've always received component <portal> is not defined.... It seems to be buggy (see the bottom of this issue for how I tried to use it).

Anyways, I thought that I would just use portal-vue since I've used it before and it works.

Since I want to some element to be rendered outside of my Vue app, I used the target-el property on the portal. However, it does not seem to work:

// SomeComponent.vue
<template>
  <aside>
    <!-- ... -->
    <portal target-el="my-id"><p>Test paragraph</p></portal>
    <!-- ... -->
  </aside>
</template>

<div id="app">
    <!-- ... -->
    <div>
       <h3>Some heading</h3>

       <div id="my-id"></div>
    </div>
    <!-- ... -->
</div>

For some reason, it just does not work. Doesn't matter what I try to do. I tried placing the portal target in another location, changing ids, try to find if the property was renamed at some version but could not find anything. What I could find is that all properties I pass to the <portal> element are bounded as $attrs, even the target-el. Maybe it is a bug? Maybe this property was accidentally removed? I could not find this property definition in the component definition either.

VueSimplePortal Example

import Vue from 'vue';
import VuePortal from 'vue-simple-portal';

Vue.use(VuePortal, {name: 'portal'});
// Also tried:
// Vue.use(VuePortal);

// Usage:
<portal selector="#my-id"><p>CONTENT</p></portal>
<simple-portal selector="#my-id"><p>CONTENT</p></simple-portal>

[LinusBorg]

The target-el prop was removed in PortalVue 2.0 in favour of the new <MountingPortal> component that solves the same problem in a better way.

https://portal-vue.linusb.org/guide/migration.html#mountingportal

[kfirba]

@LinusBorg Thanks. I guess I was not on the right documentation version: https://linusborg.github.io/portal-vue/#/guide?id=rendering-outside-of-the-vue-app

I guess there should be some message that this is for version 1.x. I couldn't find any mention there or even a link to v2 docs.

Thanks!

[LinusBorg]

You're right, I opened #239 to not forget.

[kfirba]

@LinusBorg Regarding my other issue with vue-simple-vue, ould you like me to open a different issue on vue-simple-portal repo?

[LinusBorg]

Sure.