{"id":12517,"library":"vue-lite-youtube-embed","title":"Vue Lite YouTube Embed Component","description":"vue-lite-youtube-embed is a lightweight Vue component designed to embed YouTube videos with a strong focus on performance and user privacy. It serves as a Vue port of React Lite YouTube Embed, implementing an \"Adaptive Loading\" strategy to defer loading the full YouTube iframe until user interaction, significantly improving initial page load times. The package is currently at version 1.2.4 and appears to have an ad-hoc release cadence, typical for focused utility components. Its primary differentiators include being private-by-default (using `youtube-nocookie.com` if `cookie` prop is set to true), requiring only essential assets, and providing a clean, customizable interface. It supports both Vue 2 (with a `vue-frag` dependency) and Vue 3, shipping with TypeScript types for enhanced developer experience. It prioritizes accessibility by requiring a `title` prop for the iframe.","status":"active","version":"1.2.4","language":"javascript","source_language":"en","source_url":"https://github.com/wobsoriano/vue-lite-youtube-embed","tags":["javascript","vue","youtube","embed","typescript"],"install":[{"cmd":"npm install vue-lite-youtube-embed","lang":"bash","label":"npm"},{"cmd":"yarn add vue-lite-youtube-embed","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-lite-youtube-embed","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 2 usage, specifically for the composition API functionality.","package":"@vue/composition-api","optional":true},{"reason":"Core peer dependency for any Vue application, supporting Vue 2.6.14+ or Vue 3.2.0+.","package":"vue","optional":false},{"reason":"Required for Vue 2 compatibility, enabling the use of fragments.","package":"vue-frag","optional":true}],"imports":[{"note":"The component is exported as a default export, not a named one.","wrong":"import { LiteYouTubeEmbed } from 'vue-lite-youtube-embed'","symbol":"LiteYouTubeEmbed","correct":"import LiteYouTubeEmbed from 'vue-lite-youtube-embed'"},{"note":"The component's styling needs to be explicitly imported. Ensure your build system (e.g., Vite, Webpack) is configured to handle CSS imports.","symbol":"CSS","correct":"import 'vue-lite-youtube-embed/style.css'"},{"note":"When using Vue 2, the `Fragment` component from `vue-frag` must be globally registered. This dependency is not needed for Vue 3.","wrong":"import Fragment from 'vue-frag'","symbol":"Fragment (for Vue 2)","correct":"import { Fragment } from 'vue-frag'"}],"quickstart":{"code":"import { createApp } from 'vue'\nimport LiteYouTubeEmbed from 'vue-lite-youtube-embed'\nimport 'vue-lite-youtube-embed/style.css'\n\nconst App = {\n  template: `\n    <div>\n      <h1>My YouTube Video</h1>\n      <LiteYouTubeEmbed\n        id=\"dQw4w9WgXcQ\"\n        title=\"Rick Astley - Never Gonna Give You Up (Official Music Video)\"\n        adNetwork={false}\n        cookie={true}\n        params=\"start=60&autoplay=1\"\n      />\n      <p>This video uses the privacy-enhanced mode and starts at 1 minute.</p>\n    </div>\n  `,\n  components: { LiteYouTubeEmbed }\n}\n\ncreateApp(App).mount('#app')","lang":"typescript","description":"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`."},"warnings":[{"fix":"For Vue 2, install `vue-frag` (npm install vue-frag) and globally register it: `Vue.component('Fragment', Fragment)`.","message":"Vue 2 applications require an additional peer dependency, `vue-frag`, and manual global component registration. This is a significant difference from Vue 3 usage.","severity":"breaking","affected_versions":"<=1.x.x (for Vue 2)"},{"fix":"Add `import 'vue-lite-youtube-embed/style.css'` to your main entry file or the component where `LiteYouTubeEmbed` is used.","message":"The component's CSS must be explicitly imported (`import 'vue-lite-youtube-embed/style.css'`). Forgetting this will result in an unstyled component.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Format `params` as `param1=value1&param2=value2`. For example, `start=1150&autoplay=1`. Always use `start` for video start times.","message":"The `params` prop requires a specific format: only key-value pairs separated by '&', without leading '?' or '&'. Also, use 'start' instead of 't' for timestamps.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"When using `muted`, ensure `params` includes `autoplay=1`, e.g., `params=\"autoplay=1&muted=1\"`.","message":"To 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Provide a valid video ID to the `playlistCoverId` prop when the `playlist` prop is `true`.","message":"For 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install `vue-frag` (`npm install vue-frag`) and add `Vue.component('Fragment', Fragment)` in your `main.ts`/`main.js`.","cause":"Using Vue 2 without globally registering the `Fragment` component from `vue-frag`.","error":"Failed to resolve component: Fragment"},{"fix":"Ensure `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.","cause":"TypeScript error often encountered when `LiteYouTubeEmbed` is not correctly imported as a default export or declared.","error":"Property 'LiteYouTubeEmbed' does not exist on type 'GlobalComponents'."},{"fix":"Add `import 'vue-lite-youtube-embed/style.css'` to your application's entry point or the component file where `LiteYouTubeEmbed` is used.","cause":"The component's default CSS file has not been imported.","error":"The component renders but has no styling, appearing as a plain link or button."},{"fix":"Always provide a valid YouTube video or playlist ID string to the `id` prop: `<LiteYouTubeEmbed id=\"dQw4w9WgXcQ\" ... />`.","cause":"The `id` prop (YouTube video/playlist ID) is missing or undefined.","error":"Error: Invalid prop: type check failed for prop \"id\". Expected String, got Undefined."}],"ecosystem":"npm"}