En Vue applications, hay dos opciones cuando se incrusta código HTML/Javascript personalizado:

Primero, deberá copiar su código de widget:

Una vez copiado el código, tendrá que separar el HTML del javascript, por ejemplo:

Código de widget de EmbedSocial:

HTML

CSS

1. Cómo incrustar el widget utilizando Opciones API

Si desea insertar el código de su widget EmbedSocial en una aplicación Vue que utiliza Opciones API, siga estos pasos:

Primero, diríjase a la aplicación Vue y cree un nuevo componente en su directorio de componentes:

Pegue el código de HTML de su widget EmbedSocial dentro de las etiquetas <template>:

Pegue el código de javascript de su widget EmbedSocial dentro del ciclo de vida created:

Una vez creado el componente de su widget EmbedSocial, simplemente tiene que importarlo y mostrarlo en su sitio web.

Abra el archivo/página donde desea mostrar el widget e importe el componente, en este caso, lo importamos en App.vue:

Así es como se ven los resultados al utilizar la Opciones API del EmbedSocial:

2. Cómo incrustar el widget utilizando la Composition API

La Composición API es una adición al framework de Vue creada para abordar las limitaciones de la Opciones API utilizada en Vue2.

Para insertar el código de su widget en una aplicación Vue que utiliza la Composition API, siga estos pasos:

Primero, diríjase a la aplicación Vue y cree un nuevo componente en su directorio de componentes:

A continuación, pegue el código de HTML de su widget EmbedSocial dentro de las etiquetas <template>:

Después, importe la función create de Vue y pegue el código de javascript de su widget EmbedSocial dentro de la función create:

Siguiendo estos pasos, habrá creado el componente de su widget EmbedSocial, ahora sólo tiene que importarlo y mostrarlo en su sitio web.

Abra el archivo/página donde desea mostrar su widget y realice la importación del componente, en este caso, lo importamos en App.vue:

Una vez hecho esto, su widget se mostrará en su sitio web.

¡Eso es todo!