In Vue applications there are two options when embedding custom javascript code.

One option is to embed the code directly in the html, and the other better solution is by creating a Vue Component.

1. Embedding code anywhere in the page

This is a familiar option and the easiest way to go. So you can just access the html on any of your Vue files and paste the EmbedSocial code directly.

Here's an example:

2. Creating a Vue Component

This is a better way of embedding the widget since components are reusable Vue instances and you can import this Vue component anywhere in your project later on.

There are two steps you need to follow to achieve this:

  • Create the component

  • Import the component

Creating the component

1. In your /src/components directory, create a new file called EmbedSocialWidget.vue and open the file in your code editor.

2. Inside the component’s template add the embedsocial html element.

3. Create a prop called `refId` and use it’s value for the data-ref attribute in the embed social html element (as shown in the picture below).

4. Inside the component’s `created()` hook, add the embedsocial javascript, which is responsible for building the widget.

Importing the component

First, login to your EmbedSocial account and go to Widgets. Open one of the widgets that you want to embed and get the EmbedSocial data-ref attribute value (as mentioned above).

The data-ref attribute should look like this:

data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"

After you have the data-ref value, you can follow the two steps below to use the component:

1. Import the component to one of your vue files and use it inside any html element that you want the widget to appear.

2. Add the data-ref code you just copied as a value to the refId prop.

That's it.

Hope this was helpful, and if you have questions or need assistance feel free to reach out and chat with us.

We're happy to help :)

Did this answer your question?