In Vue applications, there are two options when embedding custom HTML/javascript code:

First, you will need to copy your widget code:

After you have copied the code, you will need to separate the HTML from the javascript, for example:

EmdedSocial widget code:

HTML

CSS

1. Embedding the widget through the Options API

To embed the EmbedSocial widget code in a Vue application that uses the Options API, please follow the steps below:

First, head over to your Vue application and create a new component in your components directory:

Paste the EmbedSocial widget HTML code inside the <template> tags:

Paste the EmbedSocial widget javascript code inside the created lifecycle hook:

Now after you’ve created the EmbedSocial widget component, you just need to import the component and display it on your website.

Open the file/page where you want to display the widget and import the component, in this case, we are importing it in App.vue:

Here are the results from this code and using Options API
​

2. Composition API

The Composition API is an addition to the Vue framework created to address the limitations of the Options API used in Vue2.

In order to embed your widget code in a Vue application that uses the Composition API, you will need to follow the steps below:

First, head over to your Vue application and create a new component in your components directory:

Next, paste the EmbedSocial widget HTML code inside the <template> tags:

Then you will need to import onCreated function from Vue, and paste the EmbedSocial widget javascript code inside the onCreated function:

By following the steps above, you’ve created the EmbedSocial widget component, we have to import the component and display it on your website.

Open the file/page where you want to display your widget and import the component, in this case, we are importing it in App.vue:

Once this is done, your widget will be displayed on your website.

That's it.