Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Any examples of how Vue's slotting works inside other frameworks?

See original GitHub issue

I’m just starting to play with this, it looks great! I’m running into a few issues trying to integrate it into my setup, and am looking for some feedback. I don’t know if the issue is specifically to vue-custom-element or in Vue itself, but I’ll start here; feel free to tell me to go elsewhere 😃

My use case: I’d like to build components in Vue, wrap them in vue-custom-element, and use them inside my AngularJS 1.x app (and elsewhere). In particular, I’d like to build Vue components with slotted areas that I can project content that’s “owned” by Angular.

So the setup is:


Here’s an example:

In this case, <a-app> is an Angular component, whose template contains <v-groupbox>, a Vue component wrapped as a Custom Element. <v-groupbox> in turn has a slot, into which I’m projecting <a-nested>, another Angular component.

In Chrome this appears to work fine, but in Firefox, Edge, and IE11 the Angular bindings don’t work when slotted inside a Vue component. For example, the buttons have an ng-click event that should call an Angular controller, but they never fire.

I thought it might be a polyfill issue, and have tried tried both document-register-element and @webcomponents/custom-elements; neither appears to work.

So! This is a roundabout way of requesting your help debugging what might be going on. We’re researching ways of creating framework-independent components, but if we can’t get this interop to function we’ll have to drop Vue from our list. Happy to answer any questions regarding the AngularJS code.


Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

karol-fcommented, Jun 6, 2018

Thanks, will think about it. Regards.

dennisbaskincommented, Mar 16, 2020

@thedamon we were able to make it work for us, but have not applied at scale. We used Vue with vue-custom-element as a prototype, and eventually went on to use Stencil.js with full on web-components approach (including shadow dom and custom elements).

Read more comments on GitHub >

github_iconTop Results From Across the Web

A Comprehensive Guide to Vue Slots - SitePoint
Basically, Vue offers two kinds of slots: a simple slot, and a scoped slot. Let's start with the simple one. Consider the following...
Read more >
Working and Types of Vue.js slots along with Examples
Slots are one of the most powerful tools of the Vue.js framework, which helps in creating generic components other than the strict parent-child...
Read more >
A deep dive into Vue slots - LogRocket Blog
This post tells you everything you need to know about Vue slots, which can help you reuse properties in components for more efficent...
Read more >
Slots - Vue.js
Slot content is not just limited to text. It can be any valid template content. For example, we can pass in multiple elements,...
Read more >
Sliding In And Out Of Vue.js - Smashing Magazine
However, one thing that is often overlooked is that it's not just easy to embed Vue.js into sites written with other frameworks, it's...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found