日本語の解説が全然ないので残しておきます。
下記のコードは別のとこで動いてたものをQiitaようにいじってます。
なので下記のコード自体は動作確認してません。
facebook.vue
<template>
<div>
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div>
</div>
</template>
<script>
export default{
mounted() {
if (!document.getElementById('facebook-jssdk')) {
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.2';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
},
}
</script>
<template>
内のコードはFacebookから[コードを取得]。
参考:vue.js - Error on creating a facebook like box component on vue - Stack Overflow
まずvue-tweet-embedをインストール
$ npm install vue-tweet-embed --save-dev
twitter.vue
<template>
<div class="twitter-widget"
style="width:400px;">
<v-timeline
:id="twitterId"
:source-type="'profile'"
:options="{ 'height': twitterHeight }" />
</div>
</template>
<script>
import Timeline from 'vue-tweet-embed/timeline'
export default{
components: {
'v-timeline': Timeline,
},
data() {
return {
twitterId: 'tsuka_rinorino',
twitterHeight: '400',
}
},
}
</script>
以上