Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
LiteYouTubeEmbed
✓ import LiteYouTubeEmbed from 'vue-lite-youtube-embed'
✗ import { LiteYouTubeEmbed } from 'vue-lite-youtube-embed'
The component is exported as a default export, not a named one.
CSS
✓ import 'vue-lite-youtube-embed/style.css'
The component's styling needs to be explicitly imported. Ensure your build system (e.g., Vite, Webpack) is configured to handle CSS imports.
Fragment (for Vue 2)
✓ import { Fragment } from 'vue-frag'
✗ import Fragment from 'vue-frag'
When using Vue 2, the `Fragment` component from `vue-frag` must be globally registered. This dependency is not needed for Vue 3.
This quickstart demonstrates how to import and use the LiteYouTubeEmbed component in a Vue 3 application, including importing its CSS, setting required props like `id` and `title`, and showcasing optional features like privacy-enhanced mode and custom `params`.
import { createApp } from 'vue'
import LiteYouTubeEmbed from 'vue-lite-youtube-embed'
import 'vue-lite-youtube-embed/style.css'
const App = {
template: `
<div>
<h1>My YouTube Video</h1>
<LiteYouTubeEmbed
id="dQw4w9WgXcQ"
title="Rick Astley - Never Gonna Give You Up (Official Music Video)"
adNetwork={false}
cookie={true}
params="start=60&autoplay=1"
/>
<p>This video uses the privacy-enhanced mode and starts at 1 minute.</p>
</div>
`,
components: { LiteYouTubeEmbed }
}
createApp(App).mount('#app')
Debug
Known issues
breakingVue 2 applications require an additional peer dependency, `vue-frag`, and manual global component registration. This is a significant difference from Vue 3 usage.fixFor Vue 2, install `vue-frag` (npm install vue-frag) and globally register it: `Vue.component('Fragment', Fragment)`. affects: <=1.x.x (for Vue 2)
gotchaThe component's CSS must be explicitly imported (`import 'vue-lite-youtube-embed/style.css'`). Forgetting this will result in an unstyled component.fixAdd `import 'vue-lite-youtube-embed/style.css'` to your main entry file or the component where `LiteYouTubeEmbed` is used.
affects: >=1.0.0
gotchaThe `params` prop requires a specific format: only key-value pairs separated by '&', without leading '?' or '&'. Also, use 'start' instead of 't' for timestamps.fixFormat `params` as `param1=value1¶m2=value2`. For example, `start=1150&autoplay=1`. Always use `start` for video start times.
affects: >=1.0.0
gotchaTo enable the `muted` prop, `autoplay` must also be set to `true` within the `params` prop or via direct prop if available, as per YouTube's embedding policy.fixWhen using `muted`, ensure `params` includes `autoplay=1`, e.g., `params="autoplay=1&muted=1"`.
affects: >=1.0.0
gotchaFor YouTube playlists, the `playlistCoverId` prop is necessary to display a cover image, as the playlist ID itself doesn't provide one directly. You must supply a video ID from the playlist for the cover.fixProvide a valid video ID to the `playlistCoverId` prop when the `playlist` prop is `true`.
affects: >=1.0.0
Errors
Common errors & fixes
Failed to resolve component: Fragment
Using Vue 2 without globally registering the `Fragment` component from `vue-frag`.
fixInstall `vue-frag` (`npm install vue-frag`) and add `Vue.component('Fragment', Fragment)` in your `main.ts`/`main.js`. Property 'LiteYouTubeEmbed' does not exist on type 'GlobalComponents'.
TypeScript error often encountered when `LiteYouTubeEmbed` is not correctly imported as a default export or declared.
fixEnsure `import LiteYouTubeEmbed from 'vue-lite-youtube-embed'` is used, and if using script setup, ensure the component is available, or manually declare in `components` option if not using script setup.
The component renders but has no styling, appearing as a plain link or button.
The component's default CSS file has not been imported.
fixAdd `import 'vue-lite-youtube-embed/style.css'` to your application's entry point or the component file where `LiteYouTubeEmbed` is used.
Error: Invalid prop: type check failed for prop "id". Expected String, got Undefined.
The `id` prop (YouTube video/playlist ID) is missing or undefined.
fixAlways provide a valid YouTube video or playlist ID string to the `id` prop: `<LiteYouTubeEmbed id="dQw4w9WgXcQ" ... />`.
Audit
Dependencies
@vue/composition-apioptionalPeer dependency for Vue 2 usage, specifically for the composition API functionality.
vuerequiredCore peer dependency for any Vue application, supporting Vue 2.6.14+ or Vue 3.2.0+.
vue-fragoptionalRequired for Vue 2 compatibility, enabling the use of fragments.