DEV Community

GreenestGoat
GreenestGoat

Posted on

vueframe a simple Vue 3 component library for embedding video players

#vue #javascript #webdev #opensource

Just wanted to share a project I've been working on called vueframe, offering a simple way to embed players such a YouTube and Vimeo easily with a universal API.

Its also the first time I've built a component library with VueJS so I would love feedback on this project so i can improve it and make it better.

here's the GitHub repo if your interested.

also a star would be Awesome :)

EDIT:

I'm also working on a documentation website

Installation 📦 

# npm
npm install @vueframe/vueframe
Enter fullscreen mode Exit fullscreen mode

Setup ⚙️ 

// main.ts / main.js
import { createApp } from 'vue'
import App from './App.vue'
import VueFrame from '@vueframe/vueframe'

createApp(App)
  .use(VueFrame)
  .mount('#app')
Enter fullscreen mode Exit fullscreen mode

Usage 💻

App.vue

YouTube 

<YouTube id="dQw4w9WgXcQ" />
Enter fullscreen mode Exit fullscreen mode

Vimeo 

<Vimeo id="676247342" />
Enter fullscreen mode Exit fullscreen mode

Dailymotion

This component currently does not support autoplay or muted

<Dailymotion id="x8i1ffw" />
Enter fullscreen mode Exit fullscreen mode

Props 🎛️

Prop Type Default Description
id string Required Video ID from the platform
autoplay boolean false Auto-start playback
muted boolean false Initialize video muted
width `string\ number` "1024px"
height `string\ number` "576px"

Examples 🎯

With Props 

<YouTube id="dQw4w9WgXcQ" autoplay muted width="800px" height="450px" />
Enter fullscreen mode Exit fullscreen mode

License 📄

MIT © vueframe

Top comments (0)