-
Notifications
You must be signed in to change notification settings - Fork 67
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Angular component inside Vue component/template #79
Comments
You can use the slot element in the vue template, however, the implementation is buggy and it seems like they are considering deprecating it. I am also in the same boat as you, we're trying to migrate our angular app to vue and having the ability to have angular directives/components within a vue component is necessary. I've found that you cannot have any whitespace between your vue component tags and the slot content. Your angular code cannot have any translcudes and there are some other buggy behaviours that I'm trying to work around atm. E.g., Your example would have to be written as:
|
Thank you for the suggestion @jaredmcateer! |
I'm sorry but as you said, However, you could compile an AngularJS component template within mounted() {
const template = `<custom-ng-tag foo="$ctrl.foo"></custom-ng-tag>`;
const bindings = { foo: this.foo };
const scope = angular.extend($rootScope.$new(), { $ctrl: bindings });
const element = $compile(template)(scope);
this.$el.append(element[0]);
} This should kinda work but this is very experimental, imho. I would advise not to use it in production 😅 |
Thank you @nicolaspayot! |
@nicolaspayot: I am sorry, but I have a couple of (maybe stupid) question!
Well... working... kind of... :-P |
I've come to this "AngularComponent.vue" component:
Inside a Vue component, to include an Angular component, I use it in this way:
Still I need to test it with more complex angular components, bindings, and updates, but it seems to work. |
@arcadeJHS Did you ever get this working with bindings, updates, etc...? I have a similar use case as you |
@Jvogel-Amplify Well, I guess a sort of! :) |
@Jvogel-Amplify ... which you can for sure read (together with code examples) on my github: https://github.com/arcadeJHS/AngularVueIntegration. Hope it helps! |
This is a great guide thank you for documenting all of this! I am considering migrating an angular 1.x app to Vue so this will be a big help. |
@Jvogel-Amplify: no problem, thank you for reading! :-) |
Hi, and thank you for your work!
I am trying to migrate a huge angular 1.x app into vue. I was wondering: is it possible to include an angular component into vue code?
I would like to re-use an existing angular component inside code refactored through Vue/ngVue, because I cannot simply rewrite it at the moment.
Let's say I am rewriting the "routing wrapper" of my application, but still, as the component loaded for a given route, I would like to inject the old angular code.
Something like:
But it does not work, it gives a vue warn on unregistered component, which, I guess, is the right behaviour of the framework.
I know that maybe ngVue was intended to include vue components into angular, and not the contrary.
But I was wondering if it's possible to fix that in some way.
The text was updated successfully, but these errors were encountered: