Oembed

Vue plugin for social media oEmbed. This plugin was developed for supporting latest facebook / instagram / tiktok / youtube oembed api changes.

Supported Oembed / iFrame API

Special Note

App in development mode unable to consume Facebook Oembed Graph API?

Take a look into community reference for easier to get permission approval.

Installation Guide

npm i vue-cli-plugin-oembed

Usage

main.js

import { createApp } from 'vue';
import App from './App.vue';
import Oembed from 'vue-cli-plugin-oembed';

const app = createApp(App);
app.use(Oembed);

Html Integrations

Instagram Embed

<instagram-oembed 
    url="https://www.instagram.com/p/CJD5bFMBt8S/" 
    app_id="Your App ID" 
    app_secret="Your App Secret"
></instagram-oembed>

Facebook Embed

<facebook-oembed 
    url="https://www.facebook.com/POTUS/posts/1511527275583374"
    app_id="Your App ID" 
    app_secret="Your App Secret"
></facebook-oembed>

Tiktok Embed

<tiktok-oembed url="https://www.tiktok.com/@scout2015/video/6718335390845095173"></tiktok-oembed>

Youtube Video

<youtube-oembed url="https://www.youtube.com/watch?v=M7lc1UVf-VE"></youtube-oembed>

Youtube Video List

<youtube-oembed :url="['https://www.youtube.com/watch?v=M7lc1UVf-VE', 'https://www.youtube.com/embed/tgbNymZ7vqY', 'https://www.youtube.com/watch?v=qI3P7zMMsgY', 'https://www.youtube.com/watch?v=KxvKCSwlUv8']"></youtube-oembed>

Events

Event Name	Description
error	Error events feedback.
Sample:
`html
<instagram-oembed
url="https://www.instagram.com/p/CJD5bFMBt8S/"
app_id="Your App ID"
app_secret="Your App Secret"
@error="Error Function"

</instagram-oembed> ```

Customizable Error Display:

<instagram-oembed 
    url="https://www.instagram.com/p/CJD5bFMBt8S/" 
    app_id="Your App ID" 
    app_secret="Your App Secret"
>
    <template v-slot:custom_error>
        <div>Custom Error HTML Tags</div>
    </template>
</instagram-oembed>

Package detail

vue-cli-plugin-oembed

readme