0

Tengo el componente de vue funcionando en otra app, quierp usar ese mismo componente en mi proyecto de angular pero estoy teniendo problemas

angular.json

   "scripts": [
     "src/assets/js/vuecomponent.umd.min.js",
     "src/assets/js/vue.js"
   ]

test-component.ts

import * as Vue from '../../assets/js/vue';
import * as vuecomponent from '../../assets/js/vuecomponent.umd.min';

showComponent(type: string) {
 let appModal = new Vue({
  el: "#fittingModal",
  data: { scenario: this.scenario, form: type
  },
  methods: {
    close : function() {
    },
  }
 })
}

test-component.html

<button pButton type="button" (click)="showComponent('loss')" label="Dist. Fitting"></button>
<div id="fittingModal">
    <fit-distribution :export="false"></fit-distribution>
</div>

Pero el error que me da cuando le doy al boton es:

Unknown custom element: <fit-distribution> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
1

1 respuesta 1

0

La recomendación es que evites al máximo hacer eso, no es una buena idea mezclar frameworks. Pero si tienes que hacerlo, podrías

  1. Definir el vue component como un custom component
import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // Definición de component
})

customElements.define('vue-element', MyVueElement)
  1. Agrega al modulo donde lo vayas a utilizar CUSTOM_ELEMENTS_SCHEMA
 schemas: [
    CUSTOM_ELEMENTS_SCHEMA // Added for custom elements support
  ]

Esto permitirá que Angular no lance errores por no reconocer la etiqueta.

Importante, es necesario que utilices Vue 3.2

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.