VueYoutube

This plugin easily integrates the YouTube Iframe Player into your Vue 2/3 app.

Version 0.0.6 / 0.0.5

Version 0.0.6 fixes various issues around wrong packaging. Now everything should work as expected.

---

Version 0.0.5 adds the option to defer loading required scripts using the new option deferLoading when creating the manager with createManager. See here for more information.

pnpm install @vue-youtube/core@0.0.5

Upcoming changes

• Ability to pass an array of template refs to the usePlayer composable
• Nuxt v3 support

Usage

For a detailed usage guide, check out the official docs.

Installation

npm install @vue-youtube/core

yarn add @vue-youtube/core

pnpm install @vue-youtube/core

Register the manager

import { createManager } from '@vue-youtube/core';
import { createApp } from 'vue';

import app from './app.vue';

createApp(app).use(createManager()).mount('#app');

Composable usage

component.vue

<script setup lang="ts">
import { usePlayer } from '@vue-youtube/core';
import { ref } from 'vue';

const videoId = ref('dQw4w9WgXcQ');
const youtube = ref();

const { onReady } = usePlayer(videoId, youtube, {
  cookie: false,
  playerVars: {
    mute: 1,
  },
});

onReady((event) => {
  event.target.playVideo();
});
</script>

<template>
  <div ref="youtube" />
</template>

Component usage

To use the component, install the following packages:

npm install @vue-youtube/core @vue-youtube/component

component.vue

<script setup lang="ts">
  import { YoutubeIframe } from '@vue-youtube/component';

  const onReady = ((event) => {
    event.target.playVideo();
  })
</script>

<template>
  <youtube-iframe video-id="dQw4w9WgXcQ" @ready="onReady" />
</template>

Migration

Migrating from @techassi/vue-youtube-iframe should be a drop-in replacement. An in-depth migration guide can be found here.

Contributing

If you want to contribute a cool new feature, open a PR, and I will gladly look into it!