search

LinusBorg / portal-vue

A feature-rich Portal Plugin for Vue 3, for rendering DOM outside of a component, anywhere in your app or the entire document. (Vue 2 version: v2.portal-vue.linusb.org)
http://portal-vue.linusb.org
MIT License
3.9k stars 187 forks source link

Mounting Portal cant find target #377

Closed b-hayes closed 1 year ago

b-hayes commented 2 years ago
image image

Ive been following the example here: https://portal-vue.linusb.org/api/mounting-portal.html#example-usage

And I just cant seem to get this working is it me or an issue with Mount Portal?

LinusBorg commented 2 years ago

You should neither nest a portal-target ion the target element, nor should you nest a <portal> in the <MouintingPortal>. You should literally do what the example shows:


`<MountingPortal
  mountTo="#mount-target"
  to="destination"
>
 <p>
   Whatever
  </p>
</MountingPortal>
``
b-hayes commented 2 years ago

Yeah, I have tried literally copying the example as well. Sorry I showed my adjusted attempt instead.

image image
b-hayes commented 2 years ago

also there is this warning if that helps:

[Vue warn]: Property or method "to" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <TestPortal>
LinusBorg commented 2 years ago
  1. The target should not contain a portal target. That's mounted for you.
  2. The warning indicates that your component doesn't have a property called "to", which you are to pass to the MountingPortal.
  3. The error indicates that the element you want to mount to (targetId) is not found in the document at the timr that you try to mount to it.