Hello everyone! I am an Angular developer and I have zero knowledge of Vue.js. I wanted to use the prefect-ui-library's components and features inside of an Angular app. Would that be possible? And, if so, are there some things to watch out for or general guidelines for such an integration? Thank you for your hard work on Prefect. Great product!

This would likely be very challenging. I'd sooner recommend running through the Vue.js getting started tutorial real quick and consider giving it a go. I've coded with Angular, React and now Vue. They're all a little different but once you get going, they're all pretty similar as well and a lot of fun. If it's still a no go, you'd have to find a nice way to render vue components in Angular, which would likely be pretty challenging and limiting.

Thank you for the heads-up, Brandon! I'll try something different.

@Aby you can make this work if you really want to, but note that you'll be creating an entire Vue app inside your Angular app, so it would still be a good idea to do the Vue tutorial like Brandon mentioned. What you'd need to do is create a minimal Vue app that loads the Prefect UI component(s) you want, then use an Angular ElementRef to get ahold of a DOM element inside one of your Angular components, and then pass that element to your mini Vue app's

mount

method. I'm doing partly from memory and partly from old apps where I've experimented with doing things like this,so I can't guarantee 100% accuracy, but here's how it might look. First, a tiny Vue app:

// myVueApp.js
import { createApp, ref } from "vue";

export function mountVueApp(el, props) {
  const message = ref("Hello from Vue!");

  // in your app, you'd want to import and use the Prefect UI components you're interested in.
  const app = createApp({
    setup() {
      return { message };
    },
    template: `<div>{{ message }}</div>`,
  });

  app.mount(el);
}

Then, the Angular component you want to render the Vue app inside:

// my-angular-component.component.ts
import { Component, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
import { mountVueApp } from './myVueApp';

@Component({
  selector: 'app-my-angular-component',
  template: `<div #vueAppContainer></div>`,
})
export class MyAngularComponentComponent implements AfterViewInit, OnDestroy {
  private vueApp: any;

  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    const containerEl = this.el.nativeElement.querySelector('#vueAppContainer');
    this.vueApp = mountVueApp(containerEl, {});
  }

  ngOnDestroy() {
    // If your Vue app has any cleanup to do, do it here.
    if (this.vueApp && typeof this.vueApp.unmount === 'function') {
      this.vueApp.unmount();
    }
  }
}

I'd say it's more tedious than difficult, but you can make it work if you really, really want to use Vue components inside your Angular app. You'd need to choose a way to share state between your Angular and Vue apps. MobX might work well since it had both Angular and Vue bindings.