portal-vue
portal-vue copied to clipboard
LinusBorg
Provide version that's Vue 3 compatible
It Doesn't have compatibility with the Vue 3 beta version. When the plugin is loaded it throws an error:
- Uncaught TypeError: Vue.extend is not a function
Yeah. This is a Vue 2 plugin. I'll release a vue 3 compatible version in time.
Sidenote: Depending on your usecase you might not need portal-vue anymore as Vue 3 has a basic Portal in core now, named <teleport />.
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0025-teleport.md
@LinusBorg
Sidenote: Depending on your usecase you might not need portal-vue anymore as Vue 3 has a basic Portal in core now, named
<teleport />.https://github.com/vuejs/rfcs/blob/master/active-rfcs/0025-teleport.md
Will you still provide a vue3 compatible version, or users wanting v3 will need to migrate code to teleport ? Would you kindly provide a migration guide?
I'll provide a Vue 3 compatible version, as <teleport> doesn't offer everything that portal-vue does - but the former has none of the caveats/downsides of the latter as well.
So people who can use <teleport> for their usecase should do so.
@LinusBorg teleport can't work with transition, this cause some transition(leave animate) broken.
Instead of duplicating the effort, improving teleport would be better instead of porting portal-vue to vue3? Or maybe have teleport plugins.
As a developer, I'd also want one component which works well enough, instead of several, each having various downsides.
Teleport is already designed to solve the 80% use case, not all of Portal-Vue. If that covers your needs, by all means use that.
Portal-Vue does a few more things that teleport doesn't, so if you need those 20%, use Portal-Vue.
As those 20% of additional use cases make up for 80% of portal-vue's weight, those will not make it into core.
I'll try and build the new version on top of teleport so there's no duplication going on.
@LinusBorg
teleportcan't work with transition, this cause some transition(leave animate) broken.
That should.be addressed as a bug in the Vue 3 repo then.
@LinusBorg
teleportcan't work with transition, this cause some transition(leave animate) broken.That should.be addressed as a bug in the Vue 3 repo then.
I think this is not only a bug,
because teleport is DOM-based, it could not send any component to transition child, bug portal-target can be a good target.
@LinusBorg I'll try and build the new version on top of teleport so there's no duplication going on.
but this is a good idea :)
because teleport is DOM-based, it could not send any component to transition child,
I'm not sure what you mean here.
I again suggest to try and open an issue about your problem in the Vue 3 Repo. I can tell you that I would expect this to work - and I wrote the RFC for <teleport>.
Hi, do you have an exact plan for release a version for vue 3 ? And what is about performance for vue 3 version , i see the lack of performance by vue 2 version. And i think about the consistent name with vue's teleport like teleport-slot , maybe is easier for developers to understand. I think it is better if your full version can be intergrated in core, because the vue 3 has tree shaking .So the developers don't need to worry about the bundle size, and the core team can maintain it better. I see the big value by your plugin to decouple the code in some cases like widget or cms system. Maybe you can write a RFC to persuade the core team .
Following/joining, I have an issue with the portal target living as a sibling of the portal (portal sends content of the selected article to the sidebar), which isn't supported by teleport:
https://github.com/vuejs/vue-next/issues/992#issuecomment-616126089
The target element cannot be a part of the same component... It needs to be outside of
<div id="app">.
https://github.com/vuejs/vue-next/issues/1705#issuecomment-663849543
[Vue warn]: Failed to locate Teleport target with selector ".cell2". Note the target element must exist before the component is mounted - i.e. the target cannot be rendered by the component itself, and ideally should be outside of the entire Vue component tree.
I'm pretty sure I could use some hacking to force vue to render the sidebar and then in the nextTick populate the articles so the teleport target exists before an article, but I'd rather the portal handle waiting an extra render cycle as this one does.
On it but got set back a bit as I broke my arm recently. coding is .... difficult right now ^^
Will def still be a few more weeks before I can publish something.
So, I'm well enough recovered to start working on the migration. It's going well so far, I'm a few missing tests away from udpating documentation.
If everythign goes as planned (which, let's be honest, it rarely does) I'll have a preview release ready sometime next week.
Things of course go slower, but code and tests are now fully ported.
Left: Update docs, document breaking changes (few) and publish.
Sorry for bloating the thread, but I really wanted to point how examplary your communication is @LinusBorg - keeping everyone updated on the matter! Very few keep their users updated like this (and often leave you hanging for a long time until a big boom happens - if it ever does...). Inspiring!
@LinusBorg I hope you're feeling better. Do you have an eta on this? I've tried using the new teleport feature of v3 but it seems you can only use it outside of the Vue DOM. Portal doesn't seem to have that limitation. Is that correct?
Yes, though it took longer than anticipated.
I have an alpha version ready, just need to publish. Preliminary docs are already up at https://next.portal-vue.linusb.org
I'm in the middle of preparing a talk, so will release the alpha on sunday after that. Can't take distractions right now.
Missed my personal deadline for this weekend but I'll squeeze it in somewhere in the coming days.
silently published 3.0.0-alpha.0 in the next tag, feel free to check it out.
I'll do an announcement later.
Docs are preliminary and still need some work here and there, but the bulk should be usable.
Currently i am trying to migrate a vue2 project to vue3, first i tried to use teleport, but i need the @change and :order functionality. so i found this one.
But now i am getting:
[Vue warn]: inject() can only be used inside setup() or functional components.
I use vue: 3.1.1 with vue-cli and not vite
The example from this repo works fine.
@Botz Can you share any more details? With what you provided it's hard to check if/how this is related to this library/version.
If so, Please open a bug issue.
@LinusBorg I have the opposite issue with the "node" version, I'm stuck in node 12 and the plugins is requiring node 14. Is there a technical reason for it?
@LinusBorg I dug through the Vue 3 version a little. In the wormhole code, it looks like an entirely separate Vue app is being created. Is there a way to wormhole content within the consuming app? That would preserve things like global components and directives that users register and expect to still work when they pass them through the wormhole.
I'm not sure what you are talking about exactly. There's no app being created.
@LinusBorg A call to createApp happens in the mountPortalTarget utility method. If users want to programmatically wormhole content to document.body or insert it as a child of #app and still have directives and global components work properly, how is that possible without explicitly mounting <portal-target>? A good example use case would be building a library with a ToastManager and an app calling ToastManager.open(ToastComponent, { ...managerOptions}). Ideally such a manager would automatically mount a <portal-target> in the same app so that the toast content inherits global configuration, directives, etc. It would be nice to not require the app to explicitly import and mount a <portal-target> that's just going to be stuck on document.body.
Oh, you are talking about that edge case where one might want to use portal-vue instead of <teleport>? That indeed uses a separate app instance, yes.
We could likely make the new instance share the current app's components and directives as well - we already do it for the provide's. Feel free to open a feature request as a reminder for me.
Thanks a lot @LinusBorg , though teleport is built now in vue 3, I was stuck when using inertia with laravel. I was using persistent layout and wanted to have multiple slots in parent so children can inject whatever they want. As for now there is no support for multiple slots when using persistent layout in inertia. Also teleport could not make it happen for me as it was made for scenarios where we would like to teleport content outside of the App hierarchy but somewhere else in the DOM. So your alpha version of portal-vue sort it out for me. Many thanks.
Thanks a lot @LinusBorg , though teleport is built now in vue 3, I was stuck when using inertia with laravel. I was using persistent layout and wanted to have multiple slots in parent so children can inject whatever they want. As for now there is no support for multiple slots when using persistent layout in inertia. Also teleport could not make it happen for me as it was made for scenarios where we would like to teleport content outside of the App hierarchy but somewhere else in the DOM. So your alpha version of portal-vue sort it out for me. Many thanks.
Having the same issue this alpha package made it super easy! Many thanks for the vue3 update
FYI there is another Vue 3 effort here:
https://github.com/VasekProchazka/vue3-portal
Installing version 3.0.0-beta.0 works fine for me
Can be installed using next tag btw
