How to use vue in angular

Wrap the Vue component as a web component.

Since Angular supports the use of custom web components , Vue components (packaged as web components) can be used.

For Angular, if the custom web component is generated by Vue, then it makes no difference (as all Angular knows, they can be native HTML elements)

We use vue-custom-element for packaging

demo address: here, use element-ui as a component to import angular to use
Code address

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-custom-element@3.0.0/dist/vue-custom-element.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  const MyVueWebComp = {
    props: ['msg'],
    template:`
    <div style="border: 3px dashed green; padding: 5px">
      I am my-vue-web-comp.<br>
      Value received via "msg" prop: {{ msg }}<br>
      <input v-model="text"><button @click="addText">Type something and click me</button>
      <div v-for="t in texts">
        Text: {{ t }}
      </div>
      <div>
            <el-button @click="show()"  type="danger">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>我是vue Element 组件</p>
        </el-dialog>
      </div>
  
    </div>
    `,
    data() {
      return {
        text: '',
        texts: [],
        visible : false

      };
    },
    methods: {
      addText() {
        this.texts.push(this.text);
        this.text = '';
      },
        show() {
        this.visible = true;
      }
    }
  };
  Vue.customElement('my-vue-web-comp', MyVueWebComp);
</script>

<my-app>loading</my-app>

If it is used in ts (the same vue.js is also introduced in index.html)

declare var Vue: any;

• app.module.ts

Now, in Angular, after importing the web component, it is configured to use the added schemes: [CUSTOM_ELEMENTS_SCHEMA]:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA // Added for custom elements support
  ]
})
export class AppModule { }

• app.component.html

Now use web components directly in Angular templates (generated or not generated from Vue). For example, the components defined in the code above can be used as follows:

<h3>Hello, {{ name }}</h3>

<p>In index.html, a Vue component is defined using Vue and is wrapped into a Web Component using vue-custom-element.<br>

Now, in Angular's template, use it as if it were a native HTML Element (or regular native Web Component).
</p>

<my-vue-web-comp [msg]="name"></my-vue-web-comp>

For more details, please check the vue-custom-element document.
Reference: how-to-use-vue-2-0-components-in-an-angular-application