Vue Lite YouTube Embed Component

1.2.4 · active · verified Sun Apr 19

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.

Common errors

```
Failed to resolve component: Fragment
```
cause Using Vue 2 without globally registering the `Fragment` component from `vue-frag`.

fix Install `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'.
```
cause TypeScript error often encountered when `LiteYouTubeEmbed` is not correctly imported as a default export or declared.

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.
```
The component renders but has no styling, appearing as a plain link or button.
```
cause The component's default CSS file has not been imported.

fix Add `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.
```
cause The `id` prop (YouTube video/playlist ID) is missing or undefined.

fix Always provide a valid YouTube video or playlist ID string to the `id` prop: `<LiteYouTubeEmbed id="dQw4w9WgXcQ" ... />`.

Warnings

breaking Vue 2 applications require an additional peer dependency, `vue-frag`, and manual global component registration. This is a significant difference from Vue 3 usage.
Fix: For Vue 2, install `vue-frag` (npm install vue-frag) and globally register it: `Vue.component('Fragment', Fragment)`.
gotcha The component's CSS must be explicitly imported (`import 'vue-lite-youtube-embed/style.css'`). Forgetting this will result in an unstyled component.
Fix: Add `import 'vue-lite-youtube-embed/style.css'` to your main entry file or the component where `LiteYouTubeEmbed` is used.
gotcha The `params` prop requires a specific format: only key-value pairs separated by '&', without leading '?' or '&'. Also, use 'start' instead of 't' for timestamps.
Fix: Format `params` as `param1=value1&param2=value2`. For example, `start=1150&autoplay=1`. Always use `start` for video start times.
gotcha 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.
Fix: When using `muted`, ensure `params` includes `autoplay=1`, e.g., `params="autoplay=1&muted=1"`.
gotcha 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.
Fix: Provide a valid video ID to the `playlistCoverId` prop when the `playlist` prop is `true`.

Install

npm install vue-lite-youtube-embed npm
yarn add vue-lite-youtube-embed yarn
pnpm add vue-lite-youtube-embed pnpm

Imports

LiteYouTubeEmbed

wrong:

import { LiteYouTubeEmbed } from 'vue-lite-youtube-embed'

correct:

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)
wrong:
```
import Fragment from 'vue-frag'
```
correct:
```
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.

Quickstart

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')

view raw JSON →