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).
Importing the component
The data-ref attribute should look like this:
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.
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 :)