Socket
Socket
Sign inDemoInstall

vue-cli-plugin-oembed

Package Overview
Dependencies
30
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-cli-plugin-oembed

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


Version published
Maintainers
1
Weekly downloads
42
decreased by-46.84%

Weekly downloads

Readme

Source

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

  • Facebook
  • Instagram
  • Tiktok
  • Youtube

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 NameDescription
errorError events feedback.
Sample:
<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>

Keywords

FAQs

Last updated on 30 Jan 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc