VueYoutube

Appearance

Getting Started ​

This section will help you getting @vue-youtube/core up and running quickly.

Installation ​

First install the required packages via your preferred package manager. pnpm is recommended.

shell
pnpm add @vue-youtube/core
pnpm add @vue-youtube/core
shell
yarn add @vue-youtube/core
yarn add @vue-youtube/core
shell
npm add @vue-youtube/core
npm add @vue-youtube/core

Usage ​

Register the manager ​

The player manager needs to be registered with app.use() in the main.ts file.

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

import app from './app.vue';

createApp(app).use(createManager()).mount('#app');
import { createManager } from '@vue-youtube/core';
import { createApp } from 'vue';

import app from './app.vue';

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

Composable ​

The most basic usage as a Composable is as easy as:

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

// Use a template ref to reference the target element
const youtube = ref();

// Call the 'usePlayer' function with the desired video ID and target ref
usePlayer('dQw4w9WgXcQ', youtube);
</script>

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

// Use a template ref to reference the target element
const youtube = ref();

// Call the 'usePlayer' function with the desired video ID and target ref
usePlayer('dQw4w9WgXcQ', youtube);
</script>

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

Component ​

To use the Component you need to install the additional package:

shell
pnpm add @vue-youtube/component
pnpm add @vue-youtube/component
shell
yarn add @vue-youtube/component
yarn add @vue-youtube/component
shell
npm add @vue-youtube/component
npm add @vue-youtube/component
vue
<script setup lang="ts">
// Import the 'YoutubeIframe' component
import { YoutubeIframe } from '@vue-youtube/component';
</script>

<template>
  <youtube-iframe video-id="dQw4w9WgXcQ" />
</template>
<script setup lang="ts">
// Import the 'YoutubeIframe' component
import { YoutubeIframe } from '@vue-youtube/component';
</script>

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