こちらの記事に使用されいてる管理画面の画像は、英語の管理画面を撮影したものです。実際にご利用いただくEmbedSocialの管理画面は日本語仕様です。
Vueアプリケーションでは、カスタムHTML / JavaScriptコードを埋め込む際に2つのオプションがあります：
コンポジションAPI
オプションAPI
まず、ウィジェットコードをコピーする必要があります：
コードをコピー コードをコピーしたら、HTMLとJavaScriptを分離する必要があります。
例：
EmdedSocialウィジェットコード：
<div class="embedsocial-hashtag" data-ref="a4f74f50d0016f41895f78a3141a52b07c6933aa"></div> <script> (function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript")); </script> HTML：
<div class="embedsocial-hashtag" data-ref="a4f74f50d0016f41895f78a3141a52b07c6933aa"></div>
CSS
(function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript"));
2.オプションAPIを使用してウィジェットを埋め込む
VueアプリケーションにEmbedSocialウィジェットコードを埋め込むには、オプションAPIを使用するアプリケーションで以下の手順に従ってください：
まず、Vueアプリケーションに移動し、コンポーネントディレクトリ内に新しいコンポーネントを作成します：
EmbedSocialウィジェットHTMLコードを<template>タグ内に貼り付けます：
作成したライフサイクルフック内にEmbedSocialウィジェットのJavaScriptコードを貼り付けます：
これでEmbedSocialウィジェットコンポーネントを作成したら、コンポーネントをインポートしてウェブサイトに表示するだけです。
ウィジェットを表示したいファイル/ページを開き、コンポーネントをインポートします。この場合、App.vueにインポートしています：
このコードとオプションAPIを使用した場合の結果は次のとおりです。
コンポジションAPI
コンポジションAPIは、Vue2で使用されるオプションAPIの制限を解消するために作成されたVueフレームワークの追加機能です。
コンポジションAPIを使用するVueアプリケーションにウィジェットコードを埋め込むには、以下の手順に従う必要があります：
まず、Vueアプリケーションに移動し、コンポーネントディレクトリ内に新しいコンポーネントを作成します：
次に、EmbedSocialウィジェットHTMLコードを<template>タグ内に貼り付けます：
次に、VueからonCreated関数をインポートし、onCreated関数内にEmbedSocialウィジェットのJavaScriptコードを貼り付けます：
上記の手順に従うことで、EmbedSocialウィジェットコンポーネントを作成しました。このコンポーネントをインポートしてウェブサイトに表示する必要があります。
ウィジェットを表示したいファイル/ページを開き、コンポーネントをインポートします。この場合、App.vueにインポートしています：
これでウィジェットがウェブサイトに表示されます。
以上です。
詳細やご不明点は、このページの右下のチャットサポートかCSチームにお問い合わせくださいませ。